...
diff --git a/index.html b/index.html
index 40ecd97..2409912 100644
--- a/index.html
+++ b/index.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/index.html"/>
-  <link rel="icon" href="images/wand.png"/>
-  <link rel="shortcut icon" href="images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/index.html" />
+  <link rel="icon" href="images/wand.png" />
+  <link rel="shortcut icon" href="images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="www/css/magick.css"/>
+  <link rel="stylesheet" href="www/css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,23 +42,24 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item active" href="index.html">Home</a>
-      <a class="magick-nav-item " href="www/download.html">Download</a>
-      <a class="magick-nav-item " href="www/command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="www/command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="www/resources.html">Resources</a>
-      <a class="magick-nav-item " href="www/develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link active" href="index.html">Home</a>
+      <a class="nav-link " href="www/download.html">Download</a>
+      <a class="nav-link " href="www/command-line-tools.html">Tools</a>
+      <a class="nav-link " href="www/command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="www/resources.html">Resources</a>
+      <a class="nav-link " href="www/develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="index.html#features">Features and Capabilities</a> • <a href="index.html#news">News</a> • <a href="index.html#community">Community</a></p>
 
-<p class="lead magick-description"><a href="images/wizard.png" title="And Now a Touch of Magick"><img class="img-responsive magick-icon" id="logo" alt="And Now a Touch of Magick" width="265" height="352" src="images/wizard.jpg" /></a> 
+<p class="lead magick-description"><a href="images/wizard.png" title="And Now a Touch of Magick"><img class="img-fluid magick-icon" id="logo" alt="And Now a Touch of Magick" width="265" height="352" src="images/wizard.jpg" /></a> 
 Use ImageMagick<sup><a href="http://tarr.uspto.gov/servlet/tarr?regser=serial&amp;entry=78333969">&#174;</a></sup> to create, edit, compose, or convert bitmap images.  It can read and write images in a variety of <a href="www/formats.html">formats</a> (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, <a href="www/motion-picture.html">DPX</a>, <a href="www/high-dynamic-range.html">EXR</a>, WebP, Postscript, PDF, and SVG.  Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.</p>
 
 <p>The functionality of ImageMagick is typically utilized from the <a href="www/command-line-processing.html">command-line</a> or you can use the features from programs written in your favorite language. Choose from these interfaces: <a href="www/develop.html#ada">G2F</a> (Ada), <a href="www/develop.html#c">MagickCore</a> (C), <a href="www/develop.html#c">MagickWand</a> (C), <a href="www/develop.html#ch">ChMagick</a> (Ch), <a href="www/develop.html#com_">ImageMagickObject</a> (COM+), <a href="www/develop.html#c__">Magick++</a> (C++), <a href="www/develop.html#java">JMagick</a> (Java), <a href="www/develop.html#julia">JuliaIO</a> (Julia), <a href="www/develop.html#lisp">L-Magick</a> (Lisp), <a href="www/develop.html#lua">Lua</a> (LuaJIT), <a href="www/develop.html#neko">NMagick</a> (Neko/haXe), <a href="www/develop.html#dot-net">Magick.NET</a> (.NET), <a href="www/develop.html#pascal">PascalMagick</a> (Pascal),  <a href="www/develop.html#perl">PerlMagick</a> (Perl), <a href="www/develop.html#php">MagickWand for PHP</a> (PHP),  <a href="www/develop.html#php">IMagick</a> (PHP), <a href="www/develop.html#python">PythonMagick</a> (Python), <a href="www/develop.html#ruby">RMagick</a> (Ruby), or <a href="www/develop.html#tcl">TclMagick</a> (Tcl/TK). With a language interface, use ImageMagick to modify or create images dynamically and <var>automagically</var>.</p>
@@ -68,16 +68,16 @@
 
 <p>The ImageMagick development process ensures a stable API and <a href="http://abi-laboratory.pro/tracker/timeline/imagemagick/">ABI</a>. Before each ImageMagick release, we perform a comprehensive security assessment that includes <a href="https://github.com/google/sanitizers/wiki/AddressSanitizer">memory error</a> and <a href="https://github.com/google/sanitizers/wiki/ThreadSanitizer">thread data race</a> detection to help prevent security vulnerabilities.</p>
 
-<p>The current release is ImageMagick <a href="https://www.imagemagick.org/script/download.html">7.0.5-10</a>.  It runs on <a href="https://www.imagemagick.org/script/download.html#unix">Linux</a>, <a href="https://www.imagemagick.org/script/download.html#windows">Windows</a>, <a href="https://www.imagemagick.org/script/download.html#macosx">Mac Os X</a>, <a href="https://www.imagemagick.org/script/download.html#iOS">iOS</a>, Android OS, and others.</p>
+<p>The current release is ImageMagick <a href="https://www.imagemagick.org/script/download.html">7.0.6-0</a>.  It runs on <a href="https://www.imagemagick.org/script/download.html#unix">Linux</a>, <a href="https://www.imagemagick.org/script/download.html#windows">Windows</a>, <a href="https://www.imagemagick.org/script/download.html#macosx">Mac Os X</a>, <a href="https://www.imagemagick.org/script/download.html#iOS">iOS</a>, Android OS, and others.</p>
 
 <p>The authoritative ImageMagick web site is <a href="https://www.imagemagick.org/">https://www.imagemagick.org</a>. The authoritative source code repository is <a href="http://git.imagemagick.org/repos/ImageMagick">http://git.imagemagick.org/repos/ImageMagick</a>.  We maintain a source code mirror at <a href="https://gitlab.com/ImageMagick/ImageMagick">GitLab</a> and <a href="https://github.com/ImageMagick/ImageMagick">GitHub</a>.</p>
 
 <p>We continue to maintain the legacy release of ImageMagick, version 6, at <a href="https://legacy.imagemagick.org/">https://legacy.imagemagick.org</a>.</p>
 
-<h2 class="magick-header"><a id="features"></a>Features and Capabilities</h2>
+<h2 class="magick-post-title"><a id="features"></a>Features and Capabilities</h2>
 <p>Here are just a few <a href="www/examples.html">examples</a> of what ImageMagick can do for you:</p>
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td><a href="https://www.imagemagick.org/Usage/anim_basics/">Animation</a></td>
     <td>create a GIF animation sequence from a group of images.</td>
@@ -209,15 +209,15 @@
 </table>
 </div>
 
-<p><a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a> shows how to use ImageMagick from the <a href="www/command-line-processing.html">command-line</a> to accomplish any of these tasks and much more. Also, see <a href="http://www.fmwconcepts.com/imagemagick/">Fred's ImageMagick Scripts</a>:  a plethora of command-line scripts that perform geometric transforms, blurs, sharpens, edging, noise removal, and color manipulations. With <a href="https://magick.codeplex.com/">Magick.NET</a>, use ImageMagick without having to install ImageMagick on your server or desktop.</p>
+<p><a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a> shows how to use ImageMagick from the <a href="www/command-line-processing.html">command-line</a> to accomplish any of these tasks and much more. Also, see <a href="http://www.fmwconcepts.com/imagemagick/">Fred's ImageMagick Scripts</a>:  a plethora of command-line scripts that perform geometric transforms, blurs, sharpens, edging, noise removal, and color manipulations. With <a href="https://github.com/dlemstra/Magick.NET">Magick.NET</a>, use ImageMagick without having to install ImageMagick on your server or desktop.</p>
 
-<h2 class="magick-header"><a id="news"></a>News</h2>
+<h2 class="magick-post-title"><a id="news"></a>News</h2>
 
 <p>Now that ImageMagick version 7 is released, we continue to maintain the legacy release of ImageMagick, version 6, at <a href="https://legacy.imagemagick.org/">https://legacy.imagemagick.org</a>.  Learn how ImageMagick version 7 differs from previous versions with our <a href="www/porting.html">porting guide</a>.</p>
 
 <p>ImageMagick best practices <strong>strongly</strong> encourages you to configure a <a href="www/security-policy.html">security policy</a> that suits your local environment.</p>
 
-<h2 class="magick-header"><a id="community"></a>Community</h2>
+<h2 class="magick-post-title"><a id="community"></a>Community</h2>
 <p>To join the ImageMagick community, try the <a href="https://www.imagemagick.org/discourse-server/">discourse server</a>.  You can review questions or comments (with informed responses) posed by ImageMagick users or ask your own questions. If you want to contribute image processing algorithms, other enhancements, or bug fixes, open an <a href="https://github.com/ImageMagick/ImageMagick/issues">issue</a>. </p>
 </div>
   <footer class="magick-footer">
@@ -239,4 +239,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:55 -->
\ No newline at end of file
diff --git a/www/ImageMagickObject.html b/www/ImageMagickObject.html
index 8788ba0..f9caf3b 100644
--- a/www/ImageMagickObject.html
+++ b/www/ImageMagickObject.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/ImageMagickObject.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/ImageMagickObject.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="http://www.imagemagick.org/www/#build">Build ImageMagickObject From Source</a></p>
 
@@ -65,17 +65,17 @@
 
 <p>ImageMagick provides a statically-built ImageMagick object as part of its <a href="download.html#windows">Windows installation package</a>.  When this package is installed, ImageMagickObject and its sample programs are installed to this path:</p>
 
-<pre>
-  c:\Program Files\ImageMagick-7.0.5-Q16\ImageMagickObject
-</pre>
+<pre><code>
+  c:\Program Files\ImageMagick-7.0.6-Q16\ImageMagickObject
+</code></pre>
 
 <p>The ImageMagickObject is registered if the checkbox, <code>Register ImageMagickObject</code>, is checked at install time.</p>
 
 <p>To execute the sample program from the Windows Command Shell, type:</p>
 
-<pre>
+<pre><code>
 cscript SimpleTest.vbs
-</pre>
+</code></pre>
 
 <p>Since the ImageMagick utility command line parsers are incorporated within ImageMagickObject, please refer to the <a href="command-line-tools.html">command-line tools</a> discussion to learn how to use it. The sample VBS scripts show how the object should be called and used and have lots of comments.</p>
 
@@ -83,30 +83,30 @@
 
 <p>MagickCMD is a C++ sample, but it also serves as a replacement for all the other command line utilities in most applications. Instead of using <code>convert xxxx yyyy</code> you can use <code>MagickCMD convert xxxx yyyy</code> instead. MagickCMD calls the COM object to accomplish the designated task.  This small tight combination replaces the entire usual binary distribution in just a few mebibytes.</p>
 
-<h2 class="magick-header"><a id="build"></a>Build ImageMagickObject From Source</h2>
+<h2 class="magick-post-title"><a id="build"></a>Build ImageMagickObject From Source</h2>
 
 <p>The source code for ImageMagickObject is available from the ImageMagick <a href="http://git.imagemagick.org/repos/ImageMagick">GIT</a> repository, or as part of the <a href="install-source.html#windows">Windows source</a> distribution. Once the source code has been retrieved and extracted, the source for ImageMagickObject is the directory <code>ImageMagick\contrib\win32\ATL7ImageMagickObject</code>, however, ImageMagick itself must be built using the static-multithread (VisualStaticMT) build configuration.  Building ImageMagickObject requires Microsoft Visual C++ 7.0 as delivered with Microsoft's Visual Studio .NET package. See the <a href="install-source.html#windows">Windows compilation instructions</a> to get ImageMagick itself built before building the ImageMagick COM+ component.</p>
 
 <p>Once the VisualStaticMT project has been built, build the ImageMagickObject with this procedure:</p>
 
-<pre>
+<pre><code>
 cd ImageMagick/contrib/win32/ATL7/ImageMagickObject
 BuildImageMagickObject release
-</pre>
+</code></pre>
 
 <p>Here, we assume that the VisualStaticMT project has been built using the release setting for an optimized build. If the debug setting was used for a debug build, specify the argument <code>debug</code>; instead.</p>
 
 <p>To register the DLL as a COM+ server, type</p>
 
-<pre>
+<pre><code>
 regsvr32 /c /s ImageMagickObject.dll
-</pre>
+</code></pre>
 
 <p>To unregister the DLL, type</p>
 
-<pre>
+<pre><code>
 regsvr32 /u /s ImageMagickObject.dll
-</pre>
+</code></pre>
 
 <p>Use MagickCMD to exercise ImageMagickObject to verify that it is working properly.</p>
 
@@ -130,4 +130,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:07 -->
\ No newline at end of file
diff --git a/www/advanced-unix-installation.html b/www/advanced-unix-installation.html
index 2bc6b51..d82a3b2 100644
--- a/www/advanced-unix-installation.html
+++ b/www/advanced-unix-installation.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/advanced-unix-installation.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/advanced-unix-installation.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,46 +42,47 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="advanced-unix-installation.html#download">Download &amp; Unpack</a> • <a href="advanced-unix-installation.html#configure">Configure</a>  • <a href="advanced-unix-installation.html#build">Build</a> • <a href="advanced-unix-installation.html#install">Install</a> • <a href="advanced-unix-installation.html#linux">Linux-specific Build Instructions</a> • <a href="advanced-unix-installation.html#macosx">Mac OS X-specific Build Instructions</a> • <a href="advanced-unix-installation.html#mingw">MinGW-specific Build Instructions</a> • <a href="advanced-unix-installation.html#problems">Dealing with Unexpected Problems</a></p>
 
 <p  class="lead magick-description">It's possible you don't want to concern yourself with advanced installation under Unix or Linux systems.  If so, you also have the option of installing a pre-compiled <a href="download.html#unix">binary release</a>  or if you still want to install from source without all the fuss see the simple <a href="install-source.html#unix">Install From Source</a> instructions.  However, if you want to customize the configuration and installation of ImageMagick under Unix or Linux systems, lets begin.</p>
 
-<h2 class="magick-header"><a id="download"></a>Download &amp; Unpack</h2>
+<h2 class="magick-post-title"><a id="download"></a>Download &amp; Unpack</h2>
 
 <p>ImageMagick builds on a variety of Unix and Unix-like operating systems including Linux, Solaris, FreeBSD, Mac OS X, and others.  A compiler is required and fortunately almost all modern Unix systems have one.  Download <a href="https://www.imagemagick.org/download/ImageMagick.tar.gz">ImageMagick.tar.gz</a> from <a href="https://www.imagemagick.org/download">ftp.imagemagick.org</a> or its <a href="download.html">mirrors</a> and verify the distribution against its <a href="https://www.imagemagick.org/download/digest.rdf">message digest</a>.</p>
 
 <p>Unpack the distribution it with this command:</p>
 
-<pre>
+<pre><code>
 tar xvzf ImageMagick.tar.gz
-</pre>
+</code></pre>
 
 <p>Now that you have the ImageMagick Unix/Linux source distribution unpacked, let's configure it.</p>
 
 
-<h2 class="magick-header"><a id="configure"></a>Configure</h2>
+<h2 class="magick-post-title"><a id="configure"></a>Configure</h2>
 
 <p>The configure script looks at your environment and decides what it can cobble together to get ImageMagick compiled and installed on your system.  This includes finding a compiler, where your compiler header files are located (e.g. stdlib.h), and if any delegate libraries are available for ImageMagick to use (e.g. JPEG, PNG, TIFF, etc.).  If you are willing to accept configure's default options, and build from within the source directory, you can simply type:</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.5-10</span><span class='crtout'></span><span class="crtprompt"> </span><span class='crtin'>./configure</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.6-0</span><span class='crtout'></span><span class="crtprompt"> </span><span class='crtin'>./configure</span></pre>
 <p>Watch the configure script output to verify that it finds everything that
  you think it should.  Pay particular attention to the last lines of the script output.  For example, here is a recent report from our system:</p>
 
-<pre class="pre-scrollable">ImageMagick is configured as follows. Please verify that this configuration
+<pre class="pre-scrollable"><code>ImageMagick is configured as follows. Please verify that this configuration
 matches your expectations.
 
 Host system type: x86_64-unknown-linux-gnu
@@ -153,32 +153,32 @@
                     -lSM -lICE -lX11 -lXt -lbz2 -lz -lm -lgomp -lpthread -lltdl
   CXX             = g++
   CXXFLAGS        = -g -O2 -Wall -W -pthread
-</pre>
+</code></pre>
 
 <p>You can influence choice of compiler, compilation flags, or libraries of the configure script by setting initial values for variables in the configure command line. These include, among others:</p>
 
-<dl class="dl-horizontal">
-<dt>CC</dt>
-  <dd>Name of C compiler (e.g. <code>cc -Xa</code>) to use.</dd>
-<dt>CXX</dt>
-  <dd>Name of C++ compiler to use (e.g. <code>CC</code>).</dd>
-<dt>CFLAGS</dt>
-  <dd>Compiler flags (e.g. <code>-g -O2</code>) to compile C code.</dd>
-<dt>CXXFLAGS</dt>
-  <dd>Compiler flags (e.g. <code>-g -O2</code>) to compile C++ code.</dd>
-<dt>CPPFLAGS</dt>
-  <dd>Include paths (.e.g. <code>-I/usr/local</code>) to look for header files.</dd>
-<dt>LDFLAGS</dt>
-  <dd>Library paths (.e.g. <code>-L/usr/local</code>) to look for libraries systems that support the notion of a library run-path may require an additional argument in order to find shared libraries at run time. For example, the Solaris linker requires an argument of the form <var>-R/path</var>.  Some Linux systems will work with <code>-rpath /usr/local/lib</code>, while some other Linux systems who's gcc does not pass <code>-rpath</code> to the linker, require an argument of the form <code>-Wl,-rpath,/usr/local/lib</code>.</dd>
-<dt>LIBS</dt>
-  <dd>Extra libraries (.e.g. <code>-l/usr/local/lib</code>) required to link.</dd>
+<dl class="row">
+<dt class="col-md-4">CC</dt>
+  <dd class="col-md-8">Name of C compiler (e.g. <code>cc -Xa</code>) to use.</dd>
+<dt class="col-md-4">CXX</dt>
+  <dd class="col-md-8">Name of C++ compiler to use (e.g. <code>CC</code>).</dd>
+<dt class="col-md-4">CFLAGS</dt>
+  <dd class="col-md-8">Compiler flags (e.g. <code>-g -O2</code>) to compile C code.</dd>
+<dt class="col-md-4">CXXFLAGS</dt>
+  <dd class="col-md-8">Compiler flags (e.g. <code>-g -O2</code>) to compile C++ code.</dd>
+<dt class="col-md-4">CPPFLAGS</dt>
+  <dd class="col-md-8">Include paths (.e.g. <code>-I/usr/local</code>) to look for header files.</dd>
+<dt class="col-md-4">LDFLAGS</dt>
+  <dd class="col-md-8">Library paths (.e.g. <code>-L/usr/local</code>) to look for libraries systems that support the notion of a library run-path may require an additional argument in order to find shared libraries at run time. For example, the Solaris linker requires an argument of the form <var>-R/path</var>.  Some Linux systems will work with <code>-rpath /usr/local/lib</code>, while some other Linux systems who's gcc does not pass <code>-rpath</code> to the linker, require an argument of the form <code>-Wl,-rpath,/usr/local/lib</code>.</dd>
+<dt class="col-md-4">LIBS</dt>
+  <dd class="col-md-8">Extra libraries (.e.g. <code>-l/usr/local/lib</code>) required to link.</dd>
 </dl>
 
 <p>Here is an example of setting configure variables from the command line:</p>
 
-<pre>
+<pre><code>
 configure CC=c99 CFLAGS=-O2 LDFLAGS='-L/usr/local/lib -R/usr/local/lib' LIBS=-lposix
-</pre>
+</code></pre>
 
 <p>Any variable (e.g. CPPFLAGS or LDFLAGS) which requires a directory path must specify an absolute path rather than a relative path.</p>
 
@@ -191,7 +191,7 @@
 <p>Here are the optional features you can configure:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>--enable-shared</td>
     <td>build the  shared libraries and support for loading coder and process modules. Shared libraries are preferred because they allow programs to share common code, making the individual programs much smaller. In addition shared libraries are required in order for PerlMagick to be dynamically loaded by an installed PERL (otherwise an additional PERL (PerlMagick) must be installed.
@@ -245,7 +245,7 @@
 <p>Here are the optional packages you can configure:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>--with-quantum-depth</td>
     <td>number of bits in a pixel quantum (default 16).
@@ -254,23 +254,23 @@
   <br /><br />
   The number of bits in a quantum determines how many values it may contain. Each quantum level supports 256 times as many values as the previous level. The following table shows the range available for various quantum sizes.
   <br /><br />
-<pre>
+<pre><code>
 Quantum Depth     Valid Range (Decimal)   Valid Range (Hex)
     8             0-255                   00-FF
    16             0-65535                 0000-FFFF
    32             0-4294967295            00000000-FFFFFFFF
-</pre>
+</code></pre>
   <br /><br />
   Larger pixel quantums can cause ImageMagick to run more slowly and to require more memory. For example, using sixteen-bit pixel quantums can cause ImageMagick to run 15% to 50% slower (and take twice as much memory) than when it is built to support eight-bit pixel quantums.
   <br /><br />
   The amount of virtual memory consumed by an image can be computed by the equation <var>(5 * Quantum Depth * Rows * Columns) / 8</var>. This an important consideration when resources are limited, particularly since processing an image may require several images to be in memory at one time. The following table shows memory consumption values for a 1024x768 image:
   <br /><br />
-<pre>
+<pre><code>
 Quantum Depth   Virtual Memory
      8               3MB
     16               8MB
     32              15MB
-</pre></td>
+</code></pre></td>
   </tr>
   <tr>
   </tr>
@@ -427,40 +427,40 @@
 
 <p>ImageMagick is now configured and ready to build</p>
 
-<h2 class="magick-header"><a id="build"></a>Build</h2>
+<h2 class="magick-post-title"><a id="build"></a>Build</h2>
 
 <p>Once ImageMagick is configured, these standard build targets are available from the generated <code>make</code> files:</p>
 
-<dl class="dl-horizontal">
-<dt>make</dt>
-  <dd>Build ImageMagick.</dd>
-<dt>sudo make install</dt>
-  <dd>Install ImageMagick.</dd>
-<dt>make check</dt>
-  <dd>Run tests using the installed ImageMagick (<code>sudo make install</code> must be done first). Ghostscript is a prerequisite, otherwise certain unit tests that render text and the EPS, PS, and PDF formats will fail.</dd>
-<dt>make clean</dt>
-  <dd> Remove everything in the build directory created by <code>make</code>.</dd>
-<dt>make distclean</dt>
-  <dd>remove everything in the build directory created by <code>configure</code> and <code>make</code>.  This useful if you want to start over from scratch.</dd>
-<dt>make uninstall</dt>
-  <dd>Remove all files from the system which are (or would be) installed by <code>sudo make install</code> using the current configuration.  Note that this target is imperfect for PerlMagick since Perl no longer supports an <var>uninstall</var> target.</dd>
+<dl class="row">
+<dt class="col-md-4">make</dt>
+  <dd class="col-md-8">Build ImageMagick.</dd>
+<dt class="col-md-4">sudo make install</dt>
+  <dd class="col-md-8">Install ImageMagick.</dd>
+<dt class="col-md-4">make check</dt>
+  <dd class="col-md-8">Run tests using the installed ImageMagick (<code>sudo make install</code> must be done first). Ghostscript is a prerequisite, otherwise certain unit tests that render text and the EPS, PS, and PDF formats will fail.</dd>
+<dt class="col-md-4">make clean</dt>
+  <dd class="col-md-8"> Remove everything in the build directory created by <code>make</code>.</dd>
+<dt class="col-md-4">make distclean</dt>
+  <dd class="col-md-8">remove everything in the build directory created by <code>configure</code> and <code>make</code>.  This useful if you want to start over from scratch.</dd>
+<dt class="col-md-4">make uninstall</dt>
+  <dd class="col-md-8">Remove all files from the system which are (or would be) installed by <code>sudo make install</code> using the current configuration.  Note that this target is imperfect for PerlMagick since Perl no longer supports an <var>uninstall</var> target.</dd>
 </dl>
 
 <p>In most cases you will simply wand to compile ImageMagick with this command:</p>
 
-<pre>
+<pre><code>
 make
-</pre>
+</code></pre>
 
 <p>Once built, you can optionally install ImageMagick on your system as discussed below.</p>
 
-<h2 class="magick-header"><a id="install"></a>Install</h2>
+<h2 class="magick-post-title"><a id="install"></a>Install</h2>
 
 <p>Now that ImageMagick is configured and built, type:</p>
 
-<pre>
+<pre><code>
 make install
-</pre>
+</code></pre>
 
 <p>to install it.</p>
 
@@ -468,57 +468,57 @@
 
 <p>To confirm your installation of the ImageMagick distribution was successful, ensure that the installation directory is in your executable search path and type:</p>
 
-<pre>
+<pre><code>
 convert logo: logo.gif
 identify logo.gif
-</pre>
+</code></pre>
 
 <p>The ImageMagick logo is displayed on your X11 display.</p>
 
 <p>To verify the ImageMagick build configuration, type:</p>
 
-<pre>
+<pre><code>
 identify -list configure
-</pre>
+</code></pre>
 
 <p>To list which image formats are supported , type:</p>
 
-<pre>
+<pre><code>
 identify -list format
-</pre>
+</code></pre>
 
 <p>For a more comprehensive test, you run the ImageMagick test suite by typing:</p>
 
-<pre>
+<pre><code>
 make check
-</pre>
+</code></pre>
 
 <p>Ghostscript is a prerequisite, otherwise the EPS, PS, and PDF tests will fail.  Note that due to differences between the developer's environment and your own it is possible that a few tests may fail even though the results are ok. Differences between the developer's environment environment and your own may include the compiler, the CPU type, and the library versions used. The ImageMagick developers use the current release of all dependent libraries.</p>
 
-<h2 class="magick-header"><a id="linux"></a>Linux-specific Build instructions</h2>
+<h2 class="magick-post-title"><a id="linux"></a>Linux-specific Build instructions</h2>
 
 <p>Download <a href="https://www.imagemagick.org/download/linux/SRPMS/ImageMagick.src.rpm">ImageMagick.src.rpm</a> from <a href="https://www.imagemagick.org/download">ftp.imagemagick.org</a> or its <a href="download.html">mirrors</a> and verify the distribution against its <a href="https://www.imagemagick.org/download/linux/SRPMS/digest.rdf">message digest</a>.</p>
 
 <p>Build ImageMagick with this command:</p>
 
-<pre>
+<pre><code>
 rpmbuild --rebuild ImageMagick.src.rpm
-</pre>
+</code></pre>
 
 <p>After the build you, locate the RPMS folder and install the ImageMagick binary RPM distribution:</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>rpm -ivh ImageMagick-7.0.5-?.*.rpm</span></pre>
-<h2 class="magick-header"><a id="macosx"></a>Mac OS X-specific Build instructions</h2>
+<pre><span class="crtprompt"> </span><span class='crtin'>rpm -ivh ImageMagick-7.0.6-?.*.rpm</span></pre>
+<h2 class="magick-post-title"><a id="macosx"></a>Mac OS X-specific Build instructions</h2>
 
 <p>Perform these steps as an administrator or with the <tt>sudo</tt> command:</p>
 
   <p>Install <a href="http://www.macports.org">MacPorts</a>.  Download and install MacPorts and type the following commands:</p>
 
-<pre>
+<pre><code>
 sudo port -v install freetype +bytecode
 sudo port -v install librsvg
 sudo port -v install graphviz +gs +wmf +jbig +jpeg2 +lcms
-</pre>
+</code></pre>
 
 <p>This installs many of the delegate libraries ImageMagick will utilize such as JPEG and FreeType.</p>
 
@@ -526,48 +526,48 @@
 	  <p>Install the latest <a href="http://developer.apple.com/tools/download/">Xcode</a> from Apple.</p>
 	  <p>Use the <tt>port</tt> command to install any delegate libraries you require, for example:</p>
 
-<pre>
+<pre><code>
 sudo port install jpeg
-</pre>
+</code></pre>
 
 <p>Now lets build ImageMagick:</p>
 
 	  <p><a href="download.html">Download</a> the ImageMagick source distribution and verify the distribution against its <a href="https://www.imagemagick.org/download/digest.rdf">message digest</a>.</p>
 	  <p>Unpack and change into the top-level ImageMagick directory:</p>
-		<pre><span class="crtprompt"> </span><span class='crtin'>tar xvzf ImageMagick-7.0.5-10.tar.gz</span><span class='crtout'></span><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.5-10</span></pre>	  <p>Configure ImageMagick:</p>
-<pre>
+		<pre><span class="crtprompt"> </span><span class='crtin'>tar xvzf ImageMagick-7.0.6-0.tar.gz</span><span class='crtout'></span><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.6-0</span></pre>	  <p>Configure ImageMagick:</p>
+<pre><code>
 ./configure --prefix=/opt --with-quantum-depth=16 \
   --disable-dependency-tracking --with-x=yes \
   --x-includes=/usr/X11R6/include --x-libraries=/usr/X11R6/lib/ \
   --without-perl"
-</pre>
+</code></pre>
 	  <p>Build ImageMagick:</p>
-<pre>
+<pre><code>
 make
-</pre>
+</code></pre>
 	  <p>Install ImageMagick:</p>
-<pre>
+<pre><code>
 sudo make install
-</pre>
+</code></pre>
   <p>To verify your install, type</p>
 
-<pre>
+<pre><code>
 /opt/local/bin/identify -list font
-</pre>
+</code></pre>
 
   <p>to list all the fonts ImageMagick knows about.</p>
 	  <p>To test the ImageMagick GUI, in a new shell, type:</p>
 
-<pre>
+<pre><code>
 display -display :0
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="mingw"></a>MinGW-specific Build instructions</h2>
+<h2 class="magick-post-title"><a id="mingw"></a>MinGW-specific Build instructions</h2>
 
 <p>Although you can download and install delegate libraries yourself, many are already available in the <a href="http://gnuwin32.sourceforge.net/">GnuWin32</a> distribution.  Download and install whichever delegate libraries you require such as JPEG, PNG, TIFF, etc.  Make sure you specify the development headers when you install a package.  Next type,</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>tar jxvf ImageMagick-7.0.5-?.tar.bz2</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.5-10</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>export CPPFLAGS="-Ic:/Progra~1/GnuWin32/include"</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>export LDFLAGS="-Lc:/Progra~1/GnuWin32/lib"</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>./configure --without-perl</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>make</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>sudo make install</span></pre>
-<h2 class="magick-header"><a id="problems"></a>Dealing with Unexpected Problems</h2>
+<pre><span class="crtprompt"> </span><span class='crtin'>tar jxvf ImageMagick-7.0.6-?.tar.bz2</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.6-0</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>export CPPFLAGS="-Ic:/Progra~1/GnuWin32/include"</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>export LDFLAGS="-Lc:/Progra~1/GnuWin32/lib"</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>./configure --without-perl</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>make</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>sudo make install</span></pre>
+<h2 class="magick-post-title"><a id="problems"></a>Dealing with Unexpected Problems</h2>
 
 <p>Chances are the download, configure, build, and install of ImageMagick went flawlessly as it is intended, however, certain systems and environments may cause one or more steps to fail.  We discuss a few problems we've run across and how to take corrective action to ensure you have a working release of ImageMagick</p>
 
@@ -576,40 +576,40 @@
 
 <p>Some systems may fail to link at build time due to unresolved symbols. Try adding the LDFLAGS to the <code>configure</code> command line:</p>
 
-<pre>
+<pre><code>
 configure LDFLAGS='-L/usr/local/lib -R/usr/local/lib'
-</pre>
+</code></pre>
 
 <h4>Dynamic Linker Run-time Bindings</h4>
 <p>On some systems, ImageMagick may not find its shared library, <var>libMagick.so</var>.  Try running the <code>ldconfig</code> with the library path:</p>
 
-<pre>
+<pre><code>
 /sbin/ldconfig /usr/local/lib
-</pre>
+</code></pre>
 
 <p>Solaris and Linux systems have the <code>ldd</code> command which is useful to track which libraries ImageMagick depends on:</p>
 
-<pre>
+<pre><code>
 ldd `which convert`
-</pre>
+</code></pre>
 
 <h4>Delegate Libraries</h4>
 <p>On occasion you may receive these warnings:</p>
-<pre>
+<pre><code>
 no decode delegate for this image format
 no encode delegate for this image format
-</pre>
+</code></pre>
 <p>This exception indicates that an external delegate library or its headers were not available when ImageMagick was built.  To add support for the image format, download and install the requisite delegate library and its header files and reconfigure, rebuild, and reinstall ImageMagick.  As an example, lets add support for the JPEG image format.  First we install the JPEG RPMS:</p>
 
-<pre>
+<pre><code>
 yum install libjpeg libjpeg-devel
-</pre>
+</code></pre>
 
 <p>Now reconfigure, rebuild, and reinstall ImageMagick.  To verify JPEG is now properly supported within ImageMagick, use this command:</p>
 
-<pre>
+<pre><code>
 identify -list format
-</pre>
+</code></pre>
 
 <p>You should see a mode of rw- associated with the JPEG tag.  This mode means the image can be read or written and can only support one image per image file.</p>
 
@@ -636,4 +636,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:16 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:08 -->
\ No newline at end of file
diff --git a/www/advanced-windows-installation.html b/www/advanced-windows-installation.html
index 4823e28..edadae7 100644
--- a/www/advanced-windows-installation.html
+++ b/www/advanced-windows-installation.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/advanced-windows-installation.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/advanced-windows-installation.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,25 +42,26 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="advanced-windows-installation.html#download">Download &amp; Unpack</a> • <a href="advanced-windows-installation.html#configure">Configure</a>  • <a href="advanced-windows-installation.html#build">Build</a> • <a href="advanced-windows-installation.html#install">Install</a> • <a href="advanced-windows-installation.html#binary">Create a Self-installing Binary Distribution</a> • <a href="advanced-windows-installation.html#problems">Dealing with Unexpected Problems</a> • <a href="advanced-windows-installation.html#project">Building Your Custom Project</a></p>
 
 <p  class="lead magick-description">It's possible you don't want to concern yourself with advanced installation under Windows.  If so, you also have the option of installing a self-installing <a href="download.html#windows">binary release</a> or if you still want to install from source without all the fuss see the simple <a href="install-source.html#windows">Install From Source</a> instructions.  However, if you want to customize the configuration and installation of ImageMagick under Windows, lets begin.</p>
 
-<h2 class="magick-header"><a id="download"></a>Download &amp; Unpack</h2>
+<h2 class="magick-post-title"><a id="download"></a>Download &amp; Unpack</h2>
 
 <p>Building ImageMagick source for Windows requires a modern version of Microsoft Visual Studio IDE.  Users have reported success with the Borland C++ compiler as well.  If you don't have a compiler you can still install a self-installing <a href="download.html#windows">binary release</a>.</p>
 
@@ -69,14 +69,14 @@
 
 <p>You can unpack the distribution with <a href="http://www.winzip.com">WinZip</a> or type the following from any Command Prompt window:</p>
 
-<pre>
+<pre><code>
 unzip ImageMagick-windows.zip
-</pre>
+</code></pre>
 
 <p>Now that you have the ImageMagick Windows source distribution unpacked, let's configure it.</p>
 
 
-<h2 class="magick-header"><a id="configure"></a>Configure</h2>
+<h2 class="magick-post-title"><a id="configure"></a>Configure</h2>
 
 <p>These instructions are specific to building ImageMagick with the <a href="http://msdn.microsoft.com/vstudio/">Visual Studio</a> under Windows XP, Win2K, or Windows 98.  ImageMagick does not include any workspace (DSW) or project files (DSP) except for those included with third party libraries. Instead, there is a <code>configure</code> program that must be built and run which creates the Visual Studio workspaces for ImageMagick.  The Visual Studio system provides four different types of <var>runtime</var> environments that must match across all application, library, and dynamic-library (DLL) code that is built. The <code>configure</code> program creates a set of build files that are consistent for a specific runtime selection listed here:</p>
 
@@ -106,7 +106,7 @@
 <p>Key user defines in <code>magick_config.h</code> include:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>MAGICKCORE_QUANTUM_DEPTH (default 16)</td>
     <td>Specify the depth of the pixel component depth (8, 16, or 32).  A value of 8 uses half the memory than 16 and may run 30% faster, but provides 256 times less color resolution than a value of 16.  We recommend a quantum depth of 16 because 16-bit images are becoming more prevalent on the Internet.</td>
@@ -125,7 +125,7 @@
 
 <p>The default build is WIN32.  For 64-bit, open a newly created solution and enter Configuration Manager. Add a x64 configuration, copying the configuration from Win32. Be sure  that it adds the configuration to all the projects.  Now compile.  For the 64-bit build, you will also need to disable X11 support.  Edit magick-config.h and undefine the MAGICKCORE_X11_DELEGATE define.</p>
 
-<h2 class="magick-header"><a id="Build"></a>Build</h2>
+<h2 class="magick-post-title"><a id="Build"></a>Build</h2>
 
 <p>After creating your build environment, proceed to open the DSW (or SLN) workspace in the <code>VisualMagick</code> folder.  In the DSW file choose the <var>All</var> project to make it the <var>active</var> project.  Set the build configuration to the desired one (Debug, or Release) and <var>clean</var> and <var>build:</var></p>
 
@@ -161,10 +161,10 @@
 
 <p>With this feature enabled, you should be able to nab a copy of</p>
 
-<pre>
+<pre><code>
 VisualMagick\utilities\UTIL_convert_xxx_exe.dsp  (for C) or
 VisualMagick\Magick++\demo\UTIL_demo_xxx_exe.dsp (for C++)
-</pre>
+</code></pre>
 
 <p>and pop it into Notepad, modify it (carefully) to your needs and be on your way to happy compiling and linking.</p>
 
@@ -174,27 +174,27 @@
 
 <p>For straight C API command line applications use something from:</p>
 
-<pre>
+<pre><code>
 ImageMagick\tests or
 ImageMagick\utilities (source code) or
 ImageMagick\VisualMagick\tests or
 ImageMagick\Visualmagick\utilities (project - DSP)
-</pre>
+</code></pre>
 
 <p>For C++ and Magick++ command line applications use something from:</p>
 
-<pre>
+<pre><code>
 ImageMagick\Magick++\tests or ImageMagick\Magick++\demo (source code) or
 ImageMagick\VisualMagick\Magick++\tests or  <br/>
 ImageMagick\VisualMagick\Magick++\demo (project - DSP)
-</pre>
+</code></pre>
 
 <p>For C++ and Magick++ and MFC windows applications use:</p>
 
-<pre>
+<pre><code>
 ImageMagick\contrib\win32\MFC\NtMagick (source code) or
 ImageMagick\VisualMagick\contrib\win32\MFC\NtMagick (project - DSP)
-</pre>
+</code></pre>
 
 <p>The ImageMagick distribution is very modular. The default configuration is there to get you rolling, but you need to make some serious choices when you wish to change things around.</p>
 
@@ -225,16 +225,16 @@
 		  <p>This environmental variable sets the default list of places were Windows looks for EXE's and DLL's. Windows CMD shell seems to look in the <var>current</var> directory first no matter what, which may make it unnecessary to update the PATH. If you wish to run any of utilities from another location then you must add the path to your <code>bin</code> directory in. For instance, to do this for the default build environment like I do, you might add:</p>
 
 
-<pre>
+<pre><code>
 C:\ImageMagick\VisualMagick\bin
-</pre>
+</code></pre>
 
 		<h4>MAGICK_HOME</h4>
 		  <p>If all you do is modify the PATH variable, the first problem you will run into is that ImageMagick may not be able to find any of its <var>modules</var>. Modules are all the IM_MOD*.DLL files you see in the distribution. There is one of these for each and every file format that ImageMagick supports. This environment variable tells the system were to look for these DLL's. The compiled in <var>default</var> is <var>execution path</var> - which says - look in the same place that the application is running <var>in</var>. If you are running from somewhere other then <code>bin</code> - this will no longer work and you must use this variable. If you elect to leave the modules in the same place as the EXE's (a good idea) then you can simply set this to the same place as you did the PATH variable. In my case:</p>
 
-<pre>
+<pre><code>
 C:\ImageMagick\coders
-</pre>
+</code></pre>
 
 			<p>This also the place were ImageMagick expects to find the <code>colors.xml</code>, <code>delegates.xml</code>, <code>magic.xml</code>, <code>modules.xml</code>, and <code>type.xml</code> files.</p>
 
@@ -244,15 +244,15 @@
 
 <p>You can elect to changes these things the good old <var>hard-coded</var> way. This define is applicable in <code>magick-config.h</code>:</p>
 
-<pre>
+<pre><code>
 #define MagickConfigurePath  "C:\\ImageMagick\\"
-</pre>
+</code></pre>
 
 <p>To view any image in a Microsoft window, type</p>
 
-<pre>
+<pre><code>
 magick image.ext win:
-</pre>
+</code></pre>
 
 <p>Make sure <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a> is installed, otherwise, you will be unable to convert or view a Postscript document, and Postscript standard fonts will not be available.</p>
 
@@ -264,14 +264,14 @@
 
 <p>If you are looking to install the ImageMagick COM+ object, see <a href="ImageMagickObject.html">Installing the ImageMagickObject COM+ Component</a>.</p>
 
-<h2 class="magick-header"><a id="Install"></a>Install</h2>
+<h2 class="magick-post-title"><a id="Install"></a>Install</h2>
 
 <p>You can run ImageMagick command line utilities directly from the <code>VisualMagick\bin</code> folder, however, in most cases you may want the convenience of an installer script.  ImageMagick provides <a href="http://www.jrsoftware.org">Inno Setup</a> scripts for this purpose.  Note, you must define MAGICKCORE_INSTALLED_SUPPORT at <a href="advanced-windows-installation.html#configure">configure</a> time to utilize the installer scripts.</p>
 
 <p>To get started building a self-installing ImageMagick executable, go to <code>VisualMagick\installer</code> folder and click on a script that matches your build environment.  Press F9 to build and install ImageMagick.  The default location is <code>C:Program Files\ImageMagick-7.?.?\Q?</code>.  The exact folder name depends on the ImageMagick version and quantum depth.  Once installed, ImageMagick command line utilities and libraries are available to the MS Command Prompt, web scripts, or to meet your development needs.</p>
 
 
-<h2 class="magick-header"><a id="binary"></a>Create a Self-Installing Binary Distribution</h2>
+<h2 class="magick-post-title"><a id="binary"></a>Create a Self-Installing Binary Distribution</h2>
 
 <h3>Prerequisites</h3>
 
@@ -303,10 +303,10 @@
 	<ol>
 	<li>Launch the Command Prompt application and move to the <code>contrib\win32\ATL7\ImageMagickObject</code> folder.</li>
 	<li>Build ImageMagickObject with these commands:
-<pre>
+<pre><code>
 BuildImageMagickObject clean
 BuildImageMagickObject release
-</pre></li>
+</code></pre></li>
 	</ol>
 
 <h3>Build PerlMagick</h3>
@@ -314,10 +314,10 @@
 	<ol>
 	<li>Launch the Command Prompt application and move to the <code>PerlMagick</code> folder.</li>
 	<li>Build PerlMagick with these commands:
-<pre>
+<pre><code>
 perl Makefile.PL
 dmake release
-</pre></li>
+</code></pre></li>
 	</ol>
 
 <h3>Create the Self-installing ImageMagick Binary Distribution</h3>
@@ -331,7 +331,7 @@
 
 	<ol>
 	<li>Double-click on
-	<code>VisualMagick/bin/ImageMagick-7.0.5-10-Q16-windows-dll.exe</code>
+	<code>VisualMagick/bin/ImageMagick-7.0.6-0-Q16-windows-dll.exe</code>
 	to launch the ImageMagick binary distribution.</li>
 	<li>Complete the installer screens to install ImageMagick on your system.</li>
 	</ol>
@@ -340,38 +340,38 @@
 
 	<ol>
 	<li>Launch the Command Prompt application and move to the <code>PerlMagick</code> folder and type
-<pre>
+<pre><code>
 nmake test
-</pre></li>
+</code></pre></li>
 
 	<li>Move to the <code>VisualMagick/tests</code> folder and type
-<pre>
+<pre><code>
 validate
-</pre></li>
+</code></pre></li>
 	<li>Move to the <code>VisualMagick/Magick++/tests</code> folder and type
-<pre>
+<pre><code>
 run_tests.bat
-</pre></li>
+</code></pre></li>
 	<li>Move to the <code>VisualMagick/Magick++/demo</code> folder and type
-<pre>
+<pre><code>
 run_demos.bat
-</pre></li>
+</code></pre></li>
 	</ol>
 
 <p>If all the tests pass without complaint, the ImageMagick self-install binary distribution is ready for use.</p>
 
-<h2 class="magick-header"><a id="problems"></a>Dealing with Unexpected Problems</h2>
+<h2 class="magick-post-title"><a id="problems"></a>Dealing with Unexpected Problems</h2>
 
 <p>Chances are the download, configure, build, and install of ImageMagick went flawlessly as it is intended, however, certain systems and environments may cause one or more steps to fail.  We discuss a few problems we've run across and how to take corrective action to ensure you have a working release of ImageMagick.</p>
 
 <p>If the compiler generates an error or if it quits unexpectedly, go to the <a href="http://msdn.microsoft.com/vstudio/">Visual Studio</a> web site and look for Visual Studio service packs.  Chances are, after you download and install all the Visual Studio service packs, ImageMagick will compile and build as expected.</p>
 
 
-<h2 class="magick-header"><a id="project"></a>Building Your Custom Project</h2>
+<h2 class="magick-post-title"><a id="project"></a>Building Your Custom Project</h2>
 
 <p>The Windows <a href="download.html#windows">binary</a> distribution includes a number of demo projects that you can use as a template for your own custom project.  For example, start with the Button project, generally located in the <code>c:/Program Files/ImageMagick-7.5.5-0/Magick++_demos</code> folder.  If not, be sure to select <code>Configuration Properties->C/C++->Preprocessor</code> and set these definitions:</p>
 
-<pre>
+<pre><code>
 NDEBUG
 WIN32
 _CONSOLE
@@ -379,7 +379,7 @@
 NeedFunctionPrototypes
 _DLL
 _MAGICKMOD_
-</pre>
+</code></pre>
 
 </div>
   <footer class="magick-footer">
@@ -401,4 +401,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:16 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:58 -->
\ No newline at end of file
diff --git a/www/animate.html b/www/animate.html
index 0c6f74b..960b15f 100644
--- a/www/animate.html
+++ b/www/animate.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/animate.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/animate.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,46 +42,47 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="animate.html#usage">Example Usage</a> • <a href="animate.html#options">Option Summary</a></p>
 
 <p class="lead magick-description">Use the <code>animate</code> program to animate an image sequence on any X server.   See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>animate</code> command or see below for example usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>animate</code> command here to illustrate its usefulness and ease of use.  To get started, lets animate an image sequence in the GIF format:</p>
 
-<pre>
+<pre><code>
 magick animate movie.gif
-</pre>
+</code></pre>
 
 <p>To animate a directory of JPEG images, use:</p>
 
-<pre>
+<pre><code>
 magick animate *.jpg
-</pre>
+</code></pre>
 
 <p>You can find additional examples of using <code>animate</code> in <a href="https://www.imagemagick.org/Usage/basics/#animate">Examples of ImageMagick Usage</a>.</p>
 
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>animate</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -532,4 +532,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/architecture.html b/www/architecture.html
index bb1cd84..c9510cd 100644
--- a/www/architecture.html
+++ b/www/architecture.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/architecture.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/architecture.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,25 +42,26 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="architecture.html#cache">The Pixel Cache</a> • <a href="architecture.html#stream">Streaming Pixels</a> • <a href="architecture.html#properties">Image Properties and Profiles</a> • <a href="architecture.html#tera-pixel">Large Image Support</a> • <a href="architecture.html#threads">Threads of Execution</a> • <a href="architecture.html#distributed">Heterogeneous Distributed Processing</a> • <a href="architecture.html#coders">Custom Image Coders</a> • <a href="architecture.html#filters">Custom Image Filters</a></p>
 
 <p class="lead magick-description">The citizens of Oz were quite content with their benefactor, the all-powerful Wizard.  They accepted his wisdom and benevolence without ever questioning the who, why, and where of his power.  Like the citizens of Oz, if you feel comfortable that ImageMagick can help you convert, edit, or compose your images without knowing what goes on behind the curtain, feel free to skip this section.  However, if you want to know more about the software and algorithms behind ImageMagick, read on.  To fully benefit from this discussion, you should be comfortable with image nomenclature and be familiar with computer programming.</p>
 
-<h2 class="magick-header"><a id="overview"></a>Architecture Overview</h2>
+<h2 class="magick-post-title"><a id="overview"></a>Architecture Overview</h2>
 
 <p>An image typically consists of a rectangular region of pixels and metadata.  To convert, edit, or compose an image in an efficient manner, we need convenient access to any pixel anywhere within the region (and sometimes outside the region).  And in the case of an image sequence, we need access to any pixel of any region of any image in the sequence.  However, there are hundreds of image formats such JPEG, TIFF, PNG, GIF, etc., that makes it difficult to access pixels on demand.  Within these formats we find differences in:</p>
 
@@ -101,7 +101,7 @@
 
 <p>ImageMagick consists of nearly a half million lines of C code and optionally depends on several million lines of code in dependent libraries (e.g. JPEG, PNG, TIFF libraries).  Given that, one might expect a huge architecture document.  However, a great majority of image processing is simply accessing pixels and its metadata and our simple, elegant, and efficient implementation makes this easy for the ImageMagick developer.  We discuss the implementation of the pixel cache and getting and setting image properties and profiles in the next few sections. Next, we discuss using ImageMagick within a <a href="architecture.html#threads">thread</a> of execution.  In the final sections, we discuss <a href="architecture.html#coders">image coders</a> to read or write a particular image format followed by a few words on creating a <a href="architecture.html#filters">filter</a> to access or update pixels based on your custom requirements.</p>
 
-<h2 class="magick-header"><a id="cache"></a>The Pixel Cache</h2>
+<h2 class="magick-post-title"><a id="cache"></a>The Pixel Cache</h2>
 
 <p>The ImageMagick pixel cache is a repository for image pixels with up to 32 channels.  The channels are stored contiguously at the depth specified when ImageMagick was built.  The channel depths are 8 bits-per-pixel component for the Q8 version of ImageMagick, 16 bits-per-pixel component for the Q16 version, and 32 bits-per-pixel component for the Q32 version.  By default pixel components are 32-bit floating-bit <a href="high-dynamic-range.html">high dynamic-range</a> quantities. The channels can hold any value but typically contain red, green, blue, and alpha intensities or cyan, magenta, yellow, alpha intensities.  A channel might contain the colormap indexes for colormapped images or the black channel for CMYK images.  The pixel cache storage may be heap memory, disk-backed memory mapped, or on disk.  The pixel cache is reference-counted.  Only the cache properties are copied when the cache is cloned.  The cache pixels are subsequently copied only when you signal your intention to update any of the pixels.</p>
 
@@ -110,32 +110,32 @@
 <p>The pixel cache is associated with an image when it is created and it is initialized when you try to get or put pixels.  Here are three common methods to associate a pixel cache with an image:</p>
 
 <dl>
-<dt>Create an image canvas initialized to the background color:</dt><br/>
-<dd><pre>image=AllocateImage(image_info);
+<dt class="col-md-4">Create an image canvas initialized to the background color:</dt><br/>
+<dd class="col-md-8"><pre><code>image=AllocateImage(image_info);
 if (SetImageExtent(image,640,480) == MagickFalse)
   { /* an exception was thrown */ }
 (void) QueryMagickColor("red",&amp;image-&gt;background_color,&amp;image-&gt;exception);
 SetImageBackgroundColor(image);
-</pre></dd>
+</code></pre></dd>
 
-<dt>Create an image from a JPEG image on disk:</dt><br/>
-<dd><pre>(void) strcpy(image_info-&gt;filename,"image.jpg"):
+<dt class="col-md-4">Create an image from a JPEG image on disk:</dt><br/>
+<dd class="col-md-8"><pre><code>(void) strcpy(image_info-&gt;filename,"image.jpg"):
 image=ReadImage(image_info,exception);
 if (image == (Image *) NULL)
   { /* an exception was thrown */ }
-</pre></dd>
-<dt>Create an image from a memory based image:</dt><br/>
-<dd><pre>image=BlobToImage(blob_info,blob,extent,exception);
+</code></pre></dd>
+<dt class="col-md-4">Create an image from a memory based image:</dt><br/>
+<dd class="col-md-8"><pre><code>image=BlobToImage(blob_info,blob,extent,exception);
 if (image == (Image *) NULL)
   { /* an exception was thrown */ }
-</pre></dd>
+</code></pre></dd>
 </dl>
 
 <p>In our discussion of the pixel cache, we use the <a href="magick-core.html">MagickCore API</a> to illustrate our points, however, the principles are the same for other program interfaces to ImageMagick.</p>
 
 <p>When the pixel cache is initialized, pixels are scaled from whatever bit depth they originated from to that required by the pixel cache.  For example, a 1-channel 1-bit monochrome PBM image is scaled to 8-bit gray image, if you are using the Q8 version of ImageMagick, and 16-bit RGBA for the Q16 version.  You can determine which version you have with the <a href="command-line-options.html#version">&#x2011;version</a> option: </p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>identify -version</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>Version: ImageMagick 7.0.5-10 2017-05-30 Q16 https://www.imagemagick.org</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>identify -version</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>Version: ImageMagick 7.0.6-0 2017-06-13 Q16 https://www.imagemagick.org</span></pre>
 <p>As you can see, the convenience of the pixel cache sometimes comes with a trade-off in storage (e.g. storing a 1-bit monochrome image as 16-bit is wasteful) and speed (i.e. storing the entire image in memory is generally slower than accessing one scanline of pixels at a time).  In most cases, the benefits of the pixel cache typically outweigh any disadvantages.</p>
 
 <h3><a id="authentic-pixels"></a>Access the Pixel Cache</h3>
@@ -150,7 +150,7 @@
 
 <p>Here is a typical <a href="magick-core.html">MagickCore</a> code snippet for manipulating pixels in the pixel cache.  In our example, we copy pixels from the input image to the output image and decrease the intensity by 10%:</p>
 
-<pre class="pre-scrollable">const Quantum
+<pre class="pre-scrollable"><code>const Quantum
   *p;
 
 Quantum
@@ -184,13 +184,13 @@
 }
 if (y &lt; (ssize_t) source-&gt;rows)
   { /* an exception was thrown */ }
-</pre>
+</code></pre>
 
 <p>When we first create the destination image by cloning the source image, the pixel cache pixels are not copied.  They are only copied when you signal your intentions to modify or set the pixel cache by calling <a href="api/cache.html#GetAuthenticPixels">GetAuthenticPixels()</a> or <a href="api/cache.html#QueueAuthenticPixels">QueueAuthenticPixels()</a>. Use <a href="api/cache.html#QueueAuthenticPixels">QueueAuthenticPixels()</a> if you want to set new pixel values rather than update existing ones.  You could use GetAuthenticPixels() to set pixel values but it is slightly more efficient to use QueueAuthenticPixels() instead. Finally, use <a href="api/cache.html#SyncAuthenticPixels">SyncAuthenticPixels()</a> to ensure any updated pixels are pushed to the pixel cache.</p>
 
 <p>You can associate arbitrary content with each pixel, called <em>meta</em> content.  Use  <a href="api/cache.html#GetVirtualMetacontent">GetVirtualMetacontent()</a> (to read the content) or <a href="api/cache.html#GetAuthenticMetacontent">GetAuthenticMetacontent()</a> (to update the content) to gain access to this content.  For example, to print the metacontent, use:</p>
 
-<pre>const void
+<pre><code>const void
   *metacontent;
 
 for (y=0; y &lt; (ssize_t) source-&gt;rows; y++)
@@ -203,12 +203,12 @@
 }
 if (y &lt; (ssize_t) source-&gt;rows)
   /* an exception was thrown */
-</pre>
+</code></pre>
 
 <p>The pixel cache manager decides whether to give you direct or indirect access to the image pixels.  In some cases the pixels are staged to an intermediate buffer-- and that is why you must call SyncAuthenticPixels() to ensure this buffer is <var>pushed</var> out to the pixel cache to guarantee the corresponding pixels in the cache are updated.  For this reason we recommend that you only read or update a scanline or a few scanlines of pixels at a time.  However, you can get any rectangular region of pixels you want.  GetAuthenticPixels() requires that the region you request is within the bounds of the image area.  For a 640 by 480 image, you can get a scanline of 640 pixels at row 479 but if you ask for a scanline at row 480, an exception is returned (rows are numbered starting at 0).  GetVirtualPixels() does not have this constraint.  For example,</p>
 
-<pre>p=GetVirtualPixels(source,-3,-3,source-&gt;columns+3,6,exception);
-</pre>
+<pre><code>p=GetVirtualPixels(source,-3,-3,source-&gt;columns+3,6,exception);
+</code></pre>
 
 <p>gives you the pixels you asked for without complaint, even though some are not within the confines of the image region.</p>
 
@@ -217,37 +217,37 @@
 <p>There are a plethora of image processing algorithms that require a neighborhood of pixels about a pixel of interest.  The algorithm typically includes a caveat concerning how to handle pixels around the image boundaries, known as edge pixels.  With virtual pixels, you do not need to concern yourself about special edge processing other than choosing  which virtual pixel method is most appropriate for your algorithm.</p>
  <p>Access to the virtual pixels are controlled by the <a href="api/cache.html#SetImageVirtualPixelMethod">SetImageVirtualPixelMethod()</a> method from the MagickCore API or the <a href="command-line-options.html#virtual-pixel">&#x2011;virtual&#x2011;pixel</a> option from the command line.  The methods include:</p>
 
-<dl class="dl-horizontal">
-<dt>background</dt>
-<dd>the area surrounding the image is the background color</dd>
-<dt>black</dt>
-<dd>the area surrounding the image is black</dd>
-<dt>checker-tile</dt>
-<dd>alternate squares with image and background color</dd>
-<dt>dither</dt>
-<dd>non-random 32x32 dithered pattern</dd>
-<dt>edge</dt>
-<dd>extend the edge pixel toward infinity (default)</dd>
-<dt>gray</dt>
-<dd>the area surrounding the image is gray</dd>
-<dt>horizontal-tile</dt>
-<dd>horizontally tile the image, background color above/below</dd>
-<dt>horizontal-tile-edge</dt>
-<dd>horizontally tile the image and replicate the side edge pixels</dd>
-<dt>mirror</dt>
-<dd>mirror tile the image</dd>
-<dt>random</dt>
-<dd>choose a random pixel from the image</dd>
-<dt>tile</dt>
-<dd>tile the image</dd>
-<dt>transparent</dt>
-<dd>the area surrounding the image is transparent blackness</dd>
-<dt>vertical-tile</dt>
-<dd>vertically tile the image, sides are background color</dd>
-<dt>vertical-tile-edge</dt>
-<dd>vertically tile the image and replicate the side edge pixels</dd>
-<dt>white</dt>
-<dd>the area surrounding the image is white</dd>
+<dl class="row">
+<dt class="col-md-4">background</dt>
+<dd class="col-md-8">the area surrounding the image is the background color</dd>
+<dt class="col-md-4">black</dt>
+<dd class="col-md-8">the area surrounding the image is black</dd>
+<dt class="col-md-4">checker-tile</dt>
+<dd class="col-md-8">alternate squares with image and background color</dd>
+<dt class="col-md-4">dither</dt>
+<dd class="col-md-8">non-random 32x32 dithered pattern</dd>
+<dt class="col-md-4">edge</dt>
+<dd class="col-md-8">extend the edge pixel toward infinity (default)</dd>
+<dt class="col-md-4">gray</dt>
+<dd class="col-md-8">the area surrounding the image is gray</dd>
+<dt class="col-md-4">horizontal-tile</dt>
+<dd class="col-md-8">horizontally tile the image, background color above/below</dd>
+<dt class="col-md-4">horizontal-tile-edge</dt>
+<dd class="col-md-8">horizontally tile the image and replicate the side edge pixels</dd>
+<dt class="col-md-4">mirror</dt>
+<dd class="col-md-8">mirror tile the image</dd>
+<dt class="col-md-4">random</dt>
+<dd class="col-md-8">choose a random pixel from the image</dd>
+<dt class="col-md-4">tile</dt>
+<dd class="col-md-8">tile the image</dd>
+<dt class="col-md-4">transparent</dt>
+<dd class="col-md-8">the area surrounding the image is transparent blackness</dd>
+<dt class="col-md-4">vertical-tile</dt>
+<dd class="col-md-8">vertically tile the image, sides are background color</dd>
+<dt class="col-md-4">vertical-tile-edge</dt>
+<dd class="col-md-8">vertically tile the image and replicate the side edge pixels</dd>
+<dt class="col-md-4">white</dt>
+<dd class="col-md-8">the area surrounding the image is white</dd>
 </dl>
 
 
@@ -255,32 +255,32 @@
 
 <p>Recall that this simple and elegant design of the ImageMagick pixel cache comes at a cost in terms of storage and processing speed.  The pixel cache storage requirements scales with the area of the image and the bit depth of the pixel components.  For example, if we have a 640 by 480 image and we are using the non-HDRI Q16 version of ImageMagick, the pixel cache consumes image <var>width * height * bit-depth / 8 * channels</var> bytes or approximately 2.3 mebibytes (i.e. 640 * 480 * 2 * 4).  Not too bad, but what if your image is 25000 by 25000 pixels?  The pixel cache requires approximately 4.7 gibibytes of storage.  Ouch.  ImageMagick accounts for possible huge storage requirements by caching large images to disk rather than memory.  Typically the pixel cache is stored in memory using heap memory. If heap memory is exhausted, we create the pixel cache on disk and attempt to memory-map it. If memory-map memory is exhausted, we simply use standard disk I/O.  Disk storage is cheap but it is also very slow, upwards of 1000 times slower than memory.  We can get some speed improvements, up to 5 times, if we use memory mapping to the disk-based cache.  These decisions about storage are made <var>automagically</var> by the pixel cache manager negotiating with the operating system.  However, you can influence how the pixel cache manager allocates the pixel cache with <var>cache resource limits</var>.  The limits include:</p>
 
-<dl class="dl-horizontal">
-  <dt>width</dt>
-  <dd>maximum width of an image.  Exceed this limit and an exception is thrown and processing stops.</dd>
-  <dt>height</dt>
-  <dd>maximum height of an image.  Exceed this limit and an exception is thrown and processing stops.</dd>
-  <dt>area</dt>
-  <dd>maximum area in bytes of any one image that can reside in the pixel cache memory.  If this limit is exceeded, the image is automagically cached to disk and optionally memory-mapped.</dd>
-  <dt>memory</dt>
-  <dd>maximum amount of memory in bytes to allocate for the pixel cache from the heap.</dd>
-  <dt>map</dt>
-  <dd>maximum amount of memory map in bytes to allocate for the pixel cache.</dd>
-  <dt>disk</dt>
-  <dd>maximum amount of disk space in bytes permitted for use by the pixel cache.  If this limit is exceeded, the pixel cache is not created and a fatal exception is thrown.</dd>
-  <dt>files</dt>
-  <dd>maximum number of open pixel cache files.  When this limit is exceeded, any subsequent pixels cached to disk are closed and reopened on demand. This behavior permits a large number of images to be accessed simultaneously on disk, but without a speed penalty due to repeated open/close calls.</dd>
-  <dt>thread</dt>
-  <dd>maximum number of threads that are permitted to run in parallel.</dd>
-  <dt>time</dt>
-  <dd>maximum number of seconds that the process is permitted to execute.  Exceed this limit and an exception is thrown and processing stops.</dd>
+<dl class="row">
+  <dt class="col-md-4">width</dt>
+  <dd class="col-md-8">maximum width of an image.  Exceed this limit and an exception is thrown and processing stops.</dd>
+  <dt class="col-md-4">height</dt>
+  <dd class="col-md-8">maximum height of an image.  Exceed this limit and an exception is thrown and processing stops.</dd>
+  <dt class="col-md-4">area</dt>
+  <dd class="col-md-8">maximum area in bytes of any one image that can reside in the pixel cache memory.  If this limit is exceeded, the image is automagically cached to disk and optionally memory-mapped.</dd>
+  <dt class="col-md-4">memory</dt>
+  <dd class="col-md-8">maximum amount of memory in bytes to allocate for the pixel cache from the heap.</dd>
+  <dt class="col-md-4">map</dt>
+  <dd class="col-md-8">maximum amount of memory map in bytes to allocate for the pixel cache.</dd>
+  <dt class="col-md-4">disk</dt>
+  <dd class="col-md-8">maximum amount of disk space in bytes permitted for use by the pixel cache.  If this limit is exceeded, the pixel cache is not created and a fatal exception is thrown.</dd>
+  <dt class="col-md-4">files</dt>
+  <dd class="col-md-8">maximum number of open pixel cache files.  When this limit is exceeded, any subsequent pixels cached to disk are closed and reopened on demand. This behavior permits a large number of images to be accessed simultaneously on disk, but without a speed penalty due to repeated open/close calls.</dd>
+  <dt class="col-md-4">thread</dt>
+  <dd class="col-md-8">maximum number of threads that are permitted to run in parallel.</dd>
+  <dt class="col-md-4">time</dt>
+  <dd class="col-md-8">maximum number of seconds that the process is permitted to execute.  Exceed this limit and an exception is thrown and processing stops.</dd>
 </dl>
 
 <p>Note, these limits pertain to the ImageMagick pixel cache.  Certain algorithms within ImageMagick do not respect these limits nor does any of the external delegate libraries (e.g. JPEG, TIFF, etc.).</p>
 
 <p>To determine the current setting of these limits, use this command:</p>
 
-<pre>
+<pre><code>
 -> identify -list resource
 Resource limits:
   Width: 100MP
@@ -293,10 +293,10 @@
   Thread: 12
   Throttle: 0
   Time: unlimited
-</pre>
+</code></pre>
 
 <p>You can set these limits either as a <a href="security-policy.html">security policy</a> (see <a href="https://www.imagemagick.org/source/policy.xml">policy.xml</a>), with an <a href="resources.html#environment">environment variable</a>, with the <a href="command-line-options.html#limit">-limit</a> command line option, or with the <a href="api/resource.html#SetMagickResourceLimit">SetMagickResourceLimit()</a> MagickCore API method. As an example, our online web interface to ImageMagick, <a href="https://www.imagemagick.org/MagickStudio/scripts/MagickStudio.cgi">ImageMagick Studio</a>, includes these policy limits to help prevent a denial-of-service:</p>
-<pre>
+<pre><code>
 &lt;policymap>
   &lt;policy domain="resource" name="temporary-path" value="/tmp"/>
   &lt;policy domain="resource" name="memory" value="256MiB"/>
@@ -314,13 +314,13 @@
   &lt;policy domain="delegate" rights="none" pattern="HTTPS" />
   &lt;policy domain="path" rights="none" pattern="@*"/>  &lt;!-- indirect reads not permitted -->
 &lt;/policymap>
-</pre>
+</code></pre>
 <p>Since we process multiple simultaneous sessions, we don't want any one session consuming all the available memory.With this policy, large images are cached to disk. If the image is too large and exceeds the pixel cache disk limit, the program exits. In addition, we place a time limit to prevent any run-away processing tasks. If any one image has a width or height that exceeds 8192 pixels, an exception is thrown and processing stops. As of ImageMagick 7.0.1-8 you can prevent the use of any delegate or all delegates (set the pattern to "*"). Note, prior to this release, use a domain of "coder" to prevent delegate usage (e.g. domain="coder" rights="none" pattern="HTTPS"). The policy also prevents indirect reads.  If you want to, for example, read text from a file (e.g. caption:@myCaption.txt), you'll need to remove this policy.</p>
 
 <p>Note, the cache limits are global to each invocation of ImageMagick, meaning if you create several images, the combined resource requirements are compared to the limit to determine the pixel cache storage disposition.</p>
 
 <p>To determine which type and how much resources are consumed by the pixel cache, add the <a href="command-line-options.html#debug">-debug cache</a> option to the command-line:</p>
-<pre>-> convert -debug cache logo: -sharpen 3x2 null:
+<pre><code>-> convert -debug cache logo: -sharpen 3x2 null:
 2016-12-17T13:33:42-05:00 0:00.000 0.000u 7.0.0 Cache convert: cache.c/DestroyPixelCache/1275/Cache
   destroy 
 2016-12-17T13:33:42-05:00 0:00.000 0.000u 7.0.0 Cache convert: cache.c/OpenPixelCache/3834/Cache
@@ -337,22 +337,22 @@
   destroy LOGO[0]
 2016-12-17T13:33:42-05:00 0:00.050 0.100u 7.0.0 Cache convert: cache.c/DestroyPixelCache/1275/Cache
   destroy LOGO[0]
-</pre>
+</code></pre>
 <p>This command utilizes a pixel cache in memory.  The logo consumed 4.688MiB and after it was sharpened, 3.516MiB.</p>
 
 
 <h3>Distributed Pixel Cache</h3>
 <p>A distributed pixel cache is an extension of the traditional pixel cache available on a single host.  The distributed pixel cache may span multiple servers so that it can grow in size and transactional capacity to support very large images.  Start up the pixel cache server on one or more machines.  When you read or operate on an image and the local pixel cache resources are exhausted, ImageMagick contacts one or more of these remote pixel servers to store or retrieve pixels.  The distributed pixel cache relies on network bandwidth to marshal pixels to and from the remote server.  As such, it will likely be significantly slower than a pixel cache utilizing local storage (e.g. memory, disk, etc.).</p>
-<pre>
+<pre><code>
 convert -distribute-cache 6668 &amp;  // start on 192.168.100.50
 convert -define registry:cache:hosts=192.168.100.50:6668 myimage.jpg -sharpen 5x2 mimage.png
-</pre>
+</code></pre>
 
 <h3>Cache Views</h3>
 
 <p>GetVirtualPixels(), GetAuthenticPixels(), QueueAuthenticPixels(), and SyncAuthenticPixels(), from the MagickCore API, can only deal with one pixel cache area per image at a time.  Suppose you want to access the first and last scanline from the same image at the same time?  The solution is to use a <var>cache view</var>.  A cache view permits you to access as many areas simultaneously in the pixel cache as you require.  The cache view <a href="api/cache-view.html">methods</a> are analogous to the previous methods except you must first open a view and close it when you are finished with it. Here is a snippet of MagickCore code that permits us to access the first and last pixel row of the image simultaneously:</p>
 
-<pre class="pre-scrollable">CacheView
+<pre class="pre-scrollable"><code>CacheView
   *view_1,
   *view_2;
 
@@ -373,7 +373,7 @@
 view_1=DestroyCacheView(view_1);
 if (y &lt; (ssize_t) source-&gt;rows)
   { /* an exception was thrown */ }
-</pre>
+</code></pre>
 
 <h3>Magick Persistent Cache Format</h3>
 
@@ -402,30 +402,30 @@
 
 <p>If you are dealing with large images, make sure the pixel cache is written to a disk area with plenty of free space.  Under Unix, this is typically <code>/tmp</code> and for Windows, <code>c:/temp</code>.  You can tell ImageMagick to write the pixel cache to an alternate location and conserve memory with these options:</p>
 
-<pre>
+<pre><code>
 convert -limit memory 2GB -limit map 4GB -define registry:temporary-path=/data/tmp ...
-</pre>
+</code></pre>
 
 <p>Set global resource limits for your environment in the <code>policy.xml</code> configuration file.</p>
 
 <p>If you plan on processing the same image many times, consider the MPC format.  Reading a MPC image has near-zero overhead because its in the native pixel cache format eliminating the need for decoding the image pixels.  Here is an example:</p>
 
-<pre>
+<pre><code>
 convert image.tif image.mpc
 convert image.mpc -crop 100x100+0+0 +repage 1.png
 convert image.mpc -crop 100x100+100+0 +repage 2.png
 convert image.mpc -crop 100x100+200+0 +repage 3.png
-</pre>
+</code></pre>
 
 <p>MPC is ideal for web sites.  It reduces the overhead of reading and writing an image.  We use it exclusively at our <a href="https://www.imagemagick.org/MagickStudio/scripts/MagickStudio.cgi">online image studio</a>.</p>
 
-<h2 class="magick-header"><a id="stream"></a>Streaming Pixels</h2>
+<h2 class="magick-post-title"><a id="stream"></a>Streaming Pixels</h2>
 
 <p>ImageMagick provides for streaming pixels as they are read from or written to an image.  This has several advantages over the pixel cache.  The time and resources consumed by the pixel cache scale with the area of an image, whereas the pixel stream resources scale with the width of an image.  The disadvantage is the pixels must be consumed as they are streamed so there is no persistence.</p>
 
 <p>Use <a href="api/stream.html#ReadStream">ReadStream()</a> or <a href="api/stream.html#WriteStream">WriteStream()</a> with an appropriate callback method in your MagickCore program to consume the pixels as they are streaming.  Here's an abbreviated example of using ReadStream:</p>
 
-<pre class="pre-scrollable">static size_t StreamPixels(const Image *image,const void *pixels,const size_t columns)
+<pre class="pre-scrollable"><code>static size_t StreamPixels(const Image *image,const void *pixels,const size_t columns)
 {
   register const Quantum
     *p;
@@ -447,33 +447,33 @@
 /* invoke the pixel stream here */
 image_info->client_data=(void *) MyData;
 image=ReadStream(image_info,&amp;StreamPixels,exception);
-</pre>
+</code></pre>
 
 <p>We also provide a lightweight tool, <a href="stream.html">stream</a>, to stream one or more pixel components of the image or portion of the image to your choice of storage formats.  It writes the pixel components as they are read from the input image a row at a time making <a href="stream.html">stream</a> desirable when working with large images or when you require raw pixel components.  A majority of the image formats stream pixels (red, green, and blue) from left to right and top to bottom.  However, a few formats do not support this common ordering (e.g. the PSD format).</p>
 
-<h2 class="magick-header"><a id="properties"></a>Image Properties and Profiles</h2>
+<h2 class="magick-post-title"><a id="properties"></a>Image Properties and Profiles</h2>
 
 <p>Images have metadata associated with them in the form of properties (e.g. width, height, description, etc.) and profiles (e.g. EXIF, IPTC, color management).  ImageMagick provides convenient methods to get, set, or update image properties and get, set, update, or apply profiles.  Some of the more popular image properties are associated with the Image structure in the MagickCore API.  For example:</p>
 
-<pre>(void) printf("image width: %lu, height: %lu\n",image-&gt;columns,image-&gt;rows);
-</pre>
+<pre><code>(void) printf("image width: %lu, height: %lu\n",image-&gt;columns,image-&gt;rows);
+</code></pre>
 
 <p>For a great majority of image properties, such as an image comment or description, we use the <a href="api/property.html#GetImageProperty">GetImageProperty()</a> and <a href="api/property.html#SetImageProperty">SetImageProperty()</a> methods.  Here we set a property and fetch it right back:</p>
 
-<pre>const char
+<pre><code>const char
   *comment;
 
 (void) SetImageProperty(image,"comment","This space for rent");
 comment=GetImageProperty(image,"comment");
 if (comment == (const char *) NULL)
   (void) printf("Image comment: %s\n",comment);
-</pre>
+</code></pre>
 
 <p>ImageMagick supports artifacts with the GetImageArtifact() and SetImageArtifact() methods.  Artifacts are stealth properties that are not exported to image formats (e.g. PNG).</p>
 
 <p>Image profiles are handled with <a href="api/profile.html#GetImageProfile">GetImageProfile()</a>, <a href="api/profile.html#SetImageProfile">SetImageProfile()</a>, and <a href="api/profile.html#ProfileImage">ProfileImage()</a> methods.  Here we set a profile and fetch it right back:</p>
 
-<pre>StringInfo
+<pre><code>StringInfo
   *profile;
 
 profile=AcquireStringInfo(length);
@@ -483,57 +483,57 @@
 profile=GetImageProfile(image,"EXIF");
 if (profile != (StringInfo *) NULL)
   (void) PrintStringInfo(stdout,"EXIF",profile);
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="tera-pixel"></a>Large Image Support</h2>
+<h2 class="magick-post-title"><a id="tera-pixel"></a>Large Image Support</h2>
 <p>ImageMagick can read, process, or write mega-, giga-, or tera-pixel image sizes.  An image width or height can range from 1 to 2 giga-pixels on a 32 bit OS and up to 9 exa-pixels on a 64-bit OS.  Note, that some image formats have restrictions on image size.  For example, Photoshop images are limited to 300,000 pixels for width or height.  Here we resize an image to a quarter million pixels square:</p>
 
-<pre>
+<pre><code>
 convert logo: -resize 250000x250000 logo.miff
-</pre>
+</code></pre>
 
 <p>For large images, ImageMagick will likely create a pixel cache on disk.  Make sure you have plenty of temporary disk space.  If your default temporary disk partition is too small, tell ImageMagick to use another partition with plenty of free space.  For example:</p>
 
-<pre>
+<pre><code>
 convert -define registry:temporary-path=/data/tmp logo:  \ <br/>     -resize 250000x250000 logo.miff
-</pre>
+</code></pre>
 
 <p>To ensure large images do not consume all the memory on your system, force the image pixels to memory-mapped disk with resource limits:</p>
 
-<pre>
+<pre><code>
 convert -define registry:temporary-path=/data/tmp -limit memory 16mb \
   logo: -resize 250000x250000 logo.miff
-</pre>
+</code></pre>
 
 <p>Here we force all image pixels to disk:</p>
 
-<pre>
+<pre><code>
 convert -define registry:temporary-path=/data/tmp -limit area 0 \
   logo: -resize 250000x250000 logo.miff
-</pre>
+</code></pre>
 
 <p>Caching pixels to disk is about 1000 times slower than memory.  Expect long run times when processing large images on disk with ImageMagick.  You can monitor progress with this command:</p>
 
-<pre>convert -monitor -limit memory 2GiB -limit map 4GiB -define registry:temporary-path=/data/tmp \
+<pre><code>convert -monitor -limit memory 2GiB -limit map 4GiB -define registry:temporary-path=/data/tmp \
   logo: -resize 250000x250000 logo.miff
-</pre>
+</code></pre>
 
 <p>For really large images, or if there is limited resources on your host, you can utilize a distributed pixel cache on one or more remote hosts:</p>
-<pre>
+<pre><code>
 convert -distribute-cache 6668 &amp;  // start on 192.168.100.50
 convert -distribute-cache 6668 &amp;  // start on 192.168.100.51
 convert -limit memory 2mb -limit map 2mb -limit disk 2gb \
   -define registry:cache:hosts=192.168.100.50:6668,192.168.100.51:6668 \
   myhugeimage.jpg -sharpen 5x2 myhugeimage.png
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="threads"></a>Threads of Execution</h2>
+<h2 class="magick-post-title"><a id="threads"></a>Threads of Execution</h2>
 
 <p>Many of ImageMagick's internal algorithms are threaded to take advantage of speed-ups offered by the multicore processor chips. However, you are welcome to use ImageMagick algorithms in your threads of execution with the exception of the MagickCore's GetVirtualPixels(), GetAuthenticPixels(), QueueAuthenticPixels(), or SyncAuthenticPixels() pixel cache methods.  These methods are intended for one thread of execution only with the exception of an OpenMP parallel section.  To access the pixel cache with more than one thread of execution, use a cache view.  We do this for the <a href="api/composite.html#CompositeImage">CompositeImage()</a> method, for example.  Suppose we want to composite a single image over a different image in each thread of execution.  If we use GetVirtualPixels(), the results are unpredictable because multiple threads would likely be asking for different areas of the pixel cache simultaneously.  Instead we use GetCacheViewVirtualPixels() which creates a unique view for each thread of execution ensuring our program behaves properly regardless of how many threads are invoked.  The other program interfaces, such as the <a href="magick-wand.html">MagickWand API</a>, are completely thread safe so there are no special precautions for threads of execution.</p>
 
 <p>Here is an MagickCore code snippet that takes advantage of threads of execution with the <a href="openmp.html">OpenMP</a> programming paradigm:</p>
 
-<pre class="pre-scrollable">CacheView
+<pre class="pre-scrollable"><code>CacheView
   *image_view;
 
 MagickBooleanType
@@ -581,11 +581,11 @@
 image_view=DestroyCacheView(image_view);
 if (status == MagickFalse)
   perror("something went wrong");
-</pre>
+</code></pre>
 
 <p>This code snippet converts an uncompressed Windows bitmap to a Magick++ image:</p>
 
-<pre class="pre-scrollable">#include "Magick++.h"
+<pre class="pre-scrollable"><code>#include "Magick++.h"
 #include &lt;assert.h&gt;
 #include "omp.h"
 
@@ -639,7 +639,7 @@
     image->syncPixels();  // sync pixels to pixel cache.
   }
   return;
-}</pre>
+}</code></pre>
 
 <p>If you call the ImageMagick API from your OpenMP-enabled application and you intend to dynamically increase the number of threads available in subsequent parallel regions, be sure to perform the increase <var>before</var> you call the API otherwise ImageMagick may fault.</p>
 
@@ -647,21 +647,21 @@
 
 <p>In most circumstances, the default number of threads is set to the number of processor cores on your system for optimal performance.  However, if your system is hyperthreaded or if you are running on a virtual host and only a subset of the processors are available to your server instance, you might get an increase in performance by setting the thread <a href="resources.html#configure">policy</a> or the <a href="resources.html#environment">MAGICK_THREAD_LIMIT</a> environment variable.  For example, your virtual host has 8 processors but only 2 are assigned to your server instance.  The default of 8 threads can cause severe performance problems.  One solution is to limit the number of threads to the available processors in your <a href="https://www.imagemagick.org/source/policy.xml">policy.xml</a> configuration file:</p>
 
-<pre>
+<pre><code>
 &lt;policy domain="resource" name="thread" value="2"/>
-</pre>
+</code></pre>
 
 <p>Or suppose your 12 core hyperthreaded computer defaults to 24 threads.  Set the MAGICK_THREAD_LIMIT environment variable and you will likely get improved performance:</p>
 
-<pre>
+<pre><code>
 export MAGICK_THREAD_LIMIT=12
-</pre>
+</code></pre>
 
 <p>The OpenMP committee has not defined the behavior of mixing OpenMP with other threading models such as Posix threads.  However, using modern releases of Linux, OpenMP and Posix threads appear to interoperate without complaint.  If you want to use Posix threads from a program module that calls one of the ImageMagick application programming interfaces (e.g. MagickCore, MagickWand, Magick++, etc.) from Mac OS X or an older Linux release, you may need to disable OpenMP support within ImageMagick.  Add the <code>--disable-openmp</code> option to the configure script command line and rebuild and reinstall ImageMagick.</p>
 
 <h4>Threading Performance</h4>
 <p>It can be difficult to predict behavior in a parallel environment.   Performance might depend on a number of factors including the compiler, the version of the OpenMP library, the processor type, the number of cores, the amount of memory, whether hyperthreading is enabled, the mix of applications that are executing concurrently with ImageMagick, or the particular image-processing algorithm you utilize.  The only way to be certain of optimal performance, in terms of the number of threads, is to benchmark.   ImageMagick includes progressive threading when benchmarking a command and returns the elapsed time and efficiency for one or more threads.  This can help you identify how many threads is the most efficient in your environment.  For this benchmark we sharpen a 1920x1080 image of a model 10 times with 1 to 12 threads:</p>
-<pre>
+<pre><code>
 -> convert -bench 10 model.png -sharpen 5x2 null:
 Performance[1]: 10i 1.135ips 1.000e 8.760u 0:08.810
 Performance[2]: 10i 2.020ips 0.640e 9.190u 0:04.950
@@ -675,31 +675,31 @@
 Performance[10]: 10i 4.274ips 0.790e 14.830u 0:02.340
 Performance[11]: 10i 4.348ips 0.793e 16.500u 0:02.300
 Performance[12]: 10i 4.525ips 0.799e 18.320u 0:02.210
-</pre>
+</code></pre>
 <p>The sweet spot for this example is 6 threads. This makes sense since there are 6 physical cores.  The other 6 are hyperthreads. It appears that sharpening does not benefit from hyperthreading.</p>
 <p>In certain cases, it might be optimal to set the number of threads to 1 or to disable OpenMP completely with the <a href="resources.html#environment">MAGICK_THREAD_LIMIT</a> environment variable, <a href="command-line-options.html#limit">-limit</a> command line option,  or the  <a href="resources.html#configure">policy.xml</a> configuration file.</p>
 
-<h2 class="magick-header"><a id="distributed"></a>Heterogeneous Distributed Processing</h2>
+<h2 class="magick-post-title"><a id="distributed"></a>Heterogeneous Distributed Processing</h2>
 <p>ImageMagick includes support for heterogeneous distributed processing with the <a href="http://en.wikipedia.org/wiki/OpenCL">OpenCL</a> framework.  OpenCL kernels within ImageMagick permit image processing algorithms to execute across heterogeneous platforms consisting of CPUs, GPUs, and other processors.  Depending on your platform, speed-ups can be an order of magnitude faster than the traditional single CPU.</p>
 
 <p>First verify that your version of ImageMagick includes support for the OpenCL feature:</p>
 
-<pre>
+<pre><code>
 identify -version
 Features: DPC Cipher Modules OpenCL OpenMP
-</pre>
+</code></pre>
 
 <p>If so, run this command to realize a significant speed-up for image convolution:</p>
 
-<pre>
+<pre><code>
 convert image.png -convolve '-1, -1, -1, -1, 9, -1, -1, -1, -1' convolve.png
-</pre>
+</code></pre>
 
 <p>If an accelerator is not available or if the accelerator fails to respond, ImageMagick reverts to the non-accelerated convolution algorithm.</p>
 
 <p>Here is an example OpenCL kernel that convolves an image:</p>
 
-<pre class="pre-scrollable">static inline long ClampToCanvas(const long offset,const ulong range)
+<pre class="pre-scrollable"><code>static inline long ClampToCanvas(const long offset,const ulong range)
 {
   if (offset &lt; 0L)
     return(0L);
@@ -755,19 +755,19 @@
   destination[index].y=ClampToQuantum(gamma*sum.y);
   destination[index].z=ClampToQuantum(gamma*sum.z);
   destination[index].w=ClampToQuantum(sum.w);
-};</pre>
+};</code></pre>
 
 <p>See <a href="https://github.com/ImageMagick/ImageMagick/tree/ImageMagick-7/magick/accelerate.c">magick/accelerate.c</a> for a complete implementation of image convolution with an OpenCL kernel.</p>
 
 <p>Note, that under Windows, you might have an issue with TDR (Timeout Detection and Recovery of GPUs). Its purpose is to detect runaway tasks hanging the GPU by using an execution time threshold.  For some older low-end GPUs running the OpenCL filters in ImageMagick, longer execution times might trigger the TDR mechanism and pre-empt the GPU image filter.  When this happens, ImageMagick automatically falls back to the CPU code path and returns the expected results.  To avoid pre-emption, increase the <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/gg487368.aspx">TdrDelay</a> registry key.</p>
 
-<h2 class="magick-header"><a id="coders"></a>Custom Image Coders</h2>
+<h2 class="magick-post-title"><a id="coders"></a>Custom Image Coders</h2>
 
 <p>An image coder (i.e. encoder / decoder) is responsible for registering, optionally classifying, optionally reading, optionally writing, and unregistering one image format (e.g.  PNG, GIF, JPEG, etc.).  Registering an image coder alerts ImageMagick a particular format is available to read or write.  While unregistering tells ImageMagick the format is no longer available.  The classifying method looks at the first few bytes of an image and determines if the image is in the expected format.  The reader sets the image size, colorspace, and other properties and loads the pixel cache with the pixels.  The reader returns a single image or an image sequence (if the format supports multiple images per file), or if an error occurs, an exception and a null image.  The writer does the reverse.  It takes the image properties and unloads the pixel cache and writes them as required by the image format.</p>
 
 <p>Here is a listing of a sample <a href="https://www.imagemagick.org/source/mgk.c">custom coder</a>.  It reads and writes images in the MGK image format which is simply an ID followed by the image width and height followed by the RGB pixel values.</p>
 
-<pre class="pre-scrollable">/*
+<pre class="pre-scrollable"><code>/*
   Include declarations.
 */
 #include "magick/studio.h"
@@ -1167,23 +1167,23 @@
   } while (image_info-&gt;adjoin != MagickFalse);
   (void) CloseBlob(image);
   return(MagickTrue);
-}</pre>
+}</code></pre>
 
 <p>To invoke the custom coder from the command line, use these commands:</p>
 
-<pre>convert logo: logo.mgk
+<pre><code>convert logo: logo.mgk
 display logo.mgk
-</pre>
+</code></pre>
 
 <p>We provide the <a href="https://www.imagemagick.org/download/kits/">Magick Coder Kit</a> to help you get started writing your own custom coder.</p>
 
-<h2 class="magick-header"><a id="filters"></a>Custom Image Filters</h2>
+<h2 class="magick-post-title"><a id="filters"></a>Custom Image Filters</h2>
 
 <p>ImageMagick provides a convenient mechanism for adding your own custom image processing algorithms.  We call these image filters and they are invoked from the command line with the <a href="command-line-options.html#process">-process</a> option or from the MagickCore API method <a href="api/module.html#ExecuteModuleProcess">ExecuteModuleProcess()</a>.</p>
 
 <p>Here is a listing of a sample <a href="https://www.imagemagick.org/source/analyze.c">custom image filter</a>.  It computes a few statistics such as the pixel brightness and saturation mean and standard-deviation.</p>
 
-<pre class="pre-scrollable">#include &lt;stdio.h&gt;
+<pre class="pre-scrollable"><code>#include &lt;stdio.h&gt;
 #include &lt;stdlib.h&gt;
 #include &lt;string.h&gt;
 #include &lt;time.h&gt;
@@ -1380,11 +1380,11 @@
     (void) SetImageProperty(image,"filter:saturation:skewness",text);
   }
   return(MagickImageFilterSignature);
-}</pre>
+}</code></pre>
 
 <p>To invoke the custom filter from the command line, use this command:</p>
 
-<pre>convert logo: -process \"analyze\" -verbose info:
+<pre><code>convert logo: -process \"analyze\" -verbose info:
   Image: logo:
     Format: LOGO (ImageMagick Logo)
     Class: PseudoClass
@@ -1398,7 +1398,7 @@
     filter:saturation:mean: 5951.55
     filter:saturation:skewness: 2.42848
     filter:saturation:standard-deviation: 15575.9
-</pre>
+</code></pre>
 
 
 <p>We provide the <a href="https://www.imagemagick.org/download/kits/">Magick Filter Kit</a> to help you get started writing your own custom image filter.</p>
@@ -1423,4 +1423,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:56 -->
\ No newline at end of file
diff --git a/www/changelog.html b/www/changelog.html
index bb70eaa..2708e3e 100644
--- a/www/changelog.html
+++ b/www/changelog.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/changelog.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/changelog.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,171 +42,178 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
-<div class="magick-header"><dl><dt>2017-06-02  7.0.5-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<div class="magick-main">
+<div class="magick-header"><dl><dt class="col-md-4">2017-06-10  7.0.6-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+  <li> Release ImageMagick version 7.0.6-0, GIT revision 20194:b0c0d00:20170611.</li>
+<dt class="col-md-4">2017-06-10  7.0.6-1 Glenn Randers-Pehrson &lt;glennrp@image...&gt;</dt>
+  <li> coders/png.c: Accept exIf chunks whose data segment    erroneously begins with "Exif\0\0".</li>
+<dt class="col-md-4">2017-06-10  7.0.6-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+  <li> Introduce SetMagickSecurityPolicy() (MagickCore) and    MagickSetSecurityPolicy() (MagickWand) to set the ImageMagick security    policy (reference https://github.com/ImageMagick/ImageMagick/issues/407).</li>
+<dt class="col-md-4">2017-06-02  7.0.5-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-10, GIT revision 20155:38ebc02:20170602.</li>
-<dt>2017-06-01  7.0.5-10 Glenn Randers-Pehrson &lt;glennrp@image...&gt;</dt>
-  <li> Removed experimental zxIF chunk support; the proposal is dead.</li>
-<dt>2017-06-01  7.0.5-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-06-01  7.0.5-10 Glenn Randers-Pehrson &lt;glennrp@image...&gt;</dt>
+  <li> Removed experimental PNG zxIF chunk support; the proposal is dead.</li>
+<dt class="col-md-4">2017-06-01  7.0.5-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Fix choppy bitmap font rendering (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=32071).</li>
   <li> The +opaque option is not longer a noop (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=32081).</li>
   <li> Add support  for 'hex:' property.</li>
-<dt>2017-05-28  7.0.5-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-05-28  7.0.5-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-9, GIT revision 20113:8b67333:20170528.</li>
-<dt>2017-05-28  7.0.5-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-05-28  7.0.5-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Transient error validating the JPEG-2000 image format (reference    https://github.com/ImageMagick/ImageMagick/issues/501).</li>
   <li> Properly allocate DCM image colormap (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=32063).</li>
-<dt>2017-05-26  7.0.5-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-05-26  7.0.5-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-8, GIT revision 20099:870a016:20170526.</li>
-<dt>2017-05-23  7.0.5-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-05-23  7.0.5-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Improper allocation of memory for IM instances without threads (reference    https://github.com/ImageMagick/ImageMagick/issues/497).</li>
   <li> Delete corrupt image from list (reference    https://github.com/ImageMagick/ImageMagick/issues/500).</li>
-<dt>2017-05-19  7.0.5-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-05-19  7.0.5-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-6, GIT revision 20078:7ce2d38:20170519.</li>
-<dt>2017-05-15  7.0.5-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-05-15  7.0.5-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Support various image operators for the compare utility (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=2&amp;t=31938).</li>
  2017-05-12  7.0.5-6 Cristy  &lt;quetzlzacatenango@image...&gt;</li>
   <li> Release ImageMagick version 7.0.5-6, GIT revision 20039:9371904:20170512.</li>
-<dt>2017-05-10  7.0.5-6 John Cupitt &lt;jcupitt@gmail.com&gt;</dt>
+<dt class="col-md-4">2017-05-10  7.0.5-6 John Cupitt &lt;jcupitt@gmail.com&gt;</dt>
   <li> Revise DICOM window and rescale handling (reference     https://github.com/ImageMagick/ImageMagick/pull/484)</li>
-<dt>2017-05-06  7.0.5-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-05-06  7.0.5-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Restore the -alpha Shape option (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31879).</li>
   <li> Fix transient PDF bug (reference    https://github.com/ImageMagick/ImageMagick/issues/463).</li>
   <li> The +opaque option now works on all channels (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31862).</li>
   <li> Ensure backwards compatibility for the -combine option (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31855).</li>
   <li> Check for EOF conditions for RLE image format.</li>
   <li> Reset histogram page geometry (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31920).</li>
-<dt>2017-04-24  7.0.5-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-04-24  7.0.5-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-5, GIT revision 19915:12eec43:20170424.</li>
-<dt>2017-03-26  7.0.5-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-03-26  7.0.5-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Minimize buffer copies to improve OpenCL performance.</li>
   <li> Morphology thinning is no longer a no-op (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31650).</li>
   <li> Patch two PCD writer problems, corrupt output and dark pixels (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=3164).</li>
   <li> Support ICC based PDF's (reference    https://github.com/ImageMagick/ImageMagick/issues/417).</li>
   <li> Fix improper EPS clip path rendering (reference    http://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31722).</li>
-<dt>2017-03-24  7.0.5-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-03-24  7.0.5-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-4, GIT revision 19754:350fff3:20170324.</li>
-<dt>2017-03-21  7.0.5-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-03-21  7.0.5-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Respect -loop option for animate -window (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31619).</li>
-<dt>2017-03-17  7.0.5-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-03-17  7.0.5-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-3, GIT revision 19741:070c3fb:20170317.</li>
-<dt>2017-03-14  7.0.5-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-03-14  7.0.5-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Support namespaces for the security policy.</li>
   <li> Support the -authenticate option for PDF (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31530).</li>
-<dt>2017-03-11  7.0.5-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-03-11  7.0.5-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-2, GIT revision 19696:da91a7c:20170311.</li>
-<dt>2017-03-06  7.0.5-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-03-06  7.0.5-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Respect throttle policy (reference    https://github.com/ImageMagick/ImageMagick/issues/393).</li>
   <li> Return proper minima / maxima (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31377).</li>
-<dt>2017-03-03  7.0.5-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-03-03  7.0.5-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-1, GIT revision 19662:b7f455a:20170303.</li>
-<dt>2017-02-21  7.0.5-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-21  7.0.5-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Fix Spurious memory allocation message (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31438).</li>
   <li> Identical images should return inf for PSNR (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31487).</li>
-<dt>2017-02-20  7.0.5-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-20  7.0.5-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.5-0, GIT revision 19616:505fea9:20170220.</li>
-<dt>2017-02-20  7.0.5-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-20  7.0.5-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Fix transient bug with -separate option (reference    https://github.com/ImageMagick/ImageMagick/issues/385).</li>
-<dt>2017-02-18  7.0.4-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-18  7.0.4-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-10, GIT revision 19608:fe757a2:20170218.</li>
-<dt>2017-02-18  7.0.4-10 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2017-02-18  7.0.4-10 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Fixed fd leak for webp coder (reference    https://github.com/ImageMagick/ImageMagick/pull/382)</li>
-<dt>2017-02-15  7.0.4-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-15  7.0.4-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Prevent random pixel data for corrupt JPEG image (bug report from    Hirokazu Moriguchi, Sony).</li>
   <li> Restore -mattecolor option.</li>
   <li> Support pixel-cache and shred security policies.</li>
   <li> Bump Magick++ SO.  Previously a global replace changed matteColor to    alphaColor.</li>
-<dt>2017-02-14  7.0.4-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-14  7.0.4-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-9, GIT revision 19580:d474b37:20170214.</li>
-<dt>2017-02-14  7.0.4-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-14  7.0.4-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Revert patch that did not set update trait on alpha channel.</li>
-<dt>2017-02-13  7.0.4-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-13  7.0.4-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-8, GIT revision 19574:7642384:20170213.</li>
-<dt>2017-02-09  7.0.4-8 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2017-02-09  7.0.4-8 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Fixed memory leak when creating nested exceptions in Magick++ (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=23&amp;p=142634)</li>
-<dt>2017-02-09  7.0.4-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-09  7.0.4-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Unbreak build without JPEG support (reference    https://github.com/ImageMagick/ImageMagick/pull/373).</li>
   <li> Document behavior change in the security policy (thanks to yoya @    https://blog.awm.jp/2017/02/09/imagemagick-en/).</li>
   <li> Return unbiased standard deviation for image statistics (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31377).</li>
   <li> Don't set update trait on alpha channel (private e-mail concerning    -levels-colors option).</li>
-<dt>2017-02-04  7.0.4-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-02-04  7.0.4-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-7, GIT revision 19513:5783e57:20170204.</li>
-<dt>2017-01-28  7.0.4-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-28  7.0.4-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Sanitize comments that include braces for the MIFF image format (reference    https://github.com/ImageMagick/ImageMagick/issues/368).</li>
-<dt>2017-01-27  7.0.4-7 Glenn Randers-Pehrson &lt;glennrp@image...&gt;</dt>
+<dt class="col-md-4">2017-01-27  7.0.4-7 Glenn Randers-Pehrson &lt;glennrp@image...&gt;</dt>
   <li> coders/png.c: Added support for a proposed new PNG chunk    (zxIf, read-only) that is currently being discussed on the    png-mng-misc at lists.sourceforge.net mailing list.  Enable    exIf and zxIf with CPPFLAGS="-DexIf_SUPPORTED -DxzIf_SUPPORTED".    If exIf is enabled, only the uncompressed exIF chunk will be    written and the hex-encoded zTXt chunk containing the raw Exif    profile won't be written.</li>
-<dt>2017-01-27  7.0.4-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-27  7.0.4-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-6, GIT revision 19442:4747de9:20170127.</li>
-<dt>2017-01-27  7.0.4-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-27  7.0.4-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Uninitialized data in MAT image format (reference    https://github.com/ImageMagick/ImageMagick/issues/362).</li>
   <li> Properly auto-fit caption (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30887).</li>
   <li> Correction to composite Over operator (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31282).</li>
   <li> Respect gravity option (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31284).</li>
-<dt>2017-01-22  7.0.4-6 Glenn Randers-Pehrson &lt;glennrp@image...&gt;</dt>
+<dt class="col-md-4">2017-01-22  7.0.4-6 Glenn Randers-Pehrson &lt;glennrp@image...&gt;</dt>
   <li> Renamed read_vpag_chunk_callback() function to png_user_chunk_callback()    in coders/png.c</li>
   <li> Implemented a private PNG caNv (canvas) chunk for remembering the    original dimensions and offsets when an image is cropped.  Previously    we used the oFFs and vpAg chunks for this purpose, but this had potential    conflicts with other applications that also use the oFFs chunk.</li>
   <li> coders/png.c: Added support for a proposed new PNG chunk (exIf    read-write, eXIf read-only) that is currently being discussed on the    png-mng-misc at lists.sourceforge.net mailing list.</li>
-<dt>2017-01-22  7.0.4-6 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2017-01-22  7.0.4-6 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Replaced CoderSeekableStreamFlag with CoderDecoderSeekableStreamFlag and    CoderEncoderSeekableStreamFlag.</li>
-<dt>2017-01-21  7.0.4-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-21  7.0.4-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-5, GIT revision 19381:7ae396f:20170121.</li>
-<dt>2017-01-18  7.0.4-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-18  7.0.4-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Don't set background for transparent tiled images (reference    http://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31210).</li>
-<dt>2017-01-14  7.0.4-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-14  7.0.4-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-4, GIT revision 19361:a12953c:20170114.</li>
-<dt>2017-01-14  7.0.4-4 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2017-01-14  7.0.4-4 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Added support for RGB555, RGB565, ARGB4444 and ARGB1555 to the    BMP encoder (reference    https://github.com/ImageMagick/ImageMagick/issues/344).</li>
-<dt>2017-01-10  7.0.4-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-10  7.0.4-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Recognize XML policy closing tags (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31182).</li>
   <li> Fix memory leak in the MPC format.</li>
-<dt>2017-01-07  7.0.4-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-07  7.0.4-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-3, GIT revision 19329:930ca78:20170107.</li>
-<dt>2017-01-04  7.0.4-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-04  7.0.4-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Increase memory allocation for TIFF pixels (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31161).</li>
-<dt>2017-01-03  7.0.4-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-03  7.0.4-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-2, GIT revision 19318:8766311:20170103.</li>
-<dt>2017-01-02  7.0.4-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2017-01-02  7.0.4-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Validation unit test for MNG works again.</li>
-<dt>2016-12-31  7.0.4-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-12-31  7.0.4-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-1, GIT revision 19292:c5ccfa8:20161231.</li>
-<dt>2016-12-26  7.0.4-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-12-26  7.0.4-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Initialize draw_info alpha member to OpaqueAlpha.</li>
   <li> Monochrome images no longer have inverted colors (reference    https://github.com/ImageMagick/ImageMagick/issues/332).</li>
-<dt>2016-12-18  7.0.4-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-12-18  7.0.4-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.4-0, GIT revision 19221:d5e8abc:20161218.</li>
-<dt>2016-12-14  7.0.4-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-12-14  7.0.4-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Do not close path for linejoins of round (reference   https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31039).</li>
-<dt>2016-12-10  7.0.3-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-12-10  7.0.3-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-10, GIT revision 19191:338f088:20161210.</li>
-<dt>2016-12-07  7.0.3-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-12-07  7.0.3-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Set colorspace to sRGB if -append has non-homogenous colorspaces (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=29105).</li>
   <li> Respect connected-components:area-threshold define (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31006). </li>
   <li> Enable alpha channel if background color is non-opaque (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31016).</li>
   <li> Return correct offset for negative index for -fx option (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31019).</li>
   <li> Fixed improper scaling of certain FITS images (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31028).</li>
   <li> Properly center text label (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=31027).</li>
-<dt>2016-12-05  7.0.3-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-12-05  7.0.3-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-9, GIT revision 19139:6fed3f1:20161205.</li>
-<dt>2016-11-26  7.0.3-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-11-26  7.0.3-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Support the compare -read-mask option.</li>
   <li> Support read-masks for the -modulate option.</li>
   <li> Prevent buffer overflow when streaming an image (reference    https://github.com/ImageMagick/ImageMagick/issues/312).</li>
   <li> Fix possible buffer overflow when writing compressed TIFFS (vulnerability    report from Cisco Talos, CVE-2016-8707).</li>
-<dt>2016-11-15  7.0.3-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-11-15  7.0.3-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-8, GIT revision 19067:5aceded:20161125.</li>
-<dt>2016-11-18  7.0.3-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-11-18  7.0.3-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Support the phash:colorspaces and phash:normalize options.</li>
   <li> If a convenient line break is not found, force it for caption: (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30887).</li>
   <li> Set alpha member of draw structure to OpaqueAlpha (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30894).</li>
@@ -216,186 +222,186 @@
   <li> Permit EPT images with just a TIFF or EPS image, not both (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30921).</li>
   <li> The -clone option no longer leaks memory.</li>
   <li> Render to clip mask rather than image for clip-path MVG graphics primitive.</li>
-<dt>2016-11-15  7.0.3-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-11-15  7.0.3-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-7, GIT revision 19024:87aca83:20161115.</li>
-<dt>2016-11-10  7.0.3-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-11-10  7.0.3-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Web pages were broken when we moved to HTTPS protocol.</li>
-<dt>2016-11-08  7.0.3-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-11-08  7.0.3-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-6, GIT revision 19001:4cff747:20161108.</li>
-<dt>2016-11-01  7.0.3-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-11-01  7.0.3-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Off by one memory allocation (reference    https://github.com/ImageMagick/ImageMagick/issues/296).</li>
   <li> The -extent option now matches the results of IMv6 (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=1&amp;t=30779).</li>
   <li> Prevent fault in MSL interpreter (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30797).</li>
   <li> Mask composite produces proper results for the convert utility (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=29675).    </li>
-<dt>2016-10-10  7.0.3-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-10-10  7.0.3-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-5, GIT revision 18975:a8174a2:20161030.</li>
-<dt>2016-10-16  7.0.3-5 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2016-10-16  7.0.3-5 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Added layer RLE compression to the PSD encoder.</li>
-<dt>2016-10-10  7.0.3-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-10-10  7.0.3-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-4, GIT revision 18937:83da034:20161010.</li>
-<dt>2016-10-10  7.0.3-4 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2016-10-10  7.0.3-4 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Fixed incorrect parsing with ordered dither. (reference    https://github.com/ImageMagick/ImageMagick/issues/254)</li>
-<dt>2016-10-10  7.0.3-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-10-10  7.0.3-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Unit test pass again after small SUN image patch.</li>
-<dt>2016-10-08  7.0.3-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-10-08  7.0.3-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-3, GIT revision 18924:d6614e7:20161008.</li>
-<dt>2016-10-07  7.0.3-3 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2016-10-07  7.0.3-3 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Fixed incorrect RLE decoding when reading a DCM image that contains    multiple segments.</li>
-<dt>2016-10-02  7.0.3-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-10-02  7.0.3-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-2, GIT revision 18887:6b27c5b:20161002.</li>
-<dt>2016-09-27  7.0.3-2 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2016-09-27  7.0.3-2 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Fixed incorrect RLE decoding when reading an SGI image (reference     https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30514)</li>
-<dt>2016-09-20  7.0.3-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-09-20  7.0.3-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-1, GIT revision 18851:ad91ea8:20160920.</li>
-<dt>2016-09-16  7.0.3-1 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2016-09-16  7.0.3-1 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Added layer RLE compression to the PSD encoder.</li>
   <li> Added define 'psd:preserve-opacity-mask' to preserve the opacity mask    in a PSD file.</li>
   <li> Fixed issue where the display window was used instead of the data window    when reading EXR files (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;p=137849).</li>
-<dt>2016-09-05  7.0.3-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-09-05  7.0.3-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.3-0, GIT revision 18786:10aa64c:20160905.</li>
-<dt>2016-08-29  7.0.3-0 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2016-08-29  7.0.3-0 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Fixed reading DXT1 images with an alpha channel.</li>
   <li> Fixed incorrect padding calculation in PSD encoder.</li>
-<dt>2016-08-27  7.0.2-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-08-27  7.0.2-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-10, GIT revision 18750:e3335b3:20160827.</li>
-<dt>2016-08-27  7.0.2-10 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2016-08-27  7.0.2-10 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Added define 'psd:additional-info' to preserve the additional information    in a PSD file.</li>
-<dt>2016-08-15  7.0.2-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-08-15  7.0.2-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Prevent buffer overflow in BMP &amp; SGI coders (bug report from    pwchen&amp;rayzhong of tencent).</li>
   <li> Prevent buffer overflow and other problems in SIXEL, PDB, MAP, TIFF and    CALS coders (bug report from Donghai Zhu).</li>
   <li> The -stream option now increments the pixel pointer properly (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30327).</li>
-<dt>2016-08-14  7.0.2-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-08-14  7.0.2-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-9, GIT revision 18707:2c02f09:20160814.</li>
-<dt>2016-08-14  7.0.2-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-08-14  7.0.2-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Fix compile error in opencl.c (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30289).</li>
   <li> Eliminate compiler warning.</li>
-<dt>2016-08-14  7.0.2-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-08-14  7.0.2-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-8, GIT revision 18698:74b1d5d:20160814.</li>
-<dt>2016-08-07  7.0.2-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-08-07  7.0.2-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Prevent spurious removal of MPC cache files (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30256).</li>
   <li> Note alpha channel when combining 4 or more images (reference    https://github.com/ImageMagick/ImageMagick/issues/250).</li>
-<dt>2016-08-06  7.0.2-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-08-06  7.0.2-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-7, GIT revision 10980:ecc03a2:20160806.</li>
-<dt>2016-08-01  7.0.2-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-08-01  7.0.2-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Evaluate lazy pixel cache morphology to prevent buffer overflow (bug report    from Ibrahim M. El-Sayed).</li>
   <li> Prevent buffer overflow (bug report from Max Thrane).</li>
   <li> Prevent memory use after free (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=30245).</li>
-<dt>2016-07-30  7.0.2-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-07-30  7.0.2-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-6, GIT revision 18651:df24175:20160729.</li>
-<dt>2016-07-29  7.0.2-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-07-29  7.0.2-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Support -region option (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=1&amp;t=29692).</li>
-<dt>2016-07-21  7.0.2-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-07-21  7.0.2-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-5, GIT revision 18627:2b5ddbd:20160721.</li>
-<dt>2016-07-13  7.0.2-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-07-13  7.0.2-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Fix MVG stroke-opacity (reference    https://github.com/ImageMagick/ImageMagick/issues/229).</li>
   <li> Prevent possible buffer overflow when reading TIFF images (bug report from    Shi Pu of MS509 Team).</li>
   <li> Initialize index channel to get expected results from the stegano coder.</li>
-<dt>2016-07-11  7.0.2-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-07-11  7.0.2-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-4, GIT revision 18591:50debe5:20160710.</li>
-<dt>2016-07-10  7.0.2-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-07-10  7.0.2-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> To comply with the SVG standard, use stroke-opacity for transparent strokes.</li>
   <li> Define CompositeChannels mask to Red, Green, Blue, Alpha, and Black.</li>
-<dt>2016-07-09  7.0.2-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-07-09  7.0.2-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-3, GIT revision 18572:28560fc:20160709.</li>
-<dt>2016-07-01  7.0.2-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-07-01  7.0.2-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Patch so -kuwahara option can preserve colormapped edges.</li>
   <li> The histogram coder now returns the correct extent.</li>
   <li> Use CopyMagickString() rather than CopyMagickMemory() for strings.</li>
-<dt>2016-06-26  7.0.2-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-06-26  7.0.2-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-2, GIT revision 18514:a7b5b46:20160626.</li>
-<dt>2016-06-23  7.0.2-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
-  <li> Correct for numerical instability (reference    https://github.com/ImageMagick/ImageMagick/issues/218).<dt>			 </dt>
+<dt class="col-md-4">2016-06-23  7.0.2-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+  <li> Correct for numerical instability (reference    https://github.com/ImageMagick/ImageMagick/issues/218).<dt class="col-md-4">			 </dt>
   <li>2016-06-21  7.0.2-1 Cristy  &lt;quetzlzacatenango@image...&gt;</li>
   <li> Release ImageMagick version 7.0.2-1, GIT revision 18479:931319b:20160622.</li>
-<dt>2016-06-17  7.0.2-1 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
+<dt class="col-md-4">2016-06-17  7.0.2-1 Dirk Lemstra &lt;dirk@lem.....org&gt;</dt>
   <li> Added support for GROUP4 compression to the FAX coder.</li>
-<dt>2016-06-12  7.0.2-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-06-12  7.0.2-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Distort no longer converts grayscale image to sRGB (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=1&amp;t=29895).</li>
   <li> Don't return a zero bounding box for QueryMultilineFontMetrics() (reference    https://github.com/ImageMagick/ImageMagick/issues/222).</li>
-<dt>2016-06-12  7.0.2-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-06-12  7.0.2-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.2-0, GIT revision 10884:f0e15e8:20160612.</li>
-<dt>2016-06-09  7.0.2-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-06-09  7.0.2-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Backoff finite precision epsilon (reference    https://github.com/ImageMagick/ImageMagick/issues/215).</li>
   <li> Fix drawing glitch for stroke widths greater than 2 (reference    https://github.com/ImageMagick/ImageMagick/issues/218).</li>
-<dt>2016-06-05  7.0.1-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-06-05  7.0.1-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-10, GIT revision 18406:ba4ad2d:20160607.</li>
-<dt>2016-06-04  7.0.1-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-06-04  7.0.1-10 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Deny indirect reads by policy, remove policy to permit, e.g.,    convert caption:@mytext.txt ...</li>
   <li> RLE check for pixel offset less than 0 (heap overflow report from Craig    Young).</li>
   <li> Properly initialze PES blocks (reference    https://github.com/ImageMagick/ImageMagick/issues/213).</li>
-<dt>2016-06-03  7.0.1-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-06-03  7.0.1-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-9, GIT revision 10847:339f803:20160602.</li>
-<dt>2016-06-02  7.0.1-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-06-02  7.0.1-9 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Fix small memory leak (patch provided by Андрей Черный).</li>
   <li> Coder path traversal is not authorized (bug report provided by    Masaaki Chida).</li>
   <li> Turn off alpha channel for the compare difference image (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=29828).</li>
-<dt>2016-05-31  7.0.1-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-31  7.0.1-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-8, GIT revision 18334:97775b5:20160531.</li>
-<dt>2016-05-31  7.0.1-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-31  7.0.1-8 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Support configure script --enable-pipes option to enable pipes (|) in    filenames.</li>
   <li> Support configure script --enable-indirect-reads option to enable    indirect reads (@) in filenames.</li>
-<dt>2016-05-30  7.0.1-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-30  7.0.1-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-7, GIT revision 18321:5511ef5:20160530.</li>
-<dt>2016-05-25  7.0.1-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-25  7.0.1-7 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Security improvements to TEXT coder broke it (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=29754).</li>
   <li> Fix stroke offset problem for -annotate (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=29626).</li>
   <li> Don't interpret -fx option arguments (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=29774);</li>
   <li> Add additional checks to DCM reader to prevent data-driven faults (bug    report from Hanno Böck).</li>
-<dt>2016-05-21  7.0.1-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-21  7.0.1-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-6, GIT revision 18241:d4f277c:20160521.</li>
-<dt>2016-05-20  7.0.1-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-20  7.0.1-6 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Fixed proper placement of text annotation for east / west gravity.</li>
-<dt>2016-05-18  7.0.1-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-18  7.0.1-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-5, GIT revision 10789:f7c2e89:20160518,</li>
-<dt>2016-05-18  7.0.1-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-18  7.0.1-5 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Process channels independently for -channel -equalize (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=3&amp;t=29708).</li>
   <li> Fix pixel cache on disk regression (reference    https://github.com/ImageMagick/ImageMagick/issues/202).</li>
-<dt>2016-05-15  7.0.1-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-15  7.0.1-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-4, GIT revision 10778:52dae14:20160516.</li>
-<dt>2016-05-10  7.0.1-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-10  7.0.1-4 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Prevent possible shell command injection vulnerability through the    authenticate parameter of the PDF, PCL and XPS coders (report from    Erez Turjeman).</li>
   <li> Quote passwords when passed to a delegate program.</li>
   <li> Iterate channels over source image rather than destination (bug report    from Hanno Böck).</li>
   <li> Can read geo-related EXIF metdata once-again (reference    https://github.com/ImageMagick/ImageMagick/issues/198).</li>
   <li> Sanitize all delegate emedded formatting characters.</li>
   <li> Don't sync pixel cache in AcquireAuthenticCacheView() (bug report from    Hanno Böck).</li>
-<dt>2016-05-09  7.0.1-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-09  7.0.1-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-3, GIT revision 10755:d540dda:20160509.</li>
-<dt>2016-05-07  7.0.1-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-07  7.0.1-3 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Remove https delegate.</li>
-<dt>2016-05-06  7.0.1-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-06  7.0.1-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Release ImageMagick version 7.0.1-2, GIT revision 10741:5746147:20160507.</li>
-<dt>2016-05-04  7.0.1-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-04  7.0.1-2 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Check for buffer overflow in magick/draw.c/DrawStrokePolygon().</li>
   <li> Replace show delegate title with image filename rather than label.</li>
   <li> Fix GetNextToken() off by one error.</li>
   <li> Remove support for internal ephemeral coder.</li>
-<dt>2016-05-03  7.0.1-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-03  7.0.1-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> New version 7.0.1-1, GIT revision 10723:9fc8a0c:20160503.</li>
-<dt>2016-05-03  7.0.1-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-05-03  7.0.1-1 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> Sanitize input filename for http / https delegates (improved patch).</li>
   <li> Fix for possible security vulnerabilities (reference    https://www.imagemagick.org/discourse-server/viewtopic.html?f=4&amp;t=29588).</li>
-<dt>2016-04-30  7.0.1-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2016-04-30  7.0.1-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> New version 7.0.1-0, GIT revision 10716:b527bce:20160430.</li>
-<dt>2016-01-30  7.0.0-0 	Fahad-Alsaidi &amp; ShamsaHamed</dt>
+<dt class="col-md-4">2016-01-30  7.0.0-0 	Fahad-Alsaidi &amp; ShamsaHamed</dt>
   <li> Add support for languages that require complex text layout (reference    https://github.com/ImageMagick/ImageMagick/pull/88).</li>
-<dt>2012-04-27  7.0.0-0 Anthony thyssen &lt;A.Thyssen@griffith...&gt;</dt>
+<dt class="col-md-4">2012-04-27  7.0.0-0 Anthony thyssen &lt;A.Thyssen@griffith...&gt;</dt>
   <li> Allow the use of set and escapes when no images in memory    (unless you attempt to access per-image meta-data)    Currently does not include %[fx:...] and %[pixel:...]</li>
-<dt>2012-10-05  7.0.0-0 Anthony thyssen &lt;A.Thyssen@griffith...&gt;</dt>
+<dt class="col-md-4">2012-10-05  7.0.0-0 Anthony thyssen &lt;A.Thyssen@griffith...&gt;</dt>
   <li> Rather than replicate 'options' into 'artifacts' make a link    from image to image_info and lookup a global option if no artifact    is defined.</li>
-<dt>2012-09-11  7.0.0-0 Nicolas Robidoux &lt;nicolas.robidoux@gmail...&gt;</dt>
+<dt class="col-md-4">2012-09-11  7.0.0-0 Nicolas Robidoux &lt;nicolas.robidoux@gmail...&gt;</dt>
   <li> sigmoidal-contrast:</li>
   <li> Remove unnecessary initial ClampToQuantum.</li>
-<dt>2012-09-10  7.0.0-0 Nicolas Robidoux &lt;nicolas.robidoux@gmail...&gt;</dt>
+<dt class="col-md-4">2012-09-10  7.0.0-0 Nicolas Robidoux &lt;nicolas.robidoux@gmail...&gt;</dt>
   <li> sigmoidal-contrast:</li>
   <li> Direct computation, without LUT;</li>
   <li> Fix re-declaration of i (at the top, and inside a conditional).</li>
-<dt>2012-09-04  7.0.0-0 Nicolas Robidoux &lt;nicolas.robidoux@gmail...&gt;</dt>
+<dt class="col-md-4">2012-09-04  7.0.0-0 Nicolas Robidoux &lt;nicolas.robidoux@gmail...&gt;</dt>
   <li> Add tanh/atanh clone of legacy sigmoidal map (faster &amp; more accurate).</li>
-<dt>2012-08-08  7.0.0-0 Nicolas Robidoux &lt;nicolas.robidoux@gmail...&gt;</dt>
+<dt class="col-md-4">2012-08-08  7.0.0-0 Nicolas Robidoux &lt;nicolas.robidoux@gmail...&gt;</dt>
   <li> Add final ClampToQuantum in sigmoidal colormap loop.</li>
   <li> Remove OpenMP calls from colormap update loops.</li>
-<dt>2011-08-01  7.0.0-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
+<dt class="col-md-4">2011-08-01  7.0.0-0 Cristy  &lt;quetzlzacatenango@image...&gt;</dt>
   <li> New version 7.0.0-0.</li>
 </li></dl></div>  <footer class="magick-footer">
     <p><a href="support.html">Donate</a> •
@@ -416,4 +422,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:56 -->
\ No newline at end of file
diff --git a/www/cipher.html b/www/cipher.html
index 36b7f4a..7c7b276 100644
--- a/www/cipher.html
+++ b/www/cipher.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/cipher.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/cipher.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="cipher.html#encipher">Encipher an Image</a> • <a href="cipher.html#decipher">Decipher an Image</a> • <a href="cipher.html#caveats">Encipher and Decipher Caveats</a></p>
 
@@ -63,29 +63,29 @@
 
 <p>You could use an <a href="http://www.wizards-toolkit.org/www/encipher.html">enciphering</a> utility to scramble your image but they typically scramble the entire file making it unrecognizable as an image format.  With ImageMagick, only the pixels are scrambled.  The scrambled image continues to be recognized as an image and will even display in your web page.  However, the content appears as gibberish, nothing like the original content.</p>
 
-<h2 class="magick-header"><a id="encipher"></a>Encipher an Image</h2>
+<h2 class="magick-post-title"><a id="encipher"></a>Encipher an Image</h2>
 
 <p>Use the <a href="command-line-options.html#encipher">-encipher</a> option to scramble your image so that it is unrecognizable.  The option requires a filename that contains your passphrase.  In this example we scramble an image and save it in the PNG format:</p>
 
-<pre>
+<pre><code>
 convert rose.jpg -encipher passphrase.txt rose.png
-</pre>
+</code></pre>
 
 <p>Here we encipher an image using another image as the passphrase:</p>
 
-<pre>
+<pre><code>
 convert rose.jpg -encipher smiley.gif rose.png
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="decipher"></a>Decipher an Image</h2>
+<h2 class="magick-post-title"><a id="decipher"></a>Decipher an Image</h2>
 
 <p>Use the <a href="command-line-options.html#decipher">-decipher</a> option to unscramble your image so that it is recognizable once again.  The option requires a filename that contains your passphrase.  In this example we unscramble an image and save it in the JPEG format:</p>
 
-<pre>
+<pre><code>
 convert rose.png -decipher passphrase.txt rose.jpg
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="caveats"></a>Encipher and Decipher Caveats</h2>
+<h2 class="magick-post-title"><a id="caveats"></a>Encipher and Decipher Caveats</h2>
 
 <p>Some formats do not support enciphered pixels-- the JPEG or GIF format, for
 example.  To ensure your image format is supported, encipher a test image and
@@ -140,4 +140,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/color-management.html b/www/color-management.html
index acd5520..19a74e8 100644
--- a/www/color-management.html
+++ b/www/color-management.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/color-management.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/color-management.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">Color management has changed significantly between ImageMagick version 6.7.5-5 and 6.8.0-3 in order to better conform to color and grayscale standards.</p>
@@ -64,63 +64,63 @@
 
 <p>ImageMagick supports color profiles, however, for images without a profile or a declaration of colorspace, ImageMagick assumes non-linear sRGB.  Most image processing algorithms assume a linear colorspace, therefore it might be prudent to convert to linear color or remove the gamma function before certain image processing algorithms are applied. For example,</p>
 
-<pre>
+<pre><code>
 convert myimage.jpg -colorspace RGB -resize 200% -colorspace sRGB mybigimage.jpg
-</pre>
+</code></pre>
 
 <p>To declare that an image is linear RGB rather than sRGB, you can use the set option:</p>
 
-<pre>
+<pre><code>
 convert myimage.png -set colorspace RGB myRGBimage.png
-</pre>
+</code></pre>
 
 <p>Afterwards, the verbose information for the output file lists the colorspace as RGB. This only works on image types containing meta data that distinguishes between linear RGB and non-linear sRGB, such as PNG and GIF. Therefore, if the above command is run with a JPG or TIF output format, the verbose information for the colorspace still shows sRGB. In order to properly have the JPG output know that it is linear RGB, include an appropriate color profile.</p>
 
 
 <p>The second major change treats any grayscale image as linear rather than non-linear, as it was previously.  This change is appropriate, since many types of processing requires a linear colorspace. This means that the conversion of a color image to grayscale via <code>-colorspace gray</code> looks darker relative to previous versions of ImageMagick (note that desaturating to convert to grayscale does not convert the image to linear grayscale). If you prefer to keep the conversion to non-linear grayscale, set the colorspace of the input to linear RGB so that <code>-colorspace gray</code> does not apply the gamma correction during the conversion process. For example, the following produces a non-linear grayscale result.</p>
 
-<pre>
+<pre><code>
 convert myimage.png -set colorspace RGB -colorspace gray myRGBimage.png
-</pre>
+</code></pre>
 
 <p>The same concept is needed when separating channels. Normally, the conversion to separate each channel of an sRGB color image produces separate linear grayscale images. However the same concept can be applied, if it is desired to keep the separate channels as non-linear grayscale. For example, the following produces non-linear grayscale channels.</p>
 
-<pre>
+<pre><code>
 convert myimage.png -set colorspace RGB -separate myimage_channels_%d.png
-</pre>
+</code></pre>
 
 <p>When separating and recombining channels, with potential intermediate processing, it is important to identify the colorspace used, especially during the recombination. For example,</p>
 
-<pre>
+<pre><code>
 convert myimage.png -separate myimage_channels_%d.png
 convert myimage_channels_*.png -combine myimage2.png
-</pre>
+</code></pre>
 
 <p>In the above example, the result is darker than the original, because the channels were separate as linear gray and subsequently combined as linear color. In order to return the channels back to sRGB, one must change the colorspace from RGB back to sRGB after the <code>-combine</code> step.</p>
 
-<pre>
+<pre><code>
 convert myimage.png -separate myimage_channels_%d.png
 convert myimage_channels_*.png -combine -colorspace sRGB myimage2.png
-</pre>
+</code></pre>
 
 <p>If one desires to separate to non-linear grayscale channels, recombine them later, perhaps after some processing, then use the same concept as above for maintaining non-linear grayscale:</p>
 
-<pre>
+<pre><code>
 convert myimage.png -set colorspace RGB -separate myimage_channels_%d.png
 convert myimage_channels_*.png -combine -colorspace RGB -set colorspace sRGB myimage2.png
-</pre>
+</code></pre>
 
 <p>When converting to another colorspace and back, such as between sRGB and HSL, the following two commands handle the first case of linear channels and the second case of non-linear channels:</p>
 
-<pre>
+<pre><code>
 convert myimage.png -colorspace HSL -separate myimage_channels_%d.png
 convert myimage_channels_*.png -set colorspace HSL -combine -colorspace sRGB myimage2.png
-</pre>
+</code></pre>
 
-<pre>
+<pre><code>
 convert myimage.png -set colorspace RGB -colorspace HSL -separate myimage_channels_%d.png
 convert myimage_channels_*.png -set colorspace HSL -combine -colorspace RGB -set colorspace sRGB myimage2.png
-</pre>
+</code></pre>
 
 <p>A majority of the image formats assume an sRGB colorspace (e.g. JPEG, PNG, etc.). A few support only linear RGB (e.g. EXR, DPX, CIN, HDR) or only linear GRAY (e.g. PGM). A few formats support CMYK. For example JPG does, but PNG does not. Then there is the occasional format that also supports LAB (that is CieLAB) (e.g. TIFF, PSD, JPG, JP2). For additional information, see the <a href="https://www.imagemagick.org/script/formats.html#colorspace" >Colorspace</a> and <a href="https://www.imagemagick.org/script/formats.html#supported" >Supported Formats</a> pages.</p>
 
@@ -150,4 +150,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:03 -->
\ No newline at end of file
diff --git a/www/color.html b/www/color.html
index e85c81e..8fff2b0 100644
--- a/www/color.html
+++ b/www/color.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/color.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/color.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="color.html#usage">Example Usage</a> • <a href="color.html#models">Color Model Specification</a> • <a href="color.html#color_names">List of Color Names</a></p>
 
@@ -63,25 +63,25 @@
 
 <p>Use the <a href="../contrib/color-converter.html">Color Converter</a> to supply any valid ImageMagick color specification as described below to see a color swatch of that color and to convert to all the other color models.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>Each of the following commands produces the same <var>lime</var> border around the image. (Use "double quotes" for Windows.)</p>
 
-<pre>
+<pre><code>
 convert -bordercolor lime -border 10 image.jpg image.png
 convert -bordercolor '#0f0' -border 10 image.jpg image.png
 convert -bordercolor '#00ff00' -border 10 image.jpg image.png
 convert -bordercolor 'rgb(0,255,0)' -border 10 image.jpg image.png
 convert -bordercolor 'rgb(0,100%,0)' -border 10 image.jpg image.png
-</pre>
+</code></pre>
 
 <p>The list of recognized color names (for example, <var>aqua</var>, <var>black</var>, <var>blue</var>, <var>fuchsia</var>, <var>gray</var>, <var>green</var>, <var>lime</var>, <var>maroon</var>, <var>navy</var>, <var>olive</var>, <var>purple</var>, <var>red</var>, <var>silver</var>, <var>teal</var>, <var>white</var>, <var>yellow</var>, and others) is shown in a table further below.</p>
 
-<h2 class="magick-header"><a id="models"></a>Color Model Specification</h2>
+<h2 class="magick-post-title"><a id="models"></a>Color Model Specification</h2>
 
 <p>The sRGB, CMYK, HSL and HSB color models are used in numerical color specifications. These examples all specify the same red sRGB color:</p>
 
-<pre>
+<pre><code>
 #f00                      #rgb
 #ff0000                   #rrggbb
 #ff0000ff                 #rrggbbaa
@@ -99,12 +99,12 @@
 
 <p>The sRGB color model is extended in this specification to include <var>alpha</var> to allow specification of the transparency of a color. These examples all specify the same color:</p>
 
-<pre>
+<pre><code>
 rgb(255, 0, 0)                 range 0 - 255
 rgba(255, 0, 0, 1.0)           the same, with an explicit alpha value
 rgb(100%, 0%, 0%)              range 0.0% - 100.0%
 rgba(100%, 0%, 0%, 1.0)        the same, with an explicit alpha value
-</pre>
+</code></pre>
 
 <p>The format of an RGBA value in the functional notation is 'rgba(<var>r</var>,<var>g</var>,<var>b</var>,<var>a</var>)',  where  <var>r</var>, <var>g</var>, and <var>b</var> are as described above for the RGB functional notation, and where the alpha value <var>a</var> ranges from 0.0 (fully transparent) to 1.0 (fully opaque).</p>
 
@@ -112,10 +112,10 @@
 
 <p>Gray values are conveniently defined with a single intensity value or an intensity value and an alpha value:</p>
 
-<pre>
+<pre><code>
 gray(50%)        mid gray
 graya(50%, 0.5)  semi-transparent mid gray
-</pre>
+</code></pre>
 
 <p>The ImageMagick color model also supports hue-saturation-lightness (HSL) and hue-saturation-brightness (HSB) colors as a complement to numerical sRGB colors. HSL colors are encoding as a triple (hue, saturation, lightness). Likewise HSB colors are encoding as a triple (hue, saturation, brightness). HSL or HSB triples are either direct values (hue 0—360, saturation 0—255, lightness or brightness 0—255) or with S,L,B as percentage values relative to these ranges.</p>
 
@@ -133,31 +133,31 @@
 
 <p>The HSB color system is a little easier to understand than the HSL color system. In the HSB color system, black is at the bottom apex and white is at the top center of the cone on the central axis. The most colorful or saturated colors will then be at the outer edge of the top of the cone at the widest part. Thus at Saturation=100% and Brightness=100%</p>
 
-<pre>
+<pre><code>
 hsb(0,   100%,  100%)    or    hsb(0,   255,   255)          full red
 hsb(120, 100%,  100%)    or    hsb(120, 255,   255)       full green
 hsb(120, 100%,  75%)     or    hsb(120, 255,   191.25)    medium green
 hsb(120, 100%,  50%)     or    hsb(120, 255,   127.5)     dark green
 hsb(120, 100%,  25%)     or    hsb(120, 255,   63.75)     very dark green
 hsb(120, 50%,   50%)     or    hsb(120, 127.5, 127.5)     pastel green
-</pre>
+</code></pre>
 
 <p>In the HSL color system, black is at the bottom apex and white is at the top apex. However, saturation is largest at the middle of the double cone on its outer perimeter and thus at a lightness value of 50%. The most colorful or saturated colors will then be at the outer edge of the double cone at its widest part. Thus at Saturation=100% and Brightness=50%</p>
 
-<pre>
+<pre><code>
 hsl(0,   100%,  50%)     or    hsl(0,   255,   127.5)        full red
 hsl(120, 100%,  100%)    or    hsl(120, 255,   255)       white
 hsl(120, 100%,  75%)     or    hsl(120, 255,   191.25)    pastel green
 hsl(120, 100%,  50%)     or    hsl(120, 255,   127.5)     full green
 hsl(120, 100%,  25%)     or    hsl(120, 255,   63.75)     dark green
 hsl(120, 50%,   50%)     or    hsl(120, 127.5, 127.5)     medium green
-</pre>
+</code></pre>
 
 <p>One advantage of HSB or HSL over RGB is that it can be more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the brightness or lightness and saturation, for example).</p>
 
 <p>Just as the 'rgb()' functional notation has the 'rgba()' alpha counterpart, the 'hsl()' and 'hsb()' functional notations have their 'hsla()' 'hsba()' alpha counterparts. These examples specify the same color:</p>
 
-<pre>
+<pre><code>
 hsb(120, 100%,  100%)              full green in hsb
 hsba(120, 100%,  100%,  1.0)       the same, with an alpha value of 1.0
 hsb(120, 255,  255)                full green in hsb
@@ -167,14 +167,14 @@
 hsla(120, 100%,  50%,  1.0)        the same, with an alpha value of 1.0
 hsl(120, 255,  127.5)              full green in hsl
 hsla(120, 255,  127.5,  1.0)       the same, with an alpha value of 1.0
-</pre>
+</code></pre>
 
 <p>For ImageMagick between 6.5.6-6 and 6.9.2-0, HSL (HSB) could only be specified with Hue as percent in range 0—100%, when Saturation and Lightness (Brightness) were also specified as percent in range 0—100%.</p>
 
 <p>Specify the Lab colors like this:</p>
-<pre>
+<pre><code>
 cielab(62.253188, 23.950124, 48.410653)
-</pre>
+</code></pre>
 <p>Note, the <code>a</code> and <code>b</code> components of any Lab color you specify are biased internally by 50% to ensure it fits in the quantum range (typically 0 to 65535).  The bias is retained when writing to the TIFF and MIFF image formats.  However, the TXT format supports negative pixel values so the bias is removed when writing to this format:</p>
 <pre class="text">
 -> convert xc:cyan -colorspace LAB txt:
@@ -182,26 +182,26 @@
 0,0: (91.1131%,-18.8571%,-5.5436%)  #E93F00000000  cielab(91.1131%,-18.8571%,-5.5436%)
 
 -> convert -size 100x100 xc:"cielab(91.1131%,-18.8571%,-5.5436%)" -colorspace sRGB cyan.png
-</pre>
+</code></pre>
 
 <p>Or specify colors generically with the <code>icc-color</code> keyword, for example:</p>
-<pre>
+<pre><code>
 icc-color(cmyk, 0.11, 0.48, 0.83, 0.00)
 icc-color(rgb, white)
-</pre>
+</code></pre>
 
 <p>Or specify uncalibrated device colors with the <code>device-</code> keyword, for example:</p>
-<pre>
+<pre><code>
 device-gray(0.5)
 device-rgb(0.5, 1.0, 0.0)
 device-cmyk(0.11, 0.48, 0.83, 0.00)
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="color_names"></a>List of Color Names</h2>
+<h2 class="magick-post-title"><a id="color_names"></a>List of Color Names</h2>
 
 <p>The table below provides a list of named colors recognized by ImageMagick:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
 <tbody>
   <tr>
     <th align="right">Name</th>
@@ -4951,4 +4951,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:58 -->
\ No newline at end of file
diff --git a/www/command-line-options.html b/www/command-line-options.html
index 6a6908e..f3bc6fb 100644
--- a/www/command-line-options.html
+++ b/www/command-line-options.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/command-line-options.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/command-line-options.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,25 +42,26 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="command-line-options.html#adaptive-blur">&#x2011;adaptive&#x2011;blur</a>  • <a href="command-line-options.html#adaptive-resize">&#x2011;adaptive&#x2011;resize</a>  • <a href="command-line-options.html#adaptive-sharpen">&#x2011;adaptive&#x2011;sharpen</a>  • <a href="command-line-options.html#adjoin">&#x2011;adjoin</a>  • <a href="command-line-options.html#affine">&#x2011;affine</a>  • <a href="command-line-options.html#alpha">&#x2011;alpha</a>  • <a href="command-line-options.html#annotate">&#x2011;annotate</a>  • <a href="command-line-options.html#antialias">&#x2011;antialias</a>  • <a href="command-line-options.html#append">&#x2011;append</a>  • <a href="command-line-options.html#attenuate">&#x2011;attenuate</a>  • <a href="command-line-options.html#authenticate">&#x2011;authenticate</a>  • <a href="command-line-options.html#auto-gamma">&#x2011;auto&#x2011;gamma</a>  • <a href="command-line-options.html#auto-level">&#x2011;auto&#x2011;level</a>  • <a href="command-line-options.html#auto-orient">&#x2011;auto&#x2011;orient</a>  • <a href="command-line-options.html#backdrop">&#x2011;backdrop</a>  • <a href="command-line-options.html#background">&#x2011;background</a>  • <a href="command-line-options.html#bench">&#x2011;bench</a>  • <a href="command-line-options.html#bias">&#x2011;bias</a>  • <a href="command-line-options.html#black-point-compensation">&#x2011;black&#x2011;point&#x2011;compensation</a>  • <a href="command-line-options.html#black-threshold">&#x2011;black&#x2011;threshold</a>  • <a href="command-line-options.html#blend">&#x2011;blend</a>  • <a href="command-line-options.html#blue-primary">&#x2011;blue&#x2011;primary</a>  • <a href="command-line-options.html#blue-shift">&#x2011;blue&#x2011;shift</a>  • <a href="command-line-options.html#blur">&#x2011;blur</a>  • <a href="command-line-options.html#border">&#x2011;border</a>  • <a href="command-line-options.html#bordercolor">&#x2011;bordercolor</a>  • <a href="command-line-options.html#borderwidth">&#x2011;borderwidth</a>  • <a href="command-line-options.html#brightness-contrast">&#x2011;brightness&#x2011;contrast</a>  • <a href="command-line-options.html#cache">&#x2011;cache</a>  • <a href="command-line-options.html#canny">&#x2011;canny</a>  • <a href="command-line-options.html#caption">&#x2011;caption</a>  • <a href="command-line-options.html#cdl">&#x2011;cdl</a>  • <a href="command-line-options.html#channel">&#x2011;channel</a>  • <a href="command-line-options.html#charcoal">&#x2011;charcoal</a>  • <a href="command-line-options.html#channel-fx">&#x2011;channel&#x2011;fx</a>  • <a href="command-line-options.html#chop">&#x2011;chop</a>  • <a href="command-line-options.html#clamp">&#x2011;clamp</a>  • <a href="command-line-options.html#clip">&#x2011;clip</a>  • <a href="command-line-options.html#clip-mask">&#x2011;clip&#x2011;mask</a>  • <a href="command-line-options.html#clip-path">&#x2011;clip&#x2011;path</a>  • <a href="command-line-options.html#clone">&#x2011;clone</a>  • <a href="command-line-options.html#clut">&#x2011;clut</a>  • <a href="command-line-options.html#coalesce">&#x2011;coalesce</a>  • <a href="command-line-options.html#colorize">&#x2011;colorize</a>  • <a href="command-line-options.html#colormap">&#x2011;colormap</a>  • <a href="command-line-options.html#color-matrix">&#x2011;color&#x2011;matrix</a>  • <a href="command-line-options.html#colors">&#x2011;colors</a>  • <a href="command-line-options.html#colorspace">&#x2011;colorspace</a>  • <a href="command-line-options.html#combine">&#x2011;combine</a>  • <a href="command-line-options.html#comment">&#x2011;comment</a>  • <a href="command-line-options.html#compare">&#x2011;compare</a>  • <a href="command-line-options.html#complex">&#x2011;complex</a>  • <a href="command-line-options.html#compose">&#x2011;compose</a>  • <a href="command-line-options.html#composite">&#x2011;composite</a>  • <a href="command-line-options.html#compress">&#x2011;compress</a>  • <a href="command-line-options.html#connected-components">&#x2011;connected&#x2011;components</a>  • <a href="command-line-options.html#contrast">&#x2011;contrast</a>  • <a href="command-line-options.html#contrast-stretch">&#x2011;contrast&#x2011;stretch</a>  • <a href="command-line-options.html#convolve">&#x2011;convolve</a>  • <a href="command-line-options.html#copy">&#x2011;copy</a>  • <a href="command-line-options.html#crop">&#x2011;crop</a>  • <a href="command-line-options.html#cycle">&#x2011;cycle</a>  • <a href="command-line-options.html#debug">&#x2011;debug</a>  • <a href="command-line-options.html#decipher">&#x2011;decipher</a>  • <a href="command-line-options.html#deconstruct">&#x2011;deconstruct</a>  • <a href="command-line-options.html#define">&#x2011;define</a>  • <a href="command-line-options.html#delay">&#x2011;delay</a>  • <a href="command-line-options.html#delete">&#x2011;delete</a>  • <a href="command-line-options.html#density">&#x2011;density</a>  • <a href="command-line-options.html#depth">&#x2011;depth</a>  • <a href="command-line-options.html#descend">&#x2011;descend</a>  • <a href="command-line-options.html#deskew">&#x2011;deskew</a>  • <a href="command-line-options.html#despeckle">&#x2011;despeckle</a>  • <a href="command-line-options.html#direction">&#x2011;direction</a>  • <a href="command-line-options.html#displace">&#x2011;displace</a>  • <a href="command-line-options.html#display">&#x2011;display</a>  • <a href="command-line-options.html#dispose">&#x2011;dispose</a>  • <a href="command-line-options.html#dissimilarity-threshold">&#x2011;dissimilarity&#x2011;threshold</a>  • <a href="command-line-options.html#dissolve">&#x2011;dissolve</a>  • <a href="command-line-options.html#distort">&#x2011;distort</a>  • <a href="command-line-options.html#distribute-cache">&#x2011;distribute&#x2011;cache</a>  • <a href="command-line-options.html#dither">&#x2011;dither</a>  • <a href="command-line-options.html#draw">&#x2011;draw</a>  • <a href="command-line-options.html#duplicate">&#x2011;duplicate</a>  • <a href="command-line-options.html#edge">&#x2011;edge</a>  • <a href="command-line-options.html#emboss">&#x2011;emboss</a>  • <a href="command-line-options.html#encipher">&#x2011;encipher</a>  • <a href="command-line-options.html#encoding">&#x2011;encoding</a>  • <a href="command-line-options.html#endian">&#x2011;endian</a>  • <a href="command-line-options.html#enhance">&#x2011;enhance</a>  • <a href="command-line-options.html#equalize">&#x2011;equalize</a>  • <a href="command-line-options.html#evaluate">&#x2011;evaluate</a>  • <a href="command-line-options.html#evaluate-sequence">&#x2011;evaluate&#x2011;sequence</a>  • <a href="command-line-options.html#extent">&#x2011;extent</a>  • <a href="command-line-options.html#extract">&#x2011;extract</a>  • <a href="command-line-options.html#family">&#x2011;family</a>  • <a href="command-line-options.html#features">&#x2011;features</a>  • <a href="command-line-options.html#fft">&#x2011;fft</a>  • <a href="command-line-options.html#fill">&#x2011;fill</a>  • <a href="command-line-options.html#filter">&#x2011;filter</a>  • <a href="command-line-options.html#flatten">&#x2011;flatten</a>  • <a href="command-line-options.html#flip">&#x2011;flip</a>  • <a href="command-line-options.html#floodfill">&#x2011;floodfill</a>  • <a href="command-line-options.html#flop">&#x2011;flop</a>  • <a href="command-line-options.html#font">&#x2011;font</a>  • <a href="command-line-options.html#foreground">&#x2011;foreground</a>  • <a href="command-line-options.html#format">&#x2011;format</a>  • <a href="command-line-options.html#format_identify_">&#x2011;format[identify]</a>  • <a href="command-line-options.html#frame">&#x2011;frame</a>  • <a href="command-line-options.html#frame_import_">&#x2011;frame[import]</a>  • <a href="command-line-options.html#function">&#x2011;function</a>  • <a href="command-line-options.html#fuzz">&#x2011;fuzz</a>  • <a href="command-line-options.html#fx">&#x2011;fx</a>  • <a href="command-line-options.html#gamma">&#x2011;gamma</a>  • <a href="command-line-options.html#gaussian-blur">&#x2011;gaussian&#x2011;blur</a>  • <a href="command-line-options.html#geometry">&#x2011;geometry</a>  • <a href="command-line-options.html#gravity">&#x2011;gravity</a>  • <a href="command-line-options.html#grayscale">&#x2011;grayscale</a>  • <a href="command-line-options.html#green-primary">&#x2011;green&#x2011;primary</a>  • <a href="command-line-options.html#hald-clut">&#x2011;hald&#x2011;clut</a>  • <a href="command-line-options.html#help">&#x2011;help</a>  • <a href="command-line-options.html#highlight-color">&#x2011;highlight&#x2011;color</a>  • <a href="command-line-options.html#hough-lines">&#x2011;hough&#x2011;lines</a>  • <a href="command-line-options.html#iconGeometry">&#x2011;iconGeometry</a>  • <a href="command-line-options.html#iconic">&#x2011;iconic</a>  • <a href="command-line-options.html#identify">&#x2011;identify</a>  • <a href="command-line-options.html#ift">&#x2011;ift</a>  • <a href="command-line-options.html#immutable">&#x2011;immutable</a>  • <a href="command-line-options.html#implode">&#x2011;implode</a>  • <a href="command-line-options.html#insert">&#x2011;insert</a>  • <a href="command-line-options.html#intensity">&#x2011;intensity</a>  • <a href="command-line-options.html#intent">&#x2011;intent</a>  • <a href="command-line-options.html#interlace">&#x2011;interlace</a>  • <a href="command-line-options.html#interpolate">&#x2011;interpolate</a>  • <a href="command-line-options.html#interline-spacing">&#x2011;interline&#x2011;spacing</a>  • <a href="command-line-options.html#interword-spacing">&#x2011;interword&#x2011;spacing</a>  • <a href="command-line-options.html#kerning">&#x2011;kerning</a>  • <a href="command-line-options.html#kuwahara">&#x2011;kuwahara</a>  • <a href="command-line-options.html#label">&#x2011;label</a>  • <a href="command-line-options.html#lat">&#x2011;lat</a>  • <a href="command-line-options.html#layers">&#x2011;layers</a>  • <a href="command-line-options.html#level">&#x2011;level</a>  • <a href="command-line-options.html#level-colors">&#x2011;level&#x2011;colors</a>  • <a href="command-line-options.html#limit">&#x2011;limit</a>  • <a href="command-line-options.html#linear-stretch">&#x2011;linear&#x2011;stretch</a>  • <a href="command-line-options.html#linewidth">&#x2011;linewidth</a>  • <a href="command-line-options.html#liquid-rescale">&#x2011;liquid&#x2011;rescale</a>  • <a href="command-line-options.html#list">&#x2011;list</a>  • <a href="command-line-options.html#log">&#x2011;log</a>  • <a href="command-line-options.html#loop">&#x2011;loop</a>  • <a href="command-line-options.html#lowlight-color">&#x2011;lowlight&#x2011;color</a>  • <a href="command-line-options.html#magnify">&#x2011;magnify</a>  • <a href="command-line-options.html#map">&#x2011;map</a>  • <a href="command-line-options.html#map_stream_">&#x2011;map[stream]</a>  • <a href="command-line-options.html#mattecolor">&#x2011;mattecolor</a>  • <a href="command-line-options.html#median">&#x2011;median</a>  • <a href="command-line-options.html#mean-shift">&#x2011;mean&#x2011;shift</a>  • <a href="command-line-options.html#metric">&#x2011;metric</a>  • <a href="command-line-options.html#mode">&#x2011;mode</a>  • <a href="command-line-options.html#modulate">&#x2011;modulate</a>  • <a href="command-line-options.html#moments">&#x2011;moments</a>  • <a href="command-line-options.html#monitor">&#x2011;monitor</a>  • <a href="command-line-options.html#monochrome">&#x2011;monochrome</a>  • <a href="command-line-options.html#morph">&#x2011;morph</a>  • <a href="command-line-options.html#morphology">&#x2011;morphology</a>  • <a href="command-line-options.html#mosaic">&#x2011;mosaic</a>  • <a href="command-line-options.html#motion-blur">&#x2011;motion&#x2011;blur</a>  • <a href="command-line-options.html#name">&#x2011;name</a>  • <a href="command-line-options.html#negate">&#x2011;negate</a>  • <a href="command-line-options.html#noise">&#x2011;noise</a>  • <a href="command-line-options.html#normalize">&#x2011;normalize</a>  • <a href="command-line-options.html#opaque">&#x2011;opaque</a>  • <a href="command-line-options.html#ordered-dither">&#x2011;ordered&#x2011;dither</a>  • <a href="command-line-options.html#orient">&#x2011;orient</a>  • <a href="command-line-options.html#page">&#x2011;page</a>  • <a href="command-line-options.html#paint">&#x2011;paint</a>  • <a href="command-line-options.html#path">&#x2011;path</a>  • <a href="command-line-options.html#pause_animate_">&#x2011;pause[animate]</a>  • <a href="command-line-options.html#pause_import_">&#x2011;pause[import]</a>  • <a href="command-line-options.html#perceptible">&#x2011;perceptible</a>  • <a href="command-line-options.html#ping">&#x2011;ping</a>  • <a href="command-line-options.html#pointsize">&#x2011;pointsize</a>  • <a href="command-line-options.html#polaroid">&#x2011;polaroid</a>  • <a href="command-line-options.html#poly">&#x2011;poly</a>  • <a href="command-line-options.html#posterize">&#x2011;posterize</a>  • <a href="command-line-options.html#precision">&#x2011;precision</a>  • <a href="command-line-options.html#preview">&#x2011;preview</a>  • <a href="command-line-options.html#print">&#x2011;print</a>  • <a href="command-line-options.html#process">&#x2011;process</a>  • <a href="command-line-options.html#profile">&#x2011;profile</a>  • <a href="command-line-options.html#quality">&#x2011;quality</a>  • <a href="command-line-options.html#quantize">&#x2011;quantize</a>  • <a href="command-line-options.html#quiet">&#x2011;quiet</a>  • <a href="command-line-options.html#radial-blur">&#x2011;radial&#x2011;blur</a>  • <a href="command-line-options.html#raise">&#x2011;raise</a>  • <a href="command-line-options.html#random-threshold">&#x2011;random&#x2011;threshold</a>  • <a href="command-line-options.html#read-mask">&#x2011;read&#x2011;mask</a>  • <a href="command-line-options.html#red-primary">&#x2011;red&#x2011;primary</a>  • <a href="command-line-options.html#regard-warnings">&#x2011;regard&#x2011;warnings</a>  • <a href="command-line-options.html#region">&#x2011;region</a>  • <a href="command-line-options.html#remap">&#x2011;remap</a>  • <a href="command-line-options.html#remote">&#x2011;remote</a>  • <a href="command-line-options.html#render">&#x2011;render</a>  • <a href="command-line-options.html#repage">&#x2011;repage</a>  • <a href="command-line-options.html#resample">&#x2011;resample</a>  • <a href="command-line-options.html#resize">&#x2011;resize</a>  • <a href="command-line-options.html#respect-parentheses">&#x2011;respect&#x2011;parentheses</a>  • <a href="command-line-options.html#reverse">&#x2011;reverse</a>  • <a href="command-line-options.html#roll">&#x2011;roll</a>  • <a href="command-line-options.html#rotate">&#x2011;rotate</a>  • <a href="command-line-options.html#sample">&#x2011;sample</a>  • <a href="command-line-options.html#sampling-factor">&#x2011;sampling&#x2011;factor</a>  • <a href="command-line-options.html#scale">&#x2011;scale</a>  • <a href="command-line-options.html#scene">&#x2011;scene</a>  • <a href="command-line-options.html#screen">&#x2011;screen</a>  • <a href="command-line-options.html#seed">&#x2011;seed</a>  • <a href="command-line-options.html#segment">&#x2011;segment</a>  • <a href="command-line-options.html#selective-blur">&#x2011;selective&#x2011;blur</a>  • <a href="command-line-options.html#separate">&#x2011;separate</a>  • <a href="command-line-options.html#sepia-tone">&#x2011;sepia&#x2011;tone</a>  • <a href="command-line-options.html#set">&#x2011;set</a>  • <a href="command-line-options.html#shade">&#x2011;shade</a>  • <a href="command-line-options.html#shadow">&#x2011;shadow</a>  • <a href="command-line-options.html#shared-memory">&#x2011;shared&#x2011;memory</a>  • <a href="command-line-options.html#sharpen">&#x2011;sharpen</a>  • <a href="command-line-options.html#shave">&#x2011;shave</a>  • <a href="command-line-options.html#shear">&#x2011;shear</a>  • <a href="command-line-options.html#sigmoidal-contrast">&#x2011;sigmoidal&#x2011;contrast</a>  • <a href="command-line-options.html#silent">&#x2011;silent</a>  • <a href="command-line-options.html#similarity-threshold">&#x2011;similarity&#x2011;threshold</a>  • <a href="command-line-options.html#size">&#x2011;size</a>  • <a href="command-line-options.html#sketch">&#x2011;sketch</a>  • <a href="command-line-options.html#smush">&#x2011;smush</a>  • <a href="command-line-options.html#snaps">&#x2011;snaps</a>  • <a href="command-line-options.html#solarize">&#x2011;solarize</a>  • <a href="command-line-options.html#sparse-color">&#x2011;sparse&#x2011;color</a>  • <a href="command-line-options.html#splice">&#x2011;splice</a>  • <a href="command-line-options.html#spread">&#x2011;spread</a>  • <a href="command-line-options.html#statistic">&#x2011;statistic</a>  • <a href="command-line-options.html#stegano">&#x2011;stegano</a>  • <a href="command-line-options.html#stereo">&#x2011;stereo</a>  • <a href="command-line-options.html#storage-type">&#x2011;storage&#x2011;type</a>  • <a href="command-line-options.html#stretch">&#x2011;stretch</a>  • <a href="command-line-options.html#strip">&#x2011;strip</a>  • <a href="command-line-options.html#stroke">&#x2011;stroke</a>  • <a href="command-line-options.html#strokewidth">&#x2011;strokewidth</a>  • <a href="command-line-options.html#style">&#x2011;style</a>  • <a href="command-line-options.html#subimage-search">&#x2011;subimage&#x2011;search</a>  • <a href="command-line-options.html#swap">&#x2011;swap</a>  • <a href="command-line-options.html#swirl">&#x2011;swirl</a>  • <a href="command-line-options.html#synchronize">&#x2011;synchronize</a>  • <a href="command-line-options.html#taint">&#x2011;taint</a>  • <a href="command-line-options.html#text-font">&#x2011;text&#x2011;font</a>  • <a href="command-line-options.html#texture">&#x2011;texture</a>  • <a href="command-line-options.html#threshold">&#x2011;threshold</a>  • <a href="command-line-options.html#thumbnail">&#x2011;thumbnail</a>  • <a href="command-line-options.html#tile">&#x2011;tile</a>  • <a href="command-line-options.html#tile-offset">&#x2011;tile&#x2011;offset</a>  • <a href="command-line-options.html#tint">&#x2011;tint</a>  • <a href="command-line-options.html#title">&#x2011;title</a>  • <a href="command-line-options.html#transform">&#x2011;transform</a>  • <a href="command-line-options.html#transparent">&#x2011;transparent</a>  • <a href="command-line-options.html#transparent-color">&#x2011;transparent&#x2011;color</a>  • <a href="command-line-options.html#transpose">&#x2011;transpose</a>  • <a href="command-line-options.html#transverse">&#x2011;transverse</a>  • <a href="command-line-options.html#treedepth">&#x2011;treedepth</a>  • <a href="command-line-options.html#trim">&#x2011;trim</a>  • <a href="command-line-options.html#type">&#x2011;type</a>  • <a href="command-line-options.html#undercolor">&#x2011;undercolor</a>  • <a href="command-line-options.html#unique-colors">&#x2011;unique&#x2011;colors</a>  • <a href="command-line-options.html#units">&#x2011;units</a>  • <a href="command-line-options.html#unsharp">&#x2011;unsharp</a>  • <a href="command-line-options.html#update">&#x2011;update</a>  • <a href="command-line-options.html#verbose">&#x2011;verbose</a>  • <a href="command-line-options.html#version">&#x2011;version</a>  • <a href="command-line-options.html#view">&#x2011;view</a>  • <a href="command-line-options.html#vignette">&#x2011;vignette</a>  • <a href="command-line-options.html#virtual-pixel">&#x2011;virtual&#x2011;pixel</a>  • <a href="command-line-options.html#visual">&#x2011;visual</a>  • <a href="command-line-options.html#watermark">&#x2011;watermark</a>  • <a href="command-line-options.html#wave">&#x2011;wave</a>  • <a href="command-line-options.html#wavelet-denoise">&#x2011;wavelet&#x2011;denoise</a>  • <a href="command-line-options.html#weight">&#x2011;weight</a>  • <a href="command-line-options.html#white-point">&#x2011;white&#x2011;point</a>  • <a href="command-line-options.html#white-threshold">&#x2011;white&#x2011;threshold</a>  • <a href="command-line-options.html#window">&#x2011;window</a>  • <a href="command-line-options.html#window-group">&#x2011;window&#x2011;group</a>  • <a href="command-line-options.html#write">&#x2011;write</a>  • <a href="command-line-options.html#write-mask">&#x2011;write&#x2011;mask</a>  </p> 
 <p class="lead magick-description">Below is list of command-line options recognized by the ImageMagick <a href="command-line-tools.html">command-line tools</a>. If you want a description of a particular option, click on the option name in the navigation bar above and you will go right to it. Unless otherwise noted, each option is recognized by the commands: <a href="convert.html">convert</a> and <a href="mogrify.html">mogrify</a>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="adaptive-blur"></a>-adaptive-blur <var>radius</var>[x<var>sigma</var>]</h3>
+  <h3><a id="adaptive-blur"></a>-adaptive-blur <var>radius</var>[x<var>sigma</var>]</h3>
 </div>
 
 <p class="magick-description">Adaptively blur pixels, with decreasing effect near edges.</p>
@@ -70,7 +70,7 @@
 defaults to 1.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="adaptive-resize"></a>-adaptive-resize <var>geometry</var></h3>
+  <h3><a id="adaptive-resize"></a>-adaptive-resize <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Resize the image using data-dependent triangulation.</p>
@@ -82,7 +82,7 @@
 href="command-line-options.html#gravity">-gravity</a> option has no effect.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="adaptive-sharpen"></a>-adaptive-sharpen <var>radius</var>[x<var>sigma</var>]</h3>
+  <h3><a id="adaptive-sharpen"></a>-adaptive-sharpen <var>radius</var>[x<var>sigma</var>]</h3>
 </div>
 
 <p class="magick-description">Adaptively sharpen pixels, with increasing effect near edges.</p>
@@ -92,7 +92,7 @@
 defaults to 1.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="adjoin"></a>-adjoin</h3>
+  <h3><a id="adjoin"></a>-adjoin</h3>
 </div>
 
 <p class="magick-description">Join images into a single multi-image file.</p>
@@ -116,9 +116,9 @@
 who have used the standard <code>printf()</code>' C-library function. As an
 example, the command</p>
 
-<pre>
+<pre><code>
 convert logo: rose: -morph 15 my%02dmorph.jpg
-</pre>
+</code></pre>
 
 <p>will create a sequence of 17 images (the two given plus 15 more created by
 <a href="command-line-options.html#morph">-morph</a>), named: my00morph.jpg, my01morph.jpg,
@@ -135,7 +135,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="affine"></a>-affine
+  <h3><a id="affine"></a>-affine
   <var>s<sub>x</sub></var>,<var>r<sub>x</sub></var>,<var>r<sub>y</sub></var>,<var>s<sub>y</sub></var>[,<var>t<sub>x</sub></var>,<var>t<sub>y</sub></var>]</h3>
 </div>
 
@@ -178,23 +178,23 @@
 information </p>
 
 
-<pre>
+<pre><code>
 -affine <var>s<sub>x</sub></var>,0,0,<var>s<sub>y</sub></var>
-</pre>
+</code></pre>
 
 <p>Translation by a displacement (<var>t<sub>x</sub></var>, <var>t<sub>y</sub></var>) is accomplished like so:</p>
 
-<pre>
+<pre><code>
 -affine 1,0,0,1,<var>t<sub>x</sub></var>,<var>t<sub>y</sub></var>
-</pre>
+</code></pre>
 
 <p>Rotate clockwise about the origin (the upper left-hand corner) by an angle
 <var>a</var> by letting <var>c</var> = cos(<var>a</var>), <var>s</var>
 = sin(<var>a</var>), and using the following.</p>
 
-<pre>
+<pre><code>
 -affine <var>c</var>,<var>s</var>,-<var>s</var>,<var>c</var>
-</pre>
+</code></pre>
 
 <p>The cumulative effect of a sequence of <a href="command-line-options.html#affine" >-affine</a>
 transformations can be accomplished by instead by a single <a href="command-line-options.html#affine"
@@ -205,7 +205,7 @@
 matrix determinant has a sufficiently small absolute value it is rejected.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="alpha"></a>-alpha <var>type</var></h3>
+  <h3><a id="alpha"></a>-alpha <var>type</var></h3>
 </div>
 
 <p class="magick-description">Gives control of the alpha/matte channel of an image.</p>
@@ -213,74 +213,74 @@
 <p>Used to set a flag on an image indicating whether or not to use existing alpha
 channel data, to create an alpha channel, or to perform other operations on the alpha channel.  Choose the argument <var>type</var> from the list below.</p>
 
-<dl class="dl-horizontal">
-    <dt>Activate</dt>
-    <dd>
+<dl class="row">
+    <dt class="col-md-4">Activate</dt>
+    <dd class="col-md-8">
        Enable the image's transparency channel. Note normally Set
        should be used instead of this, unless you specifically need to
        preserve existing (but specifically turned Off) transparency
        channel. </dd>
 
-    <dt>Associate</dt>
-    <dd>
+    <dt class="col-md-4">Associate</dt>
+    <dd class="col-md-8">
        associate the alpha channel with the image.</dd>
 
-    <dt>Deactivate</dt>
-    <dd>
+    <dt class="col-md-4">Deactivate</dt>
+    <dd class="col-md-8">
        Disables the image's transparency channel. Does not delete or change the
        existing data, just turns off the use of that data.</dd>
 
-    <dt>Disassociate</dt>
-    <dd>
+    <dt class="col-md-4">Disassociate</dt>
+    <dd class="col-md-8">
        disassociate the alpha channel from the image.</dd>
 
-    <dt>Set</dt>
-    <dd>
+    <dt class="col-md-4">Set</dt>
+    <dd class="col-md-8">
        Activates the alpha/matte channel. If it was previously turned off
        then it also resets the channel to opaque.  If the image already had
        the alpha channel turned on, it will have no effect.</dd>
 
-    <dt>Opaque</dt>
-    <dd>
+    <dt class="col-md-4">Opaque</dt>
+    <dd class="col-md-8">
        Enables the alpha/matte channel and forces it to be fully opaque.
        </dd>
 
-    <dt>Transparent</dt>
-    <dd>
+    <dt class="col-md-4">Transparent</dt>
+    <dd class="col-md-8">
        Activates the alpha/matte channel and forces it to be fully
        transparent. This effectively creates a fully transparent image the
        same size as the original and with all its original RGB data still
        intact, but fully transparent. </dd>
 
-    <dt>Extract</dt>
-    <dd>
+    <dt class="col-md-4">Extract</dt>
+    <dd class="col-md-8">
        Copies the alpha channel values into all the color channels and turns
        'Off' the the image's transparency, so as to generate
        a grayscale mask of the image's shape. The alpha channel data is left
        intact just deactivated.  This is the inverse of 'Copy'.
        </dd>
 
-    <dt>Copy</dt>
-    <dd>
+    <dt class="col-md-4">Copy</dt>
+    <dd class="col-md-8">
        Turns 'On' the alpha/matte channel, then copies the
        grayscale intensity of the image, into the alpha channel, converting
        a grayscale mask into a transparent shaped mask ready to be colored
        appropriately. The color channels are not modified.  </dd>
 
-    <dt>Shape</dt>
-    <dd>
+    <dt class="col-md-4">Shape</dt>
+    <dd class="col-md-8">
        As per 'Copy' but also colors the resulting shape mask with
        the current background color.  That is the RGB color channels is
        replaced, with appropriate alpha shape.
        </dd>
 
-    <dt>Remove</dt>
-    <dd>
+    <dt class="col-md-4">Remove</dt>
+    <dd class="col-md-8">
        Composite the image over the background color.
        </dd>
 
-    <dt>Background</dt>
-    <dd>
+    <dt class="col-md-4">Background</dt>
+    <dd class="col-md-8">
        Set any fully-transparent pixel to the background color, while leaving
        it fully-transparent.  This can make some image file formats, such as
        PNG, smaller as the RGB values of transparent pixels are more uniform,
@@ -294,7 +294,7 @@
 Set</code>" and not "<code><a href="command-line-options.html#alpha" >-alpha</a> On</code>".  </p>
 
 <div style="margin: auto;">
- <h3 class="magick-header"><a id="annotate"></a>
+ <h3><a id="annotate"></a>
  -annotate <var>degrees</var> <var>text</var><br />
  -annotate <var>Xdegrees</var>x<var>Ydegrees</var> <var>text</var><br /> -annotate <var>Xdegrees</var>x<var>Ydegrees</var> {+-}<var>t<sub>x</sub></var>{+-}<var>t<sub>y</sub></var> <var>text</var><br /> -annotate {+-}<var>t<sub>x</sub></var>{+-}<var>t<sub>y</sub></var> <var>text</var></h3>
 </div>
@@ -330,7 +330,7 @@
 formatting characters are recognized.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="antialias"></a>-antialias</h3>
+  <h3><a id="antialias"></a>-antialias</h3>
 </div>
 
 <p class="magick-description">Enable/Disable of the rendering of anti-aliasing pixels when drawing fonts and lines.</p>
@@ -342,7 +342,7 @@
 are added when drawing such objects. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="append"></a>-append</h3>
+  <h3><a id="append"></a>-append</h3>
 </div>
 
 <p class="magick-description">Join current images vertically or horizontally.</p>
@@ -358,7 +358,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="attenuate"></a>-attenuate <var>value</var></h3>
+  <h3><a id="attenuate"></a>-attenuate <var>value</var></h3>
 </div>
 
 <p class="magick-description">Lessen (or intensify) when adding noise to an image.</p>
@@ -366,7 +366,7 @@
 <p>If unset the value is equivalent to 1.0, or a maximum noise addition</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="authenticate"></a>-authenticate <var>password</var></h3>
+  <h3><a id="authenticate"></a>-authenticate <var>password</var></h3>
 </div>
 
 <p class="magick-description">Decrypt a PDF with a password.</p>
@@ -380,7 +380,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="auto-gamma"></a>-auto-gamma</h3>
+  <h3><a id="auto-gamma"></a>-auto-gamma</h3>
 </div>
 
 <p class="magick-description">Automagically adjust gamma level of image.</p>
@@ -405,7 +405,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="auto-level"></a>-auto-level</h3>
+  <h3><a id="auto-level"></a>-auto-level</h3>
 </div>
 
 <p class="magick-description">Automagically adjust color levels of image.</p>
@@ -438,7 +438,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="auto-orient"></a>-auto-orient</h3>
+  <h3><a id="auto-orient"></a>-auto-orient</h3>
 </div>
 
 <p class="magick-description">adjusts an image so that its orientation is suitable for viewing (i.e. top-left orientation).</p>
@@ -456,7 +456,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="average"></a>-average</h3>
+  <h3><a id="average"></a>-average</h3>
 </div>
 
 <p class="magick-description">Average a set of images.</p>
@@ -465,7 +465,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="backdrop"></a>-backdrop</h3>
+  <h3><a id="backdrop"></a>-backdrop</h3>
 </div>
 
 <p class="magick-description">Display the image centered on a backdrop.</p>
@@ -476,7 +476,7 @@
 described under the <a href="command-line-options.html#fill">-fill</a> option.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="background"></a>-background <var>color</var></h3>
+  <h3><a id="background"></a>-background <var>color</var></h3>
 </div>
 
 <p class="magick-description">Set the background color.</p>
@@ -486,7 +486,7 @@
 specified or found in the image) is white.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="bench"></a>-bench <var>iterations</var></h3>
+  <h3><a id="bench"></a>-bench <var>iterations</var></h3>
 </div>
 
 <p class="magick-description">Measure performance.</p>
@@ -496,21 +496,21 @@
 -duration to run the benchmark for a fixed number of seconds and -concurrent
 to run the benchmark in parallel (requires the OpenMP feature).</p>
 
-<pre>
+<pre><code>
 -> convert logo: -resize 200% -bench 5 logo.png
 Performance[1]: 5i 1.344ips 1.000e 3.710u 0:03.720
 Performance[2]: 5i 1.634ips 0.549e 3.890u 0:03.060
 Performance[3]: 5i 2.174ips 0.618e 3.190u 0:02.300
 Performance[4]: 5i 1.678ips 0.555e 3.810u 0:02.980
 Performance[4]: 5i 0.875657ips 6.880u 0:05.710
-</pre>
+</code></pre>
 
 <p>In this example, 5 iterations were completed at 2.174 iterations per
 second, using 3 threads and 3.190 seconds of the user allotted time, for
 a total elapsed time of 2.300 seconds.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="bias"></a>-bias <var>value</var>{<var>%</var>}</h3>
+  <h3><a id="bias"></a>-bias <var>value</var>{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">Add bias when convolving an image.</p>
@@ -537,13 +537,13 @@
 entry.  </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="black-point-compensation"></a>-black-point-compensation</h3>
+  <h3><a id="black-point-compensation"></a>-black-point-compensation</h3>
 </div>
 
 <p class="magick-description">Use black point compensation.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="black-threshold"></a>-black-threshold <var>value</var>{<var>%</var>}</h3>
+  <h3><a id="black-threshold"></a>-black-threshold <var>value</var>{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">Force to black all pixels below the threshold while leaving all pixels at or above the threshold unchanged.</p>
@@ -554,7 +554,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="blend"></a>-blend <var>geometry</var></h3>
+  <h3><a id="blend"></a>-blend <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">blend an image into another by the given absolute value or percent.</p>
@@ -568,13 +568,13 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="blue-primary"></a>-blue-primary <var>x</var>,<var>y</var></h3>
+  <h3><a id="blue-primary"></a>-blue-primary <var>x</var>,<var>y</var></h3>
 </div>
 
 <p class="magick-description">Set the blue chromaticity primary point.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="blue-shift"></a>-blue-shift <var>factor</var></h3>
+  <h3><a id="blue-shift"></a>-blue-shift <var>factor</var></h3>
 </div>
 
 <p class="magick-description">simulate a scene at nighttime in the moonlight.  Start with a factor of 1.5</p>
@@ -582,7 +582,7 @@
 <div style="margin: auto;">
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="blur"></a>-blur <var>radius</var><br />-blur <var>radius</var>x<var>sigma</var></h3>
+  <h3><a id="blur"></a>-blur <var>radius</var><br />-blur <var>radius</var>x<var>sigma</var></h3>
 </div>
 
 <p class="magick-description">Reduce image noise and reduce detail levels.</p>
@@ -618,7 +618,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="border"></a>-border <var>geometry</var></h3>
+  <h3><a id="border"></a>-border <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Surround the image with a border of color. </p>
@@ -629,31 +629,31 @@
 
 <p>As of IM 6.7.8-8, the <var>geometry</var> arguments behave as follows:</p>
 
-<dl class="dl-horizontal">
-<dt><var>value</var></dt>
-<dd>value is added to both left/right and top/bottom</dd>
-<dt><var>value-x</var><kbd>x</kbd></dt>
-<dd>value-x is added only to left/right and top/bottom are unchanged</dd>
-<dt><kbd>x</kbd><var>value-y</var></dt>
-<dd>value-y is added only to top/bottom and left/right are unchanged</dd>
-<dt><var>value-x</var><kbd>x</kbd><var>value-y</var></dt>
-<dd>value-x is added to left/right and value-y added to top/bottom</dd>
-<dt><var>value-x</var><kbd>x</kbd>0</dt>
-<dd>value-x is added only to left/right and top/bottom are unchanged</dd>
-<dt>0<kbd>x</kbd><var>value-y</var></dt>
-<dd>value-y is added only to top/bottom and left/right are unchanged</dd>
-<dt><var>value</var>%</dt>
-<dd>value % of width is added to left/right and value % of height is added to top/bottom</dd>
-<dt><var>value-x</var><kbd>x</kbd>%</dt>
-<dd>value-x % of width is added to left/right and to top/bottom</dd>
-<dt>x<var>value-y</var>%</dt>
-<dd>value-y % of height is added to top/bottom and to left/right</dd>
-<dt><var>value-x</var>%<kbd>x</kbd><var>value-y</var>%</dt>
-<dd>value-x % of width is added to left/right and value-y % of height is added to top/bottom</dd>
-<dt><var>value-x</var>%<kbd>x</kbd>0%</dt>
-<dd>value-x % of width is added to left/right and top/bottom are unchanged</dd>
-<dt>0%<kbd>x</kbd><var>value-y</var>%</dt>
-<dd>value-y % of height is added to top/bottom and left/right are unchanged</dd>
+<dl class="row">
+<dt class="col-md-4"><var>value</var></dt>
+<dd class="col-md-8">value is added to both left/right and top/bottom</dd>
+<dt class="col-md-4"><var>value-x</var><kbd>x</kbd></dt>
+<dd class="col-md-8">value-x is added only to left/right and top/bottom are unchanged</dd>
+<dt class="col-md-4"><kbd>x</kbd><var>value-y</var></dt>
+<dd class="col-md-8">value-y is added only to top/bottom and left/right are unchanged</dd>
+<dt class="col-md-4"><var>value-x</var><kbd>x</kbd><var>value-y</var></dt>
+<dd class="col-md-8">value-x is added to left/right and value-y added to top/bottom</dd>
+<dt class="col-md-4"><var>value-x</var><kbd>x</kbd>0</dt>
+<dd class="col-md-8">value-x is added only to left/right and top/bottom are unchanged</dd>
+<dt class="col-md-4">0<kbd>x</kbd><var>value-y</var></dt>
+<dd class="col-md-8">value-y is added only to top/bottom and left/right are unchanged</dd>
+<dt class="col-md-4"><var>value</var>%</dt>
+<dd class="col-md-8">value % of width is added to left/right and value % of height is added to top/bottom</dd>
+<dt class="col-md-4"><var>value-x</var><kbd>x</kbd>%</dt>
+<dd class="col-md-8">value-x % of width is added to left/right and to top/bottom</dd>
+<dt class="col-md-4">x<var>value-y</var>%</dt>
+<dd class="col-md-8">value-y % of height is added to top/bottom and to left/right</dd>
+<dt class="col-md-4"><var>value-x</var>%<kbd>x</kbd><var>value-y</var>%</dt>
+<dd class="col-md-8">value-x % of width is added to left/right and value-y % of height is added to top/bottom</dd>
+<dt class="col-md-4"><var>value-x</var>%<kbd>x</kbd>0%</dt>
+<dd class="col-md-8">value-x % of width is added to left/right and top/bottom are unchanged</dd>
+<dt class="col-md-4">0%<kbd>x</kbd><var>value-y</var>%</dt>
+<dd class="col-md-8">value-y % of height is added to top/bottom and left/right are unchanged</dd>
 </dl>
 
 <p>Set the border color by preceding with the <a
@@ -670,7 +670,7 @@
 functionality.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="bordercolor"></a>-bordercolor <var>color</var></h3>
+  <h3><a id="bordercolor"></a>-bordercolor <var>color</var></h3>
 </div>
 
 <p class="magick-description">Set the border color.</p>
@@ -680,13 +680,13 @@
 <p>The default border color is <code>#DFDFDF</code>, <span style="background-color: #dfdfdf;">this shade of gray</span>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="borderwidth"></a>-borderwidth <var>geometry</var> </h3>
+  <h3><a id="borderwidth"></a>-borderwidth <var>geometry</var> </h3>
 </div>
 
 <p class="magick-description">Set the border width.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="brightness-contrast"></a>-brightness-contrast <var>brightness</var><br />-brightness-contrast <var>brightness</var>{x<var>contrast</var>}{<var>%</var>}</h3>
+  <h3><a id="brightness-contrast"></a>-brightness-contrast <var>brightness</var><br />-brightness-contrast <var>brightness</var>{x<var>contrast</var>}{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">Adjust the brightness and/or contrast of the image.</p>
@@ -724,13 +724,13 @@
 symbol is no different than leaving it off.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="cache"></a>-cache <var>threshold</var></h3>
+  <h3><a id="cache"></a>-cache <var>threshold</var></h3>
 </div>
 
 <p class="magick-description">(This option has been replaced by the <a href='command-line-options.html#limit'>-limit</a> option).</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="canny"></a>-canny <var>radius</var><br/>-canny <var>radius</var>x<var>sigma</var>{<var>+lower-percent</var>}{<var>+upper-percent</var>}</h3>
+  <h3><a id="canny"></a>-canny <var>radius</var><br/>-canny <var>radius</var>x<var>sigma</var>{<var>+lower-percent</var>}{<var>+upper-percent</var>}</h3>
 </div>
 
 <p class="magick-description">Canny edge detector uses a multi-stage algorithm to detect a wide range of edges in the image.</p>
@@ -738,7 +738,7 @@
 <p>The thresholds range from 0 to 100% (e.g. -canny 0x1+10%+30%) with {<var>+lower-percent</var>} &lt; {<var>+upper-percent</var>}. If {<var>+upper-percent</var>} is increased but {<var>+lower-percent</var>} remains the same, lesser edge components will be detected, but their lengths will be the same. If {<var>+lower-percent</var>} is increased but {<var>+upper-percent</var>} is the same, the same number of edge components will be detected but their lengths will be shorter. The default thresholds are shown. The <var>radius</var>x<var>sigma</var> controls a gaussian blur applied to the input image to reduce noise and smooth the edges.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="caption"></a>-caption <var>string</var></h3>
+  <h3><a id="caption"></a>-caption <var>string</var></h3>
 </div>
 
 <p class="magick-description">Assign a caption to an image.</p>
@@ -762,9 +762,9 @@
 
 <p>For example,</p>
 
-<pre>
+<pre><code>
 -caption "%m:%f %wx%h"  bird.miff
-</pre>
+</code></pre>
 
 <p>produces an image caption of <code>MIFF:bird.miff 512x480</code> (assuming
 that the image <code>bird.miff</code> has a width of 512 and a height of
@@ -772,14 +772,14 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="cdl"></a>-cdl <var>filename</var></h3>
+  <h3><a id="cdl"></a>-cdl <var>filename</var></h3>
 </div>
 
 <p class="magick-description">color correct with a color decision list.</p>
 
 <p>Here is an example color correction collection:</p>
 
-<pre>
+<pre><code>
 &lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;ColorCorrectionCollection xmlns="urn:ASC:CDL:v1.2"&gt;
   &lt;ColorCorrection id="cc06668"&gt;
@@ -793,10 +793,10 @@
     &lt;/SATNode&gt;
   &lt;/ColorCorrection&gt;
 &lt;/ColorCorrectionCollection&gt;
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="channel"></a>-channel <var>type</var></h3>
+  <h3><a id="channel"></a>-channel <var>type</var></h3>
 </div>
 
 <p class="magick-description">Specify those image color channels to which subsequent operators are limited.</p>
@@ -814,13 +814,13 @@
 
 For example, to only select the <code>Red</code> and <code>Blue</code> channels
 you can either use </p>
-<pre>
+<pre><code>
 -channel Red,Blue
-</pre>
+</code></pre>
 <p>or you can use the short hand form</p>
-<pre>
+<pre><code>
 -channel RB
-</pre>
+</code></pre>
 
 <p>All the channels that are present in an image can be specified using the
 special channel type <code>All</code>. Not all operators are 'channel capable',
@@ -924,50 +924,50 @@
 href="command-line-options.html#clut">-clut</a> operator is a good example of this. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="channel-fx"></a>-channel-fx <var>expression</var></h3>
+  <h3><a id="channel-fx"></a>-channel-fx <var>expression</var></h3>
 </div>
 
 <p class="magick-description">exchange, extract, or copy one or more image channels.</p>
 
 <p>The expression consists of one or more channels, either mnemonic or numeric (e.g. red or 0, green or 1, etc.), separated by certain operation symbols as follows:</p>
 
-<pre>
+<pre><code>
 &lt;=&gt;  exchange two channels (e.g. red&lt;=&gt;blue)
 =&gt;   copy one channel to another channel (e.g. red=&gt;green)
 =    assign a constant value to a channel (e.g. red=50%)
 ,    write new image with channels in the specified order (e.g. red, green)
 ;    add a new output image for the next set of channel operations (e.g. red; green; blue)
 |    move to the next input image for the source of channel data (e.g. | gray=>alpha)
-</pre>
+</code></pre>
 
 <p>For example, to create 3 grayscale images from the red, green, and blue channels of an image, use:</p>
 
-<pre>
+<pre><code>
 -channel-fx "red; green; blue"
-</pre>
+</code></pre>
 
 <p>A channel without an operation symbol implies separate (i.e, semicolon).</p>
 
 <p>Here we take an sRGB image and a grayscale image and inject the grayscale image into the alpha channel:</p>
-<pre>
+<pre><code>
 convert wizard.png mask.pgm -channel-fx '| gray=>alpha' wizard-alpha.png
-</pre>
+</code></pre>
 <p>Use a similar command to define a read mask:</p>
-<pre>
+<pre><code>
 convert wizard.png mask.pgm -channel-fx '| gray=>read-mask' wizard-mask.png
-</pre>
+</code></pre>
 
 <p>Add <code>-debug pixel</code> prior to the <code>-channel-fx</code> option to track the channel morphology.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="charcoal"></a>-charcoal <var>factor</var></h3>
+  <h3><a id="charcoal"></a>-charcoal <var>factor</var></h3>
 </div>
 
 <p class="magick-description">Simulate a charcoal drawing.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="chop"></a>-chop <var>geometry</var></h3>
+  <h3><a id="chop"></a>-chop <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Remove pixels from the interior of an image.</p>
@@ -992,13 +992,13 @@
 href="command-line-options.html#splice">-splice</a> that was given the same <var>geometry</var> and <a href="command-line-options.html#gravity">-gravity</a> settings. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="clamp"></a>-clamp</h3>
+  <h3><a id="clamp"></a>-clamp</h3>
 </div>
 
 <p class="magick-description">set each pixel whose value is below zero to zero and any the pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="clip"></a>-clip</h3>
+  <h3><a id="clip"></a>-clip</h3>
 </div>
 
 <p class="magick-description">Apply the clipping path if one is present.</p>
@@ -1007,9 +1007,9 @@
 
 <p>For example, in the command</p>
 
-<pre>
+<pre><code>
 convert cockatoo.tif -clip -negate negated.tif
-</pre>
+</code></pre>
 
 <p>only the pixels within the clipping path are negated.</p>
 
@@ -1019,7 +1019,7 @@
 <p>Use <a href="command-line-options.html#clip">+clip</a> to disable clipping for subsequent operations.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="clip-mask"></a>-clip-mask</h3>
+  <h3><a id="clip-mask"></a>-clip-mask</h3>
 </div>
 
 <p class="magick-description">Clip the image as defined by this mask.</p>
@@ -1037,7 +1037,7 @@
 <p>Use <a href="command-line-options.html#clip-mask">+clip-mask</a> to disable clipping for subsequent operations.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="clip-path"></a>-clip-path <var>id</var></h3>
+  <h3><a id="clip-path"></a>-clip-path <var>id</var></h3>
 </div>
 
 <p class="magick-description">Clip along a named path from the 8BIM profile.</p>
@@ -1047,7 +1047,7 @@
 <p>Use <a href="command-line-options.html#clip-path">+clip-path</a> to disable clipping for subsequent operations.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="clone"></a>-clone <var>index(s)</var></h3>
+  <h3><a id="clone"></a>-clone <var>index(s)</var></h3>
 </div>
 
 <p class="magick-description">make a clone of an image (or images).</p>
@@ -1070,7 +1070,7 @@
 '<code>−1</code>'. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="clut"></a>-clut</h3>
+  <h3><a id="clut"></a>-clut</h3>
 </div>
 
 <p class="magick-description">Replace the channel values in the first image using each corresponding channel in the second image as a <b>c</b>olor <b>l</b>ook<b>u</b>p <b>t</b>able.</p>
@@ -1116,7 +1116,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="coalesce"></a>-coalesce</h3>
+  <h3><a id="coalesce"></a>-coalesce</h3>
 </div>
 
 <p class="magick-description">Fully define the look of each frame of an GIF animation sequence, to form a 'film strip' animation.</p>
@@ -1136,7 +1136,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="colorize"></a>-colorize <var>value</var></h3>
+  <h3><a id="colorize"></a>-colorize <var>value</var></h3>
 </div>
 
 <p class="magick-description">Colorize the image by an amount specified by <var>value</var> using the color specified by the most recent <a href="command-line-options.html#fill" >-fill</a> setting.</p>
@@ -1147,7 +1147,7 @@
 values (e.g., <code>-colorize 0,0,50</code>).</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="colormap"></a>-colormap <var>type</var></h3>
+  <h3><a id="colormap"></a>-colormap <var>type</var></h3>
 </div>
 
 <p class="magick-description">Define the colormap type.</p>
@@ -1165,7 +1165,7 @@
 when the image colormap is installed.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="colors"></a>-colors <var>value</var></h3>
+  <h3><a id="colors"></a>-colors <var>value</var></h3>
 </div>
 
 <p class="magick-description">Set the preferred number of colors in the image.</p>
@@ -1181,7 +1181,7 @@
 color reduction algorithm</a> for more details.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="color-matrix"></a>-color-matrix <var>matrix</var></h3>
+  <h3><a id="color-matrix"></a>-color-matrix <var>matrix</var></h3>
 </div>
 
 <p class="magick-description">apply color correction to the image.</p>
@@ -1195,7 +1195,7 @@
 
 <p>As an example, to add contrast to an image with offsets, try this command:</p>
 
-<pre>
+<pre><code>
 convert kittens.jpg -color-matrix \
   " 1.5 0.0 0.0 0.0, 0.0, -0.157 \
     0.0 1.5 0.0 0.0, 0.0, -0.157 \
@@ -1203,16 +1203,16 @@
     0.0 0.0 0.0 1.0, 0.0,  0.0 \
     0.0 0.0 0.0 0.0, 1.0,  0.0 \
     0.0 0.0 0.0 0.0, 0.0,  1.0" kittens.png
-</pre>
+</code></pre>
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="colorspace"></a>-colorspace <var>value</var></h3>
+  <h3><a id="colorspace"></a>-colorspace <var>value</var></h3>
 </div>
 
 <p class="magick-description">Set the image colorspace.</p>
 
 <p>Choices are:</p>
 
-<pre>
+<pre><code>
 CMY          CMYK         Gray         HCL
 HCLp         HSB          HSI          HSL
 HSV          HWB          Lab          LCHab
@@ -1221,13 +1221,13 @@
 scRGB        sRGB         Transparent  xyY
 XYZ          YCbCr        YCC          YDbDr
 YIQ          YPbPr        YUV          Undefined
-</pre>
+</code></pre>
 
 <p>To print a complete list of colorspaces, use <a href="command-line-options.html#list">-list colorspace</a>.</p>
 
 <p>For a more accurate color conversion to or from the linear RGB, CMYK, or grayscale colorspaces, use the <a href="command-line-options.html#profile">-profile</a> option.  Note, ImageMagick assumes the sRGB colorspace if the image format does not indicate otherwise.  For colorspace conversion, the gamma function is first removed to produce linear RGB.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
         <caption>Conversion of RGB to Other Color Spaces</caption>
         <tr><th valign="middle">CMY</th></tr>
         <tr><td valign="middle">C=<var>QuantumRange</var>−R</td></tr>
@@ -1329,8 +1329,8 @@
 <p>Use the <code>Undefined</code> colorspace to identify multi-spectral images.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="combine"></a>-combine</h3>
-  <h3 class="magick-header">+combine <var>colorspace</var></h3>
+  <h3><a id="combine"></a>-combine</h3>
+  <h3>+combine <var>colorspace</var></h3>
 </div>
 
 <p class="magick-description">Combine one or more images into a single image.</p>
@@ -1346,14 +1346,14 @@
 Thus, in the following example, the final image should be a copy of the
 original.  </p>
 
-<pre>
+<pre><code>
 convert original.png -channel RGB -separate sepimage.png
 convert sepimage-0.png sepimage-1.png sepimage-2.png -channel RGB \
   -combine imagecopy.png
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="comment"></a>-comment <var>string</var></h3>
+  <h3><a id="comment"></a>-comment <var>string</var></h3>
 </div>
 
 <p class="magick-description">Embed a comment in an image.</p>
@@ -1377,42 +1377,42 @@
 
 <p>For example,</p>
 
-<pre>
+<pre><code>
 -comment "%m:%f %wx%h"  bird.miff
-</pre>
+</code></pre>
 
 <p>produces an image comment of <code>MIFF:bird.miff 512x480</code> (assuming
 that the image <code>bird.miff</code> has a width of 512 and a height of
 480.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="compare"></a>-compare</h3>
+  <h3><a id="compare"></a>-compare</h3>
 </div>
 
 <p class="magick-description">mathematically and visually annotate the difference between an image and its reconstruction</p>
 
 <p>This is a convert version of "<code>compare</code>" for two same sized images. The syntax is as follows, but other metrics are allowed.</p>
 
-<pre>
+<pre><code>
 convert image.png reference.png -metric RMSE -compare \ <br/> difference.png
-</pre>
+</code></pre>
 
 <p>To get the metric value use the string format "%[distortion]".</p>
 
-<pre>
+<pre><code>
 convert image.png reference.png -metric RMSE -compare -format \
    "%[distortion]" info:
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="complex"></a>-complex <var>operator</var></h3>
+  <h3><a id="complex"></a>-complex <var>operator</var></h3>
 </div>
 
 <p class="magick-description">perform complex mathematics on an image sequence</p>
 
 Choose from these operators:
 
-<pre>
+<pre><code>
 add
 conjugate
 divide
@@ -1420,12 +1420,12 @@
 multiply
 real-imaginary
 subtract
-</pre>
+</code></pre>
 
 <p>Optionally specify the <code>divide</code> operator SNR with <code><a href="command-line-options.html#define">-define</a> complex:snr=float</code>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="compose"></a>-compose <var>operator</var></h3>
+  <h3><a id="compose"></a>-compose <var>operator</var></h3>
 </div>
 
 <p class="magick-description">Set the type of image composition.</p>
@@ -1450,7 +1450,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="composite"></a>-composite</h3>
+  <h3><a id="composite"></a>-composite</h3>
 </div>
 
 <p class="magick-description">Perform alpha composition on two images and an optional mask</p>
@@ -1480,7 +1480,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="compress"></a>-compress <var>type</var></h3>
+  <h3><a id="compress"></a>-compress <var>type</var></h3>
 </div>
 
 <p class="magick-description">Use pixel compression specified by <var>type</var> when writing the image.</p>
@@ -1522,7 +1522,7 @@
 the chroma channels.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="connected-components"></a>-connected-components <var>connectivity</var></h3>
+  <h3><a id="connected-components"></a>-connected-components <var>connectivity</var></h3>
 </div>
 
 <p class="magick-description"><a href="connected-components.html">connected-components</a> labeling detects connected regions in an image, choose from 4 or 8 way connectivity.</p>
@@ -1530,7 +1530,7 @@
 <p>Use <code><a href="command-line-options.html#define" >-define</a> connected-components:verbose=true</code> to output statistics associated with each unique label.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="contrast"></a>-contrast</h3>
+  <h3><a id="contrast"></a>-contrast</h3>
 </div>
 
 <p class="magick-description">Enhance or reduce the image contrast.</p>
@@ -1542,12 +1542,12 @@
 
 <p>For a more pronounced effect you can repeat the option:</p>
 
-<pre>
+<pre><code>
 convert rose: -contrast -contrast rose_c2.png
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="contrast-stretch"></a>-contrast-stretch <var>black-point</var><br />-contrast-stretch <var>black-point</var>{x<var>white-point</var>}{<var>%</var>}</h3>
+  <h3><a id="contrast-stretch"></a>-contrast-stretch <var>black-point</var><br />-contrast-stretch <var>black-point</var>{x<var>white-point</var>}{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">Increase the contrast in an image by <var>stretching</var> the range of intensity values.</p>
@@ -1581,7 +1581,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="convolve"></a>-convolve <var>kernel</var></h3>
+  <h3><a id="convolve"></a>-convolve <var>kernel</var></h3>
 </div>
 
 <p class="magick-description">Convolve an image with a user-supplied convolution kernel.</p>
@@ -1611,13 +1611,13 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="copy"></a>-copy <var>geometry</var> <var>offset</var></h3>
+  <h3><a id="copy"></a>-copy <var>geometry</var> <var>offset</var></h3>
 </div>
 
 <p class="magick-description">copy pixels from one area of an image to another.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="crop"></a>-crop <var>geometry</var>{<var>@</var>}{<var>!</var>}</h3>
+  <h3><a id="crop"></a>-crop <var>geometry</var>{<var>@</var>}{<var>!</var>}</h3>
 </div>
 
 <p class="magick-description">Cut out one or more rectangular regions of the image.</p>
@@ -1669,7 +1669,7 @@
 offset.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="cycle"></a>-cycle <var>amount</var></h3>
+  <h3><a id="cycle"></a>-cycle <var>amount</var></h3>
 </div>
 
 <p class="magick-description">displace image colormap by amount.</p>
@@ -1679,7 +1679,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="debug"></a>-debug <var>events</var></h3>
+  <h3><a id="debug"></a>-debug <var>events</var></h3>
 </div>
 
 <p class="magick-description">enable debug printout.</p>
@@ -1696,9 +1696,9 @@
 
 <p>For example, to log cache and blob events, use.</p>
 
-<pre>
+<pre><code>
 convert -debug "Cache,Blob" rose: rose.png
-</pre>
+</code></pre>
 
 <p>The <code>User</code> domain is normally empty, but developers can log user
 events in their private copy of ImageMagick.</p>
@@ -1718,7 +1718,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="decipher"></a>-decipher <var>filename</var></h3>
+  <h3><a id="decipher"></a>-decipher <var>filename</var></h3>
 </div>
 
 <p class="magick-description">Decipher and restore pixels that were previously transformed by <a href="command-line-options.html#encipher">-encipher</a>.</p>
@@ -1731,7 +1731,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="deconstruct"></a>-deconstruct</h3>
+  <h3><a id="deconstruct"></a>-deconstruct</h3>
 </div>
 
 <p class="magick-description">find areas that has changed between images </p>
@@ -1750,7 +1750,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="define"></a>-define <var>key</var>{<var>=value</var>}<var>...</var></h3>
+  <h3><a id="define"></a>-define <var>key</var>{<var>=value</var>}<var>...</var></h3>
 </div>
 
 <p class="magick-description">add specific global settings generally used to control coders and image processing operations.</p>
@@ -1781,7 +1781,7 @@
 <p>The following definitions are just some of the artifacts that are
 available:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>bmp:alpha=<var>true|false</var></td>
     <td>include any alpha channel when writing in the BMP image format.</td>
@@ -2254,9 +2254,9 @@
     the PNG file.  Because the list is processed from left to right, you
     can achieve this with a single define:</p>
 
-<pre>
+<pre><code>
 -define png:include-chunk=none,gAMA
-</pre>
+</code></pre>
 
     <p>As a special case, if the <code>sRGB</code> chunk is not excluded and
     the PNG encoder recognizes that the image contains the sRGB ICC profile,
@@ -2278,9 +2278,9 @@
     <p>The <a href="command-line-options.html#strip">-strip</a> option does the equivalent of the
     following for PNG output:</p>
 
-<pre>
+<pre><code>
 -define png:exclude-chunk=EXIF,iCCP,iTXt,sRGB,tEXt,zCCP,zTXt,date
-</pre>
+</code></pre>
 
     <p>The default behavior is to include all known PNG ancillary chunks
     plus ImageMagick's private <code>vpAg</code> ("virtual page") chunk,
@@ -2494,20 +2494,20 @@
 <p>For example, to create a postscript file that will render only the black
 pixels of a bilevel image, use:</p>
 
-<pre>
+<pre><code>
 convert bilevel.tif -define ps:imagemask eps3:stencil.ps
-</pre>
+</code></pre>
 
 <p>Set attributes of the image registry by prefixing the value with
 <code>registry:</code>.  For example, to set a temporary path to put work files,
 use:</p>
 
-<pre>
+<pre><code>
 -define registry:temporary-path=/data/tmp
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="delay"></a>-delay <var>ticks</var> <br />-delay <var>ticks</var>x<var>ticks-per-second</var> {<var>&lt;</var>} {<var>&gt;</var>}</h3>
+  <h3><a id="delay"></a>-delay <var>ticks</var> <br />-delay <var>ticks</var>x<var>ticks-per-second</var> {<var>&lt;</var>} {<var>&gt;</var>}</h3>
 </div>
 
 <p class="magick-description">display the next image after pausing.</p>
@@ -2528,7 +2528,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="delete"></a>-delete <var>indexes</var></h3>
+  <h3><a id="delete"></a>-delete <var>indexes</var></h3>
 </div>
 
 <p class="magick-description">delete the images specified by index, from the image sequence.</p>
@@ -2541,7 +2541,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="density"></a>-density <var>width</var><br />-density <var>width</var>x<var>height</var></h3>
+  <h3><a id="density"></a>-density <var>width</var><br />-density <var>width</var>x<var>height</var></h3>
 </div>
 
 <p class="magick-description">Set the horizontal and vertical resolution of an image for rendering to devices.</p>
@@ -2575,7 +2575,7 @@
 resolution, use the <a href="command-line-options.html#resample">-resample</a> option.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="depth"></a>-depth <var>value</var></h3>
+  <h3><a id="depth"></a>-depth <var>value</var></h3>
 </div>
 
 <p class="magick-description">depth of the image.</p>
@@ -2585,13 +2585,13 @@
 or CMYK, or to change the depth of any image after it has been read.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="descend"></a>-descend</h3>
+  <h3><a id="descend"></a>-descend</h3>
 </div>
 
 <p class="magick-description">obtain image by descending window hierarchy.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="deskew"></a>-deskew <var>threshold{%}</var></h3>
+  <h3><a id="deskew"></a>-deskew <var>threshold{%}</var></h3>
 </div>
 
 <p class="magick-description">straighten an image.  A threshold of 40% works for most images.</p>
@@ -2600,19 +2600,19 @@
 <var>true | false</var></code> to auto crop the image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="despeckle"></a>-despeckle</h3>
+  <h3><a id="despeckle"></a>-despeckle</h3>
 </div>
 
 <p class="magick-description">reduce the speckles within an image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="direction"></a>-direction <var>type</var></h3>
+  <h3><a id="direction"></a>-direction <var>type</var></h3>
 </div>
 
 <p class="magick-description">render text right-to-left or left-to-right.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="displace"></a>-displace <var>horizontal-scale</var>{%}{!}<br />-displace <var>horizontal-scale</var>x<var>vertical-scale</var>{%}{!}</h3>
+  <h3><a id="displace"></a>-displace <var>horizontal-scale</var>{%}{!}<br />-displace <var>horizontal-scale</var>x<var>vertical-scale</var>{%}{!}</h3>
 </div>
 
 <p class="magick-description">shift image pixels as defined by a displacement map.</p>
@@ -2672,7 +2672,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="display"></a>-display <var>host:display[.screen]</var></h3>
+  <h3><a id="display"></a>-display <var>host:display[.screen]</var></h3>
 </div>
 
 <p class="magick-description">Specifies the X server to contact.</p>
@@ -2681,7 +2681,7 @@
 X server. See <var>X(1)</var>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="dispose"></a>-dispose <var>method</var></h3>
+  <h3><a id="dispose"></a>-dispose <var>method</var></h3>
 </div>
 
 <p class="magick-description">define the GIF disposal image setting for images that are being created or read in. </p>
@@ -2693,11 +2693,11 @@
 
 <p>Here are the valid methods:</p>
 
-<dl class="dl-horizontal">
-<dt>Undefined</dt><dd>0:  No disposal specified (equivalent to '<code>none</code>').</dd>
-<dt>None</dt><dd>1:  Do not dispose, just overlay next frame image.</dd>
-<dt>Background</dt><dd>2:  Clear the frame area with the background color.</dd>
-<dt>Previous</dt><dd>3:  Clear to the image prior to this frames overlay.</dd>
+<dl class="row">
+<dt class="col-md-4">Undefined</dt><dd class="col-md-8">0:  No disposal specified (equivalent to '<code>none</code>').</dd>
+<dt class="col-md-4">None</dt><dd class="col-md-8">1:  Do not dispose, just overlay next frame image.</dd>
+<dt class="col-md-4">Background</dt><dd class="col-md-8">2:  Clear the frame area with the background color.</dd>
+<dt class="col-md-4">Previous</dt><dd class="col-md-8">3:  Clear to the image prior to this frames overlay.</dd>
 </dl>
 
 <p>You can also use the numbers given above, which is what the GIF format
@@ -2712,14 +2712,14 @@
 disposal method for images already in memory.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="dissimilarity-threshold"></a>-dissimilarity-threshold <var>value</var></h3>
+  <h3><a id="dissimilarity-threshold"></a>-dissimilarity-threshold <var>value</var></h3>
 </div>
 
 <p class="magick-description">maximum RMSE for subimage match (default 0.2).</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="dissolve"></a>-dissolve <var>src_percent</var>[x<var>dst_percent</var>]</h3>
+  <h3><a id="dissolve"></a>-dissolve <var>src_percent</var>[x<var>dst_percent</var>]</h3>
 </div>
 
 <p class="magick-description">dissolve an image into another by the given percent.</p>
@@ -2735,7 +2735,7 @@
 images, you would need to use dissolve values of '50,100'.  </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="distort"></a>-distort <var>method arguments</var></h3>
+  <h3><a id="distort"></a>-distort <var>method arguments</var></h3>
 </div>
 
 <p class="magick-description">distort an image, using the given <var>method</var> and its required <var>arguments</var>.</p>
@@ -2746,7 +2746,7 @@
 
 <p>Choose from these distortion types:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <th style="width: 8%">Method</th>
     <th>Description</th>
@@ -2765,13 +2765,13 @@
        The number of arguments determine the specific meaning of each
        argument for the scales, rotation, and translation operations. <br/>
 
-       <dl class="dl-horizontal">
-       <dt>2:</dt><dd><var>Scale   Angle</var></dd>
-       <dt>3:</dt><dd><var>X,Y     Angle</var></dd>
-       <dt>4:</dt><dd><var>X,Y   Scale   Angle</var></dd>
-       <dt>5:</dt> <dd><var>X,Y   ScaleX,ScaleY   Angle</var></dd>
-       <dt>6:</dt> <dd><var>X,Y   Scale   Angle   NewX,NewY</var></dd>
-       <dt>7:</dt> <dd><var>X,Y   ScaleX,ScaleY   Angle NewX,NewY</var></dd>
+       <dl class="row">
+       <dt class="col-md-4">2:</dt><dd class="col-md-8"><var>Scale   Angle</var></dd>
+       <dt class="col-md-4">3:</dt><dd class="col-md-8"><var>X,Y     Angle</var></dd>
+       <dt class="col-md-4">4:</dt><dd class="col-md-8"><var>X,Y   Scale   Angle</var></dd>
+       <dt class="col-md-4">5:</dt> <dd class="col-md-8"><var>X,Y   ScaleX,ScaleY   Angle</var></dd>
+       <dt class="col-md-4">6:</dt> <dd class="col-md-8"><var>X,Y   Scale   Angle   NewX,NewY</var></dd>
+       <dt class="col-md-4">7:</dt> <dd class="col-md-8"><var>X,Y   ScaleX,ScaleY   Angle NewX,NewY</var></dd>
        </dl>
 
        This is actually an alternative way of specifying a 2 dimensional linear
@@ -2884,15 +2884,15 @@
        Arc the image (variation of polar mapping) over the angle given around
        a circle.
 
-       <dl class="dl-horizontal">
-       <dt>arc_angle</dt>
-           <dd>The angle over which to arc the image side-to-side</dd>
-       <dt>rotate_angle</dt>
-           <dd>Angle to rotate resulting image from vertical center</dd>
-       <dt>top_radius</dt>
-           <dd>Set top edge of source image at this radius</dd>
-       <dt>bottom_radius </dt>
-           <dd>Set bottom edge to this radius (radial scaling)</dd>
+       <dl class="row">
+       <dt class="col-md-4">arc_angle</dt>
+           <dd class="col-md-8">The angle over which to arc the image side-to-side</dd>
+       <dt class="col-md-4">rotate_angle</dt>
+           <dd class="col-md-8">Angle to rotate resulting image from vertical center</dd>
+       <dt class="col-md-4">top_radius</dt>
+           <dd class="col-md-8">Set top edge of source image at this radius</dd>
+       <dt class="col-md-4">bottom_radius </dt>
+           <dd class="col-md-8">Set bottom edge to this radius (radial scaling)</dd>
        </dl>
 
        The resulting image is always resized to best fit the resulting image,
@@ -3047,11 +3047,11 @@
 used to group the 4 sets of coordinate pairs, to make it easier to read and
 understand.</p>
 
-<pre>
+<pre><code>
 convert rose:  -virtual-pixel black \
   -distort Perspective '0,0,0,0  0,45,0,45  69,0,60,10  69,45,60,35' \
    rose_3d_rotated.gif"
-</pre>
+</code></pre>
 
 <p>If more that the required number of coordinate pairs are given for
 a distortion, the distortion method is 'least squares' fitted to produce the
@@ -3072,11 +3072,11 @@
 using '<code>perspective</code>' distortion. For example here we view
 a infinitely tiled 'plane' all the way to the horizon. </p>
 
-<pre>
+<pre><code>
 convert -size 90x90 pattern:checkerboard -normalize -virtual-pixel tile \
   -distort perspective  '0,0,5,45  89,0,45,46  0,89,0,89  89,89,89,89' \
    checks_tiled.jpg
-</pre>
+</code></pre>
 
 <p>Note that a infinitely tiled perspective images involving the horizon can
 be very slow, because of the number of pixels that are compressed to generate
@@ -3124,13 +3124,13 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="distribute-cache"></a>-distribute-cache <var>port</var></h3>
+  <h3><a id="distribute-cache"></a>-distribute-cache <var>port</var></h3>
 </div>
 
 <p class="magick-description">launch a distributed pixel cache server. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="dither"></a>-dither <var>method</var></h3>
+  <h3><a id="dither"></a>-dither <var>method</var></h3>
 </div>
 
 <p class="magick-description">Apply a Riemersma or Floyd-Steinberg error diffusion dither to
@@ -3165,7 +3165,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="draw"></a>-draw <var>string</var></h3>
+  <h3><a id="draw"></a>-draw <var>string</var></h3>
 </div>
 
 <p class="magick-description">Annotate an image with one or more graphic primitives.</p>
@@ -3176,30 +3176,30 @@
 
 <p>The shape primitives:</p>
 
-<dl class="dl-horizontal">
-<dt>point</dt><dd>          x,y</dd>
-<dt>line</dt><dd>           x0,y0 x1,y1</dd>
-<dt>rectangle</dt><dd>      x0,y0 x1,y1</dd>
-<dt>roundRectangle</dt><dd> x0,y0 x1,y1 wc,hc</dd>
-<dt>arc</dt><dd>            x0,y0 x1,y1 a0,a1</dd>
-<dt>ellipse</dt><dd>        x0,y0 rx,ry a0,a1</dd>
-<dt>circle</dt><dd>         x0,y0 x1,y1</dd>
-<dt>polyline</dt><dd>       x0,y0  ...  xn,yn</dd>
-<dt>polygon</dt><dd>        x0,y0  ...  xn,yn</dd>
-<dt>bezier</dt><dd>         x0,y0  ...  xn,yn</dd>
-<dt>path</dt><dd>specification  </dd>
-<dt>image</dt><dd>          operator x0,y0 w,h filename</dd>
+<dl class="row">
+<dt class="col-md-4">point</dt><dd class="col-md-8">          x,y</dd>
+<dt class="col-md-4">line</dt><dd class="col-md-8">           x0,y0 x1,y1</dd>
+<dt class="col-md-4">rectangle</dt><dd class="col-md-8">      x0,y0 x1,y1</dd>
+<dt class="col-md-4">roundRectangle</dt><dd class="col-md-8"> x0,y0 x1,y1 wc,hc</dd>
+<dt class="col-md-4">arc</dt><dd class="col-md-8">            x0,y0 x1,y1 a0,a1</dd>
+<dt class="col-md-4">ellipse</dt><dd class="col-md-8">        x0,y0 rx,ry a0,a1</dd>
+<dt class="col-md-4">circle</dt><dd class="col-md-8">         x0,y0 x1,y1</dd>
+<dt class="col-md-4">polyline</dt><dd class="col-md-8">       x0,y0  ...  xn,yn</dd>
+<dt class="col-md-4">polygon</dt><dd class="col-md-8">        x0,y0  ...  xn,yn</dd>
+<dt class="col-md-4">bezier</dt><dd class="col-md-8">         x0,y0  ...  xn,yn</dd>
+<dt class="col-md-4">path</dt><dd class="col-md-8">specification  </dd>
+<dt class="col-md-4">image</dt><dd class="col-md-8">          operator x0,y0 w,h filename</dd>
 </dl>
 
 <p>The text primitive:</p>
 
-<dl class="dl-horizontal">
-<dt>text</dt><dd>x0,y0 string</dd>
+<dl class="row">
+<dt class="col-md-4">text</dt><dd class="col-md-8">x0,y0 string</dd>
 </dl>
 <p>The text gravity primitive:</p>
 
-<dl class="dl-horizontal">
-<dt>gravity</dt><dd>NorthWest, North, NorthEast, West, Center, East, SouthWest, South, or SouthEast</dd>
+<dl class="row">
+<dt class="col-md-4">gravity</dt><dd class="col-md-8">NorthWest, North, NorthEast, West, Center, East, SouthWest, South, or SouthEast</dd>
 </dl>
 
 <p>The text gravity primitive only affects the placement of text and does not
@@ -3209,19 +3209,19 @@
 
 <p>The transformation primitives:</p>
 
-<dl class="dl-horizontal">
-<dt>rotate</dt><dd>degrees</dd>
-<dt>translate</dt><dd>dx,dy</dd>
-<dt>scale</dt><dd>sx,sy</dd>
-<dt>skewX</dt><dd>degrees</dd>
-<dt>skewY</dt><dd>degrees</dd>
+<dl class="row">
+<dt class="col-md-4">rotate</dt><dd class="col-md-8">degrees</dd>
+<dt class="col-md-4">translate</dt><dd class="col-md-8">dx,dy</dd>
+<dt class="col-md-4">scale</dt><dd class="col-md-8">sx,sy</dd>
+<dt class="col-md-4">skewX</dt><dd class="col-md-8">degrees</dd>
+<dt class="col-md-4">skewY</dt><dd class="col-md-8">degrees</dd>
 </dl>
 
 <p>The pixel operation primitives:</p>
 
-<dl class="dl-horizontal">
-<dt>color</dt><dd>x0,y0 method</dd>
-<dt>matte</dt><dd>x0,y0 method</dd>
+<dl class="row">
+<dt class="col-md-4">color</dt><dd class="col-md-8">x0,y0 method</dd>
+<dt class="col-md-4">matte</dt><dd class="col-md-8">x0,y0 method</dd>
 </dl>
 
 <p>The shape primitives are drawn in the color specified by the preceding <a
@@ -3273,9 +3273,9 @@
 <p>As an example, to define a circle centered at 100,100 that extends to
 150,150 use:</p>
 
-<pre>
+<pre><code>
 -draw 'circle 100,100 150,150'
-</pre>
+</code></pre>
 
 <p>The <code>Bezier</code> primitive creates a spline curve and requires three
 or points to define its shape. The first and last points are the
@@ -3291,10 +3291,10 @@
 <code>path</code> primitive or to draw multiple four-point bezier segments with
 the start and end knots of each successive segment repeated. For example:</p>
 
-<pre>
+<pre><code>
 -draw 'bezier 20,50 45,100 45,0 70,50'
 -draw 'bezier 70,50 95,100 95,0 120,50'
-</pre>
+</code></pre>
 
 <p>A <code>path</code> represents an outline of an object, defined in terms of
 moveto (set a new current point), lineto (draw a straight line), curveto (draw
@@ -3309,9 +3309,9 @@
 image keyword with the composite operator, image location, image size, and
 filename:</p>
 
-<pre>
+<pre><code>
 -draw 'image SrcOver 100,100 225,225 image.jpg'
-</pre>
+</code></pre>
 
 <p>You can use 0,0 for the image size, which means to use the actual
 dimensions found in the image header. Otherwise, it is scaled to the given
@@ -3329,9 +3329,9 @@
 <p>For example, the following annotates the image with <code>Works like
 magick!</code> for an image titled <code>bird.miff</code>. </p>
 
-<pre>
+<pre><code>
 -draw "text 100,100 'Works like magick!' "
-</pre>
+</code></pre>
 
 <p>See the <a href="command-line-options.html#annotate">-annotate</a> option for another convenient way
 to annotate an image with text.</p>
@@ -3362,13 +3362,13 @@
 fill color (see <a href="command-line-options.html#fill">-fill</a>). Follow the pixel coordinate with
 a method:</p>
 
-<pre>
+<pre><code>
 point
 replace
 floodfill
 filltoborder
 reset
-</pre>
+</code></pre>
 
 <p>Consider the target pixel as that specified by your coordinate. The
 <code>point</code> method recolors the target pixel. The <code>replace</code>
@@ -3402,7 +3402,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="duplicate"></a>-duplicate <var>count,indexes</var></h3>
+  <h3><a id="duplicate"></a>-duplicate <var>count,indexes</var></h3>
 </div>
 
 <p class="magick-description">duplicate an image one or more times.</p>
@@ -3415,19 +3415,19 @@
 image sequence.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="edge"></a>-edge <var>radius</var></h3>
+  <h3><a id="edge"></a>-edge <var>radius</var></h3>
 </div>
 
 <p class="magick-description">detect edges within an image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="emboss"></a>-emboss <var>radius</var></h3>
+  <h3><a id="emboss"></a>-emboss <var>radius</var></h3>
 </div>
 
 <p class="magick-description">emboss an image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="encipher"></a>-encipher <var>filename</var></h3>
+  <h3><a id="encipher"></a>-encipher <var>filename</var></h3>
 </div>
 
 <p class="magick-description">Encipher pixels for later deciphering by <a href="command-line-options.html#decipher">-decipher</a>.</p>
@@ -3441,24 +3441,24 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="encoding"></a>-encoding <var>type</var></h3>
+  <h3><a id="encoding"></a>-encoding <var>type</var></h3>
 </div>
 
 <p class="magick-description">specify the text encoding.</p>
 
 <p>Choose from</p>
 
-<pre>
+<pre><code>
 AdobeCustom     AdobeExpert
 AdobeStandard   AppleRoman
 BIG5            GB2312
 Latin 2         None
 SJIScode        Symbol
 Unicode         Wansung
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="endian"></a>-endian <var>type</var></h3>
+  <h3><a id="endian"></a>-endian <var>type</var></h3>
 </div>
 
 <p class="magick-description">Specify endianness (<code>MSB</code> or <code>LSB</code>) of the image.</p>
@@ -3469,14 +3469,14 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="enhance"></a>-enhance</h3>
+  <h3><a id="enhance"></a>-enhance</h3>
 </div>
 
 <p class="magick-description">Apply a digital filter to enhance a noisy image.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="equalize"></a>-equalize</h3>
+  <h3><a id="equalize"></a>-equalize</h3>
 </div>
 
 <p class="magick-description">perform histogram equalization on the image channel-by-channel.</p>
@@ -3494,7 +3494,7 @@
 -colorspace RGB</code> ...</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="evaluate"></a>-evaluate <var>operator value</var></h3>
+  <h3><a id="evaluate"></a>-evaluate <var>operator value</var></h3>
 </div>
 
 <p class="magick-description">Alter channel pixels by evaluating an arithmetic, relational, or logical expression.</p>
@@ -3511,7 +3511,7 @@
 normalized pixels are used, they are restored, following the other
 calculations, to the full range by multiplying by <var>QuantumRange</var>.)</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <col width="25%" />
   <col width="75%" />
   <thead>
@@ -3636,7 +3636,7 @@
 multi-value version of evaluate. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="evaluate-sequence"></a>-evaluate-sequence <var>operator</var></h3>
+  <h3><a id="evaluate-sequence"></a>-evaluate-sequence <var>operator</var></h3>
 </div>
 
 <p class="magick-description">Alter channel pixels by evaluating an arithmetic, relational, or
@@ -3647,7 +3647,7 @@
 href="command-line-options.html#list">-list evaluate</a>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="extent"></a>-extent <var>geometry</var></h3>
+  <h3><a id="extent"></a>-extent <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Set the image size and offset.</p>
@@ -3662,15 +3662,15 @@
 display.  If the aspect ratio of the input image isn't exactly 4:3, then the
 image is centered on an 800x600 black canvas: </p>
 
-<pre>
+<pre><code>
 convert input.jpg -resize 800x600 -background black -compose Copy \ 
   -gravity center -extent 800x600 -quality 92 output.jpg
-</pre>
+</code></pre>
 
 <p>See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="extract"></a>-extract <var>geometry</var></h3>
+  <h3><a id="extract"></a>-extract <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Extract the specified area from image.</p>
@@ -3678,31 +3678,31 @@
 <p>This option is most useful for extracting a subregion of a very large raw
 image.  Note that these two commands are equivalent:</p>
 
-<pre>
+<pre><code>
 convert -size 16000x16000 -depth 8 -extract 640x480+1280+960 \ 
   image.rgb image.png",
 convert -size 16000x16000 -depth 8 'image.rgb[640x480+1280+960]' \
   image.rgb image.png"
-</pre>
+</code></pre>
 
 <p>If you omit the offsets, as in</p>
 
-<pre>
+<pre><code>
 convert -size 16000x16000 -depth 8 -extract 640x480 \ 
   image.rgb image.png
-</pre>
+</code></pre>
 
 <p>the image is <var>resized</var> to the specified dimensions instead,
 equivalent to:</p>
 
-<pre>
+<pre><code>
 convert -size 16000x16000 -depth 8 -resize 640x480 image.rgb image.png
-</pre>
+</code></pre>
 
 <p>See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="family"></a>-family <var>fontFamily</var></h3>
+  <h3><a id="family"></a>-family <var>fontFamily</var></h3>
 </div>
 
 <p class="magick-description">Set a font family for text.</p>
@@ -3717,12 +3717,12 @@
 href="command-line-options.html#style">-style</a>, and <a href="command-line-options.html#weight">-weight</a>.  </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="features"></a>-features <var>distance</var></h3>
+  <h3><a id="features"></a>-features <var>distance</var></h3>
 </div>
 
 <p class="magick-description">display (co-occurrence matrix) texture measure features for each channel in the image in each of four directions (horizontal, vertical, left and right diagonals) for the specified distance.</p>
 
-<pre>
+<pre><code>
 Angular Second Moment       Sum Entropy
 Contrast                    Entropy
 Correlation                 Difference Variance
@@ -3730,10 +3730,10 @@
 Inverse Difference Moment   Information Measure of Correlation 1
 Sum Average                 Information Measure of Correlation 2
 Sum Variance                Maximum Correlation Coefficient
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="fft"></a>-fft</h3>
+  <h3><a id="fft"></a>-fft</h3>
 </div>
 
 <p class="magick-description">implements the forward discrete Fourier transform (DFT).</p>
@@ -3766,16 +3766,16 @@
 PFM, EXR and PNG are the recommended image formats to use. All of these
 formats, except PNG support multi-frame images. So for example,</p>
 
-<pre>
+<pre><code>
 convert image.png -fft fft_image.miff
-</pre>
+</code></pre>
 
 <p>generates a magnitude image as <code>fft_image.miff[0]</code> and a phase
 image as <code>fft_image.miff[1]</code>. Similarly,</p>
 
-<pre>
+<pre><code>
 convert image.png -fft fft_image.png
-</pre>
+</code></pre>
 
 <p>generates a magnitude image as <code>fft_image-0.png</code> and a phase image
 as <code>fft_image-1.png</code>. If you prefer this representation, then you can
@@ -3800,10 +3800,10 @@
 enhance the darker values more in comparison to the lighter values. This can
 be done, for example, as follows:</p>
 
-<pre>
+<pre><code>
 convert fft_image.miff[0] -contrast-stretch 0 \
   -evaluate log 1000 fft_image_spectrum.png"
-</pre>
+</code></pre>
 
 <p>where either <a href="command-line-options.html#contrast-stretch">-contrast-stretch</a> 0 or <a
 href="command-line-options.html#auto-level">-auto-level</a> is used to scale the image to full dynamic
@@ -3844,7 +3844,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="fill"></a>-fill <var>color</var></h3>
+  <h3><a id="fill"></a>-fill <var>color</var></h3>
 </div>
 
 <p class="magick-description">color to use when filling a graphic primitive.</p>
@@ -3858,18 +3858,18 @@
 
 <p>For example,</p>
 
-<pre>
+<pre><code>
 -fill blue
 -fill "#ddddff"
 -fill "rgb(255,255,255)"
-</pre>
+</code></pre>
 
 <p>See <a href="command-line-options.html#draw">-draw</a> for further details.</p>
 
 <p>To print a complete list of color names, use the <a href="command-line-options.html#list">-list color</a> option.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="filter"></a>-filter <var>type</var></h3>
+  <h3><a id="filter"></a>-filter <var>type</var></h3>
 </div>
 
 <p class="magick-description">Use this <var>type</var> of filter when resizing or distorting an image.</p>
@@ -3878,11 +3878,11 @@
 operations such as <a href="command-line-options.html#resize">-resize</a> and <a href="command-line-options.html#distort"
 >-distort</a>. For example you can use a simple resize filter such as:</p>
 
-<pre>
+<pre><code>
 Point       Hermite       Cubic
 Box         Gaussian      Catrom
 Triangle    Quadratic     Mitchell
-</pre>
+</code></pre>
 
 <p>The <code>Bessel</code> and <code>Sinc</code> filter is also provided (as well
 as a faster <code>SincFast</code> equivalent form).  However these filters are
@@ -3895,11 +3895,11 @@
 using these functions will define a 'Windowed' filter, appropriate to the
 operator involved.  Windowed filters include: </p>
 
-<pre>
+<pre><code>
 Lanczos       Hamming       Parzen
 Blackman      Kaiser        Welsh
 Hanning       Bartlett      Bohman
-</pre>
+</code></pre>
 
 <p>Also one special self-windowing filter is also provided
 <code>Lagrange</code>, which will automagically re-adjust its function depending
@@ -3917,7 +3917,7 @@
 use of these expert settings (see also <a href="command-line-options.html#define" >-define</a> and <a
 href="command-line-options.html#set" >-set</a>):-</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>-define filter:blur=<var>factor</var></td>
     <td>Scale the X axis of the filter (and its window). Use &gt; 1.0 for
@@ -4032,28 +4032,28 @@
 
 <p>For example, to get a 8 lobe jinc windowed sinc filter (Genseng filter?):</p>
 
-<pre>
+<pre><code>
 convert image.png \
   -filter sinc \
   -set filter:window=jinc \
   -set filter:lobes=8 \
   -resize 150%   image.jpg"
-</pre>
+</code></pre>
 
 <p>Or a raw un-windowed Sinc filter with 4 lobes:</p>
 
-<pre>
+<pre><code>
 convert image.png \
   -set filter:filter=sinc \
   -set filter:lobes=4 \
   -resize 150%   image.jpg"
-</pre>
+</code></pre>
 
 <p>To extract the data for a raw windowing function, combine it with
 a '<code>Box</code>' filter.  For example the '<code>Welch</code> parabolic
 windowing function. </p>
 
-<pre>
+<pre><code>
 convert null: -define filter:filter=Box \
   -define filter:window=Welch \
   -define filter:support=1.0 \
@@ -4062,7 +4062,7 @@
 gnuplot
   set grid
   plot \"window_welch.dat\" with lines
-</pre>
+</code></pre>
 
 <p>Note that the use of expert options is provided for image processing experts
 who have studied and understand how resize filters work. Without this
@@ -4072,14 +4072,14 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="flatten"></a>-flatten</h3>
+  <h3><a id="flatten"></a>-flatten</h3>
 </div>
 
 <p class="magick-description">This is a simple alias for the <a href="command-line-options.html#layers" >-layers</a> method "flatten".</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="flip"></a>-flip</h3>
+  <h3><a id="flip"></a>-flip</h3>
 </div>
 
 <p class="magick-description">create a <var>mirror image</var></p>
@@ -4089,7 +4089,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="floodfill"></a>-floodfill {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var> <var>color</var></h3>
+  <h3><a id="floodfill"></a>-floodfill {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var> <var>color</var></h3>
 </div>
 
 <p class="magick-description">floodfill the image with color at the specified offset.</p>
@@ -4110,7 +4110,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="flop"></a>-flop</h3>
+  <h3><a id="flop"></a>-flop</h3>
 </div>
 
 <p class="magick-description">create a <var>mirror image</var>.</p>
@@ -4120,7 +4120,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="font"></a>-font <var>name</var></h3>
+  <h3><a id="font"></a>-font <var>name</var></h3>
 </div>
 
 <p class="magick-description">set the font to use when annotating images with text, or creating labels.</p>
@@ -4139,7 +4139,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="foreground"></a>-foreground <var>color</var></h3>
+  <h3><a id="foreground"></a>-foreground <var>color</var></h3>
 </div>
 
 <p class="magick-description">Define the foreground color for menus.", "display</p>
@@ -4150,7 +4150,7 @@
 <p>The default foreground color is black.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="format"></a>-format <var>type</var></h3>
+  <h3><a id="format"></a>-format <var>type</var></h3>
 </div>
 
 <p class="magick-description">the image format type.</p>
@@ -4168,7 +4168,7 @@
 filename becomes <var>image.tiff</var>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="format_identify_"></a>-format <var>string</var></h3>
+  <h3><a id="format_identify_"></a>-format <var>string</var></h3>
 </div>
 
 <p class="magick-description">output formatted image characteristics.</p>
@@ -4178,7 +4178,7 @@
 option.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="frame"></a>-frame <var>geometry</var></h3>
+  <h3><a id="frame"></a>-frame <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Surround the image with a border or beveled frame.</p>
@@ -4210,12 +4210,12 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="frame_import_"></a>-frame</h3>
+  <h3><a id="frame_import_"></a>-frame</h3>
 </div>
 
 <p class="magick-description">include the X window frame in the imported image. </p>
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="function"></a>-function <var>function</var> <var>parameters</var></h3>
+  <h3><a id="function"></a>-function <var>function</var> <var>parameters</var></h3>
 </div>
 
 <p class="magick-description">Apply a function to channel values.</p>
@@ -4233,31 +4233,31 @@
 <p>Here,  <var>parameters</var> is a comma-separated list of
 numerical values. The number of values varies depending on which <var>function</var> is selected. Choose the <var>function</var> from:</p>
 
-<pre>
+<pre><code>
 Polynomial
 Sinusoid
 Arcsin
 Arctan
-</pre>
+</code></pre>
 
 <p>To print a complete list of <a href="command-line-options.html#function">-function</a> operators,
 use <a href="command-line-options.html#list">-list function</a>. Descriptions follow.</p>
 
-<dl class="dl-horizontal">
-  <dt>Polynomial</dt>
-  <dd><p>The <code>Polynomial</code> function takes an arbitrary number of parameters,
+<dl class="row">
+  <dt class="col-md-4">Polynomial</dt>
+  <dd class="col-md-8"><p>The <code>Polynomial</code> function takes an arbitrary number of parameters,
 these being the coefficients of a polynomial, in decreasing order of degree.
 That is, entering</p>
 
-<pre>
+<pre><code>
 -function Polynomial <var>a</var><sub><var>n</var></sub>,<var>a</var><sub><var>n</var>-1</sub>,...<var>a</var><sub>1</sub>,<var>a</var><sub>0</sub>
-</pre>
+</code></pre>
 
 <p>will invoke a polynomial function given by</p>
 
-<pre>
+<pre><code>
 <var>a</var><sub><var>n</var></sub> <b><var>u</var></b><sup><var>n</var></sup> + <var>a</var><sub><var>n</var>-1</sub> <b><var>u</var></b><sup><var>n</var>-1</sup> + ··· <var>a</var><sub>1</sub> <b><var>u</var></b> + <var>a</var><sub>0</sub>,
-</pre>
+</code></pre>
 
 <p>where <b><var>u</var></b> is pixel's original normalized channel value.</p>
 
@@ -4268,7 +4268,7 @@
 href="command-line-options.html#level">-level</a> operator also affects channels linearly. Some
 correspondences follow.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
         <td>-evaluate Set <var>value</var> </td>
         <td>-function Polynomial <var>value</var></td>
@@ -4298,32 +4298,32 @@
 desired.</p>
 
 </dd>
-<dt>Sinusoid</dt>
-<dd>
+<dt class="col-md-4">Sinusoid</dt>
+<dd class="col-md-8">
 <p>The <code>Sinusoid</code> function can be used to vary the channel values
 sinusoidally by setting frequency, phase shift, amplitude, and a bias. These
 values are given as one to four parameters, as follows,</p>
 
-<pre>
+<pre><code>
 -function <code>Sinusoid</code> <var>freq</var>,[<var>phase</var>,[<var>amp</var>,[<var>bias</var>]]]
-</pre>
+</code></pre>
 
 <p>where <var>phase</var> is in degrees. (The domain [0,1] of the function
 corresponds to 0 through <var>freq</var>×360 degrees.)
 The result is that if a pixel's normalized channel value is originally
 <b><var>u</var></b>, its resulting normalized value is given by </p>
 
-<pre>
+<pre><code>
 <var>amp</var> * sin(2*π* (<var>freq</var> * <b><var>u</var></b> + <var>phase</var> / 360)) + <var>bias</var>
-</pre>
+</code></pre>
 
 <p> For example, the following generates a curve that starts and ends at 0.9
 (when <b><var>u</var></b>=0 and 1, resp.), oscillating three times between
 .7−.2=.5 and .7+.2=.9. </p>
 
-<pre>
+<pre><code>
 -function Sinusoid 3,-90,.2,.7
-</pre>
+</code></pre>
 
 <p>The default values of <var>amp</var> and <var>bias</var> are both .5. The default for <var>phase</var>
 is 0.</p>
@@ -4332,7 +4332,7 @@
 <code>Cos</code> of the <a href="command-line-options.html#evaluate">-evaluate</a> operator by allowing
 varying amplitude, phase and bias. The correspondence is as follows.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
         <td>-evaluate Sin <var>freq</var> </td>
         <td>-function Sinusoid <var>freq</var>,0 </td>
@@ -4343,49 +4343,49 @@
   </tr>
 </table>
   </dd>
-<dt>ArcSin</dt>
-<dd>
+<dt class="col-md-4">ArcSin</dt>
+<dd class="col-md-8">
 <p>The <code>ArcSin</code> function generates the inverse curve of a Sinusoid,
 and can be used to generate cylindrical distortion and displacement maps.
 The curve can be adjusted relative to both the input values and output range
 of values.</p>
 
-<pre>
+<pre><code>
 -function <code>ArcSin</code> <var>width</var>,[<var>center</var>,[<var>range</var>,[<var>bias</var>]]]
-</pre>
+</code></pre>
 
 <p>with all values given in terms of normalized color values (0.0 for black,
 1.0 for white). Defaulting to values covering the full range from 0.0 to 1.0
 for bout input (<var>width</var>), and output (<var>width</var>) values. '<code>1.0,0.5,1.0,0.5</code>' </p>
 
-<pre>
+<pre><code>
 <var>range</var>/π * asin( 2/<var>width</var> * ( <b><var>u</var></b> - <var>center</var> ) ) + <var>bias</var>
-</pre>
+</code></pre>
 
 </dd>
-<dt>ArcTan</dt>
-<dd>
+<dt class="col-md-4">ArcTan</dt>
+<dd class="col-md-8">
 <p>The <code>ArcTan</code> function generates a curve that smooth crosses from
 limit values at infinities, though a center using the given slope value.
 All these values can be adjusted via the arguments.</p>
 
-<pre>
+<pre><code>
 -function <code>ArcTan</code> <var>slope</var>,[<var>center</var>,[<var>range</var>,[<var>bias</var>]]]
-</pre>
+</code></pre>
 
 <p>Defaulting to '<code>1.0,0.5,1.0,0.5</code>'.
 </p>
 
-<pre>
+<pre><code>
 <var>range</var>/π * atan( <var>slope</var>*π * ( <b><var>u</var></b> - <var>center</var> ) ) + <var>bias</var>
-</pre>
+</code></pre>
   </dd>
 </dl>
 
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="fuzz"></a>-fuzz <var>distance</var>{<var>%</var>}</h3>
+  <h3><a id="fuzz"></a>-fuzz <var>distance</var>{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">Colors within this <var>distance</var> are considered equal.</p>
@@ -4405,7 +4405,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="fx"></a>-fx <var>expression</var></h3>
+  <h3><a id="fx"></a>-fx <var>expression</var></h3>
 </div>
 
 <p class="magick-description">apply a mathematical expression to an image or image channels.</p>
@@ -4420,7 +4420,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="gamma"></a>-gamma <var>value</var></h3>
+  <h3><a id="gamma"></a>-gamma <var>value</var></h3>
 </div>
 
 <p class="magick-description">level of gamma correction.</p>
@@ -4449,16 +4449,16 @@
 display gamma; e.g., if your image is sRGB and you want to write a PNG gAMA
 chunk, use</p>
 
-<pre>
+<pre><code>
 convert input.png +gamma .45455 output.png
-</pre>
+</code></pre>
 
 <p>(0.45455 is 1/2.2)</p>
 
 <p>Note that gamma adjustments are also available via the <a href="command-line-options.html#level">-level</a> operator.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="gaussian-blur"></a>-gaussian-blur <var>radius</var><br />-gaussian-blur <var>radius</var>x<var>sigma</var></h3>
+  <h3><a id="gaussian-blur"></a>-gaussian-blur <var>radius</var><br />-gaussian-blur <var>radius</var>x<var>sigma</var></h3>
 </div>
 
 <p class="magick-description">Blur the image with a Gaussian operator.</p>
@@ -4493,7 +4493,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="geometry"></a>-geometry <var>geometry</var></h3>
+  <h3><a id="geometry"></a>-geometry <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Set the preferred size and location of the image.</p>
@@ -4501,7 +4501,7 @@
 <p>See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="gravity"></a>-gravity <var>type</var></h3>
+  <h3><a id="gravity"></a>-gravity <var>type</var></h3>
 </div>
 
 <p class="magick-description">Sets the current gravity suggestion for various other settings and options.</p>
@@ -4539,10 +4539,10 @@
 region itself, which is <var>centered</var> at the pixel
 coordinate (60,70). (See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.)</p>
 
-<pre>
+<pre><code>
 convert image.png -gravity Center -region 10x10-40+20 \ 
   -negate output.png
-</pre>
+</code></pre>
 
 <p>When used as an option to <a href="composite.html">composite</a>, <a
 href="command-line-options.html#gravity">-gravity</a> gives the direction that the image gravitates
@@ -4554,7 +4554,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="grayscale"></a>-grayscale <var>method</var></h3>
+  <h3><a id="grayscale"></a>-grayscale <var>method</var></h3>
 </div>
 
 <p class="magick-description">convert image to grayscale.</p>
@@ -4564,27 +4564,27 @@
 
 <p>For example, to convert an image to (linear) Rec709Luminance grayscale,  type:</p>
 
-<pre>
+<pre><code>
 convert in.png -grayscale Rec709Luminance out.png
-</pre>
+</code></pre>
 
 <p>which is equivalent to:</p>
 
-<pre>
+<pre><code>
 convert in.png -colorspace gray out.png
-</pre>
+</code></pre>
 
 <p>Similarly, to convert an image to (non-linear) Rec709Luma grayscale,  type:</p>
 
-<pre>
+<pre><code>
 convert in.png -grayscale Rec709Luma out.png
-</pre>
+</code></pre>
 
 <p>which is equivalent to:</p>
 
-<pre>
+<pre><code>
 convert in.png -set colorspace RGB -colorspace gray out.png
-</pre>
+</code></pre>
 
 <p>Note that a 'colorspace' intensity method will produce the same result
 regardless of the current colorpsace of the image. But a 'mathematical'
@@ -4597,14 +4597,14 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="green-primary"></a>-green-primary <var>x,y</var></h3>
+  <h3><a id="green-primary"></a>-green-primary <var>x,y</var></h3>
 </div>
 
 <p class="magick-description">green chromaticity primary point.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="hald-clut"></a>-hald-clut</h3>
+  <h3><a id="hald-clut"></a>-hald-clut</h3>
 </div>
 
 <p class="magick-description">apply a Hald color lookup table to the image.</p>
@@ -4614,9 +4614,9 @@
 can apply any color transformation to the Hald image and then use this option
 to apply the transform to the image. </p>
 
-<pre>
+<pre><code>
 convert image.png hald.png -hald-clut transform.png
-</pre>
+</code></pre>
 
 <p>This option provides a convenient method for you to use Gimp or Photoshop
 to make color corrections to the Hald CLUT image and subsequently apply them
@@ -4635,19 +4635,19 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="help"></a>-help</h3>
+  <h3><a id="help"></a>-help</h3>
 </div>
 
 <p class="magick-description">print usage instructions.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="highlight-color"></a>-highlight-color <var>color</var></h3>
+  <h3><a id="highlight-color"></a>-highlight-color <var>color</var></h3>
 </div>
 
 <p class="magick-description">when comparing images, emphasize pixel differences with this color.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="hough-lines"></a>-hough-lines <var>width</var>x<var>height</var>{<var>+threshold</var>}</h3>
+  <h3><a id="hough-lines"></a>-hough-lines <var>width</var>x<var>height</var>{<var>+threshold</var>}</h3>
 </div>
 
 <p class="magick-description">identify straight lines in the image (e.g. -hough-lines 9x9+195).</p>
@@ -4669,7 +4669,7 @@
 <p>Use <code><a href="command-line-options.html#define" >-define</a> hough-lines:accumulator=true</code> to return the accumulator image in addition to the lines image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="iconGeometry"></a>-iconGeometry <var>geometry</var></h3>
+  <h3><a id="iconGeometry"></a>-iconGeometry <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">specify the icon geometry.</p>
@@ -4681,13 +4681,13 @@
 <p>See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="iconic"></a>-iconic</h3>
+  <h3><a id="iconic"></a>-iconic</h3>
 </div>
 
 <p class="magick-description">start in icon mode in X Windows", 'animate', 'display</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="identify"></a>-identify</h3>
+  <h3><a id="identify"></a>-identify</h3>
 </div>
 
 <p class="magick-description">identify the format and characteristics of the image.</p>
@@ -4707,7 +4707,7 @@
 image histogram, and others.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="ift"></a>-ift</h3>
+  <h3><a id="ift"></a>-ift</h3>
 </div>
 
 <p class="magick-description">implements the inverse discrete Fourier transform (DFT).</p>
@@ -4723,15 +4723,15 @@
 <p>For example, depending upon the image format used to store the result of
 the <a href="command-line-options.html#fft">-fft</a>, one would use either</p>
 
-<pre>
+<pre><code>
 convert fft_image.miff -ift fft_image_ift.png
-</pre>
+</code></pre>
 
 <p>or</p>
 
-<pre>
+<pre><code>
 convert fft_image-0.png fft_image-1.png -ift fft_image_ift.png
-</pre>
+</code></pre>
 
 <p>The resulting image may need to be cropped due to padding introduced when
 the original image, prior to the <a href="command-line-options.html#fft">-fft</a> or <a
@@ -4748,19 +4748,19 @@
 <p>By default the IFT is not normalized (and the FFT is). Use "<code><a href="command-line-options.html#define" >-define</a> fourier:normalize=inverse</code> to explicitly normalize the IFT and unnormalize the FFT.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="immutable"></a>-immutable</h3>
+  <h3><a id="immutable"></a>-immutable</h3>
 </div>
 
 <p class="magick-description">make image immutable.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="implode"></a>-implode <var>factor</var></h3>
+  <h3><a id="implode"></a>-implode <var>factor</var></h3>
 </div>
 
 <p class="magick-description">implode image pixels about the center.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="insert"></a>-insert <var>index</var></h3>
+  <h3><a id="insert"></a>-insert <var>index</var></h3>
 </div>
 
 <p class="magick-description">insert the last image into the image sequence.</p>
@@ -4775,7 +4775,7 @@
 Consequently this has no effect on the image sequence order.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="intensity"></a>-intensity <var>method</var></h3>
+  <h3><a id="intensity"></a>-intensity <var>method</var></h3>
 </div>
 
 <p class="magick-description">method to generate intensity value from pixel.</p>
@@ -4790,13 +4790,13 @@
 the pixel values to linear-RGB or non-linear sRGB colorspace before
 being applied to calculate the final greyscale value. </p>
 
-<dl class="dl-horizontal">
-<dt>Rec601Luma</dt><dd>      0.298839R' + 0.586811G'+ 0.114350B'</dd>
-<dt>Rec601Luminance</dt><dd> 0.298839R + 0.586811G + 0.114350B</dd>
-<dt>Rec709Luma</dt><dd>      0.212656R' + 0.715158G' + 0.072186B'</dd>
-<dt>Rec709Luminance</dt><dd> 0.212656R + 0.715158G + 0.072186B</dd>
-<dt>Brightness</dt><dd>      max(R', G', B')</dd>
-<dt>Lightness</dt><dd>       (min(R', G', B') + max(R', G', B')) / 2.0</dd>
+<dl class="row">
+<dt class="col-md-4">Rec601Luma</dt><dd class="col-md-8">      0.298839R' + 0.586811G'+ 0.114350B'</dd>
+<dt class="col-md-4">Rec601Luminance</dt><dd class="col-md-8"> 0.298839R + 0.586811G + 0.114350B</dd>
+<dt class="col-md-4">Rec709Luma</dt><dd class="col-md-8">      0.212656R' + 0.715158G' + 0.072186B'</dd>
+<dt class="col-md-4">Rec709Luminance</dt><dd class="col-md-8"> 0.212656R + 0.715158G + 0.072186B</dd>
+<dt class="col-md-4">Brightness</dt><dd class="col-md-8">      max(R', G', B')</dd>
+<dt class="col-md-4">Lightness</dt><dd class="col-md-8">       (min(R', G', B') + max(R', G', B')) / 2.0</dd>
 </dl>
 
 <p>Note that the above R,G,B values is the image's linear-RGB values, while
@@ -4806,10 +4806,10 @@
 current value in the images respective R,G,B channel regardless of
 what that is, or what colorspace the image is currently using.</p>
 
-<dl class="dl-horizontal">
-<dt>Average</dt><dd>(R + G + B) / 3.0</dd>
-<dt>MS</dt><dd>(R^2 + G^2 + B^2) / 3.0</dd>
-<dt>RMS</dt><dd>sqrt( (R^2 + G^2 + B^2) / 3.0 )</dd>
+<dl class="row">
+<dt class="col-md-4">Average</dt><dd class="col-md-8">(R + G + B) / 3.0</dd>
+<dt class="col-md-4">MS</dt><dd class="col-md-8">(R^2 + G^2 + B^2) / 3.0</dd>
+<dt class="col-md-4">RMS</dt><dd class="col-md-8">sqrt( (R^2 + G^2 + B^2) / 3.0 )</dd>
 </dl>
 
 <p>These methods are often used for other purposes, such as generating a
@@ -4835,7 +4835,7 @@
 
 <p>Operators affected by the <a href="command-line-options.html#intensity" >-intensity</a> setting include:</p>
 
-<pre>
+<pre><code>
 -adaptive-blur
 -adaptive-sharpen
 -black-threshold
@@ -4851,10 +4851,10 @@
 -threshold
 -tint
 -white-threshold
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="intent"></a>-intent <var>type</var></h3>
+  <h3><a id="intent"></a>-intent <var>type</var></h3>
 </div>
 
 <p class="magick-description">use this type of rendering intent when managing the image color.</p>
@@ -4868,14 +4868,14 @@
 <p>To print a complete list of rendering intents, use <a href="command-line-options.html#list">-list intent</a>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="interlace"></a>-interlace <var>type</var></h3>
+  <h3><a id="interlace"></a>-interlace <var>type</var></h3>
 </div>
 
 <p class="magick-description">the type of interlacing scheme.</p>
 
 <p>Choose from:</p>
 
-<pre>
+<pre><code>
 none
 line
 plane
@@ -4883,7 +4883,7 @@
 JPEG
 GIF
 PNG
-</pre>
+</code></pre>
 
 <p>This option is used to specify the type of interlacing scheme for raw image
 formats such as <code>RGB</code> or <code>YUV</code>.</p>
@@ -4904,7 +4904,7 @@
 interlace</a>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="interpolate"></a>-interpolate <var>type</var></h3>
+  <h3><a id="interpolate"></a>-interpolate <var>type</var></h3>
 </div>
 
 <p class="magick-description">Set the pixel color interpolation method to use when looking up a color based on a floating point or real value.</p>
@@ -4915,23 +4915,23 @@
 the pixels surrounding that point.  That is how to determine the color of a
 point that falls between two, or even four different colored pixels. </p>
 
-<dl class="dl-horizontal">
-  <dt>integer</dt>
-  <dd>The color of the top-left pixel (floor function)</dd>
-  <dt>nearest-neighbor</dt>
-  <dd>The nearest pixel to the lookup point (rounded function)</dd>
-  <dt>average</dt>
-  <dd>The average color of the surrounding four pixels</dd>
-  <dt>bilinear</dt>
-  <dd>A double linear interpolation of pixels (the default)</dd>
-  <dt>mesh</dt>
-  <dd>Divide area into two flat triangular interpolations</dd>
-  <dt>bicubic</dt>
-  <dd>Fitted bicubic-spines of surrounding 16 pixels</dd>
-  <dt>spline</dt>
-  <dd>Direct spline curves (colors are blurred)</dd>
-  <dt>filter</dt>
-  <dd>Use resize <a href="command-line-options.html#filter">-filter</a> settings</dd>
+<dl class="row">
+  <dt class="col-md-4">integer</dt>
+  <dd class="col-md-8">The color of the top-left pixel (floor function)</dd>
+  <dt class="col-md-4">nearest-neighbor</dt>
+  <dd class="col-md-8">The nearest pixel to the lookup point (rounded function)</dd>
+  <dt class="col-md-4">average</dt>
+  <dd class="col-md-8">The average color of the surrounding four pixels</dd>
+  <dt class="col-md-4">bilinear</dt>
+  <dd class="col-md-8">A double linear interpolation of pixels (the default)</dd>
+  <dt class="col-md-4">mesh</dt>
+  <dd class="col-md-8">Divide area into two flat triangular interpolations</dd>
+  <dt class="col-md-4">bicubic</dt>
+  <dd class="col-md-8">Fitted bicubic-spines of surrounding 16 pixels</dd>
+  <dt class="col-md-4">spline</dt>
+  <dd class="col-md-8">Direct spline curves (colors are blurred)</dd>
+  <dt class="col-md-4">filter</dt>
+  <dd class="col-md-8">Use resize <a href="command-line-options.html#filter">-filter</a> settings</dd>
 </dl>
 
 <p>This most important for distortion operators such as <a href="command-line-options.html#distort"
@@ -4945,25 +4945,25 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="interline-spacing"></a>-interline-spacing <var>value</var></h3>
+  <h3><a id="interline-spacing"></a>-interline-spacing <var>value</var></h3>
 </div>
 
 <p class="magick-description">the space between two text lines.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="interword-spacing"></a>-interword-spacing <var>value</var></h3>
+  <h3><a id="interword-spacing"></a>-interword-spacing <var>value</var></h3>
 </div>
 
 <p class="magick-description">the space between two words.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="kerning"></a>-kerning <var>value</var></h3>
+  <h3><a id="kerning"></a>-kerning <var>value</var></h3>
 </div>
 
 <p class="magick-description">the space between two letters.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="kuwahara"></a>-kuwahara <var>radius</var><br />-kuwahara <var>radius</var>x<var>sigma</var></h3>
+  <h3><a id="kuwahara"></a>-kuwahara <var>radius</var><br />-kuwahara <var>radius</var>x<var>sigma</var></h3>
 </div>
 
 <p class="magick-description">edge preserving noise reduction filter.</p>
@@ -4972,7 +4972,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="label"></a>-label <var>name</var></h3>
+  <h3><a id="label"></a>-label <var>name</var></h3>
 </div>
 
 <p class="magick-description">assign a label to an image.</p>
@@ -4992,9 +4992,9 @@
 
 <p>For example,</p>
 
-<pre>
+<pre><code>
 -label "%m:%f %wx%h"  bird.miff
-</pre>
+</code></pre>
 
 <p>assigns an image label of <code>MIFF:bird.miff 512x480</code> to the
 "<code>bird.miff</code>" image and whose width is 512 and height is 480, as it
@@ -5013,7 +5013,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="lat"></a>-lat <var>width</var><br />-lat <var>width</var>x<var>height</var>{<var>+-</var>}<var>offset</var>{<var>%</var>}</h3>
+  <h3><a id="lat"></a>-lat <var>width</var><br />-lat <var>width</var>x<var>height</var>{<var>+-</var>}<var>offset</var>{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">perform local adaptive threshold.</p>
@@ -5031,7 +5031,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="layers"></a>-layers <var>method</var></h3>
+  <h3><a id="layers"></a>-layers <var>method</var></h3>
 </div>
 
 <p class="magick-description">handle multiple images forming a set of image layers or animation frames.</p>
@@ -5040,7 +5040,7 @@
 which may represent either a set of overlaid 'image layers', a GIF disposal
 animation, or a fully-'coalesced' animation sequence. </p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th style="width: 8%">Method</th>
@@ -5303,7 +5303,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="level"></a>-level <var>black_point</var>{,<var>white_point</var>}{<var>%</var>}{,<var>gamma</var>}</h3>
+  <h3><a id="level"></a>-level <var>black_point</var>{,<var>white_point</var>}{<var>%</var>}{,<var>gamma</var>}</h3>
 </div>
 
 <p class="magick-description">adjust the level of image channels.</p>
@@ -5341,7 +5341,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="level-colors"></a>-level-colors {<var>black_color</var>}{,}{<var>white_color</var>}</h3>
+  <h3><a id="level-colors"></a>-level-colors {<var>black_color</var>}{,}{<var>white_color</var>}</h3>
 </div>
 
 <p class="magick-description">adjust the level of an image using the provided dash separated colors.</p>
@@ -5371,7 +5371,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="limit"></a>-limit <var>type value</var></h3>
+  <h3><a id="limit"></a>-limit <var>type value</var></h3>
 </div>
 
 <p class="magick-description">Set the pixel cache resource limit.</p>
@@ -5389,13 +5389,13 @@
 compensating actions, if possible. For example, the following limits
 memory:</p>
 
-<pre>
+<pre><code>
 -limit memory 32MiB -limit map 64MiB
-</pre>
+</code></pre>
 
 <p>Use <a href="command-line-options.html#list">-list resource</a> to list the current limits. For example, our system shows these limits:</p>
 
-<pre>
+<pre><code>
 -> identify -list resource
 Resource limits:
   Width: 100MP
@@ -5408,7 +5408,7 @@
   Thread: 12
   Throttle: 0
   Time: unlimited
-</pre>
+</code></pre>
 
 <p>Requests for pixel storage to keep intermediate images are satisfied by one
 of three resource categories: in-memory pool, memory-mapped files pool, and
@@ -5441,9 +5441,9 @@
 the Internet.  To assure ImageMagick does not exceed 10MiB of memory you can
 simply set the area limit to 10MiB:</p>
 
-<pre>
+<pre><code>
 -limit area 10MB
-</pre>
+</code></pre>
 
 <p>Now whenever a large image is processed, the pixels are automagically
 cached to disk instead of memory.  This of course implies that large images
@@ -5452,9 +5452,9 @@
 might inadvertently upload a huge image to process, you should set a disk
 limit as well:</p>
 
-<pre>
+<pre><code>
 -limit area 10MB -limit disk 500MB
-</pre>
+</code></pre>
 
 <p>Here ImageMagick stops processing if an image requires more than 500MB of disk storage.</p>
 
@@ -5479,7 +5479,7 @@
 ">Architecture</a> page.  </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="linear-stretch"></a>-linear-stretch <var>black-point</var><br />-linear-stretch <var>black-point</var>{x<var>white-point</var>}{<var>%</var>}</h3>
+  <h3><a id="linear-stretch"></a>-linear-stretch <var>black-point</var><br />-linear-stretch <var>black-point</var>{x<var>white-point</var>}{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">Linear with saturation stretch.</p>
@@ -5504,13 +5504,13 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="linewidth"></a>-linewidth</h3>
+  <h3><a id="linewidth"></a>-linewidth</h3>
 </div>
 
 <p class="magick-description">the line width for subsequent draw operations.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="liquid-rescale"></a>-liquid-rescale <var>geometry</var></h3>
+  <h3><a id="liquid-rescale"></a>-liquid-rescale <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">rescale image with seam-carving.</p>
@@ -5518,12 +5518,12 @@
 <p>See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="list"></a>-list <var>type</var></h3>
+  <h3><a id="list"></a>-list <var>type</var></h3>
 </div>
 
 <p class="magick-description">Print a list of supported arguments for various options or settings.  Choose from these list types:</p>
 
-<pre class="pre-scrollable">
+<pre class="pre-scrollable"><code>
 Align
 Alpha
 Boolean
@@ -5594,18 +5594,18 @@
 Units
 Validate
 VirtualPixel
-</pre>
+</code></pre>
 
 <p>These lists vary depending on your version of ImageMagick. Use "<code>-list
 list</code>" to get a complete listing of all the "<code>-list</code>" arguments
 available:</p>
 
-<pre>
+<pre><code>
 identify -list list
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="log"></a>-log <var>string</var></h3>
+  <h3><a id="log"></a>-log <var>string</var></h3>
 </div>
 
 <p class="magick-description">Specify format for debug log.</p>
@@ -5616,31 +5616,31 @@
 <p>You can display the following components by embedding special format
 characters:</p>
 
-<dl class="dl-horizontal">
-<dt>%d</dt><dd>domain</dd>
-<dt>%e</dt><dd>event</dd>
-<dt>%f</dt><dd>function</dd>
-<dt>%l</dt><dd>line</dd>
-<dt>%m</dt><dd>module</dd>
-<dt>%p</dt><dd>process ID</dd>
-<dt>%r</dt><dd>real CPU time</dd>
-<dt>%t</dt><dd>wall clock time</dd>
-<dt>%u</dt><dd>user CPU time</dd>
-<dt>%%</dt><dd>percent sign</dd>
-<dt>\n</dt><dd>newline</dd>
-<dt>\r</dt><dd>carriage return</dd>
+<dl class="row">
+<dt class="col-md-4">%d</dt><dd class="col-md-8">domain</dd>
+<dt class="col-md-4">%e</dt><dd class="col-md-8">event</dd>
+<dt class="col-md-4">%f</dt><dd class="col-md-8">function</dd>
+<dt class="col-md-4">%l</dt><dd class="col-md-8">line</dd>
+<dt class="col-md-4">%m</dt><dd class="col-md-8">module</dd>
+<dt class="col-md-4">%p</dt><dd class="col-md-8">process ID</dd>
+<dt class="col-md-4">%r</dt><dd class="col-md-8">real CPU time</dd>
+<dt class="col-md-4">%t</dt><dd class="col-md-8">wall clock time</dd>
+<dt class="col-md-4">%u</dt><dd class="col-md-8">user CPU time</dd>
+<dt class="col-md-4">%%</dt><dd class="col-md-8">percent sign</dd>
+<dt class="col-md-4">\n</dt><dd class="col-md-8">newline</dd>
+<dt class="col-md-4">\r</dt><dd class="col-md-8">carriage return</dd>
 </dl>
 
 <p>For example:</p>
 
-<pre>
+<pre><code>
 convert -debug coders -log "%u %m:%l %e" in.gif out.png
-</pre>
+</code></pre>
 
 <p>The default behavior is to print all of the components.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="loop"></a>-loop <var>iterations</var></h3>
+  <h3><a id="loop"></a>-loop <var>iterations</var></h3>
 </div>
 
 <p class="magick-description">add Netscape loop extension to your GIF animation.</p>
@@ -5650,34 +5650,34 @@
 times.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="lowlight-color"></a>-lowlight-color <var>color</var></h3>
+  <h3><a id="lowlight-color"></a>-lowlight-color <var>color</var></h3>
 </div>
 
 <p class="magick-description">when comparing images, de-emphasize pixel differences with this color.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="magnify"></a>-magnify</h3>
+  <h3><a id="magnify"></a>-magnify</h3>
 </div>
 
 <p class="magick-description">double the size of the image with pixel art scaling.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="map"></a>-map <var>type</var></h3>
+  <h3><a id="map"></a>-map <var>type</var></h3>
 </div>
 
 <p class="magick-description">Display image using this <var>type</var>.</p>
 
 <p>Choose from these <var>Standard Colormap</var> types:</p>
 
-<pre>
+<pre><code>
 best
 default
 gray
 red
 green
 blue
-</pre>
+</code></pre>
 
 <p>The <var>X server</var> must support the <var>Standard
 Colormap</var> you choose, otherwise an error occurs.  Use <code>list</code> as
@@ -5686,25 +5686,25 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="map_stream_"></a>-map <var>components</var></h3>
+  <h3><a id="map_stream_"></a>-map <var>components</var></h3>
 </div>
 
 <p class="magick-description">pixel map.</p>
 
 <p>Here are the valid components of a map:</p>
 
-<dl class="dl-horizontal">
-<dt>r</dt><dd>  red pixel component</dd>
-<dt>g</dt><dd>  green pixel component</dd>
-<dt>b</dt><dd>  blue pixel component</dd>
-<dt>a</dt><dd>  alpha pixel component (0 is transparent)</dd>
-<dt>o</dt><dd>  opacity pixel component (0 is opaque)</dd>
-<dt>i</dt><dd>  grayscale intensity pixel component</dd>
-<dt>c</dt><dd>  cyan pixel component</dd>
-<dt>m</dt><dd>  magenta pixel component</dd>
-<dt>y</dt><dd>  yellow pixel component</dd>
-<dt>k</dt><dd>  black pixel component</dd>
-<dt>p</dt><dd>  pad component (always 0)</dd>
+<dl class="row">
+<dt class="col-md-4">r</dt><dd class="col-md-8">  red pixel component</dd>
+<dt class="col-md-4">g</dt><dd class="col-md-8">  green pixel component</dd>
+<dt class="col-md-4">b</dt><dd class="col-md-8">  blue pixel component</dd>
+<dt class="col-md-4">a</dt><dd class="col-md-8">  alpha pixel component (0 is transparent)</dd>
+<dt class="col-md-4">o</dt><dd class="col-md-8">  opacity pixel component (0 is opaque)</dd>
+<dt class="col-md-4">i</dt><dd class="col-md-8">  grayscale intensity pixel component</dd>
+<dt class="col-md-4">c</dt><dd class="col-md-8">  cyan pixel component</dd>
+<dt class="col-md-4">m</dt><dd class="col-md-8">  magenta pixel component</dd>
+<dt class="col-md-4">y</dt><dd class="col-md-8">  yellow pixel component</dd>
+<dt class="col-md-4">k</dt><dd class="col-md-8">  black pixel component</dd>
+<dt class="col-md-4">p</dt><dd class="col-md-8">  pad component (always 0)</dd>
 </dl>
 
 <p>You can specify as many of these components as needed in any order (e.g.
@@ -5712,7 +5712,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="mattecolor"></a>-mattecolor <var>color</var></h3>
+  <h3><a id="mattecolor"></a>-mattecolor <var>color</var></h3>
 </div>
 
 <p class="magick-description">Specify the color to be used with the <a href="command-line-options.html#frame">-frame</a> option.</p>
@@ -5723,7 +5723,7 @@
 style="background-color: #bdbdbd;">this shade of gray</span>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="maximum"></a>-maximum</h3>
+  <h3><a id="maximum"></a>-maximum</h3>
 </div>
 
 <p class="magick-description">return the maximum intensity of an image sequence.</p>
@@ -5734,7 +5734,7 @@
 name. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="median"></a>-median <var>geometry</var></h3>
+  <h3><a id="median"></a>-median <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">apply a median filter to the image.</p>
@@ -5745,7 +5745,7 @@
 name. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="mean-shift"></a>-mean-shift <var>width</var>x<var>height</var>{<var>+distance</var>{%}</h3>
+  <h3><a id="mean-shift"></a>-mean-shift <var>width</var>x<var>height</var>{<var>+distance</var>{%}</h3>
 </div>
 
 <p class="magick-description">image noise removal and color reduction/segmentation (e.g. -mean-shift 7x7+10%).</p>
@@ -5755,24 +5755,24 @@
 <p>The mean shift algorithm is iterative and thus slower the larger the window size. For each pixel, it gets all the pixels in the window centered at the pixel and excludes those that are outside the <var>radius=sqrt((width-1)(height-1)/4)</var> surrounding the pixel. From those pixels, it finds which of them are within the specified squared color distance from the current mean. It then computes a new x,y centroid from those coordinates and a new mean. This new x,y centroid is used as the center for a new window. This process is iterated until it converges and the final mean is then used to replace the original pixel value. It repeats this process for the next pixel, etc, until it processes all pixels in the image. Results are better when using other colorspaces rather than RGB. Recommend YIQ, YUV or YCbCr, which seem to give equivalent results.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="metric"></a>-metric <var>type</var></h3>
+  <h3><a id="metric"></a>-metric <var>type</var></h3>
 </div>
 
 <p class="magick-description">Output to STDERR a measure of the differences between images according to the <var>type</var> given metric.</p>
 
 <p>Choose from:</p>
 
-<dl class="dl-horizontal">
-<dt>AE</dt><dd>    absolute error count, number of different pixels (-fuzz effected)</dd>
-<dt>FUZZ</dt><dd>  mean color distance</dd>
-<dt>MAE</dt><dd>   mean absolute error (normalized), average channel error distance</dd>
-<dt>MEPP</dt><dd>  mean error per pixel (normalized mean error, normalized peak error)</dd>
-<dt>MSE</dt><dd>   mean error squared, average of the channel error squared</dd>
-<dt>NCC</dt><dd>   normalized cross correlation</dd>
-<dt>PAE</dt><dd>   peak absolute (normalized peak absolute)</dd>
-<dt>PHASH</dt><dd> perceptual hash for the sRGB and HCLp colorspaces.  Specify an alternative colorspace with <code>-define phash:colorspaces=<var>colorspace,colorspace,...</var></code></dd>
-<dt>PSNR</dt><dd>  peak signal to noise ratio</dd>
-<dt>RMSE</dt><dd>  root mean squared (normalized root mean squared)</dd>
+<dl class="row">
+<dt class="col-md-4">AE</dt><dd class="col-md-8">    absolute error count, number of different pixels (-fuzz effected)</dd>
+<dt class="col-md-4">FUZZ</dt><dd class="col-md-8">  mean color distance</dd>
+<dt class="col-md-4">MAE</dt><dd class="col-md-8">   mean absolute error (normalized), average channel error distance</dd>
+<dt class="col-md-4">MEPP</dt><dd class="col-md-8">  mean error per pixel (normalized mean error, normalized peak error)</dd>
+<dt class="col-md-4">MSE</dt><dd class="col-md-8">   mean error squared, average of the channel error squared</dd>
+<dt class="col-md-4">NCC</dt><dd class="col-md-8">   normalized cross correlation</dd>
+<dt class="col-md-4">PAE</dt><dd class="col-md-8">   peak absolute (normalized peak absolute)</dd>
+<dt class="col-md-4">PHASH</dt><dd class="col-md-8"> perceptual hash for the sRGB and HCLp colorspaces.  Specify an alternative colorspace with <code>-define phash:colorspaces=<var>colorspace,colorspace,...</var></code></dd>
+<dt class="col-md-4">PSNR</dt><dd class="col-md-8">  peak signal to noise ratio</dd>
+<dt class="col-md-4">RMSE</dt><dd class="col-md-8">  root mean squared (normalized root mean squared)</dd>
 </dl>
 
 <p>Control the '<code>AE</code>', or absolute count of pixels that are different,
@@ -5791,7 +5791,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="minimum"></a>-minimum</h3>
+  <h3><a id="minimum"></a>-minimum</h3>
 </div>
 
 <p class="magick-description">return the minimum intensity of an image sequence.</p>
@@ -5804,13 +5804,13 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="mode"></a>-mode <var>geometry</var></h3>
+  <h3><a id="mode"></a>-mode <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">make each pixel the \'predominant color\' of the neighborhood.'</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header">-mode <var>value</var></h3>
+  <h3>-mode <var>value</var></h3>
 </div>
 
 <p class="magick-description">Mode of operation.</p>
@@ -5824,7 +5824,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="modulate"></a>-modulate <var>brightness</var>[,<var>saturation</var>,<var>hue</var>]</h3>
+  <h3><a id="modulate"></a>-modulate <var>brightness</var>[,<var>saturation</var>,<var>hue</var>]</h3>
 </div>
 
 <p class="magick-description">Vary the <var>brightness</var>, <var>saturation</var>, and <var>hue</var> of an image.</p>
@@ -5856,32 +5856,32 @@
 >option:modulate:colorspace</code>' to specify which colorspace to
 modulate.  Choose from <code>HCL</code>, <code>HCLp</code>, <code>HSB</code>, <code>HSI</code>, <code>HSL</code> (the default), <code>HSV</code>, <code>HWB</code>, or <code>LCH</code> (LCHuv).  For example,</p>
 
-<pre>
+<pre><code>
 convert image.png -set option:modulate:colorspace hsb -modulate 120,90 modulate.png
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="moments"></a>-moments</h3>
+  <h3><a id="moments"></a>-moments</h3>
 </div>
 
 <p class="magick-description">report image moments and perceptual hash.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="monitor"></a>-monitor</h3>
+  <h3><a id="monitor"></a>-monitor</h3>
 </div>
 
 <p class="magick-description">monitor progress.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="monochrome"></a>-monochrome</h3>
+  <h3><a id="monochrome"></a>-monochrome</h3>
 </div>
 
 <p class="magick-description">transform the image to black and white.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="morph"></a>-morph <var>frames</var></h3>
+  <h3><a id="morph"></a>-morph <var>frames</var></h3>
 </div>
 
 <p class="magick-description">morphs an image sequence.</p>
@@ -5894,8 +5894,8 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="morphology"></a>-morphology</h3>
-  <h3 class="magick-header">-morphology <var>method</var>  <var>kernel</var></h3>
+  <h3><a id="morphology"></a>-morphology</h3>
+  <h3>-morphology <var>method</var>  <var>kernel</var></h3>
 </div>
 
 <p class="magick-description">apply a morphology method to the image.</p>
@@ -5906,14 +5906,14 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="mosaic"></a>-mosaic</h3>
+  <h3><a id="mosaic"></a>-mosaic</h3>
 </div>
 
 <p class="magick-description">an simple alias for the <a href="command-line-options.html#layers" >-layers</a> method "mosaic"</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="motion-blur"></a>-motion-blur <var>radius</var><br />-motion-blur <var>radius</var>x<var>sigma</var>+<var>angle</var></h3>
+  <h3><a id="motion-blur"></a>-motion-blur <var>radius</var><br />-motion-blur <var>radius</var>x<var>sigma</var>+<var>angle</var></h3>
 </div>
 
 <p class="magick-description">simulate motion blur.</p>
@@ -5930,12 +5930,12 @@
 </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="name"></a>-name</h3>
+  <h3><a id="name"></a>-name</h3>
 </div>
 
 <p class="magick-description">name an image.</p>
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="negate"></a>-negate</h3>
+  <h3><a id="negate"></a>-negate</h3>
 </div>
 
 <p class="magick-description">replace each pixel with its complementary color.</p>
@@ -5945,7 +5945,7 @@
 negate the grayscale pixels of the image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="noise"></a>-noise <var>geometry</var><br/>
+  <h3><a id="noise"></a>-noise <var>geometry</var><br/>
   +noise <var>type</var></h3>
 </div>
 
@@ -5966,7 +5966,7 @@
 <p>Use <a href="command-line-options.html#noise">+noise</a> followed by a noise <var>type</var> to add noise to an image. Choose from these noise
 types:</p>
 
-<pre>
+<pre><code>
 Gaussian
 Impulse
 Laplacian
@@ -5974,7 +5974,7 @@
 Poisson
 Random
 Uniform
-</pre>
+</code></pre>
 
 <p>The amount of noise added can be controlled by the <code><a
 href="command-line-options.html#attenuate" >-attenuate</a></code> setting. If unset the value is
@@ -5990,7 +5990,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="normalize"></a>-normalize</h3>
+  <h3><a id="normalize"></a>-normalize</h3>
 </div>
 
 <p class="magick-description">Increase the contrast in an image by <var>stretching</var> the range of intensity values.</p>
@@ -6017,7 +6017,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="opaque"></a>-opaque <var>color</var></h3>
+  <h3><a id="opaque"></a>-opaque <var>color</var></h3>
 </div>
 
 <p class="magick-description">change this color to the fill color within the image.</p>
@@ -6040,7 +6040,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="ordered-dither"></a>-ordered-dither <var>threshold_map</var>{,<var>level</var>...}</h3>
+  <h3><a id="ordered-dither"></a>-ordered-dither <var>threshold_map</var>{,<var>level</var>...}</h3>
 </div>
 
 <p class="magick-description">dither the image using a pre-defined  ordered dither <var>threshold map</var> specified, and a uniform color map with the
@@ -6048,7 +6048,7 @@
 
 <p>You can choose from these standard threshold maps:</p>
 
-<pre class="pre-scrollable">
+<pre class="pre-scrollable"><code>
 threshold   1x1   Threshold 1x1 (non-dither)
 checks      2x1   Checkerboard 2x1 (dither)
 o2x2        2x2   Ordered 2x2 (dispersed)
@@ -6068,7 +6068,7 @@
 c6x6w             Circles 6x6 (white)
 c7x7b       c7x7  Circles 7x7 (black)
 c7x7w             Circles 7x7 (white)
-</pre>
+</code></pre>
 
 <p> The <code>threshold</code> generated a simple 50% threshold of the image.
 This could be used with <var >level</var> to do the equivalent of <a
@@ -6099,27 +6099,27 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="orient"></a>-orient <var>image orientation</var></h3>
+  <h3><a id="orient"></a>-orient <var>image orientation</var></h3>
 </div>
 
 <p class="magick-description">specify orientation of a digital camera image.</p>
 
 <p>Choose from these orientations:</p>
 
-<pre>
+<pre><code>
 bottom-left    right-top
 bottom-right   top-left
 left-bottom    top-right
 left-top       undefined
 right-bottom
-</pre>
+</code></pre>
 
 <p>To print a complete list of orientations, use the <a href="command-line-options.html#list" >-list
 orientation</a> option.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="page"></a>-page <var>geometry</var><br/>
+  <h3><a id="page"></a>-page <var>geometry</var><br/>
   -page <var>media</var>[<var>offset</var>][{<var>^!&lt;&gt;</var>}]<br/>
   +page
   </h3>
@@ -6136,45 +6136,45 @@
 <p>Use <var>media</var> as shorthand to specify the dimensions (<var>width</var>x<var>height</var>) of the <var>PostScript</var> page in dots per inch or a TEXT page in pixels.
 The choices for a PostScript page are:</p>
 
-<dl class="dl-horizontal">
-<dt> 11x17      </dt> <dd>  792 x 1224</dd> 
-<dt> Ledger     </dt> <dd> 1224 x  792</dd> 
-<dt> Legal      </dt> <dd>  612 x 1008</dd> 
-<dt> Letter     </dt> <dd>  612 x  792</dd> 
-<dt> LetterSmall</dt> <dd>  612 x  792</dd> 
-<dt> ArchE      </dt> <dd> 2592 x 3456</dd> 
-<dt> ArchD      </dt> <dd> 1728 x 2592</dd> 
-<dt> ArchC      </dt> <dd> 1296 x 1728</dd> 
-<dt> ArchB      </dt> <dd>  864 x 1296</dd> 
-<dt> ArchA      </dt> <dd>  648 x  864</dd> 
-<dt> A0         </dt> <dd> 2380 x 3368</dd> 
-<dt> A1         </dt> <dd> 1684 x 2380</dd> 
-<dt> A2         </dt> <dd> 1190 x 1684</dd> 
-<dt> A3         </dt> <dd>  842 x 1190</dd> 
-<dt> A4         </dt> <dd>  595 x  842</dd> 
-<dt> A4Small    </dt> <dd>  595 x  842</dd> 
-<dt> A5         </dt> <dd>  421 x  595</dd> 
-<dt> A6         </dt> <dd>  297 x  421</dd> 
-<dt> A7         </dt> <dd>  210 x  297</dd> 
-<dt> A8         </dt> <dd>  148 x  210</dd> 
-<dt> A9         </dt> <dd>  105 x  148</dd> 
-<dt> A10        </dt> <dd>   74 x  105</dd> 
-<dt> B0         </dt> <dd> 2836 x 4008</dd> 
-<dt> B1         </dt> <dd> 2004 x 2836</dd> 
-<dt> B2         </dt> <dd> 1418 x 2004</dd> 
-<dt> B3         </dt> <dd> 1002 x 1418</dd> 
-<dt> B4         </dt> <dd>  709 x 1002</dd> 
-<dt> B5         </dt> <dd>  501 x  709</dd> 
-<dt> C0         </dt> <dd> 2600 x 3677</dd> 
-<dt> C1         </dt> <dd> 1837 x 2600</dd> 
-<dt> C2         </dt> <dd> 1298 x 1837</dd> 
-<dt> C3         </dt> <dd>  918 x 1298</dd> 
-<dt> C4         </dt> <dd>  649 x  918</dd> 
-<dt> C5         </dt> <dd>  459 x  649</dd> 
-<dt> C6         </dt> <dd>  323 x  459</dd> 
-<dt> Flsa       </dt> <dd>  612 x  936</dd> 
-<dt> Flse       </dt> <dd>  612 x  936</dd> 
-<dt> HalfLetter </dt> <dd>  396 x  612</dd> 
+<dl class="row">
+<dt class="col-md-4"> 11x17      </dt> <dd class="col-md-8">  792 x 1224</dd> 
+<dt class="col-md-4"> Ledger     </dt> <dd class="col-md-8"> 1224 x  792</dd> 
+<dt class="col-md-4"> Legal      </dt> <dd class="col-md-8">  612 x 1008</dd> 
+<dt class="col-md-4"> Letter     </dt> <dd class="col-md-8">  612 x  792</dd> 
+<dt class="col-md-4"> LetterSmall</dt> <dd class="col-md-8">  612 x  792</dd> 
+<dt class="col-md-4"> ArchE      </dt> <dd class="col-md-8"> 2592 x 3456</dd> 
+<dt class="col-md-4"> ArchD      </dt> <dd class="col-md-8"> 1728 x 2592</dd> 
+<dt class="col-md-4"> ArchC      </dt> <dd class="col-md-8"> 1296 x 1728</dd> 
+<dt class="col-md-4"> ArchB      </dt> <dd class="col-md-8">  864 x 1296</dd> 
+<dt class="col-md-4"> ArchA      </dt> <dd class="col-md-8">  648 x  864</dd> 
+<dt class="col-md-4"> A0         </dt> <dd class="col-md-8"> 2380 x 3368</dd> 
+<dt class="col-md-4"> A1         </dt> <dd class="col-md-8"> 1684 x 2380</dd> 
+<dt class="col-md-4"> A2         </dt> <dd class="col-md-8"> 1190 x 1684</dd> 
+<dt class="col-md-4"> A3         </dt> <dd class="col-md-8">  842 x 1190</dd> 
+<dt class="col-md-4"> A4         </dt> <dd class="col-md-8">  595 x  842</dd> 
+<dt class="col-md-4"> A4Small    </dt> <dd class="col-md-8">  595 x  842</dd> 
+<dt class="col-md-4"> A5         </dt> <dd class="col-md-8">  421 x  595</dd> 
+<dt class="col-md-4"> A6         </dt> <dd class="col-md-8">  297 x  421</dd> 
+<dt class="col-md-4"> A7         </dt> <dd class="col-md-8">  210 x  297</dd> 
+<dt class="col-md-4"> A8         </dt> <dd class="col-md-8">  148 x  210</dd> 
+<dt class="col-md-4"> A9         </dt> <dd class="col-md-8">  105 x  148</dd> 
+<dt class="col-md-4"> A10        </dt> <dd class="col-md-8">   74 x  105</dd> 
+<dt class="col-md-4"> B0         </dt> <dd class="col-md-8"> 2836 x 4008</dd> 
+<dt class="col-md-4"> B1         </dt> <dd class="col-md-8"> 2004 x 2836</dd> 
+<dt class="col-md-4"> B2         </dt> <dd class="col-md-8"> 1418 x 2004</dd> 
+<dt class="col-md-4"> B3         </dt> <dd class="col-md-8"> 1002 x 1418</dd> 
+<dt class="col-md-4"> B4         </dt> <dd class="col-md-8">  709 x 1002</dd> 
+<dt class="col-md-4"> B5         </dt> <dd class="col-md-8">  501 x  709</dd> 
+<dt class="col-md-4"> C0         </dt> <dd class="col-md-8"> 2600 x 3677</dd> 
+<dt class="col-md-4"> C1         </dt> <dd class="col-md-8"> 1837 x 2600</dd> 
+<dt class="col-md-4"> C2         </dt> <dd class="col-md-8"> 1298 x 1837</dd> 
+<dt class="col-md-4"> C3         </dt> <dd class="col-md-8">  918 x 1298</dd> 
+<dt class="col-md-4"> C4         </dt> <dd class="col-md-8">  649 x  918</dd> 
+<dt class="col-md-4"> C5         </dt> <dd class="col-md-8">  459 x  649</dd> 
+<dt class="col-md-4"> C6         </dt> <dd class="col-md-8">  323 x  459</dd> 
+<dt class="col-md-4"> Flsa       </dt> <dd class="col-md-8">  612 x  936</dd> 
+<dt class="col-md-4"> Flse       </dt> <dd class="col-md-8">  612 x  936</dd> 
+<dt class="col-md-4"> HalfLetter </dt> <dd class="col-md-8">  396 x  612</dd> 
 </dl>
 
 <p>This option is also used to place subimages when writing to a multi-image
@@ -6205,7 +6205,7 @@
 <p>Use <a href="command-line-options.html#page">+page</a> to remove the page settings for an image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="paint"></a>-paint <var>radius</var></h3>
+  <h3><a id="paint"></a>-paint <var>radius</var></h3>
 </div>
 
 <p class="magick-description">simulate an oil painting.</p>
@@ -6214,12 +6214,12 @@
 neighborhood whose width is specified with <var>radius</var>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="path"></a>-path <var>path</var></h3></div>
+  <h3><a id="path"></a>-path <var>path</var></h3></div>
 
 <p class="magick-description">write images to this path on disk.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="pause_animate_"></a>-pause <var>seconds</var></h3>
+  <h3><a id="pause_animate_"></a>-pause <var>seconds</var></h3>
 </div>
 
 <p class="magick-description">Pause between animation loops</p>
@@ -6227,7 +6227,7 @@
 <p>Pause for the specified number of seconds before repeating the animation.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="pause_import_"></a>-pause <var>seconds</var></h3>
+  <h3><a id="pause_import_"></a>-pause <var>seconds</var></h3>
 </div>
 
 <p class="magick-description">Pause between snapshots.</p>
@@ -6235,25 +6235,25 @@
 <p>Pause for the specified number of seconds before taking the next snapshot.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="perceptible"></a>-perceptible <var>epsilon</var></h3>
+  <h3><a id="perceptible"></a>-perceptible <var>epsilon</var></h3>
 </div>
 
 <p class="magick-description">set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="ping"></a>-ping</h3>
+  <h3><a id="ping"></a>-ping</h3>
 </div>
 
 <p class="magick-description">efficiently determine image characteristics.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="pointsize"></a>-pointsize <var>value</var></h3>
+  <h3><a id="pointsize"></a>-pointsize <var>value</var></h3>
 </div>
 
 <p class="magick-description">pointsize of the PostScript, OPTION1, or TrueType font.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="polaroid"></a>-polaroid <var>angle</var></h3>
+  <h3><a id="polaroid"></a>-polaroid <var>angle</var></h3>
 </div>
 
 <p class="magick-description">simulate a Polaroid picture.</p>
@@ -6261,7 +6261,7 @@
 <p>Use <code>+polaroid</code> to rotate the image at a random angle between -15 and +15 degrees.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="poly"></a>-poly <var>"wt,exp ..."</var></h3>
+  <h3><a id="poly"></a>-poly <var>"wt,exp ..."</var></h3>
 </div>
 
 <p class="magick-description">combines multiple images according to a weighted sum of polynomials; one floating point weight (coefficient) and one floating point polynomial exponent (power) for each image expressed as comma separated pairs.</p>
@@ -6284,7 +6284,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="posterize"></a>-posterize <var>levels</var></h3>
+  <h3><a id="posterize"></a>-posterize <var>levels</var></h3>
 </div>
 
 <p class="magick-description">reduce the image to a limited number of color levels per channel.</p>
@@ -6293,13 +6293,13 @@
 visible effect.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="precision"></a>-precision <var>value</var></h3>
+  <h3><a id="precision"></a>-precision <var>value</var></h3>
 </div>
 
 <p class="magick-description">set the maximum number of significant digits to be printed.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="preview"></a>-preview <var>type</var></h3>
+  <h3><a id="preview"></a>-preview <var>type</var></h3>
 </div>
 
 <p class="magick-description">image preview type.</p>
@@ -6308,7 +6308,7 @@
 <code>convert file.png -preview Gamma Preview:gamma.png</code>). Choose from
 these previews:</p>
 
-<pre class="pre-scrollable">
+<pre class="pre-scrollable"><code>
 AddNoise
 Blur
 Brightness
@@ -6338,20 +6338,20 @@
 Swirl
 Threshold
 Wave
-</pre>
+</code></pre>
 
 <p>To print a complete list of previews, use the <a href="command-line-options.html#list">-list preview</a> option.</p>
 
 <p>The default preview is <code>JPEG</code>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="print"></a>-print <var>string</var></h3>
+  <h3><a id="print"></a>-print <var>string</var></h3>
 </div>
 
 <p class="magick-description">interpret string and print to console.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="process"></a>-process <var>command</var></h3>
+  <h3><a id="process"></a>-process <var>command</var></h3>
 </div>
 
 <p class="magick-description">process the image with a custom image filter.</p>
@@ -6362,7 +6362,7 @@
 pass to the process module.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="profile"></a>-profile <var>filename</var><br/>
+  <h3><a id="profile"></a>-profile <var>filename</var><br/>
   +profile <var>profile_name</var></h3>
 </div>
 
@@ -6388,9 +6388,9 @@
 <p>For example, to extract the Exif data (which is stored in JPEG files in the
 <var>APP1</var> profile), use.</p>
 
-<pre>
+<pre><code>
 convert cockatoo.jpg profile.exif
-</pre>
+</code></pre>
 
 <p>It is important to note that results may depend on whether or not the
 original image already has an included profile. Also, keep in mind that <a
@@ -6399,9 +6399,9 @@
 command-line. For instance, in the following example, if the original image is
 CMYK with profile, a CMYK-CMYK-RGB conversion results.</p>
 
-<pre>
+<pre><code>
 convert CMYK.tif -profile "CMYK.icc" -profile "RGB.icc" RGB.tiff
-</pre>
+</code></pre>
 
 <p>Furthermore, since ICC profiles are not necessarily symmetric, extra
 conversion steps can yield unwanted results.  CMYK profiles are often very
@@ -6409,7 +6409,7 @@
 </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="quality"></a>-quality <var>value</var></h3>
+  <h3><a id="quality"></a>-quality <var>value</var></h3>
 </div>
 
 <p class="magick-description">JPEG/MIFF/PNG compression level.</p>
@@ -6441,12 +6441,12 @@
 <p>If filter-type is 4 or less, the specified PNG filter-type is used for
 all scanlines:</p>
 
-<dl class="dl-horizontal">
-<dt>0</dt><dd>none</dd>
-<dt>1</dt><dd>sub</dd>
-<dt>2</dt><dd>up</dd>
-<dt>3</dt><dd>average</dd>
-<dt>4</dt><dd>Paeth</dd>
+<dl class="row">
+<dt class="col-md-4">0</dt><dd class="col-md-8">none</dd>
+<dt class="col-md-4">1</dt><dd class="col-md-8">sub</dd>
+<dt class="col-md-4">2</dt><dd class="col-md-8">up</dd>
+<dt class="col-md-4">3</dt><dd class="col-md-8">average</dd>
+<dt class="col-md-4">4</dt><dd class="col-md-8">Paeth</dd>
 </dl>
 
 <p>If filter-type is 5, adaptive filtering is used when quality is greater
@@ -6486,7 +6486,7 @@
 <p>For the BPG image format, quality/2 is the actual BPG compression level (range from 0 to 51).</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="quantize"></a>-quantize <var>colorspace</var></h3>
+  <h3><a id="quantize"></a>-quantize <var>colorspace</var></h3>
 </div>
 
 <p class="magick-description">reduce colors using this colorspace.</p>
@@ -6499,13 +6499,13 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="quiet"></a>-quiet</h3>
+  <h3><a id="quiet"></a>-quiet</h3>
 </div>
 
 <p class="magick-description">suppress all warning messages. Error messages are still reported.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="radial-blur"></a>-radial-blur  <var>angle</var></h3>
+  <h3><a id="radial-blur"></a>-radial-blur  <var>angle</var></h3>
 </div>
 
 <p class="magick-description">Blur around the center of the image.</p>
@@ -6519,7 +6519,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="raise"></a>-raise <var>thickness</var></h3>
+  <h3><a id="raise"></a>-raise <var>thickness</var></h3>
 </div>
 
 <p class="magick-description">Lighten or darken image edges.</p>
@@ -6531,13 +6531,13 @@
 href="command-line-options.html#raise">-raise</a> does not alter the dimensions of the image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="random-threshold"></a>-random-threshold <var>low</var>x<var>high</var></h3>
+  <h3><a id="random-threshold"></a>-random-threshold <var>low</var>x<var>high</var></h3>
 </div>
 
 <p class="magick-description">Apply a random threshold to the image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="read-mask"></a>-read-mask
+  <h3><a id="read-mask"></a>-read-mask
 <var>filename</var></h3>
 </div>
 
@@ -6553,13 +6553,13 @@
 but with strict boolean masking. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="red-primary"></a>-red-primary <var>x,y</var></h3>
+  <h3><a id="red-primary"></a>-red-primary <var>x,y</var></h3>
 </div>
 
 <p class="magick-description">Set the red chromaticity primary point.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="regard-warnings"></a>-regard-warnings</h3>
+  <h3><a id="regard-warnings"></a>-regard-warnings</h3>
 </div>
 
 <p class="magick-description">Pay attention to warning messages.</p>
@@ -6568,7 +6568,7 @@
 as errors. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="remap"></a>-remap <var>filename</var></h3>
+  <h3><a id="remap"></a>-remap <var>filename</var></h3>
 </div>
 
 <p class="magick-description">Reduce the number of colors in an image to the colors used by this image.</p>
@@ -6600,7 +6600,7 @@
 <p>Note, the remap image colormap has at most 8-bits of precision. Deeper color maps are automagically coalesced with other colors to meet this requirement.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="region"></a>-region <var>geometry</var></h3>
+  <h3><a id="region"></a>-region <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Set a region in which subsequent operations apply.</p>
@@ -6613,7 +6613,7 @@
 <p>Use <code>+region</code> to remove any previously set regions.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="remote"></a>-remote</h3>
+  <h3><a id="remote"></a>-remote</h3>
 </div>
 
 <p class="magick-description">perform a remote operation.</p>
@@ -6625,7 +6625,7 @@
 specify which application to control.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="render"></a>-render</h3>
+  <h3><a id="render"></a>-render</h3>
 </div>
 
 <p class="magick-description">render vector operations.</p>
@@ -6634,7 +6634,7 @@
 This useful when saving the result to vector formats such as MVG or SVG.</p>
 
 <div style="margin: auto;">
-<h3 class="magick-header"><a id="repage"></a>-repage <var>geometry</var></h3>
+<h3><a id="repage"></a>-repage <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Adjust the canvas and offset information of the image.</p>
@@ -6661,7 +6661,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="resample"></a>-resample <var>horizontal</var>x<var>vertical</var></h3>
+  <h3><a id="resample"></a>-resample <var>horizontal</var>x<var>vertical</var></h3>
 </div>
 
 <p class="magick-description">Resample image to specified horizontal and vertical resolution.</p>
@@ -6682,7 +6682,7 @@
 resolution specified in the standard file header.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="resize"></a>-resize <var>geometry</var></h3>
+  <h3><a id="resize"></a>-resize <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Resize an image.</p>
@@ -6699,26 +6699,26 @@
 coding.  If your image is gamma-corrected, you can remove the nonlinear gamma
 correction, apply the transform, then restore it like this:</p>
 
-<pre>
+<pre><code>
 convert portrait.jpg -gamma .45455 -resize 25% -gamma 2.2  \
   -quality 92 passport.jpg
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="respect-parentheses"></a>-respect-parentheses</h3>
+  <h3><a id="respect-parentheses"></a>-respect-parentheses</h3>
 </div>
 
 <p class="magick-description">settings remain in effect until parenthesis boundary.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="reverse"></a>-reverse</h3>
+  <h3><a id="reverse"></a>-reverse</h3>
 </div>
 
 <p class="magick-description">Reverse the order of images in the current image list.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="roll"></a>-roll {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var></h3>
+  <h3><a id="roll"></a>-roll {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var></h3>
 </div>
 
 <p class="magick-description">roll an image vertically or horizontally by the amount given.</p>
@@ -6728,7 +6728,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="rotate"></a>-rotate <var>degrees</var>{<var>&lt;</var>}{<var>&gt;</var>}</h3>
+  <h3><a id="rotate"></a>-rotate <var>degrees</var>{<var>&lt;</var>}{<var>&gt;</var>}</h3>
 </div>
 
 <p class="magick-description">Apply Paeth image rotation (using shear operations) to the image.</p>
@@ -6749,7 +6749,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="sample"></a>-sample <var>geometry</var></h3>
+  <h3><a id="sample"></a>-sample <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">minify / magnify the image with pixel subsampling and pixel replication, respectively.</p>
@@ -6786,7 +6786,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="sampling-factor"></a>-sampling-factor <var>horizontal-factor</var>x<var>vertical-factor</var></h3>
+  <h3><a id="sampling-factor"></a>-sampling-factor <var>horizontal-factor</var>x<var>vertical-factor</var></h3>
 </div>
 
 <p class="magick-description">sampling factors used by JPEG or MPEG-2 encoder and YUV decoder/encoder.</p>
@@ -6800,7 +6800,7 @@
 downsampling method.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="scale"></a>-scale <var>geometry</var></h3>
+  <h3><a id="scale"></a>-scale <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">minify / magnify the image with pixel block averaging and pixel replication, respectively.</p>
@@ -6822,7 +6822,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="scene"></a>-scene <var>value</var></h3>
+  <h3><a id="scene"></a>-scene <var>value</var></h3>
 </div>
 
 <p class="magick-description">set scene number.</p>
@@ -6830,7 +6830,7 @@
 <p>This option sets the scene number of an image or the first image in an image sequence.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="screen"></a>-screen</h3>
+  <h3><a id="screen"></a>-screen</h3>
 </div>
 
 <p class="magick-description">specify the screen to capture.</p>
@@ -6842,13 +6842,13 @@
 that are independent windows but appear over the specified window.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="seed"></a>-seed</h3>
+  <h3><a id="seed"></a>-seed</h3>
 </div>
 
 <p class="magick-description">seed a new sequence of pseudo-random numbers</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="segment"></a>-segment <var>cluster-threshold</var>x<var>smoothing-threshold</var></h3>
+  <h3><a id="segment"></a>-segment <var>cluster-threshold</var>x<var>smoothing-threshold</var></h3>
 </div>
 
 <p class="magick-description">segment the colors of an image.</p>
@@ -6868,7 +6868,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="selective-blur"></a>-selective-blur <var>radius</var><br />-selective-blur <var>radius</var>x<var>sigma</var>{<var>+threshold</var>}</h3>
+  <h3><a id="selective-blur"></a>-selective-blur <var>radius</var><br />-selective-blur <var>radius</var>x<var>sigma</var>{<var>+threshold</var>}</h3>
 </div>
 
 <p class="magick-description">Selectively blur pixels within a contrast threshold.</p>
@@ -6877,13 +6877,13 @@
 contrast. The threshold may be expressed as a fraction of <var>QuantumRange</var> or as a percentage.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="separate"></a>-separate</h3>
+  <h3><a id="separate"></a>-separate</h3>
 </div>
 
 <p class="magick-description">separate an image channel into a grayscale image.  Specify the channel with <a href="command-line-options.html#channel">-channel</a>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="sepia-tone"></a>-sepia-tone <var>percent-threshold</var></h3>
+  <h3><a id="sepia-tone"></a>-sepia-tone <var>percent-threshold</var></h3>
 </div>
 
 <p class="magick-description">simulate a sepia-toned photo.</p>
@@ -6898,8 +6898,8 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="set"></a>-set <var>key value</var></h3>
-  <h3 class="magick-header">+set <var>key</var></h3>
+  <h3><a id="set"></a>-set <var>key value</var></h3>
+  <h3>+set <var>key</var></h3>
 </div>
 
 <p class="magick-description">sets image attributes and properties for images in the current image sequence.</p>
@@ -6928,20 +6928,20 @@
 a global 'artifact' which are automatically assigned (and any <a href="escape.html" >Format Percent
 Escapes</a> expanded) to images as they are read in.  For example:</p>
 
-<pre>
+<pre><code>
 -> convert rose: -set comment 'Rose is a rose is a rose is a rose' rose.png
 identify -format %c rose.png
 Rose is a rose is a rose is a rose
-</pre>
+</code></pre>
 
 <p>The set value can also make use of <a href="escape.html" >Format and Print Image
 Properties</a> in the defined value.  For example:</p>
 
-<pre>
+<pre><code>
 -> convert rose: -set origsize '%wx%h' -resize 50% \
   -format 'Old size = %[origsize]  New size = %wx%h' info:
 Old size = 70x46  New size = 35x23
-</pre>
+</code></pre>
 
 <p>Other well known 'properties' that are available include:
 '<code>date:create</code>' and '<code>date:modify</code>' and
@@ -6957,17 +6957,17 @@
 <p>This option can also associate a colorspace or profile with your image.
 For example,</p>
 
-<pre>
+<pre><code>
 convert image.psd -set profile ISOcoated_v2_eci.icc image-icc.psd
-</pre>
+</code></pre>
 
 <p>Some 'properties' must be defined in a specific way to be used. For
 example only 'properties' prefixed with "<code>filename:</code>" can be used to
 modify the output filename of an image. For example</p>
 
-<pre>
+<pre><code>
 convert rose: -set filename:mysize '%wx%h' 'rose_%[filename:mysize].png'
-</pre>
+</code></pre>
 
 <p>If the setting value is prefixed with "<code>option:</code>" the setting will
 be saved as a global "Artifact" exactly as if it was set using the <a
@@ -6976,10 +6976,10 @@
 in a way that allows you to use them in a completely different image, even if
 the original image has long since been modified or destroyed. For example: </p>
 
-<pre>
+<pre><code>
 convert rose:  -set option:rosesize '%wx%h' -delete 0 \
   label:'%[rosesize]'   label_size_of_rose.gif"
-</pre>
+</code></pre>
 
 <p>Note that <a href="escape.html" >Format Percent Escapes</a> will only match
 a 'artifact' if the given <var>key</var> does not match an existing
@@ -6993,9 +6993,9 @@
 the commandline option as shown below or by setting the profile via a
 programming interface:</p>
 
-<pre>
+<pre><code>
 convert in.png -set profile PNG-chunk-x:&lt;filename&gt; out.png
-</pre>
+</code></pre>
 
 <p>where <var>x</var> is a location flag and
 <var>filename</var> is a file containing the chunk
@@ -7009,13 +7009,13 @@
 subsequent profiles from overwriting the preceding ones, e.g.,</p>
 
 
-<pre>
+<pre><code>
 convert in.png -set profile PNG-chunk-b01:file01 \ 
   -profile PNG-chunk-b02:file02 out.png
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="shade"></a>-shade <var>azimuth</var>x<var>elevation</var></h3>
+  <h3><a id="shade"></a>-shade <var>azimuth</var>x<var>elevation</var></h3>
 </div>
 
 <p class="magick-description">shade the image using a distant light source.</p>
@@ -7025,13 +7025,13 @@
 the shading results as a grayscale image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="shadow"></a>-shadow <var>percent-opacity</var>{x<var>sigma</var>}{<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var>{<var>%</var>}</h3>
+  <h3><a id="shadow"></a>-shadow <var>percent-opacity</var>{x<var>sigma</var>}{<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var>{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">simulate an image shadow.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a
+  <h3><a
 id="shared-memory"></a>-shared-memory</h3>
 </div>
 
@@ -7043,7 +7043,7 @@
 Otherwise, this option is ignored. The default is <code>True</code>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="sharpen"></a>-sharpen <var>radius</var><br />-sharpen <var>radius</var>x<var>sigma</var></h3>
+  <h3><a id="sharpen"></a>-sharpen <var>radius</var><br />-sharpen <var>radius</var>x<var>sigma</var></h3>
 </div>
 
 <p class="magick-description">sharpen the image.</p>
@@ -7051,7 +7051,7 @@
 <p>Use a Gaussian operator of the given radius and standard deviation (sigma).</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="shave"></a>-shave <var>geometry</var></h3>
+  <h3><a id="shave"></a>-shave <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Shave pixels from the image edges.</p>
@@ -7064,7 +7064,7 @@
 <p>See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="shear"></a>-shear <var>Xdegrees</var>[x<var>Ydegrees</var>]</h3>
+  <h3><a id="shear"></a>-shear <var>Xdegrees</var>[x<var>Ydegrees</var>]</h3>
 </div>
 
 <p class="magick-description">Shear the image along the x-axis and/or y-axis.</p>
@@ -7089,21 +7089,21 @@
 <var>commute</var>, i.e., the order matters in a sequence of shears. For
 example, the following two commands are not equivalent.</p>
 
-<pre>
+<pre><code>
 convert logo: -shear 20x0 -shear 0x60 logo-sheared.png
 convert logo: -shear 0x60 -shear 20x0 logo-sheared.png
-</pre>
+</code></pre>
 
 <p>The first of the two commands above is equivalent to the following, except
 for the amount of empty space created; the command that follows generates
 a smaller image, and so is a better choice in terms of time and space.</p>
 
-<pre>
+<pre><code>
 convert logo: -shear 20x60 logo-sheared.png
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="sigmoidal-contrast"></a>-sigmoidal-contrast <var>contrast</var>x<var>mid-point</var></h3>
+  <h3><a id="sigmoidal-contrast"></a>-sigmoidal-contrast <var>contrast</var>x<var>mid-point</var></h3>
 </div>
 
 <p class="magick-description">increase the contrast without saturating highlights or shadows.</p>
@@ -7131,7 +7131,7 @@
 <var>mid-point</var>. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="silent"></a>-silent</h3>
+  <h3><a id="silent"></a>-silent</h3>
 
 
 </div>
@@ -7140,7 +7140,7 @@
 by the <a href="import.html">import</a> tool.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="similarity-threshold"></a>-similarity-threshold <var>value</var></h3>
+  <h3><a id="similarity-threshold"></a>-similarity-threshold <var>value</var></h3>
 </div>
 
 <p class="magick-description">minimum RMSE for subimage match.</p>
@@ -7148,7 +7148,7 @@
 <p>If this setting is used, then the search will stop as soon as it finds a match whose metric is less than or equal to the value. A partially filled second output image will result. Using a value of zero, will cause the search to stop at the first perfect match it finds. If this setting is left off, then the search will proceed to completion or as limited by <var>-dissimilarity-threshold</var>.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="size"></a>-size <var>width</var>[x<var>height</var>][<var>+offset</var>]</h3>
+  <h3><a id="size"></a>-size <var>width</var>[x<var>height</var>][<var>+offset</var>]</h3>
 </div>
 
 <p class="magick-description">set the width and height of the image.</p>
@@ -7162,16 +7162,16 @@
 
 <p>For Photo CD images, choose from these sizes:</p>
 
-<pre>
+<pre><code>
 192x128
 384x256
 768x512
 1536x1024
 3072x2048
-</pre>
+</code></pre>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="sketch"></a>-sketch <var>radius</var><br />-sketch <var>radius</var>x<var>sigma</var>+<var>angle</var></h3>
+  <h3><a id="sketch"></a>-sketch <var>radius</var><br />-sketch <var>radius</var>x<var>sigma</var>+<var>angle</var></h3>
 </div>
 
 <p class="magick-description">simulate a pencil sketch.</p>
@@ -7181,7 +7181,7 @@
 direction people would consider the object is coming from.  </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="smush"></a>-smush <var>offset</var></h3>
+  <h3><a id="smush"></a>-smush <var>offset</var></h3>
 </div>
 
 <p class="magick-description">appends an image sequence together ignoring transparency.</p>
@@ -7195,7 +7195,7 @@
 <p>For zero offset and transparent images, the non-transparent parts of the two images will be aligned as close as possible without overlapping.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="snaps"></a>-snaps <var>value</var></h3>
+  <h3><a id="snaps"></a>-snaps <var>value</var></h3>
 </div>
 
 <p class="magick-description">Set the number of screen snapshots.</p>
@@ -7203,7 +7203,7 @@
 <p>Use this option to grab more than one image from the X server screen, to create an animation sequence.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="solarize"></a>-solarize <var>percent-threshold</var></h3>
+  <h3><a id="solarize"></a>-solarize <var>percent-threshold</var></h3>
 </div>
 
 <p class="magick-description">negate all pixels above the threshold level.</p>
@@ -7214,32 +7214,32 @@
 exposing a photographic film to light during the development process.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="sparse-color"></a>-sparse-color <var>method</var>  '<var>x</var>,<var>y</var> <var>color</var>  ...'</h3>
+  <h3><a id="sparse-color"></a>-sparse-color <var>method</var>  '<var>x</var>,<var>y</var> <var>color</var>  ...'</h3>
 </div>
 
 <p class="magick-description"> color the given image using the specified points of color, and filling the other intervening colors using the given methods. </p>
 
 
-<dl class="dl-horizontal">
-    <dt>barycentric</dt>
-    <dd>three point triangle of color given 3 points.
+<dl class="row">
+    <dt class="col-md-4">barycentric</dt>
+    <dd class="col-md-8">three point triangle of color given 3 points.
         Giving only 2 points will form a linear gradient between those points.
         The gradient generated extends beyond the triangle created by those
         3 points. </dd>
-    <dt>bilinear</dt>
-    <dd>Like barycentric but for 4 points. Less than 4 points
+    <dt class="col-md-4">bilinear</dt>
+    <dd class="col-md-8">Like barycentric but for 4 points. Less than 4 points
         fall back to barycentric. </dd>
-    <dt>voronoi</dt>
-    <dd>Simply map each pixel to the to nearest color point
+    <dt class="col-md-4">voronoi</dt>
+    <dd class="col-md-8">Simply map each pixel to the to nearest color point
         given. The result are polygonal 'cells' of solid color. </dd>
-    <dt>manhatten</dt>
-    <dd>Like voronoi, but resulting polygonal 'cells' are mapped to a fixed coordinate system.</dd>
-    <dt>shepards</dt>
-    <dd>Colors points biased on the ratio of inverse distance
+    <dt class="col-md-4">manhatten</dt>
+    <dd class="col-md-8">Like voronoi, but resulting polygonal 'cells' are mapped to a fixed coordinate system.</dd>
+    <dt class="col-md-4">shepards</dt>
+    <dd class="col-md-8">Colors points biased on the ratio of inverse distance
         squared. Generating spots of color in a sea of the average of
         colors. </dd>
-    <dt>inverse</dt>
-    <dd>Colors points biased on the ratio of inverse distance.
+    <dt class="col-md-4">inverse</dt>
+    <dd class="col-md-8">Colors points biased on the ratio of inverse distance.
         This generates sharper points of color rather than rounded spots of
         '<code>shepards</code>'  Generating spots of color in a sea of the
         average of colors. </dd>
@@ -7267,7 +7267,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="splice"></a>-splice <var>geometry</var></h3>
+  <h3><a id="splice"></a>-splice <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Splice the current background color into the image.</p>
@@ -7289,7 +7289,7 @@
 added added all splices removed. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="spread"></a>-spread <var>amount</var></h3>
+  <h3><a id="spread"></a>-spread <var>amount</var></h3>
 </div>
 
 <p class="magick-description">displace image pixels by a random amount.</p>
@@ -7301,26 +7301,26 @@
 <p>The lookup is controlled by the <a href="command-line-options.html#interpolate">-interpolate</a> setting.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="statistic"></a>-statistic <var>type</var> <var>geometry</var></h3>
+  <h3><a id="statistic"></a>-statistic <var>type</var> <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">replace each pixel with corresponding statistic from the neighborhood.</p>
 
 <p>Choose from these statistic types:</p>
-<dl class="dl-horizontal">
-<dt>Gradient</dt><dd>maximum difference (max - min) value in neighborhood</dd>
-<dt>Maximum</dt><dd>maximum value per channel in neighborhood</dd>
-<dt>Minimum</dt><dd>minimum value per channel in neighborhood</dd>
-<dt>Mean</dt><dd>average value per channel in neighborhood</dd>
-<dt>Median</dt><dd>median value per channel in neighborhood</dd>
-<dt>Mode</dt><dd>mode (most frequent) value per channel in neighborhood</dd>
-<dt>Nonpeak</dt><dd>value just before or after the median value per channel in neighborhood</dd>
-<dt>RMS</dt><dd>root mean square value per channel in neighborhood</dd>
-<dt>StandardDeviation</dt><dd> standard deviation value per channel in neighborhood</dd>
+<dl class="row">
+<dt class="col-md-4">Gradient</dt><dd class="col-md-8">maximum difference (max - min) value in neighborhood</dd>
+<dt class="col-md-4">Maximum</dt><dd class="col-md-8">maximum value per channel in neighborhood</dd>
+<dt class="col-md-4">Minimum</dt><dd class="col-md-8">minimum value per channel in neighborhood</dd>
+<dt class="col-md-4">Mean</dt><dd class="col-md-8">average value per channel in neighborhood</dd>
+<dt class="col-md-4">Median</dt><dd class="col-md-8">median value per channel in neighborhood</dd>
+<dt class="col-md-4">Mode</dt><dd class="col-md-8">mode (most frequent) value per channel in neighborhood</dd>
+<dt class="col-md-4">Nonpeak</dt><dd class="col-md-8">value just before or after the median value per channel in neighborhood</dd>
+<dt class="col-md-4">RMS</dt><dd class="col-md-8">root mean square value per channel in neighborhood</dd>
+<dt class="col-md-4">StandardDeviation</dt><dd class="col-md-8"> standard deviation value per channel in neighborhood</dd>
 </dl>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="stegano"></a>-stegano <var>offset</var></h3>
+  <h3><a id="stegano"></a>-stegano <var>offset</var></h3>
 </div>
 
 <p class="magick-description">hide watermark within an image.</p>
@@ -7331,7 +7331,7 @@
 320x256+35 stegano:image.png).</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="stereo"></a>-stereo <var>+x</var>{<var>+y</var>}</h3>
+  <h3><a id="stereo"></a>-stereo <var>+x</var>{<var>+y</var>}</h3>
 </div>
 
 <p class="magick-description">composite two images to create a red / cyan stereo anaglyph.</p>
@@ -7339,26 +7339,26 @@
 <p>The left side of the stereo pair (second image) is saved as the red channel of the output image. The right side (first image) is saved as the green and blue channels. Red-green stereo glasses are required to properly view the stereo image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="storage-type"></a>-storage-type <var>type</var></h3>
+  <h3><a id="storage-type"></a>-storage-type <var>type</var></h3>
 </div>
 
 <p class="magick-description">pixel storage type.  Here are the valid types:</p>
 
-<dl class="dl-horizontal">
-<dt>char</dt><dd>unsigned characters</dd>
-<dt>double</dt><dd>doubles</dd>
-<dt>float</dt><dd>floats</dd>
-<dt>integer</dt><dd>integers</dd>
-<dt>long</dt><dd>longs</dd>
-<dt>quantum</dt><dd>pixels in the native depth of your ImageMagick distribution</dd>
-<dt>short</dt><dd>unsigned shorts</dd>
+<dl class="row">
+<dt class="col-md-4">char</dt><dd class="col-md-8">unsigned characters</dd>
+<dt class="col-md-4">double</dt><dd class="col-md-8">doubles</dd>
+<dt class="col-md-4">float</dt><dd class="col-md-8">floats</dd>
+<dt class="col-md-4">integer</dt><dd class="col-md-8">integers</dd>
+<dt class="col-md-4">long</dt><dd class="col-md-8">longs</dd>
+<dt class="col-md-4">quantum</dt><dd class="col-md-8">pixels in the native depth of your ImageMagick distribution</dd>
+<dt class="col-md-4">short</dt><dd class="col-md-8">unsigned shorts</dd>
 </dl>
 
 <p>Float and double types are normalized from 0.0 to 1.0 otherwise the pixels
 values range from 0 to the maximum value the storage type can support.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="stretch"></a>-stretch <var>fontStretch</var></h3>
+  <h3><a id="stretch"></a>-stretch <var>fontStretch</var></h3>
 </div>
 
 <p class="magick-description">Set a type of stretch style for fonts.</p>
@@ -7366,7 +7366,7 @@
 <p>This setting suggests a type of stretch that ImageMagick should try to
 apply to the currently selected font family. Select <var>fontStretch</var> from the following.</p>
 
-<pre>
+<pre><code>
 Any
 Condensed
 Expanded
@@ -7377,7 +7377,7 @@
 SemiExpanded
 UltraCondensed
 UltraExpanded
-</pre>
+</code></pre>
 
 <p>To print a complete list of stretch types, use <a href="command-line-options.html#list">-list
 stretch</a>.</p>
@@ -7387,13 +7387,13 @@
 href="command-line-options.html#style">-style</a>, and <a href="command-line-options.html#weight">-weight</a>. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="strip"></a>-strip</h3>
+  <h3><a id="strip"></a>-strip</h3>
 </div>
 
 <p class="magick-description">strip the image of any profiles, comments or these PNG chunks: bKGD,cHRM,EXIF,gAMA,iCCP,iTXt,sRGB,tEXt,zCCP,zTXt,date.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="stroke"></a>-stroke <var>color</var></h3>
+  <h3><a id="stroke"></a>-stroke <var>color</var></h3>
 </div>
 
 <p class="magick-description">color to use when stroking a graphic primitive.</p>
@@ -7403,7 +7403,7 @@
 <p>See <a href="command-line-options.html#draw">-draw</a> for further details.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="strokewidth"></a>-strokewidth <var>value</var></h3>
+  <h3><a id="strokewidth"></a>-strokewidth <var>value</var></h3>
 </div>
 
 <p class="magick-description">set the stroke width.</p>
@@ -7411,7 +7411,7 @@
 <p>See <a href="command-line-options.html#draw">-draw</a> for further details.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="style"></a>-style <var>fontStyle</var></h3>
+  <h3><a id="style"></a>-style <var>fontStyle</var></h3>
 </div>
 
 <p class="magick-description">Set a font style for text.</p>
@@ -7420,19 +7420,19 @@
 the currently selected font family. Select <var>fontStyle</var> from
 the following.</p>
 
-<pre>
+<pre><code>
 Any
 Italic
 Normal
 Oblique
-</pre>
+</code></pre>
 
 <p>For other settings that affect fonts, see the options <a
 href="command-line-options.html#font">-font</a>, <a href="command-line-options.html#family">-family</a>, <a
 href="command-line-options.html#stretch">-stretch</a>, and <a href="command-line-options.html#weight">-weight</a>. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="subimage-search"></a>-subimage-search</h3>
+  <h3><a id="subimage-search"></a>-subimage-search</h3>
 </div>
 
 <p class="magick-description">search for subimage.</p>
@@ -7456,7 +7456,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="swap"></a>-swap <var>index,index</var></h3>
+  <h3><a id="swap"></a>-swap <var>index,index</var></h3>
 </div>
 
 <p class="magick-description">Swap the positions of two images in the image sequence.</p>
@@ -7466,7 +7466,7 @@
 the last two images in the sequence.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="swirl"></a>-swirl <var>degrees</var></h3>
+  <h3><a id="swirl"></a>-swirl <var>degrees</var></h3>
 </div>
 
 <p class="magick-description">swirl image pixels about the center.</p>
@@ -7474,7 +7474,7 @@
 <p><var>Degrees</var> defines the tightness of the swirl.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="synchronize"></a>-synchronize</h3>
+  <h3><a id="synchronize"></a>-synchronize</h3>
 </div>
 
 <p class="magick-description">synchronize image to storage device.</p>
@@ -7485,13 +7485,13 @@
 is not enough disk space for the image pixel cache.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="taint"></a>-taint</h3>
+  <h3><a id="taint"></a>-taint</h3>
 </div>
 
 <p class="magick-description">Mark the image as modified.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="text-font"></a>-text-font <var>name</var></h3>
+  <h3><a id="text-font"></a>-text-font <var>name</var></h3>
 </div>
 
 <p class="magick-description">font for writing fixed-width text.</p>
@@ -7504,13 +7504,13 @@
 <code>x:fixed</code> is OPTION1.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="texture"></a>-texture <var>filename</var></h3>
+  <h3><a id="texture"></a>-texture <var>filename</var></h3>
 </div>
 
 <p class="magick-description">name of texture to tile onto the image background.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="threshold"></a>-threshold <var>value</var>{<var>%</var>}</h3>
+  <h3><a id="threshold"></a>-threshold <var>value</var>{<var>%</var>}</h3>
 </div>
 
 <!-- {<var>green,blue,opacity</var>}
@@ -7539,19 +7539,19 @@
 channel. The green, blue, and alpha channels (if present) would be unchanged.
 </p>
 
-<pre>
+<pre><code>
 convert in.png -channel red -threshold 50% out.png
-</pre>
+</code></pre>
 
 <p>As (possibly) impractical but instructive examples, the following would
 generate an all-black and an all-white image with the same dimensions as the
 input image.</p>
 
 
-<pre>
+<pre><code>
 convert in.png -threshold 100% black.png
 convert in.png -threshold -1 white.png
-</pre>
+</code></pre>
 
 <p>Note that the values of the transparency channel is treated as 'matte'
 values (0 is opaque) and not as 'alpha' values (0 is transparent).</p>
@@ -7560,7 +7560,7 @@
 </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="thumbnail"></a>-thumbnail <var>geometry</var></h3>
+  <h3><a id="thumbnail"></a>-thumbnail <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Create a thumbnail of the image.</p>
@@ -7573,13 +7573,13 @@
 <p>See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="tile"></a>-tile <var>filename</var></h3>
+  <h3><a id="tile"></a>-tile <var>filename</var></h3>
 </div>
 
 <p class="magick-description">Set the tile image used for filling a subsequent graphic primitive.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header">-tile <var>geometry</var></h3>
+  <h3>-tile <var>geometry</var></h3>
 </div>
 
 <p class="magick-description">Specify the layout of images.</p>
@@ -7587,13 +7587,13 @@
 <p>See <a href="command-line-processing.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header">-tile</h3>
+  <h3>-tile</h3>
 </div>
 
 <p class="magick-description">Specifies that a subsequent composite operation is repeated across and down image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="tile-offset"></a>-tile-offset {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var></h3>
+  <h3><a id="tile-offset"></a>-tile-offset {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var></h3>
 </div>
 
 <p class="magick-description">Specify the offset for tile images, relative to the background image it is tiled on.</p>
@@ -7607,7 +7607,7 @@
 by the arguments given when the tile image is set. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="tint"></a>-tint <var>value</var></h3>
+  <h3><a id="tint"></a>-tint <var>value</var></h3>
 </div>
 
 <p class="magick-description">Tint the image with the fill color.</p>
@@ -7619,7 +7619,7 @@
 as the various shades of grey.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="title"></a>-title <var>string</var></h3>
+  <h3><a id="title"></a>-title <var>string</var></h3>
 </div>
 
 <p class="magick-description">Assign a title to displayed image.", "animate", "display", "montage</p>
@@ -7632,25 +7632,25 @@
 
 <p>For example,</p>
 
-<pre>
+<pre><code>
 -title "%m:%f %wx%h"
-</pre>
+</code></pre>
 
 <p>produces an image title of <code>MIFF:bird.miff 512x480</code> for an image
 titled <code>bird.miff</code> and whose width is 512 and height is 480.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="transform"></a>-transform</h3>
+  <h3><a id="transform"></a>-transform</h3>
 </div>
 
 <p class="magick-description">transform the image.</p>
 
 <p>This option applies the transformation matrix from a previous <a href="command-line-options.html#affine">-affine</a> option.</p>
 
-<pre>
+<pre><code>
 convert -affine 2,2,-2,2,0,0 -transform bird.ppm bird.jpg
-</pre>
+</code></pre>
 
 
 <p>This operator has been now been superseded by the  <a
@@ -7658,7 +7658,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="transparent"></a>-transparent <var>color</var></h3>
+  <h3><a id="transparent"></a>-transparent <var>color</var></h3>
 </div>
 
 <p class="magick-description">Make this color transparent within the image.</p>
@@ -7685,7 +7685,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="transparent-color"></a>-transparent-color <var>color</var></h3>
+  <h3><a id="transparent-color"></a>-transparent-color <var>color</var></h3>
 </div>
 
 <p class="magick-description">Set the transparent color.</p>
@@ -7707,7 +7707,7 @@
 <p>The default transparent color is <code>#00000000</code>, which is fully transparent black.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="transpose"></a>-transpose</h3>
+  <h3><a id="transpose"></a>-transpose</h3>
 </div>
 
 <p class="magick-description">Mirror the image along the top-left to bottom-right diagonal.</p>
@@ -7716,14 +7716,14 @@
 </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="transverse"></a>-transverse</h3>
+  <h3><a id="transverse"></a>-transverse</h3>
 </div>
 
 <p class="magick-description">Mirror the image along the images bottom-left top-right diagonal.  Equivalent to the operations <code>-flop -rotate 90</code>.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="treedepth"></a>-treedepth <var>value</var></h3>
+  <h3><a id="treedepth"></a>-treedepth <var>value</var></h3>
 </div>
 
 <p class="magick-description">tree depth for the color reduction algorithm.</p>
@@ -7743,7 +7743,7 @@
 required for this option to take effect.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="trim"></a>-trim</h3>
+  <h3><a id="trim"></a>-trim</h3>
 </div>
 
 <p class="magick-description">trim an image.</p>
@@ -7763,7 +7763,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="type"></a>-type <var>type</var></h3>
+  <h3><a id="type"></a>-type <var>type</var></h3>
 </div>
 
 <p class="magick-description">the image type.</p> <p>Choose from: <code>Bilevel</code>,
@@ -7777,9 +7777,9 @@
 example, to prevent a JPEG from being written in grayscale format even though
 only gray pixels are present, use.</p>
 
-<pre>
+<pre><code>
 convert bird.png -type TrueColor bird.jpg
-</pre>
+</code></pre>
 
 <p>Similarly, use <a href="command-line-options.html#type">-type TrueColorMatte</a> to force the
 encoder to write an alpha channel even though the image is opaque, if the
@@ -7788,7 +7788,7 @@
 <p>Use <a href="command-line-options.html#type">-type optimize</a> to ensure the image is written in the smallest possible file size.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="undercolor"></a>-undercolor <var>color</var></h3>
+  <h3><a id="undercolor"></a>-undercolor <var>color</var></h3>
 </div>
 
 <p class="magick-description">set the color of the annotation bounding box.</p>
@@ -7799,7 +7799,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="update"></a>-update <var>seconds</var></h3>
+  <h3><a id="update"></a>-update <var>seconds</var></h3>
 </div>
 
 <p class="magick-description">detect when image file is modified and redisplay.</p>
@@ -7811,14 +7811,14 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="unique-colors"></a>-unique-colors</h3>
+  <h3><a id="unique-colors"></a>-unique-colors</h3>
 </div>
 
 <p class="magick-description">discard all but one of any pixel color.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="units"></a>-units <var>type</var></h3>
+  <h3><a id="units"></a>-units <var>type</var></h3>
 </div>
 
 <p class="magick-description">the units of image resolution.</p>
@@ -7829,7 +7829,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="unsharp"></a>-unsharp <var>radius</var><br />-unsharp <var>radius</var>x<var>sigma</var>{<var>+gain</var>}{<var>+threshold</var>}</h3>
+  <h3><a id="unsharp"></a>-unsharp <var>radius</var><br />-unsharp <var>radius</var>x<var>sigma</var>{<var>+gain</var>}{<var>+threshold</var>}</h3>
 </div>
 
 <p class="magick-description">sharpen the image with an unsharp mask operator.</p>
@@ -7841,40 +7841,40 @@
 
 <p>The parameters are:</p>
 
-<dl class="dl-horizontal">
-<dt>radius</dt>
-<dd>The radius of the Gaussian, in pixels,  not counting the center pixel (default 0).</dd>
-<dt>sigma</dt>
-<dd>The standard deviation of the Gaussian, in pixels (default 1.0).</dd>
-<dt>gain</dt>
-<dd>The fraction of the difference between the original and the blur image that is added back into the original (default 1.0).</dd>
-<dt>threshold</dt>
-<dd>The threshold, as a fraction of <var>QuantumRange</var>, needed to apply the difference amount (default 0.05).</dd>
+<dl class="row">
+<dt class="col-md-4">radius</dt>
+<dd class="col-md-8">The radius of the Gaussian, in pixels,  not counting the center pixel (default 0).</dd>
+<dt class="col-md-4">sigma</dt>
+<dd class="col-md-8">The standard deviation of the Gaussian, in pixels (default 1.0).</dd>
+<dt class="col-md-4">gain</dt>
+<dd class="col-md-8">The fraction of the difference between the original and the blur image that is added back into the original (default 1.0).</dd>
+<dt class="col-md-4">threshold</dt>
+<dd class="col-md-8">The threshold, as a fraction of <var>QuantumRange</var>, needed to apply the difference amount (default 0.05).</dd>
 </dl>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="verbose"></a>-verbose</h3>
+  <h3><a id="verbose"></a>-verbose</h3>
 </div>
 
 <p class="magick-description">print detailed information about the image when this option precedes the <a href="command-line-options.html#identify">-identify</a> option or <code>info:</code>.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="version"></a>-version</h3>
+  <h3><a id="version"></a>-version</h3>
 </div>
 
 <p class="magick-description">print ImageMagick version string and exit.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="view"></a>-view <var>string</var></h3>
+  <h3><a id="view"></a>-view <var>string</var></h3>
 </div>
 
 <p class="magick-description">FlashPix viewing parameters.</p>
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="vignette"></a>-vignette <var>radius</var>{x<var>sigma</var>}{<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var>{<var>%</var>}</h3>
+  <h3><a id="vignette"></a>-vignette <var>radius</var>{x<var>sigma</var>}{<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var>{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">soften the edges of the image in vignette style.</p>
@@ -7882,7 +7882,7 @@
 <p>The vignette effect rolloff is controlled by radiusxsigma. For nominal rolloff, this would be set to 0xsigma. A value of 0x0 will produce a circle/ellipse with no rolloff. The arguments x and y control the size of the circle. Larger values decrease the radii and smaller values increase the radii. Values of +0+0 will generate a circle/ellipse the same size as the image. The default values for x and y are 10% of the corresponding image dimension. Thus, the radii will be decreased by 10%, i.e., the diameters of the circle/ellipse will be 80% of the corresponding image dimension.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="virtual-pixel"></a>-virtual-pixel <var>method</var></h3>
+  <h3><a id="virtual-pixel"></a>-virtual-pixel <var>method</var></h3>
 </div>
 
 <p class="magick-description">Specify contents of <var>virtual pixels</var>.</p>
@@ -7894,22 +7894,22 @@
 
 <p>Choose from these methods:</p>
 
-<dl class="dl-horizontal">
-<dt>background</dt><dd>the area surrounding the image is the background color</dd>
-<dt>black</dt><dd>the area surrounding the image is black</dd>
-<dt>checker-tile</dt><dd>alternate squares with image and background color</dd>
-<dt>dither</dt><dd>non-random 32x32 dithered pattern</dd>
-<dt>edge</dt><dd>extend the edge pixel toward infinity</dd>
-<dt>gray</dt><dd>the area surrounding the image is gray</dd>
-<dt>horizontal-tile</dt><dd>horizontally tile the image, background color above/below</dd>
-<dt>horizontal-tile-edge</dt><dd>horizontally tile the image and replicate the side edge pixels</dd>
-<dt>mirror</dt><dd>mirror tile the image</dd>
-<dt>random</dt><dd>choose a random pixel from the image</dd>
-<dt>tile</dt><dd>tile the image (default)</dd>
-<dt>transparent</dt><dd>the area surrounding the image is transparent blackness</dd>
-<dt>vertical-tile</dt><dd>vertically tile the image, sides are background color</dd>
-<dt>vertical-tile-edge</dt><dd>vertically tile the image and replicate the side edge pixels</dd>
-<dt>white</dt><dd>the area surrounding the image is white</dd>
+<dl class="row">
+<dt class="col-md-4">background</dt><dd class="col-md-8">the area surrounding the image is the background color</dd>
+<dt class="col-md-4">black</dt><dd class="col-md-8">the area surrounding the image is black</dd>
+<dt class="col-md-4">checker-tile</dt><dd class="col-md-8">alternate squares with image and background color</dd>
+<dt class="col-md-4">dither</dt><dd class="col-md-8">non-random 32x32 dithered pattern</dd>
+<dt class="col-md-4">edge</dt><dd class="col-md-8">extend the edge pixel toward infinity</dd>
+<dt class="col-md-4">gray</dt><dd class="col-md-8">the area surrounding the image is gray</dd>
+<dt class="col-md-4">horizontal-tile</dt><dd class="col-md-8">horizontally tile the image, background color above/below</dd>
+<dt class="col-md-4">horizontal-tile-edge</dt><dd class="col-md-8">horizontally tile the image and replicate the side edge pixels</dd>
+<dt class="col-md-4">mirror</dt><dd class="col-md-8">mirror tile the image</dd>
+<dt class="col-md-4">random</dt><dd class="col-md-8">choose a random pixel from the image</dd>
+<dt class="col-md-4">tile</dt><dd class="col-md-8">tile the image (default)</dd>
+<dt class="col-md-4">transparent</dt><dd class="col-md-8">the area surrounding the image is transparent blackness</dd>
+<dt class="col-md-4">vertical-tile</dt><dd class="col-md-8">vertically tile the image, sides are background color</dd>
+<dt class="col-md-4">vertical-tile-edge</dt><dd class="col-md-8">vertically tile the image and replicate the side edge pixels</dd>
+<dt class="col-md-4">white</dt><dd class="col-md-8">the area surrounding the image is white</dd>
 </dl>
 
 <p>The default value is "edge".</p>
@@ -7925,19 +7925,19 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="visual"></a>-visual <var>type</var></h3>
+  <h3><a id="visual"></a>-visual <var>type</var></h3>
 </div>
 
 <p class="magick-description">Animate images using this X visual type.", 'animate', 'display'</p>
 
 <p>Choose from these visual classes:</p>
 
-<pre>
+<pre><code>
 StaticGray    TrueColor
 GrayScale     DirectColor
 StaticColor   default
 PseudoColor   visual id
-</pre>
+</code></pre>
 
 <p>The X server must support the visual you choose, otherwise an error occurs.
 If a visual is not specified, the visual class that can display the most
@@ -7945,7 +7945,7 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="watermark"></a>-watermark <var>brightness</var>x<var>saturation</var></h3>
+  <h3><a id="watermark"></a>-watermark <var>brightness</var>x<var>saturation</var></h3>
 </div>
 
 <p class="magick-description">Watermark an image using the given percentages of brightness and saturation.</p>
@@ -7958,19 +7958,19 @@
 
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="wave"></a>-wave <var>amplitude</var><br />-wave <var>amplitude</var>x<var>wavelength</var></h3>
+  <h3><a id="wave"></a>-wave <var>amplitude</var><br />-wave <var>amplitude</var>x<var>wavelength</var></h3>
 </div>
 
 <p class="magick-description">Shear the columns of an image into a sine wave.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="wavelet-denoise"></a>-wavelet-denoise <var>threshold</var><br />-wavelet-denoise <var>threshold</var>x<var>softness</var></h3>
+  <h3><a id="wavelet-denoise"></a>-wavelet-denoise <var>threshold</var><br />-wavelet-denoise <var>threshold</var>x<var>softness</var></h3>
 </div>
 
 <p class="magick-description">removes noise from the image using a wavelet transform.  The threshold is the value below which everything is considered noise and ranges from 0.0 (none) to QuantumRange or use percent (e.g. 5%). Softness attenuates the threshold and typically ranges from 0.0 (none) to 1.0.  The higher the value the more noise that remains in the image.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="weight"></a>-weight <var>fontWeight</var></h3>
+  <h3><a id="weight"></a>-weight <var>fontWeight</var></h3>
 </div>
 
 <p class="magick-description">Set a font weight for text.</p>
@@ -7979,25 +7979,25 @@
 the currently selected font family. Use a positive integer for
 <var>fontWeight</var> or select from the following.</p>
 
-<dl class="dl-horizontal">
-<dt>Thin </dt>
-<dd>Same as <var>fontWeight</var> = 100.</dd>
-<dt>ExtraLight </dt>
-<dd>Same as <var>fontWeight</var> = 200.</dd>
-<dt>Light </dt>
-<dd>Same as <var>fontWeight</var> = 300.</dd>
-<dt>Normal </dt>
-<dd>Same as <var>fontWeight</var> = 400.</dd>
-<dt>Medium </dt>
-<dd>Same as <var>fontWeight</var> = 500.</dd>
-<dt>DemiBold </dt>
-<dd>Same as <var>fontWeight</var> = 600.</dd>
-<dt>Bold </dt>
-<dd>Same as <var>fontWeight</var> = 700.</dd>
-<dt>ExtraBold </dt>
-<dd>Same as <var>fontWeight</var> = 800.</dd>
-<dt>Heavy </dt>
-<dd>Same as <var>fontWeight</var> = 900.</dd>
+<dl class="row">
+<dt class="col-md-4">Thin </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 100.</dd>
+<dt class="col-md-4">ExtraLight </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 200.</dd>
+<dt class="col-md-4">Light </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 300.</dd>
+<dt class="col-md-4">Normal </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 400.</dd>
+<dt class="col-md-4">Medium </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 500.</dd>
+<dt class="col-md-4">DemiBold </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 600.</dd>
+<dt class="col-md-4">Bold </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 700.</dd>
+<dt class="col-md-4">ExtraBold </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 800.</dd>
+<dt class="col-md-4">Heavy </dt>
+<dd class="col-md-8">Same as <var>fontWeight</var> = 900.</dd>
 </dl>
 <br/>
 
@@ -8008,13 +8008,13 @@
 href="command-line-options.html#stretch">-stretch</a>, and <a href="command-line-options.html#style">-style</a>. </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="white-point"></a>-white-point <var>x,y</var></h3>
+  <h3><a id="white-point"></a>-white-point <var>x,y</var></h3>
 </div>
 
 <p class="magick-description">chromaticity white point.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="white-threshold"></a>-white-threshold <var>value</var>{<var>%</var>}</h3>
+  <h3><a id="white-threshold"></a>-white-threshold <var>value</var>{<var>%</var>}</h3>
 </div>
 
 <p class="magick-description">Force to white all pixels above the threshold while leaving all pixels at or below the threshold unchanged.</p>
@@ -8024,7 +8024,7 @@
 desired <a href="command-line-options.html#channel">&#x2011;channel</a> value. See <a href="command-line-options.html#threshold">&#x2011;threshold</a>for more details on thresholds and resulting values.  </p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="window"></a>-window <var>id</var></h3>
+  <h3><a id="window"></a>-window <var>id</var></h3>
 </div>
 
 <p class="magick-description">Make the image the background of a window.", 'animate', 'display'</p>
@@ -8042,13 +8042,13 @@
 href="command-line-options.html#colors">-colors</a> to reduce the number of colors.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="window-group"></a>-window-group</h3>
+  <h3><a id="window-group"></a>-window-group</h3>
 </div>
 
 <p class="magick-description">specify the window group.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="write"></a>-write <var>filename</var></h3>
+  <h3><a id="write"></a>-write <var>filename</var></h3>
 </div>
 
 <p class="magick-description">write an image sequence.</p>
@@ -8058,7 +8058,7 @@
 <p>Use <a href="command-line-options.html#compress">-compress</a> to specify the type of image compression.</p>
 
 <div style="margin: auto;">
-  <h3 class="magick-header"><a id="write-mask"></a>-write-mask <var>filename</var></h3>
+  <h3><a id="write-mask"></a>-write-mask <var>filename</var></h3>
 </div>
 
 <p class="magick-description">Prevent updates to image pixels specified by the mask.</p>
@@ -8095,4 +8095,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:55 -->
\ No newline at end of file
diff --git a/www/command-line-processing.html b/www/command-line-processing.html
index c5d9330..0c409d6 100644
--- a/www/command-line-processing.html
+++ b/www/command-line-processing.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/command-line-processing.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/command-line-processing.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,36 +42,37 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item active" href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link active" href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="command-line-processing.html#anatomy">The Anatomy of the Command-line</a> • <a href="command-line-processing.html#input">Input Filename</a> • <a href="command-line-processing.html#option">Command-line Options</a> • <a href="command-line-processing.html#output">Output Filename</a></p>
 
 <p class="lead magick-description">The ImageMagick command-line <a href="command-line-tools.html">tools</a> can be as simple as this:</p>
 
-<pre>
+<pre><code>
 magick image.jpg image.png
-</pre>
+</code></pre>
 
 <p>Or it can be complex with a plethora of <a href="command-line-processing.html#option">options</a>, as in the following:</p>
 
-<pre>
+<pre><code>
 magick label.gif +matte \
   \( +clone  -shade 110x90 -normalize -negate +clone  -compose Plus -composite \) \
   \( -clone 0 -shade 110x50 -normalize -channel BG -fx 0 +channel -matte \) \
   -delete 0 +swap  -compose Multiply -composite  button.gif");
-</pre>
+</code></pre>
 
 <p class="bg-info">This example command is long enough that the command must be written across several lines, so we formatted it for clarity by inserting backslashes (<code>\</code>). The backslash is the Unix <var>line-continuation</var> character. In the Windows shell, use a carat character (<code>^</code>) for line-continuation. We use the Unix style on these web pages, as above. Sometimes, however, the lines are wrapped by your browser if the browser window is small enough, but the command-lines, shown in white, are still intended to be typed as one line. Line continuation characters need not be entered. The <var>parentheses</var> that are <var>escaped</var> above using the backslash are not escaped in Windows. There are some other differences between Windows and Unix (involving quotation marks, for instance), but we'll discuss some of those issues later, as they arise. </p>
 
@@ -94,7 +94,7 @@
 
 <p>Given the complexity of the rendering, you might be surprised it is accomplished by a single command-line:</p>
 
-<pre>
+<pre><code>
 magick -size 320x90 canvas:none -stroke snow4 -size 1x90 -tile gradient:white-snow4 \
   -draw 'roundrectangle 16, 5, 304, 85 20,40' +tile -fill snow \
   -draw 'roundrectangle 264, 5, 304, 85  20,40' -tile gradient:chartreuse-green \
@@ -107,13 +107,13 @@
   -background firebrick3 -shadow 80x3+3+3 \) +swap -background none -layers merge \) \
   -insert 0 -gravity center -append -background white -gravity center -extent 320x200 \
   cylinder_shaded.png
-</pre>
+</code></pre>
 
 <p>In the next sections we dissect the anatomy of the ImageMagick command-line.  Hopefully, after carefully reading and better understanding how the command-line works, you should be able to accomplish complex image-processing tasks without resorting to the sometimes daunting <a href="develop.html">program interfaces</a>.</p>
 
 <p>See <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a> for additional help when using ImageMagick from the command-line.</p>
 
-<h2 class="magick-header"><a id="anatomy"></a>The Anatomy of the Command-line</h2>
+<h2 class="magick-post-title"><a id="anatomy"></a>The Anatomy of the Command-line</h2>
 <p>The ImageMagick command-line consists of</p>
 
 <ol>
@@ -134,7 +134,7 @@
 
 <p>You can find a detailed explanation of each of the constituent parts of the command-line in the sections that follow.</p>
 
-<h2 class="magick-header"><a id="input"></a>Input Filename</h2>
+<h2 class="magick-post-title"><a id="input"></a>Input Filename</h2>
 
 <p>ImageMagick extends the concept of an input filename to include:</p>
 <ul>
@@ -155,9 +155,9 @@
 <p>In Unix shells, certain characters such as the asterisk (<code>*</code>) and question mark (<code>?</code>) automagically cause lists of filenames to be generated based on pattern matches. This feature is known as globbing.  ImageMagick supports filename globbing for systems, such as Windows, that does not natively support it.  For example, suppose you want to convert <code>1.jpg</code>, <code>2.jpg</code>, <code>3.jpg</code>, <code>4.jpg</code>, and <code>5.jpg</code> in your current directory to a GIF animation.  You can conveniently  refer to all of the JPEG files with this command:
 </p>
 
-<pre>
+<pre><code>
 magick *.jpg images.gif
-</pre>
+</code></pre>
 
 <h4>Explicit Image Format</h4>
 <p>Images are stored in a myriad of image formats including
@@ -176,56 +176,56 @@
 so we explicitly set one:
 </p>
 
-<pre>
+<pre><code>
 magick -size 640x480 -depth 8 rgb:image image.png
-</pre>
+</code></pre>
 
 <h4>Built-in Images and Patterns</h4>
 
 <p>ImageMagick has a number of built-in <a href="formats.html#builtin-images">images</a> and <a href="formats.html#builtin-patterns">patterns</a>.  To utilize the checkerboard pattern, for example, use:
 </p>
 
-<pre>
+<pre><code>
 magick -size 640x480 pattern:checkerboard checkerboard.png
-</pre>
+</code></pre>
 
 <h4>STDIN, STDOUT, and file descriptors</h4>
 <p>Unix and Windows permit the output of one command to be piped to the input of another. ImageMagick permits image data to be read and written from the <a href="http://en.wikipedia.org/wiki/Standard_streams">standard streams</a> STDIN (<var>standard in</var>) and STDOUT (<var>standard out</var>), respectively, using a pseudo-filename of <code>-</code>.  In this example we pipe the output of
   <a href="convert.html">convert</a> to the <a href="display.html">display</a> program:
 </p>
 
-<pre>
+<pre><code>
 magick logo: gif:- | display gif:-
-</pre>
+</code></pre>
 
 <p>The second explicit format "<code>gif:</code>" is optional in the preceding example.  The GIF image format has a unique signature within the image so ImageMagick's <a href="display.html">display</a> command can readily recognize the format as GIF.  The <a href="convert.html">convert</a> program also accepts STDIN as input in this way:
 </p>
 
-<pre>
+<pre><code>
 magick rose: gif:- | magick - -resize "200%" bigrose.jpg'
-</pre>
+</code></pre>
 
 <p>Other pipes can be accessed via their <var>file descriptors</var> (as of version 6.4.9-3). The file descriptors 0, 1, and 2 are reserved for the standard streams STDIN, STDOUT, and STDERR, respectively, but a pipe associated with a file descriptor number <var>N</var>&gt;2 can be accessed using the pseudonym <code>fd:</code><var>N</var>. (The pseudonyms <code>fd:0</code> and <code>fd:1</code> can be used for STDIN and STDOUT.) The next example shows how to append image data piped from files with  descriptors 3 and 4 and direct the result to the file with descriptor number 5.
 </p>
 
-<pre>
+<pre><code>
 magick fd:3 fd:4 -append fd:5
-</pre>
+</code></pre>
 
 <p>When needed, explicit image formats can be given as mentioned earlier, as in the following.
 </p>
 
-<pre>
+<pre><code>
 magick gif:fd:3 jpg:fd:4 -append tif:fd:5
-</pre>
+</code></pre>
 
 <h4>Selecting Frames</h4>
 <p>Some images formats contain more than one image frame.  Perhaps you only want the first image, or the last, or some number of images in-between.  You can specify which image frames to read by appending the image filename with the frame range enclosed in brackets.  Here our image (an animated GIF) contains more than one frame but we only want the first:
 </p>
 
-<pre>
+<pre><code>
 magick 'images.gif[0]' image.png
-</pre>
+</code></pre>
 
 <p class="bg-info">Unix shells generally interpret brackets so we enclosed the filename in quotes above.
 In a Windows command shell the brackets are not interpreted but using quotes doesn't hurt. However, in most cases the roles of single-quotes and double-quotes are reversed with respect to Unix and Windows, so Windows users should usually try double-quotes where we display single-quotes, and vice versa.
@@ -234,16 +234,16 @@
 <p>You can read more than one image from a sequence with a frame range.  For example, you can extract the first four frames of an image sequence:
 </p>
 
-<pre>
+<pre><code>
 magick 'images.gif[0-3]' images.mng
-</pre>
+</code></pre>
 
 <p>Finally, you can read more than one image from a sequence, out-of-order. The next command gets the third image in the sequence, followed by the second, and then the fourth:
 </p>
 
-<pre>
+<pre><code>
 magick 'images.gif[3,2,4]' images.mng
-</pre>
+</code></pre>
 
 <p>Notice that in the last two commands, a single image is written. The output in this case, where the image type is MNG, is a multi-frame file because the MNG format supports multiple frames. Had the output format been JPG, which only supports single frames, the output would have consisted of separate frames. More about that below, in the section about the <a href="command-line-processing.html#output">Output Filename</a>.
 </p>
@@ -252,49 +252,49 @@
 <p>Raw images are a sequence of color intensities without additional meta information such as width, height, or image signature.  With raw image formats, you must specify the image width and height but you can also specify a region of the image to read.  In our example, the image is in the raw 8-bit RGB format and is 6000 pixels wide and 4000 pixels high.  However, we only want a region of 600 by 400 near the center of the image:
 </p>
 
-<pre>
+<pre><code>
 magick -size 6000x4000 -depth 8 'rgb:image[600x400+1900+2900]' image.jpg
-</pre>
+</code></pre>
 
 <p>
   You can get the same results with the <a href="command-line-options.html#extract">&#x2011;extract</a> option:
 </p>
 
-<pre>
+<pre><code>
 magick -size 6000x4000 -depth 8 -extract 600x400+1900+2900 rgb:image image.jpg
-</pre>
+</code></pre>
 
 <h4>Inline Image Resize</h4>
 <p>It is sometimes convenient to resize an image as they are read.  Suppose you have hundreds of large JPEG images you want to convert to a sequence of PNG thumbails:
 </p>
 
-<pre>
+<pre><code>
 magick '*.jpg' -resize 120x120 thumbnail%03d.png
-</pre>
+</code></pre>
 
 <p>Here <var>all</var> the images are read and subsequently
 resized.  It is faster and less resource intensive to resize each image it
 is read:
 </p>
 
-<pre>
+<pre><code>
 magick '*.jpg[120x120]' thumbnail%03d.png
-</pre>
+</code></pre>
 
 <h4>Inline Image Crop</h4>
 <p>It is sometimes convenient to crop an image as they are read.  Suppose you have hundreds of large JPEG images you want to convert to a sequence of PNG thumbails:
 </p>
 
-<pre>
+<pre><code>
 magick '*.jpg' -crop 120x120+10+5 thumbnail%03d.png
-</pre>
+</code></pre>
 
 <p>Here <var>all</var> the images are read and subsequently cropped.  It is faster and less resource-intensive to crop each image as it is read:
 </p>
 
-<pre>
+<pre><code>
 magick '*.jpg[120x120+10+5]' thumbnail%03d.png
-</pre>
+</code></pre>
 
 
 <h4>Filename References</h4>
@@ -303,23 +303,23 @@
 The first is with '<code>@</code>' which reads image filenames separated by white space from the specified file.  Assume the file <code>myimages.txt</code> consists of a list of filenames, like so:
 </p>
 
-<pre>
+<pre><code>
 frame001.jpg
 frame002.jpg
 frame003.jpg
-</pre>
+</code></pre>
 
 <p>We then expect this command:</p>
 
-<pre>
+<pre><code>
 magick @myimages.txt mymovie.gif
-</pre>
+</code></pre>
 
 <p>to read the images <code>frame001.jpg</code>, <code>frame002.jpg</code>, and <code>frame003.jpg</code> and convert them to a GIF image sequence.  </p>
 <p>If the image path includes one or more spaces, enclose the path in quotes:</p>
-<pre>
+<pre><code>
 'my title.jpg'
-</pre>
+</code></pre>
 
 
     <p>Some ImageMagick command-line <a href="command-line-options.html">options</a> may exceed the capabilities of
@@ -333,29 +333,29 @@
 embedding a formatting character in the filename with a scene range.  Consider
 the filename <code>image-%d.jpg[1-5]</code>. The command</p>
 
-<pre>
+<pre><code>
 magick image-%d.jpg[1-5]
-</pre>
+</code></pre>
 
 <p>causes ImageMagick to attempt to read images with these filenames:
 </p>
 
-<pre>
+<pre><code>
 image-1.jpg
 image-2.jpg
 image-3.jpg
 image-4.jpg
 image-5.jpg
-</pre>
+</code></pre>
 
 <h4>Stream Buffering</h4>
 <p>By default, the input stream is buffered.  To ensure information on the source file or terminal is read as soon as its available, set the buffer size to 0:</p>
 
-<pre>
+<pre><code>
 magick logo: gif:- | display -define stream:buffer-size=0 gif:-
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="option"></a>Command-line Options</h2>
+<h2 class="magick-post-title"><a id="option"></a>Command-line Options</h2>
 
 <p>You can direct the behavior of ImageMagick utilities with these command-line <a href="command-line-options.html">options</a>.  The behavior of an option falls into one of these categories:</p>
 
@@ -381,9 +381,9 @@
 <p>In this example, <var>-channel</var> applies to each of the images, since, as we mentioned, settings persist:
 </p>
 
-<pre>
+<pre><code>
 magick -channel RGB wand.png wizard.png images.png
-</pre>
+</code></pre>
 
 <h4 class="magick-header"><a id="operator"></a>Image Operator</h4>
 
@@ -401,9 +401,9 @@
 
 <p>In this example, <var>-negate</var> negates the wand image but not the wizard:</p>
 
-<pre>
+<pre><code>
 magick wand.png -negate wizard.png images.png
-</pre>
+</code></pre>
 
 <h4 class="magick-header"><a id="channel"></a>Image Channel Operator</h4>
 <p>Operate directly on image channels:</p>
@@ -420,9 +420,9 @@
 <a href="command-line-options.html#append">&#x2011;append</a>  • <a href="command-line-options.html#affinity">&#x2011;affinity</a>  • <a href="command-line-options.html#average">&#x2011;average</a>  • <a href="command-line-options.html#clut">&#x2011;clut</a>  • <a href="command-line-options.html#coalesce">&#x2011;coalesce</a>  • <a href="command-line-options.html#combine">&#x2011;combine</a>  • <a href="command-line-options.html#compare">&#x2011;compare</a>  • <a href="command-line-options.html#complex">&#x2011;complex</a>  • <a href="command-line-options.html#composite">&#x2011;composite</a>  • <a href="command-line-options.html#copy">&#x2011;copy</a>  • <a href="command-line-options.html#crop">&#x2011;crop</a>  • <a href="command-line-options.html#debug">&#x2011;debug</a>  • <a href="command-line-options.html#deconstruct">&#x2011;deconstruct</a>  • <a href="command-line-options.html#delete">&#x2011;delete</a>  • <a href="command-line-options.html#evaluate-sequence">&#x2011;evaluate&#x2011;sequence</a>  • <a href="command-line-options.html#fft">&#x2011;fft</a>  • <a href="command-line-options.html#flatten">&#x2011;flatten</a>  • <a href="command-line-options.html#fx">&#x2011;fx</a>  • <a href="command-line-options.html#hald-clut">&#x2011;hald&#x2011;clut</a>  • <a href="command-line-options.html#ift">&#x2011;ift</a>  • <a href="command-line-options.html#identify">&#x2011;identify</a>  • <a href="command-line-options.html#insert">&#x2011;insert</a>  • <a href="command-line-options.html#layers">&#x2011;layers</a>  • <a href="command-line-options.html#limit">&#x2011;limit</a>  • <a href="command-line-options.html#map">&#x2011;map</a>  • <a href="command-line-options.html#maximum">&#x2011;maximum</a>  • <a href="command-line-options.html#minimum">&#x2011;minimum</a>  • <a href="command-line-options.html#morph">&#x2011;morph</a>  • <a href="command-line-options.html#mosaic">&#x2011;mosaic</a>  • <a href="command-line-options.html#optimize">&#x2011;optimize</a>  • <a href="command-line-options.html#print">&#x2011;print</a>  • <a href="command-line-options.html#process">&#x2011;process</a>  • <a href="command-line-options.html#quiet">&#x2011;quiet</a>  • <a href="command-line-options.html#swap">&#x2011;swap</a>  • <a href="command-line-options.html#write">&#x2011;write</a> </ul>
 <p>In this example, <var>-append</var> appends three images into one:</p>
 
-<pre>
+<pre><code>
 magick mikayla.png picnic.png beach.png -append vacation.png
-</pre>
+</code></pre>
 
 <h4 class="magick-header"><a id="geometry"></a>Image Geometry</h4>
 
@@ -446,7 +446,7 @@
 
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <col width="20%"/> <col width="80%"/>
   <thead>
   <tr>
@@ -513,13 +513,13 @@
 This fine image</a> is 640 pixels wide and 480 pixels high. We say its <var>dimensions</var> are 640x480. When we give dimensions of an image, the width (the horizontal dimension) always precedes the height (the vertical dimension). This will be true when we speak of coordinates or <var>offsets</var> into an image, which will always be <var>x</var>–value followed by <var>y</var>. Just think of your high school algebra classes and the <var>xy</var>–plane. (Well, almost: our <var>y</var>–axis will always go downward!)
 </p>
 
-<pre>
+<pre><code>
 magick logo: -resize '200%' bigWiz.png
 magick logo: -resize '200x50%' longShortWiz.png
 magick logo: -resize '100x200' notThinWiz.png
 magick logo: -resize '100x200^' biggerNotThinWiz.png
 magick logo: -resize '100x200!' dochThinWiz.png
-</pre>
+</code></pre>
 
 <p>The first of the four commands is simple—it stretches both the width and height of the input image by <code>200%</code> in each direction; it magnifies the whole thing by a factor of two. The second command specifies different percentages for each direction, stretching the width to <code>200</code>% and squashing the height to <code>50%</code>. The resulting image (in this example) has dimensions 1280x240. Notice that the percent symbol needn't be repeated; the following are equivalent: <code>200x50%</code>, <code>200%x50</code>, <code>200%x50%</code>.
 </p>
@@ -535,12 +535,12 @@
 Here are a few more examples:
 </p>
 
-<pre>
+<pre><code>
 magick logo: -resize '100' wiz1.png
 magick logo: -resize 'x200' wiz2.png
 magick logo: -resize '100x200&gt;' wiz3.png
 magick logo: -resize '100x200&lt;' wiz4.png
-</pre>
+</code></pre>
 
 <p>If only one dimension is given it is taken to be the width. When only the width is specified, as in the first example above, the width is accepted as given and the height is chosen to maintain the aspect ratio of the input image. Similarly, if only the height is specified, as in the second example above, the height is accepted and the width is chosen to maintain the aspect ratio.</p>
 
@@ -549,9 +549,9 @@
 
 <p>Finally, use <code>@</code> to specify the maximum area in pixels of an image, again while attempting to preserve aspect ratio. (Pixels take only integer values, so some approximation is always at work.) In the following example, an area of 10000 pixels is requested. The resulting file has dimensions 115x86, which has 9890 pixels. </p>
 
-<pre>
+<pre><code>
 magick logo: -resize '10000@' wiz10000.png
-</pre>
+</code></pre>
 
 <p class="bg-info">In all the examples above and below, we have enclosed the <var>geometry</var> arguments  within quotation marks. Doing so is optional in many cases, but not always. We <var>must</var> enclose the geometry specifications in quotation marks when using <code>&lt;</code> or <code>&gt;</code> to prevent these characters from being interpreted by the shell as <var>file redirection</var>. On Windows systems, the carat <code>^</code>  needs to be within quotes, else it is ignored. To be safe, one should probably maintain a habit of enclosing all <var>geometry</var> arguments in quotes, as we have here.
 </p>
@@ -562,11 +562,11 @@
 <a href="command-line-options.html#region">&#x2011;region</a> option. This option allows many other options to modify the pixels within a specified rectangular subregion of an image. As such, it needs to be given the width and height of that region, and also an <var>offset</var> into the image, which is a pair of coordinates that indicate the location of the region within the larger image. Below, in the first example, we specify a region of size <code>100x200</code> to be located at the <var>xy</var>–coordinates <var>x</var>=10, <var>y</var>=20. Let's use the usual algebraic notation (<var>x</var>,<var>y</var>)=(10,20), for convenience.
 </p>
 
-<pre>
+<pre><code>
 magick logo: -region '100x200+10+20' -negate wizNeg1.png
 magick logo: -region '100x200-10+20' -negate wizNeg2.png
 magick logo: -gravity center -region '100x200-10+20' -negate wizNeg3.png
-</pre>
+</code></pre>
 
 <p>Note that offsets always require +/− signs. The offset is not actually a true location within the image; its coordinates must be added to some other location. Let's refer to that as the <var>current location</var>. In the first two examples above, though, that location is the upper-left hand corner of the image, which has coordinates (0,0). (That is the default situation when there are no other directives given to change it.) The first example above puts the <code>100x200</code> rectangle's own upper-left corner at (10,20). </p>
 
@@ -580,9 +580,9 @@
 
 <p>In school, your teacher probably permitted you to work on problems on a scrap of paper and then copy the results to your test paper.  An image stack is similar.  It permits you to work on an image or image sequence in isolation and subsequently introduce the results back into the command-line.  The image stack is delineated with parenthesis.  Image operators only affect images in the current stack.  For example, we can limit the image rotation to just the wizard image like this:</p>
 
-<pre>
+<pre><code>
 magick wand.gif \( wizard.gif -rotate 30 \) +append images.gif
-</pre>
+</code></pre>
 
 
 <p class="bg-info">Notice again that the  parentheses are <var>escaped</var> by preceding them with
@@ -600,7 +600,7 @@
 
 <p>The arguments to these operators are indexes into the image sequence by number, starting with zero, for the first image, and so on. However if you give a negative index, the images are indexed from the end (last image added). That is, an index of -1 is the last image in the current image sequence, -2 gives the second-to-last, and so on.</p>
 
-<h2 class="magick-header"><a id="output"></a>Output Filename</h2>
+<h2 class="magick-post-title"><a id="output"></a>Output Filename</h2>
 
 <p>ImageMagick extends the concept of an output filename to include:</p>
 
@@ -616,18 +616,18 @@
   <p>Images can be stored in a mryiad of image formats including the better known JPEG, PNG, TIFF and others.  ImageMagick must know the desired format of the image before it is written.  ImageMagick leverages the filename extension to determine the format.  For example, <code>image.jpg</code> tells ImageMagick to write the image in the JPEG format.  In some cases the filename does not identify the image format.  In these cases, the image is written in the format it was originally read unless an explicit image format is specified.  For example, suppose we want to write our image to a filename of <code>image</code> in the raw red, green, and blue intensity format:
   </p>
 
-<pre>
+<pre><code>
 magick image.jpg rgb:image
-</pre>
+</code></pre>
 
 
 <h4>Standard Out</h4>
   <p>Unix permits the output of one command to be piped to another.  ImageMagick permits piping one command to another with a filename of <code>-</code>.  In this example we pipe the output of <a href="convert.html">convert</a> to the <a href="display.html">display</a> program:
   </p>
 
-<pre>
+<pre><code>
 magick logo: gif:- | display gif:-
-</pre>
+</code></pre>
 
 <p>Here the explicit format is optional.  The GIF image format has a signature that uniquely identifies it so ImageMagick can readily recognize the format as GIF.</p>
 
@@ -635,39 +635,39 @@
 <p>Optionally, use an embedded formatting character to write a sequential image list.  Suppose our output filename is <code>image-%d.jpg</code> and our image list includes 3 images.  You can expect these images files to be written:
 </p>
 
-<pre>
+<pre><code>
 image-0.jpg
 image-1.jpg
 image-2.jpg
-</pre>
+</code></pre>
 
 <p>Or retrieve image properties to modify the image filename.  For example, the command
 </p>
 
-<pre>
+<pre><code>
 magick rose: -set filename:area '%wx%h' 'rose-%[filename:area].png'
-</pre>
+</code></pre>
 
 <p>writes an image with this filename:
 </p>
 
-<pre>
+<pre><code>
   rose-70x46.png
-</pre>
+</code></pre>
 
 <p>Finally to convert multiple JPEG images to individual PDF pages, use:</p>
 
-<pre>
+<pre><code>
 magick *.jpg +adjoin page-%d.pdf
-</pre>
+</code></pre>
 
 <h4>Stream Buffering</h4>
 
 <p>By default, the output stream is buffered.  To ensure information appears on the destination file or terminal as soon as written, set the buffer size to 0:</p>
 
-<pre>
+<pre><code>
 magick -define stream:buffer-size=0 logo: gif:- | display gif:-
-</pre>
+</code></pre>
 </div>
   <footer class="magick-footer">
     <p><a href="support.html">Donate</a> •
@@ -688,4 +688,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:56 -->
\ No newline at end of file
diff --git a/www/command-line-tools.html b/www/command-line-tools.html
index dc30712..d412433 100644
--- a/www/command-line-tools.html
+++ b/www/command-line-tools.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/command-line-tools.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/command-line-tools.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item active" href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link active" href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">ImageMagick includes a number of command-line utilities for manipulating images.  Most of you are probably accustomed to editing images one at a time with a graphical user interface (GUI) with such programs as Gimp or Photoshop.  However, a GUI is not always convenient.  Suppose you want to process an image dynamically from a web script or you want to apply the same operations to many images or repeat a specific operation at different times to the same or different image.  For these types of operations, the command-line image processing utility is appropriate.</p>
@@ -64,28 +64,28 @@
 
 <p>Here is a short description for each command-line tool. Click on the program name to get details about the program usage and a list of command-line options that alters how the program behaves.  If you are just getting acquainted with ImageMagick, start with the <a href="command-line-tools.html#magick">magick</a> program.  Be sure to peruse Anthony Thyssen's tutorial on how to use ImageMagick utilities to <a href="https://www.imagemagick.org/Usage/">create, edit, compose, or convert</a> images from the command-line.</p>
 
-<dl class="dl-horizontal">
-  <dt><a id="magick"></a><a href="magick.html">magick</a></dt><dd>convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.</dd>
-  <dt><a id="magick-script"></a><a href="magick-script.html">magick-script</a></dt><dd>use this scripting language interpreter to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.</dd>
+<dl class="row">
+  <dt class="col-md-4"><a id="magick"></a><a href="magick.html">magick</a></dt><dd class="col-md-8">convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.</dd>
+  <dt class="col-md-4"><a id="magick-script"></a><a href="magick-script.html">magick-script</a></dt><dd class="col-md-8">use this scripting language interpreter to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.</dd>
 </dl>
 <p>We also support tools for compatibility with ImageMagick <a href="http://legacy.imagemagick.org">version 6</a>:</p>
-<dl class="dl-horizontal">
-  <dt><a href="animate.html">animate</a></dt><dd>animate an image sequence on any X server.</dd>
-  <dt><a id="compare"></a><a href="compare.html">compare</a></dt><dd>mathematically and visually annotate the difference between an image and its reconstruction.</dd>
-  <dt><a id="composite"></a><a href="composite.html">composite</a></dt><dd>overlap one image over another.</dd>
-  <dt><a id="conjure"></a><a href="conjure.html">conjure</a></dt><dd>interpret and execute scripts written in the Magick Scripting Language (MSL).</dd>
-  <dt><a id="convert"></a><a href="convert.html">convert</a></dt><dd>convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.</dd>
-  <dt><a id="display"></a><a href="display.html">display</a></dt><dd>display an image or image sequence on any X server.</dd>
-  <dt><a id="identify"></a><a href="identify.html">identify</a></dt><dd>describe the format and characteristics of one or more image files.</dd>
-  <dt><a id="import"></a><a href="import.html">import</a></dt><dd>save any visible window on an X server and outputs it as an image file. You can capture a single window, the entire screen, or any rectangular portion of the screen.</dd>
-  <dt><a id="mogrify"></a><a href="mogrify.html">mogrify</a></dt><dd>resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.  Mogrify overwrites the original image file, whereas, <a href="convert.html">convert</a> writes to a different image file.</dd>
-  <dt><a id="montage"></a><a href="montage.html">montage</a></dt><dd>create a composite image by combining several separate images.  The images are tiled on the composite image optionally adorned with a border, frame, image name, and more.</dd>
-  <dt><a id="stream"></a><a href="stream.html">stream</a></dt><dd>a lightweight tool to stream one or more pixel components of the image or portion of the image to your choice of storage formats.  It writes the pixel components as they are read from the input image a row at a time making <code>stream</code> desirable when working with large images or when you require raw pixel components.</dd>
+<dl class="row">
+  <dt class="col-md-4"><a href="animate.html">animate</a></dt><dd class="col-md-8">animate an image sequence on any X server.</dd>
+  <dt class="col-md-4"><a id="compare"></a><a href="compare.html">compare</a></dt><dd class="col-md-8">mathematically and visually annotate the difference between an image and its reconstruction.</dd>
+  <dt class="col-md-4"><a id="composite"></a><a href="composite.html">composite</a></dt><dd class="col-md-8">overlap one image over another.</dd>
+  <dt class="col-md-4"><a id="conjure"></a><a href="conjure.html">conjure</a></dt><dd class="col-md-8">interpret and execute scripts written in the Magick Scripting Language (MSL).</dd>
+  <dt class="col-md-4"><a id="convert"></a><a href="convert.html">convert</a></dt><dd class="col-md-8">convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.</dd>
+  <dt class="col-md-4"><a id="display"></a><a href="display.html">display</a></dt><dd class="col-md-8">display an image or image sequence on any X server.</dd>
+  <dt class="col-md-4"><a id="identify"></a><a href="identify.html">identify</a></dt><dd class="col-md-8">describe the format and characteristics of one or more image files.</dd>
+  <dt class="col-md-4"><a id="import"></a><a href="import.html">import</a></dt><dd class="col-md-8">save any visible window on an X server and outputs it as an image file. You can capture a single window, the entire screen, or any rectangular portion of the screen.</dd>
+  <dt class="col-md-4"><a id="mogrify"></a><a href="mogrify.html">mogrify</a></dt><dd class="col-md-8">resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.  Mogrify overwrites the original image file, whereas, <a href="convert.html">convert</a> writes to a different image file.</dd>
+  <dt class="col-md-4"><a id="montage"></a><a href="montage.html">montage</a></dt><dd class="col-md-8">create a composite image by combining several separate images.  The images are tiled on the composite image optionally adorned with a border, frame, image name, and more.</dd>
+  <dt class="col-md-4"><a id="stream"></a><a href="stream.html">stream</a></dt><dd class="col-md-8">a lightweight tool to stream one or more pixel components of the image or portion of the image to your choice of storage formats.  It writes the pixel components as they are read from the input image a row at a time making <code>stream</code> desirable when working with large images or when you require raw pixel components.</dd>
 </dl>
 <p>If these tools are not available, you can simply append them to the <code>magick</code> tool like this:</p>
-<pre>
+<pre><code>
 magick convert logo: logo.jpg
-</pre>
+</code></pre>
 
 </div>
   <footer class="magick-footer">
@@ -107,4 +107,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:02 -->
\ No newline at end of file
diff --git a/www/compare.html b/www/compare.html
index 320732f..c81a7cd 100644
--- a/www/compare.html
+++ b/www/compare.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/compare.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/compare.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,33 +42,34 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="compare.html#usage">Example Usage</a> • <a href="compare.html#options">Option Summary</a></p>
 
 <p class="lead magick-description">Use the <code>compare</code> program to mathematically and visually annotate the difference between an image and its reconstruction.  See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>compare</code> command or see below for example usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>compare</code> command here to illustrate its usefulness and ease of use. To get started, lets compare an image to one thats been sharpened:</p>
 
-<pre>
+<pre><code>
 magick convert rose.jpg -sharpen 0x1 reconstruct.jpg
 magick compare rose.jpg reconstruct.jpg difference.png
 magick compare -compose src rose.jpg reconstruct.jpg difference.png
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/rose.jpg"><img src="../images/rose.jpg" width="70" height="46" alt="rose" /></a>
@@ -82,7 +82,7 @@
 
 <p>In addition to the visual interpretation of the difference in an image and its reconstruction, we report a mathematical measure of the difference:</p>
 
-<pre>
+<pre><code>
 -> magick compare -verbose -metric mae rose.jpg reconstruct.jpg difference.png
 Image: rose.jpg
  Channel distortion: MAE
@@ -90,37 +90,37 @@
   green: 1853.99 (0.0282901)
   blue: 2008.67 (0.0306503)
   all: 1536.39 (0.0234439)
-</pre>
+</code></pre>
 <p>Or, if you just want the red channel distortion, use this command:</p>
 
-<pre>
+<pre><code>
 -> magick compare -channel red -metric PSNR rose.jpg reconstruct.jpg difference.png
 19.63
-</pre>
+</code></pre>
 
 <p>Or, if you just want the overall image distortion, use this command:</p>
 
-<pre>
+<pre><code>
 -> magick compare -metric PSNR rose.jpg reconstruct.jpg difference.png
 28.31
-</pre>
+</code></pre>
 
 <p>If the reconstructed image is a subimage of the image, the compare program returns the best match offset.  In addition, it returns a similarity image such that an exact match location is completely white and if none of the pixels match, black, otherwise some gray level in-between:</p>
 
-<pre>
+<pre><code>
 -> magick compare -metric RMSE -subimage-search logo.png wizard.jpg similarity.gif
 85.05 (0.00129778) @ 353,157
-</pre>
+</code></pre>
 
 <p>You can find additional examples of using <code>compare</code> in <a href="http://www.ibm.com/developerworks/library/l-graf/?ca=dnt-428">Graphics from the Command Line</a>.  Further discussion is available in <a href="http://www.ibm.com/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine">More Graphics from the Command Line</a> and <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
 <p>The compare program returns 2 on error otherwise 0 if the images are similar or 1 if they are dissimilar.</p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>compare</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -415,4 +415,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:02 -->
\ No newline at end of file
diff --git a/www/compose.html b/www/compose.html
index b390421..fab1d85 100644
--- a/www/compose.html
+++ b/www/compose.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="compose.html"/>
-  <link rel="icon" href="https://www.imagemagick.org/images/wand.png"/>
-  <link rel="shortcut icon" href="https://www.imagemagick.org/images/wand.ico"/>
+  <link rel="canonical" href="compose.html" />
+  <link rel="icon" href="https://www.imagemagick.org/images/wand.png" />
+  <link rel="shortcut icon" href="https://www.imagemagick.org/images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="https://www.imagemagick.org/css/magick.html"/>
+  <link rel="stylesheet" href="https://www.imagemagick.org/css/magick.html" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="https://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="https://www.imagemagick.org/index.html">Home</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/download.html">Download</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/resources.html">Resources</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="https://www.imagemagick.org/index.html">Home</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/download.html">Download</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/command-line-tools.html">Tools</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/resources.html">Resources</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">This page descibed the Image composition methods that is used to define how
@@ -93,7 +93,7 @@
 
 <p>The following alpha blending (Duff-Porter) compose methods are available:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left" style="width: 8%">Method</th>
@@ -198,7 +198,7 @@
 
 <p>The following mathematical composition methods are also available. </p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left" style="width: 8%">Method</th>
@@ -307,7 +307,7 @@
 
 <p>The following lighting composition methods are also available. </p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left" style="width: 8%">Method</th>
@@ -411,7 +411,7 @@
 
 <p>Also included are these special purpose compose methods:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left" style="width: 8%">Method</th>
@@ -456,9 +456,9 @@
 the normal use of the <a href="https://www.imagemagick.org/script/command-line-options.html#compose" >-compose</a>
 setting in the "<code>composite</code>" command.  For example... </p>
 
-<pre>
+<pre><code>
 composite ... -blend 50x50 ...
-</pre>
+</code></pre>
 
 <p>As of IM v6.5.3-4 the "<code>convert</code>" command can now also supply
 these extra arguments to its <a href="https://www.imagemagick.org/script/command-line-options.html#composite"
@@ -468,15 +468,15 @@
 >-compose</a> methods, those the argument and the method both need to be set
 separately.  For example... </p>
 
-<pre>
+<pre><code>
 convert ... -compose blend  -define compose:args=50,50 -composite ...
-</pre>
+</code></pre>
 
 <p>The following is a table of these special 'argumented' compose methods,
 with a brief summary of what they do. For more details see the equivalent
 "composite" command option name.  </p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left" style="width: 8%">Method</th>
diff --git a/www/composite.html b/www/composite.html
index 5968d29..47aeebd 100644
--- a/www/composite.html
+++ b/www/composite.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/composite.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/composite.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,31 +42,32 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="composite.html#usage">Example Usage</a> • <a href="composite.html#options">Option Summary</a></p>
 
 <p class="lead magick-description">Use the <code>composite</code> program to overlap one image over another.  See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>composite</code> command or see below for example usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>composite</code> command here to illustrate its usefulness and ease of use.  To get started, lets overlay a smiley face over a rose:</p>
 
-<pre>
+<pre><code>
 magick composite -gravity center smile.gif  rose: rose-over.png
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/smile.gif"><img src="../images/smile.gif" width="48" height="48" alt="smile" /></a>
@@ -79,12 +79,12 @@
 
 <p>You can create three-dimensional effect with the <var>Atop</var>:</p>
 
-<pre>
+<pre><code>
 magick convert -size 70x70 canvas:none -fill red -draw 'circle 35,35 10,30' red-circle.png
 magick convert -size 70x70 canvas:none -draw 'circle 35,35 35,20' -negate \
 -channel A -gaussian-blur 0x8 white-highlight.png
 magick composite -compose atop -geometry -13-17 white-highlight.png red-circle.png red-ball.png
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/white-highlight.png"><img src="../images/white-highlight.png" width="70" height="70" alt="white highlight" /></a>
@@ -96,11 +96,11 @@
 
 <p>You can find additional examples of using <code>composite</code> in <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.  You can find out more about them and the mathematics by looking at <a href="http://www.w3.org/TR/SVG12/rendering.html">SVG Alpha Compositing</a></p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>composite</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -526,4 +526,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:57 -->
\ No newline at end of file
diff --git a/www/conjure.html b/www/conjure.html
index 1957e52..3dc5cab 100644
--- a/www/conjure.html
+++ b/www/conjure.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/conjure.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/conjure.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,35 +42,36 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="conjure.html#usage">Example Usage</a> • <a href="conjure.html#options">Option Summary</a> • <a href="conjure.html#msl">Magick Scripting Language (MSL)</a> </p>
 
 <p class="lead magick-description">The <code>conjure</code> program gives you the ability to perform custom image processing tasks from a script written in the Magick Scripting Language (MSL).  MSL is XML-based and consists of action statements with attributes.  Actions include reading an image, processing an image, getting attributes from an image, writing an image, and more.  An attribute is a key/value pair that modifies the behavior of an action.  See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>conjure</code> command or see below for example usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>conjure</code> command here to illustrate its usefulness and ease of use. To get started, here is simple <code>conjure</code> command:</p>
 
-<pre>
+<pre><code>
 magick conjure -dimensions 400x400 msl:incantation.msl
-</pre>
+</code></pre>
 
 <p>The MSL script <a href="http://www.imagemagick.org/source/incantation.msl">incantation.msl</a> used above is here:</p>
 
-<pre>
+<pre><code>
 &lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;image&gt;
   &lt;read filename="image.gif" /&gt;
@@ -81,11 +81,11 @@
   &lt;print output="Image sized from %[base-width]x%[base-height] to %[resize-width]x%[resize-height].\n" /&gt;
   &lt;write filename="image.png" /&gt;
 &lt;/image&gt;
-</pre>
+</code></pre>
 
 <p>In this example, a family stayed home for their vacation but as far as their friends are concerned they went to a beautiful beach in the Caribbean:</p>
 
-<pre>
+<pre><code>
 &lt;?xml version="1.0" encoding="UTF-8"?>
 &lt;group>
     &lt;image id="family">
@@ -103,21 +103,21 @@
     &lt;/image>
     &lt;write filename="family-vacation.png"/>
 &lt;/group>
-</pre>
+</code></pre>
 
 <p>Here we display the width in pixels of text for a particular font and pointsize.</p>
 
-<pre>
+<pre><code>
 &lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;image&gt;
   &lt;query-font-metrics text="ImageMagick" font="helvetica" pointsize="48" /&gt;
   &lt;print output="Text width is %[msl:font-metrics.width] pixels.\n" /&gt;
 &lt;/image&gt;
-</pre>
+</code></pre>
 
 <p>The <code>query-font-metrics</code> tag supports these properties:</p>
 
-<pre>
+<pre><code>
 msl:font-metrics.pixels_per_em.x
 msl:font-metrics.pixels_per_em.y
 msl:font-metrics.ascent
@@ -131,7 +131,7 @@
 msl:font-metrics.bounds.y2
 msl:font-metrics.origin.x
 msl:font-metrics.origin.y
-</pre>
+</code></pre>
 
 <p>MSL supports most methods and attributes discussed in the <a href="perl-magick.html">Perl API for ImageMagick</a>.
 </p>
@@ -141,11 +141,11 @@
 <p>You can find additional examples of using <code>conjure</code> in <a href="http://www.ibm.com/developerworks/library/l-graf/?ca=dnt-428">Graphics from the Command Line</a>.  Further discussion is available in <a href="http://www.ibm.com/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine">More Graphics from the Command Line</a> and <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>conjure</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -200,9 +200,9 @@
   </tbody>
 </table>
 
-<h2 class="magick-header"><a id="msl"></a>Magick Scripting Language</h2>
+<h2 class="magick-post-title"><a id="msl"></a>Magick Scripting Language</h2>
 <p>The <code>conjure</code> command recognizes these MSL elements.  Any element with a strike-thru is not supported yet.</p>
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
 <caption>Magick Scripting Language (MSL)</caption>
 <tbody>
   <tr>
@@ -1138,4 +1138,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/connected-components.html b/www/connected-components.html
index 42429ab..c2963b9 100644
--- a/www/connected-components.html
+++ b/www/connected-components.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/connected-components.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/connected-components.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,62 +42,63 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">Connected-component labeling (alternatively connected-component analysis, blob extraction, region labeling, blob discovery, or region extraction) uniquely labels connected components in an image.  The labeling process scans the image, pixel-by-pixel from top-left to bottom-right, in order to identify connected pixel regions, i.e. regions of adjacent pixels which share the same set of intensity values.  For example, let's find the objects in this image:</p>
 <ul>
   <a href="../images/objects.gif"><img src="../images/objects.gif" width="256" height="171" class="image-slices" alt="purse" /></a>
 </ul>
 <p>To identify the objects in this image, use this command:</p>
-<pre>
+<pre><code>
 convert objects.gif -connected-components 4 -auto-level -depth 8 objects.png
-</pre>
+</code></pre>
 <p>The detected objects are uniquely labeled.  Use auto leveling to visualize the detected objects:</p>
 <ul>
   <a href="../images/objects.png"><img src="../images/objects.png" width="256" height="171" class="image-slices" alt="Objects" /></a>
 </ul>
 <p>Object statistics is useful to review.  To display them, use this command:</p>
-<pre>
+<pre><code>
 convert objects.gif -define connected-components:verbose=true -connected-components 4 objects.png
-</pre>
+</code></pre>
 <p>Five objects were detected in the source image with these statistics:</p>
-<pre>
+<pre><code>
 Objects (id: bounding-box centroid area mean-color):
   0: 256x171+0+0 119.2,80.8 33117 srgb(0,0,0)
   2: 120x135+104+18 159.5,106.5 8690 srgb(255,255,255)
   3: 50x36+129+44 154.2,63.4 1529 srgb(0,0,0)
   4: 21x23+0+45 8.8,55.9 409 srgb(255,255,255)
   1: 4x10+252+0 253.9,4.1 31 srgb(255,255,255)
-</pre>
+</code></pre>
 <p>Use <code>-connected-components 8</code> to visit 8 neighbors rather than 4.  By default, neighbor colors must be exact to be part of a unique object. Use the <a href="command-line-options.html#fuzz">-fuzz</a> option to include pixels as part of an object that are <var>close</var> in color.</p>
 <p>You might want to eliminate small objects by merging them with their larger neighbors.  If so, use this command:</p>
-<pre>
+<pre><code>
 convert objects.gif -define connected-components:area-threshold=410 -connected-components 4 \
   -auto-level objects.jpg
-</pre>
+</code></pre>
 <p>Here are the expected results.  Notice, how the small objects are now merged with the background.</p>
 <ul>
   <a href="../images/objects.jpg"><img src="../images/objects.jpg" width="256" height="171" class="image-slices" alt="Objects" /></a>
 </ul>
 <p>Notice how two of the objects were merged leaving three remaining objects:</p>
-<pre>
+<pre><code>
 Objects (id: bounding-box centroid area mean-color):
   0: 256x171+0+0 118.0,80.4 33557 srgb(0,0,0)
   2: 120x135+104+18 159.5,106.5 8690 srgb(255,255,255)
   3: 50x36+129+44 154.2,63.4 1529 srgb(0,0,0)
-</pre>
+</code></pre>
 <p>By default, the labeled image is grayscale.  You can instead replace the object color in the labeled image with the mean-color from the source image. Simply add this setting, <code>-define connected-components:mean-color=true</code>, to your command line.</p>
 <p>You may want to remove certain objects by making them transparent.  Use <code>-define connected-components:remove=<em>list-of-ids</em></code> (e.g. -define connected-components:remove=2,4-5).  Or use <code>-define connected-components:keep=<em>list-of-ids</em></code> to keep these objects and make all others transparent.</p>
 </div>
@@ -121,4 +121,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/contact.html b/www/contact.html
index 28a358b..709d781 100644
--- a/www/contact.html
+++ b/www/contact.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/contact.php"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/contact.php" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,30 +42,31 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
   <div>
   <p class="lead magick-description">Post here for any of the issues listed below.  You can expect a response from our team if your issue is a sponsorship, <a href="https://www.imagemagick.org/script/license.html">license</a>, security, or paid support issue.  If you require a response for any other issue, post to the ImageMagick public <a href="https://www.imagemagick.org/discourse-server/">forums</a>.  You can also post bug reports to the <a href="https://github.com/ImageMagick/ImageMagick/issues">issues</a> forum.  Note, we do <u>not</u> offer sponsored links <u>nor do we respond to solicitations</u>.</p>
   <fieldset>
-  <h2 class="magick-header">Contact the Wizards</h2>
+  <h2 class="magick-post-title">Contact the Wizards</h2>
 	<p>Enter this code, <code>
 040d70</code>, in the Authenticate field and fill in the remaining fields.  Press Send to forward your message to the ImageMagick wizards:</p>
   <br/>
   <form method="post" name="post" id="post" action="https://www.imagemagick.org/script/contact.php" enctype="application/x-www-form-urlencoded">
   <div class="table-responsive">
-  <table class="table table-condensed table-striped">
+  <table class="table table-sm table-striped">
     <tr>
       <td><label id="authenticate" title="Your authentication code">Authenticate</label></td>
         <td valign="top"><input type="text" name="authenticate" size="32" maxlength="255" value="" /></td>
diff --git a/www/convert.html b/www/convert.html
index 7c678de..906b1f2 100644
--- a/www/convert.html
+++ b/www/convert.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/convert.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/convert.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,33 +42,34 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">Use the <code>convert</code> program to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.   See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>convert</code> command or see below for example usages of the command.</p>
 
 <p>We list a few examples of the <code>convert</code> command here to illustrate its usefulness and ease of use.  To get started, lets convert an image in the JPEG format to PNG:</p>
 
-<pre>
+<pre><code>
 magick convert rose.jpg rose.png
-</pre>
+</code></pre>
 
 <p>Next, we reduce the image size before it is written to the PNG format:</p>
 
-<pre>
+<pre><code>
 magick convert rose.jpg -resize 50% rose.png
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/rose.jpg">
@@ -83,11 +83,11 @@
 
 <p>You can combine multiple image-processing operations to produce complex results:</p>
 
-<pre>
+<pre><code>
 magick convert -size 320x85 canvas:none -font Bookman-DemiItalic -pointsize 72 \
   -draw "text 25,60 \'Magick\'" -channel RGBA -blur 0x6 -fill darkred -stroke magenta \
   -draw "text 20,55 \'Magick\'" fuzzy-magick.png
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/fuzzy-magick.png"><img src="../images/fuzzy-magick.png" width="320" height="85" alt="fuzzy-magick" /></a>
@@ -95,20 +95,20 @@
 
 <p>or here we resize an image with improved quality:</p>
 
-<pre>
+<pre><code>
 magick convert input.png -colorspace RGB +sigmoidal-contrast 11.6933 \
   -define filter:filter=Sinc -define filter:window=Jinc -define filter:lobes=3 \
   -resize 400% -sigmoidal-contrast 11.6933 -colorspace sRGB output.png');
-</pre>
+</code></pre>
 
 <p>You can find additional examples of using <code>convert</code> in <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>convert</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td><a href="command-line-options.html#adaptive-blur">-adaptive-blur <var>geometry</var></a></td>
     <td>adaptively blur pixels; decrease effect near edges</td>
@@ -1322,4 +1322,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:56 -->
\ No newline at end of file
diff --git a/www/develop.html b/www/develop.html
index c4dcd81..89ec1d0 100644
--- a/www/develop.html
+++ b/www/develop.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/develop.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/develop.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,128 +42,129 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">ImageMagick includes a number of ready-made interfaces. This makes it possible to modify or create images automagically and dynamically utilizing your favorite development platform.</p>
 
-<dl class="dl-horizontal">
-  <dt><a id="ada"></a>Ada</dt>
+<dl class="row">
+  <dt class="col-md-4"><a id="ada"></a>Ada</dt>
 
-<dd><a href="https://gna.org/projects/g2f/">G2F</a> implements an Ada 95 binding to a subset of the low-level MagickCore library.</dd>
+<dd class="col-md-8"><a href="https://gna.org/projects/g2f/">G2F</a> implements an Ada 95 binding to a subset of the low-level MagickCore library.</dd>
 
-  <dt><a id="c"></a>C</dt>
+  <dt class="col-md-4"><a id="c"></a>C</dt>
 
-<dd>Use <a href="magick-wand.html">MagickWand</a> to convert, compose, and edit images from the C language.  There is also the low-level <a href="magick-core.html">MagickCore</a> library for wizard-level developers.</dd>
+<dd class="col-md-8">Use <a href="magick-wand.html">MagickWand</a> to convert, compose, and edit images from the C language.  There is also the low-level <a href="magick-core.html">MagickCore</a> library for wizard-level developers.</dd>
 
-  <dt><a id="ch"></a>Ch</dt>
+  <dt class="col-md-4"><a id="ch"></a>Ch</dt>
 
-<dd><a href="../ChMagick">ChMagick</a> is a <a href="http://www.softintegration.com/">Ch</a> binding to the MagickCore and MagickWand API.  Ch is an embeddable C/C++ interpreter for cross-platform scripting.</dd>
+<dd class="col-md-8"><a href="../ChMagick">ChMagick</a> is a <a href="http://www.softintegration.com/">Ch</a> binding to the MagickCore and MagickWand API.  Ch is an embeddable C/C++ interpreter for cross-platform scripting.</dd>
 
-  <dt><a id="com_"></a>COM+</dt>
+  <dt class="col-md-4"><a id="com_"></a>COM+</dt>
 
-<dd>Use <a href="ImageMagickObject.html">ImageMagickObject</a> to convert, compose, and edit images from a Windows COM+ compatible component.</dd>
+<dd class="col-md-8">Use <a href="ImageMagickObject.html">ImageMagickObject</a> to convert, compose, and edit images from a Windows COM+ compatible component.</dd>
 
-  <dt><a id="c__"></a>C++</dt>
+  <dt class="col-md-4"><a id="c__"></a>C++</dt>
 
-<dd><a href="magick++.html">Magick++</a> provides an object-oriented C++ interface to ImageMagick.  See <a href="https://www.imagemagick.org/Magick++/tutorial/Magick++_tutorial.pdf">A Gentle Introduction to Magick++</a> for an introductory tutorial to Magick++.  We include the <a href="https://www.imagemagick.org/Magick++/tutorial/Magick++_tutorial.odt">source</a> if you want to correct, enhance, or expand the tutorial.</dd>
+<dd class="col-md-8"><a href="magick++.html">Magick++</a> provides an object-oriented C++ interface to ImageMagick.  See <a href="https://www.imagemagick.org/Magick++/tutorial/Magick++_tutorial.pdf">A Gentle Introduction to Magick++</a> for an introductory tutorial to Magick++.  We include the <a href="https://www.imagemagick.org/Magick++/tutorial/Magick++_tutorial.odt">source</a> if you want to correct, enhance, or expand the tutorial.</dd>
 
-  <dt><a id="go"></a>GO</dt>
-  <dd><a href="https://github.com/gographics/imagick">GoImagick</a> is a set of Go bindings to ImageMagick's MagickWand and MagickCore C APIs.</dd>
+  <dt class="col-md-4"><a id="go"></a>GO</dt>
+  <dd class="col-md-8"><a href="https://github.com/gographics/imagick">GoImagick</a> is a set of Go bindings to ImageMagick's MagickWand and MagickCore C APIs.</dd>
 
-  <dt><a id="java"></a>Java</dt>
+  <dt class="col-md-4"><a id="java"></a>Java</dt>
 
-<dd><a href="http://www.jmagick.org">JMagick</a> provides an object-oriented Java interface to ImageMagick.  <a href="http://im4java.sourceforge.net">Im4java</a> is a pure-java interface to the ImageMagick command-line.</dd>
+<dd class="col-md-8"><a href="http://www.jmagick.org">JMagick</a> provides an object-oriented Java interface to ImageMagick.  <a href="http://im4java.sourceforge.net">Im4java</a> is a pure-java interface to the ImageMagick command-line.</dd>
 
-  <dt><a id="julia"></a>Julia</dt>
+  <dt class="col-md-4"><a id="julia"></a>Julia</dt>
 
-<dd><a href="https://github.com/JuliaIO/ImageMagick.jl">JuliaIO</a> provides an object-oriented Julia interface to ImageMagick.</dd>
+<dd class="col-md-8"><a href="https://github.com/JuliaIO/ImageMagick.jl">JuliaIO</a> provides an object-oriented Julia interface to ImageMagick.</dd>
 
-  <dt><a id="labview"></a>LabVIEW</dt>
+  <dt class="col-md-4"><a id="labview"></a>LabVIEW</dt>
 
-<dd><a href="http://forums.lavag.org/downloads-file90.html">LVOOP ImageMagick</a> is an object-oriented LabVIEW interface to ImageMagick.</dd>
+<dd class="col-md-8"><a href="http://forums.lavag.org/downloads-file90.html">LVOOP ImageMagick</a> is an object-oriented LabVIEW interface to ImageMagick.</dd>
 
-  <dt><a id="lisp"></a>Lisp</dt>
+  <dt class="col-md-4"><a id="lisp"></a>Lisp</dt>
 
-<dd><a href="http://common-lisp.net/project/cl-magick/">CL-Magick</a> provides a Common Lisp interface to the ImageMagick library.</dd>
+<dd class="col-md-8"><a href="http://common-lisp.net/project/cl-magick/">CL-Magick</a> provides a Common Lisp interface to the ImageMagick library.</dd>
 
-  <dt><a id="lua"></a>Lua</dt>
+  <dt class="col-md-4"><a id="lua"></a>Lua</dt>
 
-<dd><a href="https://github.com/leafo/magick">Lua</a> bindings to ImageMagick for LuaJIT using FFI.</dd>
-<dd><a href="https://github.com/isage/lua-imagick">Lua</a> bindings to ImageMagick for Lua using pure-C.</dd>
+<dd class="col-md-8"><a href="https://github.com/leafo/magick">Lua</a> bindings to ImageMagick for LuaJIT using FFI.</dd>
+<dd class="col-md-8"><a href="https://github.com/isage/lua-imagick">Lua</a> bindings to ImageMagick for Lua using pure-C.</dd>
 
-  <dt><a id="neko"></a>Neko</dt>
+  <dt class="col-md-4"><a id="neko"></a>Neko</dt>
 
-<dd><a href="http://code.google.com/p/nmagick">NMagick</a> is a port of the ImageMagick library to the haXe and Neko platforms. It provides image manipulation capabilities to both web and desktop applications using Neko.</dd>
+<dd class="col-md-8"><a href="http://code.google.com/p/nmagick">NMagick</a> is a port of the ImageMagick library to the haXe and Neko platforms. It provides image manipulation capabilities to both web and desktop applications using Neko.</dd>
 
-  <dt><a id="dot-net"></a>.NET</dt>
+  <dt class="col-md-4"><a id="dot-net"></a>.NET</dt>
 
-<dd>Use <a href="http://magick.codeplex.com/">Magick.NET</a> to convert, compose, and edit images from Windows .NET.</dd>
+<dd class="col-md-8">Use <a href="http://magick.codeplex.com/">Magick.NET</a> to convert, compose, and edit images from Windows .NET.</dd>
 
-<dd><a href="http://sourceforge.net/projects/imagemagickapp/">ImageMagickApp</a> is a .NET application written in C# that utilizes the ImageMagick command line to allow conversion of multiple image formats to different formats.</dd>
+<dd class="col-md-8"><a href="http://sourceforge.net/projects/imagemagickapp/">ImageMagickApp</a> is a .NET application written in C# that utilizes the ImageMagick command line to allow conversion of multiple image formats to different formats.</dd>
 
-  <dt><a id="pascal"></a>Pascal</dt>
+  <dt class="col-md-4"><a id="pascal"></a>Pascal</dt>
 
-<dd><a href="http://wiki.freepascal.org/PascalMagick">PascalMagick</a> a Pascal binding for the MagickWand API and also the low-level MagickCore library. It works with Free Pascal / Lazarus and Delphi.</dd>
+<dd class="col-md-8"><a href="http://wiki.freepascal.org/PascalMagick">PascalMagick</a> a Pascal binding for the MagickWand API and also the low-level MagickCore library. It works with Free Pascal / Lazarus and Delphi.</dd>
 
-  <dt><a id="perl"></a>Perl</dt>
+  <dt class="col-md-4"><a id="perl"></a>Perl</dt>
 
-<dd>Use <a href="perl-magick.html">PerlMagick</a> to convert, compose, and edit images from the Perl language.</dd>
+<dd class="col-md-8">Use <a href="perl-magick.html">PerlMagick</a> to convert, compose, and edit images from the Perl language.</dd>
 
-  <dt><a id="php"></a>PHP</dt>
+  <dt class="col-md-4"><a id="php"></a>PHP</dt>
 
-<dd><a href="http://www.magickwand.org/">MagickWand for PHP</a> a native PHP-extension to the ImageMagick MagickWand API.</dd>
+<dd class="col-md-8"><a href="http://www.magickwand.org/">MagickWand for PHP</a> a native PHP-extension to the ImageMagick MagickWand API.</dd>
 
-<dd><a href="http://pecl.html.net/package/imagick">IMagick</a> is a native PHP extension to create and modify images using the ImageMagick API.  Documentation for the extension is available <a href="http://php.net/imagick">here</a>.</dd>
+<dd class="col-md-8"><a href="http://pecl.html.net/package/imagick">IMagick</a> is a native PHP extension to create and modify images using the ImageMagick API.  Documentation for the extension is available <a href="http://php.net/imagick">here</a>.</dd>
 
-<dd><a href="https://github.com/francodacosta/phmagick">phMagick</a> is a wrapper class for ImageMagick, wrapping the most common web image manipulation actions in easy to use functions, but allowing full access to ImageMagick's power by issuing system calls to it's command-line programs.</dd>
+<dd class="col-md-8"><a href="https://github.com/francodacosta/phmagick">phMagick</a> is a wrapper class for ImageMagick, wrapping the most common web image manipulation actions in easy to use functions, but allowing full access to ImageMagick's power by issuing system calls to it's command-line programs.</dd>
 
 
-  <dt><a id="python"></a>Python</dt>
+  <dt class="col-md-4"><a id="python"></a>Python</dt>
 
 
-<dd><a href="http://wand-py.org/">Wand</a> is a ctypes-based ImagedMagick binding library for Python.</dd>
-<dd><a href="https://www.imagemagick.org/download/python/">PythonMagick</a> is an object-oriented Python interface to ImageMagick.</dd>
-<dd><a href="http://www.assembla.com/wiki/show/pythonmagickwand">PythonMagickWand</a> is an object-oriented Python interface to MagickWand based on ctypes.</dd>
-<dd><a href="http://siptoolbox.sourceforge.net/">Scilab Image Processing</a> toolbox utilizes ImageMagick to do imaging tasks such as filtering, blurring, edge detection, thresholding, histogram manipulation, segmentation, mathematical morphology, color image processing, etc..</dd>
+<dd class="col-md-8"><a href="http://wand-py.org/">Wand</a> is a ctypes-based ImagedMagick binding library for Python.</dd>
+<dd class="col-md-8"><a href="https://www.imagemagick.org/download/python/">PythonMagick</a> is an object-oriented Python interface to ImageMagick.</dd>
+<dd class="col-md-8"><a href="http://www.assembla.com/wiki/show/pythonmagickwand">PythonMagickWand</a> is an object-oriented Python interface to MagickWand based on ctypes.</dd>
+<dd class="col-md-8"><a href="http://siptoolbox.sourceforge.net/">Scilab Image Processing</a> toolbox utilizes ImageMagick to do imaging tasks such as filtering, blurring, edge detection, thresholding, histogram manipulation, segmentation, mathematical morphology, color image processing, etc..</dd>
 
-  <dt><a id="realbasic"></a>REALbasic</dt>
+  <dt class="col-md-4"><a id="realbasic"></a>REALbasic</dt>
 
-<dd>The <a href="http://www.monkeybreadsoftware.de/realbasic/plugin-imagemagick.shtml">MBS Realbasic ImageMagick</a> is a plugin that utilizes the power of ImageMagick from within the RealBasic environment.</dd>
+<dd class="col-md-8">The <a href="http://www.monkeybreadsoftware.de/realbasic/plugin-imagemagick.shtml">MBS Realbasic ImageMagick</a> is a plugin that utilizes the power of ImageMagick from within the RealBasic environment.</dd>
 
-  <dt><a id="ruby"></a>Ruby</dt>
+  <dt class="col-md-4"><a id="ruby"></a>Ruby</dt>
 
-<dd><a href="https://rmagick.github.io/">RMagick</a> is an interface between the Ruby programming language and the <a href="magick-core.html">MagickCore</a> image processing libraries.  Get started with RMagick by perusing the <a href="https://rmagick.github.io/">documentation</a>.</dd>
+<dd class="col-md-8"><a href="https://rmagick.github.io/">RMagick</a> is an interface between the Ruby programming language and the <a href="magick-core.html">MagickCore</a> image processing libraries.  Get started with RMagick by perusing the <a href="https://rmagick.github.io/">documentation</a>.</dd>
 
-<dd><a href="http://magickwand.rubyforge.org/">MagickWand for Ruby</a> is an interface between the Ruby programming language and the <a href="magick-wand.html">MagickWand</a> image processing libraries.  Get started with MagickWand for PHP by perusing the <a href="http://magickwand.rubyforge.org/">documentation</a>.</dd>
+<dd class="col-md-8"><a href="http://magickwand.rubyforge.org/">MagickWand for Ruby</a> is an interface between the Ruby programming language and the <a href="magick-wand.html">MagickWand</a> image processing libraries.  Get started with MagickWand for PHP by perusing the <a href="http://magickwand.rubyforge.org/">documentation</a>.</dd>
 
-<dd><a href="https://github.com/minimagick">MiniMagick</a> is a Ruby wrapper for ImageMagick command line. MiniMagick gives you convenient access to all the command line options ImageMagick supports.</dd>
+<dd class="col-md-8"><a href="https://github.com/minimagick">MiniMagick</a> is a Ruby wrapper for ImageMagick command line. MiniMagick gives you convenient access to all the command line options ImageMagick supports.</dd>
 
-<dd><a href="http://quickmagick.rubyforge.org/quick_magick">QuickMagick</a> is a gem for easily accessing ImageMagick command line tools from Ruby programs.</dd>
+<dd class="col-md-8"><a href="http://quickmagick.rubyforge.org/quick_magick">QuickMagick</a> is a gem for easily accessing ImageMagick command line tools from Ruby programs.</dd>
 
-  <dt><a id="rust"></a>Rust</dt>
+  <dt class="col-md-4"><a id="rust"></a>Rust</dt>
 
-<dd><a href="https://github.com/influenza/wand-of-rust">RustWand</a> is a MagickWand bindings for the Rust language.</dd>
+<dd class="col-md-8"><a href="https://github.com/influenza/wand-of-rust">RustWand</a> is a MagickWand bindings for the Rust language.</dd>
 
-<dt><a id="tcl"></a>Tcl/Tk</dt>
+<dt class="col-md-4"><a id="tcl"></a>Tcl/Tk</dt>
 
-<dd><a href="http://tclmagick.sourceforge.net/">TclMagick</a> a native Tcl-extension to the ImageMagick MagickWand API.</dd>
+<dd class="col-md-8"><a href="http://tclmagick.sourceforge.net/">TclMagick</a> a native Tcl-extension to the ImageMagick MagickWand API.</dd>
 
-  <dt><a id="xml-rpc"></a>XML RPC</dt>
+  <dt class="col-md-4"><a id="xml-rpc"></a>XML RPC</dt>
 
-<dd><a href="http://code.google.com/p/remotemagick/">RemoteMagick</a> is an XML-RPC web service that creates image thumbnails.</dd>
+<dd class="col-md-8"><a href="http://code.google.com/p/remotemagick/">RemoteMagick</a> is an XML-RPC web service that creates image thumbnails.</dd>
 </dl>
 </div>
   <footer class="magick-footer">
@@ -186,4 +186,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:57 -->
\ No newline at end of file
diff --git a/www/display.html b/www/display.html
index ac32a72..1b635ea 100644
--- a/www/display.html
+++ b/www/display.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/display.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/display.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,57 +42,58 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="display.html#usage">Example Usage</a> • <a href="display.html#options">Option Summary</a></p>
 
 <p class="lead magick-description">Use the <code>display</code> program to display an image or image sequence on any X server.  See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>display</code> command or see below for example usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>display</code> command here to illustrate its usefulness and ease of use.  To get started, lets display an image in the JPEG format:</p>
 
-<pre>
+<pre><code>
 magick display rose.jpg
-</pre>
+</code></pre>
 
 <p>To tile a slate texture onto the root window, use:</p>
 
-<pre>
+<pre><code>
 magick display -size 1280x1024 -window root slate.png
-</pre>
+</code></pre>
 
 <p>To display a visual image directory of all your JPEG images, use:</p>
 
-<pre>
+<pre><code>
 magick display 'vid:*.jpg'
-</pre>
+</code></pre>
 
 <p>The display program defaults to the X screen resolution.  To display vecotr formats at their intended size, override the default resolution:</p>
 
-<pre>
+<pre><code>
 magick display -density 72 drawing.svg
-</pre>
+</code></pre>
 
 <p>You can find additional examples of using <code>display</code> in <a href="http://www.ibm.com/developerworks/library/l-graf/">Graphics from the Command Line</a>.  Further discussion is available in  <a href="https://www.ibm.com/developerworks/library/l-graf2/">More Graphics from the Command Line</a> and <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>display</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -568,4 +568,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:05 -->
\ No newline at end of file
diff --git a/www/distribute-pixel-cache.html b/www/distribute-pixel-cache.html
index 57bcc01..236a850 100644
--- a/www/distribute-pixel-cache.html
+++ b/www/distribute-pixel-cache.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/distribute-pixel-cache.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/distribute-pixel-cache.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,29 +42,30 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">A distributed pixel cache is an extension of the traditional pixel cache available on a single host.  The distributed pixel cache may span multiple servers so that it can grow in size and transactional capacity to support very large images or large image sequences.  Start up the pixel cache server on one or more hosts.  When you read or operate on an image and the local pixel cache resources are exhausted, ImageMagick contacts one or more of these remote pixel servers to store or retrieve pixels.</p>
 <p>For really large images or large image sequences, or if there is limited resources on your host, you can utilize a distributed pixel cache on one or more remote hosts.  Here we create two distributed pixel caches and utilize them from our desktop:</p>
-<pre>
+<pre><code>
 convert -distribute-cache 6668 &amp;  # start on 192.168.100.50
 convert -distribute-cache 6668 &amp;  # start on 192.168.100.51
 convert -limit memory 1GiB -limit map 2GiB -limit disk 4GiB \
   -define registry:cache:hosts=192.168.100.50:6668,192.168.100.51:6668 \
   myhugeimage.jpg -sharpen 5x2 myhugeimage.png
-</pre>
+</code></pre>
 <p>For large image sequences, the servers are contacted in a round-robin fashion to distribute the load over multiple distributed pixel caches (assuming you have a host list rather than a single host).  In our example, some modest resources are available on the desktop as defined by the -limit option.  For smaller images, they are allocated on the desktop up to the specified limits.</p>
 <p>Your image processing tasks are likely to perform slower when utilizing a distributed pixel cache due to pixels shuffling between the client and the server over a network.  Algorithms that access virtual pixels (e.g. -sharpen) are noticeably slower, up to 3 times slower, than algorithms that only access authentic pixels (e.g. -negate) due to increased network traffic.</p>
 <p>A client can only contact a compatible distributed pixel cache server.  Compatibility requires the same ImageMagick library interface, quantum depth, HDRI status, OS word size, and endianness.  The distributed pixel cache checks these attributes and exits if these requirements are not met.</p>
@@ -89,4 +89,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/download.html b/www/download.html
index ce8dc5e..eec2cef 100644
--- a/www/download.html
+++ b/www/download.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/download.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/download.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,30 +42,33 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="download.html#unix">Unix Binary Release</a> • <a href="download.html#macosx">Mac OS X Binary Release</a> • <a href="download.html#iOS">iOS Binary Release</a> • <a href="download.html#windows">Windows Binary Release</a></p>
 
 <p class="lead magick-description">You can install ImageMagick from <a href="install-source.html">source</a>.  However, if you don't have a proper development environment or if you're anxious to get started, download a ready-to-run <a href="download.html#unix">Unix</a> or <a href="download.html#windows">Windows</a> executable.  Before you download, you may want to review recent <a href="changelog.html">changes</a> to the ImageMagick distribution.</p>
 
-<h2 class="magick-header"><a id="unix"></a>Unix Binary Release</h2>
+<p>ImageMagick source and binary distributions are available from a variety of FTP and Web <a href="mirror.html">mirrors</a> around the world.</p>
+
+<h2 class="magick-post-title"><a id="unix"></a>Unix Binary Release</h2>
 
 <p>These are the Unix variations that we support.  If your system is not on the list, try installing from <a href="install-source.html">source</a>. Although ImageMagick runs fine on a single core computer, it automagically runs in parallel on dual and quad-core systems reducing run times considerably.</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <col width="50%"/> <col width="10%"/> <col width="10%"/> <col width="30%"/>
   <tr>
     <th>Version</th>
@@ -76,16 +78,16 @@
   </tr>
 
   <tr>
-      <td>ImageMagick-7.0.5-10.x86_64.rpm</td>
-      <td><a href= "https://www.imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-7.0.5-10.x86_64.rpm">download</a></td>
-    <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/linux/CentOS/x86_64/ImageMagick-7.0.5-10.x86_64.rpm">download</a></td>
+      <td>ImageMagick-7.0.6-0.x86_64.rpm</td>
+      <td><a href= "https://www.imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-7.0.6-0.x86_64.rpm">download</a></td>
+    <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/linux/CentOS/x86_64/ImageMagick-7.0.6-0.x86_64.rpm">download</a></td>
     <td>Redhat / CentOS 7.1 x86_64 RPM</td>
   </tr>
 
   <tr>
-      <td>ImageMagick-libs-7.0.5-10.x86_64.rpm</td>
-      <td><a href= "https://www.imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-libs-7.0.5-10.x86_64.rpm">download</a></td>
-    <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/linux/CentOS/x86_64/ImageMagick-libs-7.0.5-10.x86_64.rpm">download</a></td>
+      <td>ImageMagick-libs-7.0.6-0.x86_64.rpm</td>
+      <td><a href= "https://www.imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-libs-7.0.6-0.x86_64.rpm">download</a></td>
+    <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/linux/CentOS/x86_64/ImageMagick-libs-7.0.6-0.x86_64.rpm">download</a></td>
     <td>Redhat / CentOS 7.1 x86_64 RPM</td>
   </tr>
 
@@ -122,59 +124,59 @@
 
 <p>ImageMagick RPM's are self-installing.  Simply type the following command and you're ready to start using ImageMagick:</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>rpm -Uvh ImageMagick-7.0.5-10.x86_64.rpm</span></pre><p>You'll need the libraries as well:</p>
-<pre><span class="crtprompt"> </span><span class='crtin'>rpm -Uvh ImageMagick-libs-7.0.5-10.x86_64.rpm</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>rpm -Uvh ImageMagick-7.0.6-0.x86_64.rpm</span></pre><p>You'll need the libraries as well:</p>
+<pre><span class="crtprompt"> </span><span class='crtin'>rpm -Uvh ImageMagick-libs-7.0.6-0.x86_64.rpm</span></pre>
 <p>For other systems, create (or choose) a directory to install the package into and change to that directory, for example:</p>
 
-<pre>
+<pre><code>
 cd $HOME
-</pre>
+</code></pre>
 
 <p>Next, extract the contents of the package.  For example:</p>
 
-<pre>
+<pre><code>
 tar xvzf ImageMagick.tar.gz
-</pre>
+</code></pre>
 
 <p>Set the <code>MAGICK_HOME</code> environment variable to the path where you extracted the ImageMagick files. For example:</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>export MAGICK_HOME="$HOME/ImageMagick-7.0.5"</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>export MAGICK_HOME="$HOME/ImageMagick-7.0.6"</span></pre>
 <p>If the <code>bin</code> subdirectory of the extracted package is not already in your executable search path, add it to your <code>PATH</code> environment variable. For example:</p>
 
-<pre>
+<pre><code>
 export PATH="$MAGICK_HOME/bin:$PATH
-</pre>
+</code></pre>
 
 
 <p>On Linux and Solaris machines add <code>$MAGICK_HOME/lib</code> to the <code>LD_LIBRARY_PATH</code> environment variable:</p>
 
-<pre>
+<pre><code>
 LD_LIBRARY_PATH="${LD_LIBRARY_PATH:+$LD_LIBRARY_PATH:}$MAGICK_HOME/lib
 export LD_LIBRARY_PATH
-</pre>
+</code></pre>
 
 <p>Finally, to verify ImageMagick is working properly, type the following on the command line:</p>
 
-<pre>
+<pre><code>
 magick logo: logo.gif
 identify logo.gif
 display logo.gif
-</pre>
+</code></pre>
 
 <p>Congratulations, you have a working ImageMagick distribution under Unix or Linux and you are ready to use ImageMagick to <a href="https://www.imagemagick.org/Usage/">convert, compose, or edit</a> your images or perhaps you'll want to use one of the <a href="develop.html">Application Program Interfaces</a> for C, C++, Perl, and others.</p>
 
-<h2 class="magick-header"><a id="macosx"></a>Mac OS X Binary Release</h2>
+<h2 class="magick-post-title"><a id="macosx"></a>Mac OS X Binary Release</h2>
 
 <p>We recommend <a href="http://www.macports.org">MacPorts</a> which custom builds ImageMagick in your environment (some users prefer <a href="http://brew.sh">Homebrew</a>).  Download MacPorts and type:</p>
 
-<pre>
+<pre><code>
 sudo port install ImageMagick
-</pre>
+</code></pre>
 
 <p>The <code>port</code> command downloads ImageMagick and many of its delegate libraries (e.g. JPEG, PNG, Freetype, etc.) and configures, builds, and installs ImageMagick automagically.  Alternatively, you can download the ImageMagick Mac OS X distribution we provide:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <col width="50%"/> <col width="10%"/> <col width="10%"/> <col width="30%"/>
   <tr>
     <th>Version</th>
@@ -195,39 +197,39 @@
 
 <p>Create (or choose) a directory to install the package into and change to that directory, for example:</p>
 
-<pre>
+<pre><code>
 cd $HOME
-</pre>
+</code></pre>
 
 <p>Next, extract the contents of the package.  For example:</p>
 
-<pre>
+<pre><code>
 tar xvzf ImageMagick-x86_64-apple-darwin15.2.0.tar.gz
-</pre>
+</code></pre>
 
 <p>Set the <code>MAGICK_HOME</code> environment variable to the path where you extracted the ImageMagick files. For example:</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>export MAGICK_HOME="$HOME/ImageMagick-7.0.5"</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>export MAGICK_HOME="$HOME/ImageMagick-7.0.6"</span></pre>
 <p>If the <code>bin</code> subdirectory of the extracted package is not already in your executable search path, add it to your <code>PATH</code> environment variable. For example:</p>
 
-<pre>
+<pre><code>
 export PATH="$MAGICK_HOME/bin:$PATH"
-</pre>
+</code></pre>
 
 
 <p>Set the <code>DYLD_LIBRARY_PATH</code> environment variable:</p>
 
-<pre>
+<pre><code>
 export DYLD_LIBRARY_PATH="$MAGICK_HOME/lib/"
-</pre>
+</code></pre>
 
 <p>Finally, to verify ImageMagick is working properly, type the following on the command line:</p>
 
-<pre>
+<pre><code>
 magick logo: logo.gif
 identify logo.gif
 display logo.gif
-</pre>
+</code></pre>
 
 <p><b>Note</b>, the <a href="display.html">display</a> program requires the X11 server available on your Mac OS X installation DVD. Once that is installed, you will also need to <code>export DISPLAY=:0</code>.</p>
 
@@ -235,7 +237,7 @@
 
 <p>Congratulations, you have a working ImageMagick distribution under Mac OS X and you are ready to use ImageMagick to <a href="https://www.imagemagick.org/Usage/">convert, compose, or edit</a> your images or perhaps you'll want to use one of the <a href="develop.html">Application Program Interfaces</a> for C, C++, Perl, and others.</p>
 
-<h2 class="magick-header"><a id="iOS"></a>iOS Binary Release</h2>
+<h2 class="magick-post-title"><a id="iOS"></a>iOS Binary Release</h2>
 
 <p><a href="http://www.cloudgoessocial.net/2011/03/21/im-xcode4-ios4-3/">~Claudio</a> provides iOS builds of ImageMagick.</p>
 
@@ -255,10 +257,10 @@
 <h4>ImageMagick compiling script for iOS OS and iOS Simulator</h4>
 
 <p>To run the script:</p>
-<pre>
+<pre><code>
 ./imagemagick_compile.sh <var>VERSION</var>
-</pre>
-<p>where <var>VERSION</var> is the version of ImageMagick you want to compile (i.e.: 7.0.5-10, svn, ...)</p>
+</code></pre>
+<p>where <var>VERSION</var> is the version of ImageMagick you want to compile (i.e.: 7.0.6-0, svn, ...)</p>
 
 <p>This script compiles ImageMagick as a static library to be included in iOS projects and adds support for</p>
 <ul>
@@ -288,7 +290,7 @@
 
 <p>A <a href="http://www.cloudgoessocial.net/im_iphone/IM_Test.zip">sample project </a> is available for download. It is not updated too often, but it does give an idea of all the settings and some ways to play around with ImageMagick in an iOS application.</p>
 
-<h2 class="magick-header"><a id="windows"></a>Windows Binary Release</h2>
+<h2 class="magick-post-title"><a id="windows"></a>Windows Binary Release</h2>
 
 <p>ImageMagick runs on Windows 10 (x86 &amp; x64), Windows 8 (x86 &amp; x64), Windows 7 (x86 &amp; x64), Windows Server 2012, Windows XP (x86) with Service Pack 3, Windows Vista (x86 &amp; x64) with Service Pack 2, Windows Server 2003 (x86 &amp; x64) with Service Pack 2 (verify MSXML6 is present), Windows Server 2003 R2 (x86 &amp; x64), Windows Server 2008 (x86 &amp; x64) with Service Pack 2, and Windows Server 2008 R2 (x64).</p>
 
@@ -297,7 +299,7 @@
 <p>The Windows version of ImageMagick is self-installing.  Simply click on the appropriate version below and it will launch itself and ask you a few installation questions.  Versions with <var>Q8</var> in the name are 8 bits-per-pixel component (e.g. 8-bit red, 8-bit green, etc.), whereas,  <var>Q16</var> in the filename are 16 bits-per-pixel component. A Q16 version permits you to read or write 16-bit images without losing precision but requires twice as much resources as the Q8 version.  Versions with <var>dll</var> in the filename include ImageMagick libraries as <a href="http://www.answers.com/topic/dll">dynamic link libraries</a>. Unless you have a Windows 32-bit OS, we recommend this version of ImageMagick for 64-bit Windows:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <col width="50%"/> <col width="10%"/> <col width="10%"/> <col width="30%"/>
   <tr>
     <th>Version</th>
@@ -307,9 +309,9 @@
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q16-x64-dll.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q16-x64-dll.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q16-x64-dll.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q16-x64-dll.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q16-x64-dll.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q16-x64-dll.exe">download</a></td>
     <td>Win64 dynamic at 16 bits-per-pixel component</td>
   </tr>
 </table></div>
@@ -317,7 +319,7 @@
 <p>Or choose from these alternate Windows binary distributions:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <col width="50%"/> <col width="10%"/> <col width="10%"/> <col width="30%"/>
   <tr>
     <th>Version</th>
@@ -327,93 +329,93 @@
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q16-x64-static.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q16-x64-static.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q16-x64-static.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q16-x64-static.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q16-x64-static.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q16-x64-static.exe">download</a></td>
    <td>Win64 static at 16 bits-per-pixel component</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q8-x64-dll.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q8-x64-dll.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q8-x64-dll.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q8-x64-dll.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q8-x64-dll.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q8-x64-dll.exe">download</a></td>
    <td>Win64 dynamic at 8 bits-per-pixel component</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q8-x64-static.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q8-x64-static.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q8-x64-static.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q8-x64-static.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q8-x64-static.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q8-x64-static.exe">download</a></td>
     <td>Win64 static at 8 bits-per-pixel component</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q16-HDRI-x64-dll.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q16-HDRI-x64-dll.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q16-HDRI-x64-dll.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q16-HDRI-x64-dll.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q16-HDRI-x64-dll.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q16-HDRI-x64-dll.exe">download</a></td>
     <td>Win64 dynamic at 16 bits-per-pixel component with <a href="high-dynamic-range.html">high dynamic-range imaging</a> enabled</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q16-HDRI-x64-static.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q16-HDRI-x64-static.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q16-HDRI-x64-static.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q16-HDRI-x64-static.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q16-HDRI-x64-static.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q16-HDRI-x64-static.exe">download</a></td>
     <td>Win64 static at 16 bits-per-pixel component with <a href="high-dynamic-range.html">high dynamic-range imaging</a> enabled</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q16-x86-dll.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q16-x86-dll.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q16-x86-dll.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q16-x86-dll.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q16-x86-dll.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q16-x86-dll.exe">download</a></td>
     <td>Win32 dynamic at 16 bits-per-pixel component</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q16-x86-static.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q16-x86-static.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q16-x86-static.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q16-x86-static.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q16-x86-static.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q16-x86-static.exe">download</a></td>
     <td>Win32 static at 16 bits-per-pixel component</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q8-x86-dll.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q8-x86-dll.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q8-x86-dll.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q8-x86-dll.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q8-x86-dll.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q8-x86-dll.exe">download</a></td>
     <td>Win32 dynamic at 8 bits-per-pixel component</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q8-x86-static.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q8-x86-static.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q8-x86-static.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q8-x86-static.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q8-x86-static.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q8-x86-static.exe">download</a></td>
     <td>Win32 static at 8 bits-per-pixel component</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q16-HDRI-x86-dll.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q16-HDRI-x86-dll.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q16-HDRI-x86-dll.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q16-HDRI-x86-dll.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q16-HDRI-x86-dll.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q16-HDRI-x86-dll.exe">download</a></td>
     <td>Win32 dynamic at 16 bits-per-pixel component with <a href="high-dynamic-range.html">high dynamic-range imaging</a> enabled</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-Q16-HDRI-x86-static.exe</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-Q16-HDRI-x86-static.exe">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-Q16-HDRI-x86-static.exe">download</a></td>
+        <td>ImageMagick-7.0.6-0-Q16-HDRI-x86-static.exe</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-Q16-HDRI-x86-static.exe">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-Q16-HDRI-x86-static.exe">download</a></td>
     <td>Win32 static at 16 bits-per-pixel component with <a href="high-dynamic-range.html">high dynamic-range imaging</a> enabled</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-portable-Q16-x86.zip</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-portable-Q16-x86.zip">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-portable-Q16-x86.zip">download</a></td>
+        <td>ImageMagick-7.0.6-0-portable-Q16-x86.zip</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-portable-Q16-x86.zip">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-portable-Q16-x86.zip">download</a></td>
     <td>Portable Win32 static at 16 bits-per-pixel component.  Just copy to your host and run (no installer, no Windows registry entries).</td>
   </tr>
 
   <tr>
-        <td>ImageMagick-7.0.5-10-portable-Q16-x64.zip</td>
-        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.5-10-portable-Q16-x64.zip">download</a></td>
-      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.5-10-portable-Q16-x64.zip">download</a></td>
+        <td>ImageMagick-7.0.6-0-portable-Q16-x64.zip</td>
+        <td><a href= "https://www.imagemagick.org/download/binaries/ImageMagick-7.0.6-0-portable-Q16-x64.zip">download</a></td>
+      <td><a href="ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ImageMagick-7.0.6-0-portable-Q16-x64.zip">download</a></td>
     <td>Portable Win64 static at 16 bits-per-pixel component.  Just copy to your host and run (no installer, no Windows registry entries).</td>
   </tr>
 </table></div>
@@ -422,24 +424,24 @@
 
 <p>To verify ImageMagick is working properly, type the following in an Command Prompt window:</p>
 
-<pre>
+<pre><code>
 magick logo: logo.gif
 magick identify logo.gif
 magick logo.gif win:
-</pre>
+</code></pre>
 
 <p>If you have any problems, you likely need <code>vcomp120.dll</code>.  To install it, download <a href="https://www.microsoft.com/en-us/download/details.aspx?id=40784">Visual C++ 2013 Redistributable Package</a>.</p>
 
 <p>Note, use a double quote (<code>"</code>) rather than a single quote (<code>'</code>) for the ImageMagick command line under Windows:</p>
 
-<pre>
+<pre><code>
 magick "e:/myimages/image.png" "e:/myimages/image.jpg"
-</pre>
+</code></pre>
 <p>Use two double quotes for VBScript scripts:</p>
-<pre>
+<pre><code>
 Set objShell = wscript.createobject("wscript.shell")
 objShell.Exec("magick ""e:/myimages/image.png"" ""e:/myimages/image.jpg""")
-</pre>
+</code></pre>
 
 <p>Congratulations, you have a working ImageMagick distribution under Windows and you are ready to use ImageMagick to <a href="https://www.imagemagick.org/Usage/">convert, compose, or edit</a> your images or perhaps you'll want to use one of the <a href="develop.html">Application Program Interfaces</a> for C, C++, Perl, and others.</p>
 
@@ -464,4 +466,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:56 -->
\ No newline at end of file
diff --git a/www/escape.html b/www/escape.html
index c9ad442..77e7457 100644
--- a/www/escape.html
+++ b/www/escape.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/escape.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/escape.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">There are copious amounts of extra data associated with images (metadata), beyond the actual image pixels. This metadata can be useful, either for display, or for various calculations, or in modifying the behavior of later image processing operations.  You can utilize percent escapes in a number of options, for example in <a href="command-line-options.html#format_identify_">-format</a> or in montage <a href="command-line-options.html#label" >-label</a>, to print various properties and other settings associated with an image.</p>
 
@@ -95,7 +95,7 @@
     </td></tr>
 </table></div>
 
-<h3 class="magick-header">Percent Escape Handling</h3>
+<h3>Percent Escape Handling</h3>
 
 <p>If you request a percent escape such as <code>%[key]</code> the setting
 is looked for in the following order until the first match has been
@@ -126,20 +126,20 @@
 free-form string tables directly, allowing you to override the above sequence,
 and avoid accessing an attribute or property of the same name.</p>
 
-<pre>
+<pre><code>
 %[artifact:<var>setting</var>]
 %[option:<var>setting</var>]
-</pre>
+</code></pre>
 
 
-<h3 class="magick-header">Single Letter Attribute Percent Escapes</h3>
+<h3>Single Letter Attribute Percent Escapes</h3>
 
 <p>Here are common single letter escapes (short form) is used to report the most
 common attributes and properties of an image, such as: the image filename
 filename, type, width, height. </p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>\n</td>
     <td>newline</td>
@@ -333,10 +333,10 @@
 <p>Here is a sample command and its output for an image with filename
 <code>bird.miff</code> and whose width is 512 and height is 480.</p>
 
-<pre>
+<pre><code>
 -> identify -format "%m:%f %wx%h" bird.miff
 MIFF:bird.miff 512x480
-</pre>
+</code></pre>
 
 <p>Note that all single letter percent escapes can also be used using long
 form (from IM version 6.7.6-9, see next). For example <code>%[f]</code> is
@@ -351,13 +351,13 @@
 <p>Also be warned that calculated attributes can take some time to generate,
 especially for large images.</p>
 
-<h3 class="magick-header">Long Form Attribute Percent Escapes</h3>
+<h3>Long Form Attribute Percent Escapes</h3>
 
 <p>In addition to the above specific and calculated attributes are recognized
 when enclosed in braces (long form):</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>%[base]</td>
     <td>base filename, no suffixes (as %t)</td>
@@ -544,7 +544,7 @@
   </tr>
 </table></div>
 
-<h3 class="magick-header">Properties</h3>
+<h3>Properties</h3>
 
 <p>All other long forms of percent escapes (not single letter long form) are
 handled in a case insensitive manner. Such escapes will will attempt to look
@@ -572,7 +572,7 @@
 images when write, if the image file format allows. </p>
 
 
-<h3 class="magick-header">Artifacts and Options</h3>
+<h3>Artifacts and Options</h3>
 
 <p>The previous percent escapes are associated with the primary Attributes and
 Properties. Which is the original and primary focus of such percent escapes.
@@ -631,56 +631,56 @@
 Artifact. </p>
 
 
-<h3 class="magick-header">Glob-Pattern Listing of Properties, Artifacts and Options</h3>
+<h3>Glob-Pattern Listing of Properties, Artifacts and Options</h3>
 
 <p>The <var>setting</var> can contain a glob pattern. As such you can
 now list all free-form string properties, artifacts, and options, (but not
 specific image attributes) using...</p>
 
-<pre>
+<pre><code>
 convert ... \
    -print "__Properties__\n%[*]" \
    -print "__Artifacts__\n%[artifact:*]" \
    -print "__Options__\n%[option:*]" \
    ...
-</pre>
+</code></pre>
 
 <p> The format of glob patterns are very specific and as such is generally
 only used to list specific settings, such as when debugging, rather than being
 used for image processing use. </p>
 
 
-<h3 class="magick-header">Calculated Percent Escape Prefixes</h3>
+<h3>Calculated Percent Escape Prefixes</h3>
 
 <p>There are some special prefixes (before the first ':') which performs
 calculations based on the user provided string that follows that prefix.  For
 example you can do a numerical calculation use <code>%[fx:...]</code> to
 evaluate the given <a href="fx.html">FX</a> expressions:</p>
 
-<pre>
+<pre><code>
 %[fx:<var>expression</var>]
-</pre>
+</code></pre>
 
 <p>Use <code>pixel:</code> or <code>hex:</code> to evaluate a pixel color as defined by the <a
 href="fx.html">FX</a>
 expression:</p>
 
-<pre>
+<pre><code>
 %[pixel:<var>expression</var>]
-</pre>
+</code></pre>
 
-<h3 class="magick-header">Specific Profile Percent Escape Prefixes</h3>
+<h3>Specific Profile Percent Escape Prefixes</h3>
 
 <p>You can also use the following special formatting syntax to print EXIF
 mage meta-data that was included in the image read in:</p>
 
-<pre>
+<pre><code>
 %[EXIF:<var>tag</var>]
-</pre>
+</code></pre>
 
 <p>Choose <var>tag</var> from the following:</p>
 
-<pre class="pre-scrollable">
+<pre class="pre-scrollable"><code>
 *  (print all EXIF tags, in keyword=data format)
 !  (print all EXIF tags, in tag_number data format)
 #hhhh (print data for EXIF tag #hhhh)
@@ -766,7 +766,7 @@
 SensingMethod
 FileSource
 SceneType
-</pre>
+</code></pre>
 <br/>
 <p>Surround the format specification with quotation marks to prevent your
 shell from misinterpreting any spaces and square brackets.</p>
@@ -774,9 +774,9 @@
 <p>The following special formatting syntax can be used to print IPTC
 information contained in the file:</p>
 
-<pre>
+<pre><code>
 %[IPTC:<var>dataset</var>:<var>record</var>]
-</pre>
+</code></pre>
 
 <p>Select <var>dataset</var> and <var>record</var> from the following:</p>
 
@@ -866,7 +866,7 @@
 
 Post ObjectData Descriptor Record
   9:10   Confirmed ObjectData Size
-</pre>
+</code></pre>
 </div>
   <footer class="magick-footer">
     <p><a href="support.html">Donate</a> •
@@ -887,4 +887,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:16 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:58 -->
\ No newline at end of file
diff --git a/www/examples.html b/www/examples.html
index 5cbacc6..6b6c864 100644
--- a/www/examples.html
+++ b/www/examples.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/examples.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/examples.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,23 +42,24 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">Here are a few examples of what you can do with an image using ImageMagick from the command line, a program interface, or script.  You can generate this image yourself with this <a href="perl-magick.html">PerlMagick</a> script, <a href="https://www.imagemagick.org/source/examples.pl">examples.pl</a>.</p>
 
-<p><img class="img-responsive center-block" src="../images/examples.jpg" alt="[ImageMagick Examples]" width="734" height="2972" name="imagemagick-examples" /></p>
+<p><img class="img-fluid center-block" src="../images/examples.jpg" alt="[ImageMagick Examples]" width="734" height="2972" name="imagemagick-examples" /></p>
 </div>
   <footer class="magick-footer">
     <p><a href="support.html">Donate</a> •
@@ -80,4 +80,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:57 -->
\ No newline at end of file
diff --git a/www/exception.html b/www/exception.html
index e6868a4..7485f68 100644
--- a/www/exception.html
+++ b/www/exception.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/exception.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/exception.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,24 +42,25 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">ImageMagick returns a status of 0 whenever a command or algorithm successfully complete without complaint.  A warning code generally is typically just a notice that something unusual occurred but the command or algorithm still completed and most likely the results are still usable.  An error means the command or algorithm could not complete as expected and any results are unreliable.  A fatal error means the command or algorithm could not complete and the process exits prematurely and no results are returned.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <caption>ImageMagick Error and Warning Codes</caption>
   <tbody>
   <tr>
@@ -269,4 +269,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:16 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:00 -->
\ No newline at end of file
diff --git a/www/export.html b/www/export.html
index e86b40e..d18e7d9 100644
--- a/www/export.html
+++ b/www/export.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/export.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/export.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p  class="lead magick-description">ImageMagick Studio LLC is a limited liability corporation based in the United States of America. All of our products are developed via online collaboration in public forums and distributed from a central server within the U.S. Therefore, U.S. export laws and regulations apply to our distributions and remain in force as products and technology are re-exported to different parties and places around the world. Information on export control classifications and associated restrictions may be required for exporting, re-exporting, record keeping, bundling/embedding of ImageMagick products, encryption reporting, and shipping documentation. More information on U.S. Export Regulations can be found at the <a href="http://www.bis.doc.gov/">U. S. Bureau of Industry and Security</a>.</p>
 
@@ -80,4 +80,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:07 -->
\ No newline at end of file
diff --git a/www/formats.html b/www/formats.html
index 543b706..af83333 100644
--- a/www/formats.html
+++ b/www/formats.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/formats.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/formats.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="formats.html#colorspace">A Word about Colorspaces</a> • <a href="formats.html#supported">Supported Formats</a> • <a href="formats.html#pseudo">Pseudo Formats</a> • <a href="formats.html#builtin-images">Built-in Images</a>  • <a href="formats.html#builtin-patterns">Built-in Patterns</a> • <a href="formats.html#embedded">Embedded Profiles</a></p>
 
@@ -63,13 +63,13 @@
 
 <p>To get a complete listing of which image formats are supported on your system, type</p>
 
-<pre>
+<pre><code>
 identify -list format
-</pre>
+</code></pre>
 
 <p>On some platforms, ImageMagick automagically processes these extensions: .gz for Zip compression, .Z for Unix compression, .bz2 for block compression, and .pgp for PGP encryption. For example, a PNM image called image.pnm.gz is automagically uncompressed.</p>
 
-<h2 class="magick-header"><a id="colorspace"></a>A Word about Colorspaces</h2>
+<h2 class="magick-post-title"><a id="colorspace"></a>A Word about Colorspaces</h2>
  <p>A majority of the image formats assume an sRGB
 colorspace (e.g. JPEG, PNG, etc.).  A few support only linear RGB (e.g. EXR,
 DPX, CIN, HDR) or only linear GRAY (e.g. PGM).  A few formats support CMYK.
@@ -77,19 +77,19 @@
 (e.g. TIFF, PSD, JPG, JP2).  To determine the colorspace of your image, use
 this command:</p>
 
-<pre>
+<pre><code>
 -> identify -verbose image.jpg
 Image: image.jpg
 Format: JPEG (Joint Photographic Experts Group JFIF format)
 ...
 Colorspace: sRGB
-</pre>
+</code></pre>
 
 OR use the appropriate percent escape
-<pre>
+<pre><code>
 -> convert image.jpg -print "%[colorspace]\n" null:
 sRGB
-</pre>
+</code></pre>
 
 
 <p>When processing an image, be aware of the colorspace.  Many image
@@ -98,18 +98,18 @@
 results in linear RGB (essentially sRGB with the gamma function removed).  For
 example,</p>
 
-<pre>
+<pre><code>
 convert image.jpg -colorspace RGB -resize 50% -colorspace sRGB resize.jpg
-</pre>
+</code></pre>
 
 <p>As of IM 6.7.8-2 one can properly work in LAB colorspace whether or not
 Imagemagick is <a href="high-dynamic-range.html">HDRI</a>-enabled.  Essentually the A and
 B channels are stored with a 50% gray bias, to allow it to handle the
 negatives required by the format.</p>
 
-<pre>
+<pre><code>
 convert lab.tif -resize 50% resize.jpg
-</pre>
+</code></pre>
 
 <p>Again, it may not make sense for some image processing operators to work
 directly in LAB space, but ImageMagick permits it and generally returns
@@ -121,18 +121,18 @@
 operator. Afterward you can transform back to the LAB colorspace.  For
 example,</p>
 
-<pre>
+<pre><code>
   convert lab.tif -colorspace RGB -resize 50% -colorspace Lab resize.jpg
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="supported"></a>Supported Image Formats</h2>
+<h2 class="magick-post-title"><a id="supported"></a>Supported Image Formats</h2>
 
 <p>ImageMagick supports reading over 100 major file formats (not
 including sub-formats). The following table provides a summary of
 the supported image formats.</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th>Tag</th>
@@ -630,11 +630,11 @@
     <td>RW</td>
     <td>Magick Persistent Registry</td>
     <td>This format permits you to write to and read images from memory.  The image persists until the program exits.  For example, let's use the MPR to create a checkerboard:
-<pre>
+<pre><code>
 convert \( -size 15x15 canvas:black canvas:white -append \) \
   \( +clone -flip \) +append -write mpr:checkers +delete \
   -size 240x240 tile:mpr:checkers board.png
-</pre></td>
+</code></pre></td>
   </tr>
 
   <tr>
@@ -1213,12 +1213,12 @@
 </table>
 </div>
 
-<h2 class="magick-header"><a id="pseudo"></a>Pseudo-image Formats</h2>
+<h2 class="magick-post-title"><a id="pseudo"></a>Pseudo-image Formats</h2>
 
 <p>ImageMagick supports a number of image format specifications which refer to images prepared via an algorithm, or input/output targets. The following table lists these pseudo-image formats:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <th>Tag</th>
     <th>Mode</th>
@@ -1439,12 +1439,12 @@
 </table>
 </div>
 
-<h2 class="magick-header"><a id="builtin-images"></a>Built-in Images</h2>
+<h2 class="magick-post-title"><a id="builtin-images"></a>Built-in Images</h2>
 
 <p>ImageMagick includes a number of built-in (embedded) images which may be referenced as if they were an image file. The <code>magick:</code> format tag may be used via the syntax <code>magick:</code><var>name</var> to request an embedded image (e.g. <code>magick:logo</code>). For backwards compatibility, the image specifications <code>GRANITE:</code>, <code>LOGO:</code>, <code>NETSCAPE:</code>, and <code>ROSE:</code> may also be used to request images with those names.</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <th>Tag</th>
     <th>Mode</th>
@@ -1489,12 +1489,12 @@
 
 </table></div>
 
-<h2 class="magick-header"><a id="builtin-patterns"></a>Built-in Patterns</h2>
+<h2 class="magick-post-title"><a id="builtin-patterns"></a>Built-in Patterns</h2>
 
 <p>ImageMagick includes a number of built-in (embedded) patterns which may be referenced as if they were an image file. The <code>pattern:</code> format tag may be used via the syntax <code>pattern:</code><var>name</var> to request an embedded pattern (e.g. <code>pattern:checkerboard</code>). The pattern size is controlled with the <a href="command-line-options.html#size">-size</a> command line option.</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <th>Tag</th>
     <th>Mode</th>
@@ -1881,12 +1881,12 @@
   </tr>
 </table></div>
 
-<h2 class="magick-header"><a id="embedded"></a>Embedded Image Profiles</h2>
+<h2 class="magick-post-title"><a id="embedded"></a>Embedded Image Profiles</h2>
 
 <p>ImageMagick provides a number of format identifiers which are used to add, remove, and save embedded profiles for images which can support embedded profiles. Image types which may contain embedded profiles are TIFF, JPEG, and PDF.</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th>Tag</th>
@@ -1967,4 +1967,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:03 -->
\ No newline at end of file
diff --git a/www/fx.html b/www/fx.html
index 8e1c465..0f635ff 100644
--- a/www/fx.html
+++ b/www/fx.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/fx.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/fx.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="fx.html#fx">The Fx Special Effects Image Operator</a> • <a href="fx.html#anatomy">The Anatomy of an Fx Expression</a></p>
 
@@ -74,9 +74,9 @@
 
 <p>The expression can be simple:</p>
 
-<pre>
+<pre><code>
 convert -size 64x64 canvas:black -channel blue -fx "1/2" fx_navy.png
-</pre>
+</code></pre>
 
 <p>Here, we convert a black to a navy blue image:</p>
 
@@ -88,11 +88,11 @@
 
 <p>Or the expression can be complex:</p>
 
-<pre>
+<pre><code>
 convert rose.jpg \  
   -fx "(1.0/(1.0+exp(10.0*(0.5-u)))-0.006693)*1.0092503" \ 
   rose-sigmoidal.png'
-</pre>
+</code></pre>
 
 <p>This expression results in a high contrast version of the image:</p>
 
@@ -104,11 +104,11 @@
 
 <p>The expression can include variable assignments.  Assignments, in most cases, reduce the complexity of an expression and permit some operations that might not be possible any other way.  For example, lets create a radial gradient:</p>
 
-<pre>
+<pre><code>
 convert -size 70x70 canvas: \
   -fx "Xi=i-w/2; Yj=j-h/2; 1.2*(0.5-hypot(Xi,Yj)/70.0)+0.5" 
   radial-gradient.png'
-</pre>
+</code></pre>
 
 <p>The command above returns this image:</p>
 
@@ -118,45 +118,45 @@
 
 <p>This FX expression adds random noise to an image:</p>
 
-<pre>
+<pre><code>
 convert photo.jpg -fx \'iso=32; rone=rand(); rtwo=rand(); \
   myn=sqrt(-2*ln(rone))*cos(2*Pi*rtwo); myntwo=sqrt(-2*ln(rtwo))* \
   cos(2*Pi*rone); pnoise=sqrt(p)*myn*sqrt(iso)* \ 
   channel(4.28,3.86,6.68,0)/255; max(0,p+pnoise)\' noisy.png
-</pre>
+</code></pre>
 
 <p>See <a href="https://www.imagemagick.org/Usage/transform/index.html#fx">Using FX, The Special Effects Image Operator</a> for more examples.</p>
 
 <p>The next section discusses the Fx expression language.</p>
 
-<h2 class="magick-header"><a id="anatomy"></a>The Anatomy of an Fx Expression</h2>
+<h2 class="magick-post-title"><a id="anatomy"></a>The Anatomy of an Fx Expression</h2>
 
 <h3>The Fx Expression Language</h3>
 
 <p>The formal Fx expression language is defined here:</p>
 
-<dl class="dl-horizontal">
-  <dt> numbers:</dt>
-  	<dd> integer, floating point, scientific notation (+/- required, e.g. 3.81469e-06), International System number postfixes (.e.g KB, Mib, GB, etc.)</dd>
-  <dt> constants: </dt>
-    <dd> E (Euler's number), Epsilon, QuantumRange, QuantumScale, Opaque, Phi (golden ratio), Pi, Transparent</dd>
-  <dt> Fx operators (in order of precedence): </dt>
-     <dd> ^ (power), unary -, *, /, % (modulo), +, -,
+<dl class="row">
+  <dt class="col-md-4"> numbers:</dt>
+  	<dd class="col-md-8"> integer, floating point, scientific notation (+/- required, e.g. 3.81469e-06), International System number postfixes (.e.g KB, Mib, GB, etc.)</dd>
+  <dt class="col-md-4"> constants: </dt>
+    <dd class="col-md-8"> E (Euler's number), Epsilon, QuantumRange, QuantumScale, Opaque, Phi (golden ratio), Pi, Transparent</dd>
+  <dt class="col-md-4"> Fx operators (in order of precedence): </dt>
+     <dd class="col-md-8"> ^ (power), unary -, *, /, % (modulo), +, -,
      &lt;&lt;, &gt;&gt;, &lt;, &lt;=, &gt;, &gt;=, ==, !=,
      &amp; (bitwise AND),   | (bitwise OR),
      &amp;&amp; (logical AND),  || (logical OR),
      ~ (logical NOT),  ?: (ternary conditional)</dd>
-  <dt> math functions: </dt>
-     <dd> abs(), acos(), acosh(), airy(), alt(), asin(), asinh(), atan(), atanh(), atan2(), ceil(), clamp(), cos(), cosh(), debug(), drc(), erf(), exp(), floor(), gauss(), gcd(), hypot(), int(), isnan(), j0(), j1(), jinc(), ln(), log(), logtwo(), max(), min(), mod(), not(), pow(), rand(), round(), sign(), sin(), sinc(), sinh(), sqrt(), squish(), tan(), tanh(), trunc()</dd>
-  <dt> channel functions: </dt>
-    <dd> channel(r,g,b,a), channel(c,m,y,k,a)</dd>
-  <dt> color names:</dt>
-    <dd> red, cyan, black, etc.</dd>
-  <dt> color functions:</dt>
-    <dd> srgb(), srgba(), rgb(), rgba(), cmyk(), cmyka(), hsl(), hsla(), etc.</dd>
-  <dt> color hex values:</dt>
-    <dd> #ccc, #cbfed0, #b9e1cc00, etc.</dd>
-  <dt> symbols:</dt><dd><dl>
+  <dt class="col-md-4"> math functions: </dt>
+     <dd class="col-md-8"> abs(), acos(), acosh(), airy(), alt(), asin(), asinh(), atan(), atanh(), atan2(), ceil(), clamp(), cos(), cosh(), debug(), drc(), erf(), exp(), floor(), gauss(), gcd(), hypot(), int(), isnan(), j0(), j1(), jinc(), ln(), log(), logtwo(), max(), min(), mod(), not(), pow(), rand(), round(), sign(), sin(), sinc(), sinh(), sqrt(), squish(), tan(), tanh(), trunc()</dd>
+  <dt class="col-md-4"> channel functions: </dt>
+    <dd class="col-md-8"> channel(r,g,b,a), channel(c,m,y,k,a)</dd>
+  <dt class="col-md-4"> color names:</dt>
+    <dd class="col-md-8"> red, cyan, black, etc.</dd>
+  <dt class="col-md-4"> color functions:</dt>
+    <dd class="col-md-8"> srgb(), srgba(), rgb(), rgba(), cmyk(), cmyka(), hsl(), hsla(), etc.</dd>
+  <dt class="col-md-4"> color hex values:</dt>
+    <dd class="col-md-8"> #ccc, #cbfed0, #b9e1cc00, etc.</dd>
+  <dt class="col-md-4"> symbols:</dt><dd class="col-md-8"><dl>
      <li><code>u</code>=> first image in list</li>
      <li><code>v</code>=> second image in list</li>
      <li><code>s</code>=> current image in list (for %[fx:] otherwise = u)</li>
@@ -172,15 +172,15 @@
      <li><code>z</code>=> channel depth</li>
 
      <li><code>r</code>=> red value (from RGBA), of a specific or current pixel</li>
-     <li><code>g</code>=> green    ''</li>
-     <li><code>b</code>=> blue     ''</li>
-     <li><code>a</code>=> alpha    ''</li>
-     <li><code>o</code>=> opacity  ''</li>
+     <li><code>g</code>=> green</li>
+     <li><code>b</code>=> blue</li>
+     <li><code>a</code>=> alpha</li>
+     <li><code>o</code>=> opacity</li>
 
      <li><code>c</code>=> cyan value of CMYK color of pixel</li>
-     <li><code>y</code>=> yellow   ''</li>
-     <li><code>m</code>=> magenta  ''</li>
-     <li><code>k</code>=> black    ''</li>
+     <li><code>y</code>=> yellow</li>
+     <li><code>m</code>=> magenta</li>
+     <li><code>k</code>=> black</li>
 
      <li><code>intensity</code>=> pixel intensity</li>
 
@@ -204,104 +204,104 @@
      <li><code>standard_deviation</code>=> image standard deviation</li>
      <li><code>kurtosis</code>=> image kurtosis</li>
      <li><code>skewness</code>=> image skewness (add a channel specifier to compute a statistic for that channel, e.g. depth.r)</li></dl></dd>
-  <dt> iterators:</dt>
-    <dd> while()</dd>
+  <dt class="col-md-4"> iterators:</dt>
+    <dd class="col-md-8"> while()</dd>
 </dl>
 
 
 <h3>The Fx Expression</h3>
 
 <p>An Fx expression may include any combination of the following:</p>
-<dl class="dl-horizontal">
-<dt> <var>x</var> <code>^</code> <var>y</var></dt><dd> exponentiation (<var>x<sup>y</sup></var>)</dd>
-<dt> <code>(</code> ... <code>)</code></dt><dd> grouping</dd>
-<dt> <var>x</var> <code>*</code> <var>y</var></dt><dd> multiplication (the asterisk <code>*</code> is optional, for example, <code>2u</code> or <code>2(x+y)</code> are acceptable)</dd>
-<dt> <var>x</var> <code>/</code> <var>y</var></dt><dd> division</dd>
-<dt> <var>x</var> <code>%</code> <var>y</var></dt><dd> modulo</dd>
-<dt> <var>x</var> <code>+</code> <var>y</var></dt><dd> addition</dd>
-<dt> <var>x</var> <code>-</code> <var>y</var></dt><dd> subtraction</dd>
-<dt> <var>x</var> <code>&lt;&lt;</code> <var>y</var></dt><dd> left shift</dd>
-<dt> <var>x</var> <code>&gt;&gt;</code> <var>y</var></dt><dd> right shift</dd>
-<dt> <var>x</var> <code>&lt;</code> <var>y</var></dt><dd> boolean relation, return value 1.0 if <var>x</var> &lt; <var>y</var>,  otherwise 0.0</dd>
-<dt> <var>x</var> <code>&lt;=</code> <var>y</var></dt><dd> boolean relation, return value 1.0 if <var>x</var> &lt;= <var>y</var>,  otherwise 0.0</dd>
-<dt> <var>x</var> <code>&gt;</code> <var>y</var></dt><dd> boolean relation, return value 1.0 if <var>x</var> &gt; <var>y</var>,  otherwise 0.0</dd>
-<dt> <var>x</var> <code>&gt;=</code> <var>y</var></dt><dd> boolean relation, return value 1.0 if <var>x</var> &gt;= <var>y</var>,  otherwise 0.0</dd>
-<dt> <var>x</var> <code>==</code> <var>y</var></dt><dd> boolean relation, return value 1.0 if <var>x </var>==<var> y</var>, otherwise 0.0</dd>
-<dt> <var>x</var> <code>!=</code> <var>y</var></dt><dd> boolean relation, return value 1.0 if <var>x </var>!=<var> y</var>, otherwise 0.0</dd>
-<dt> <var>x</var> <code>&amp;</code> <var>y</var></dt><dd> binary AND</dd>
-<dt> <var>x</var> <code>|</code> <var>y</var></dt><dd> binary OR</dd>
-<dt> <var>x</var> <code>&amp;&amp;</code> <var>y</var></dt><dd> logical AND connective, return value 1.0 if <var>x</var> &gt; 0 and <var>y</var> &gt; 0,  otherwise 0.0</dd>
-<dt> <var>x</var> <code>||</code> <var>y</var></dt><dd> logical OR connective (inclusive), return value 1.0 if <var>x</var> &gt; 0 or <var>y</var> &gt; 0 (or both),  otherwise 0.0</dd>
-<dt> <code>~</code><var>x</var></dt><dd> logical NOT operator, return value 1.0 if <var>not</var> <var>x</var> &gt; 0,  otherwise 0.0</dd>
-<dt> <code>+</code><var>x</var></dt><dd> unary plus, return 1.0*value</dd>
-<dt> <code>-</code><var>x</var></dt><dd> unary minus, return -1.0*value</dd>
-<dt> <var>x</var> <code>?</code> <var>y</var> </dt><dd><var>z</var>: ternary conditional expression, return value <var>y</var> if <var>x</var> != 0, otherwise <var>z</var>; only one ternary conditional permitted per statement</dd>
-<dt> <var>x</var> <code>=</code> <var>y</var></dt><dd>assignment; assignment variables are restricted to letter combinations only (e.g. Xi not X1)</dd>
-<dt> <var>x</var> <code>;</code> <var>y</var></dt><dd>statement separator </dd>
-<dt> <code>phi</code></dt><dd> constant (1.618034...)</dd>
-<dt> <code>pi</code></dt><dd> constant (3.14159265359...)</dd>
-<dt> <code>e</code></dt><dd> constant (2.71828...)</dd>
-<dt> <code>QuantumRange</code></dt><dd> constant maximum pixel value (255 for Q8, 65535 for Q16)</dd>
-<dt> <code>QuantumScale</code></dt><dd> constant 1.0/<code>QuantumRange</code></dd>
-<dt> <code>intensity</code></dt><dd> pixel intensity; equivalent to 0.299*red+0.587*green+0.114*blue</dd>
-<dt> <code>hue</code></dt><dd> pixel hue</dd>
-<dt> <code>saturation</code></dt><dd> pixel saturation</dd>
-<dt> <code>lightness</code></dt><dd> pixel lightness; equivalent to 0.5*max(red,green,blue) + 0.5*min(red,green,blue)</dd>
-<dt> <code>luminance</code></dt><dd> pixel luminance; equivalent to 0.212656*red + 0.715158*green + 0.072186*blue</dd>
-<dt> <code>red, green, blue</code>, etc.</dt><dd> color names</dd>
-<dt> <code>#ccc, #cbfed0, #b9e1cc00</code>, etc.</dt><dd> color hex values</dd>
-<dt> <code>rgb(), rgba(), cmyk(), cmyka(), hsl(), hsla()</code></dt><dd> color functions</dd>
-<dt> <code>s, t, u, v, n, i, j, w, h, z, r, g, b, a, o, c, y, m, k</code></dt><dd> symbols</dd>
-<dt> <code>abs(</code><var>x</var><code>)</code></dt><dd> absolute value function</dd>
-<dt> <code>acos(</code><var>x</var><code>)</code></dt><dd> arc cosine function</dd>
-<dt> <code>acosh(</code><var>x</var><code>)</code></dt><dd> inverse hyperbolic cosine function</dd>
-<dt> <code>airy(</code><var>x</var><code>)</code></dt><dd> Airy function (max=1, min=0); airy(<var>x</var>)=[jinc(<var>x</var>)]<sup>2</sup>=[2*j1(<var>pi*x</var>)/(<var>pi*x</var>)]<sup>2</sup></dd>
-<dt> <code>alt(</code><var>x</var><code>)</code></dt><dd> sign alternation function (return 1.0 if int(<var>x</var>) is even, -1.0 if int(<var>x</var>) is odd)</dd>
-<dt> <code>asin(</code><var>x</var><code>)</code></dt><dd> arc sine function</dd>
-<dt> <code>asinh(</code><var>x</var><code>)</code></dt><dd> inverse hyperbolic sine function</dd>
-<dt> <code>atan(</code><var>x</var><code>)</code></dt><dd> arc tangent function</dd>
-<dt> <code>atanh(</code><var>x</var><code>)</code></dt><dd> inverse hyperbolic tangent function</dd>
-<dt> <code>atan2(</code><var>x</var>,<var>y</var><code>)</code></dt><dd> arc tangent function of two variables</dd>
-<dt> <code>ceil(</code><var>x</var><code>)</code></dt><dd>smallest integral value not less than argument</dd>
-<dt> <code>channel(</code><var>r</var>,<var>g</var>,<var>b</var>,<var>a</var><code>)</code></dt><dd>select numeric argument based on current channel</dd>
-<dt> <code>channel(</code><var>c</var>,<var>m</var>,<var>y</var>,<var>k</var>,<var>a</var><code>)</code></dt><dd>select numeric argument based on current channel</dd>
-<dt> <code>clamp(</code><var>x</var><code>)</code></dt><dd> clamp value</dd>
-<dt> <code>cos(</code><var>x</var><code>)</code></dt><dd> cosine function</dd>
-<dt> <code>cosh(</code><var>x</var><code>)</code></dt><dd> hyperbolic cosine function</dd>
-<dt> <code>debug(</code><var>x</var><code>)</code></dt><dd> print <var>x</var> (useful for debugging your expression)</dd>
-<dt> <code>drc(</code><var>x</var>,<var>y</var><code>)</code></dt><dd> dynamic range compression (knee curve); drc(<var>x</var>,<var>y</var>)=(<var>x</var>)/(<var>y</var>*(<var>x</var>-1)+1); -1&lt;<var>y</var>&lt;1 </dd>
-<dt> <code>erf(</code><var>x</var><code>)</code></dt><dd> error function</dd>
-<dt> <code>exp(</code><var>x</var><code>)</code></dt><dd> natural exponential function (<var>e<sup>x</sup></var>)</dd>
-<dt> <code>floor(</code><var>x</var><code>)</code></dt><dd> largest integral value not greater than argument</dd>
-<dt> <code>gauss(</code><var>x</var><code>)</code></dt><dd> gaussian function; gauss(<var>x</var>)=exp(<var>-x*x/2</var>)/sqrt(2*pi)</dd>
-<dt> <code>gcd(</code><var>x</var>,<var>y</var><code>)</code></dt><dd> greatest common denominator</dd>
-<dt> <code>hypot(</code><var>x</var>,<var>y</var><code>)</code></dt><dd> the square root of x<sup>2</sup>+y<sup>2</sup></dd>
-<dt> <code>int(</code><var>x</var><code>)</code></dt><dd> greatest integer function (return greatest integer less than or equal to <var>x</var>)</dd>
-<dt> <code>isnan(</code><var>x</var><code>)</code></dt><dd>return 1.0 if <var>x</var> is NAN, 0.0 otherwise</dd>
-<dt> <code>j0(</code><var>x</var><code>)</code></dt><dd> Bessel functions of <var>x</var> of the first kind of order 0</dd>
-<dt> <code>j1(</code><var>x</var><code>)</code></dt><dd> Bessel functions of <var>x</var> of the first kind of order 1</dd>
-<dt> <code>jinc(</code><var>x</var><code>)</code></dt><dd> jinc function (max=1, min=-0.1323); jinc(<var>x</var>)=2*j1(pi*<var>x</var>)/(pi*<var>*x</var>)</dd>
-<dt> <code>ln(</code><var>x</var><code>)</code></dt><dd> natural logarithm function</dd>
-<dt> <code>log(</code><var>x</var><code>)</code></dt><dd> logarithm base 10</dd>
-<dt> <code>logtwo(</code><var>x</var><code>)</code></dt><dd> logarithm base 2</dd>
-<dt> <code>ln(</code><var>x</var><code>)</code></dt><dd> natural logarithm</dd>
-<dt> <code>max(</code><var>x</var>, <var>y</var><code>)</code></dt><dd> maximum of <var>x</var> and <var>y</var></dd>
-<dt> <code>min(</code><var>x</var>, <var>y</var><code>)</code></dt><dd> minimum of <var>x</var> and <var>y</var></dd>
-<dt> <code>mod(</code><var>x</var>, <var>y</var><code>)</code></dt><dd> floating-point remainder function</dd>
-<dt> <code>not(</code><var>x</var><code>)</code></dt><dd> return 1.0 if <var>x</var> is zero, 0.0 otherwise</dd>
-<dt> <code>pow(</code><var>x</var>,<var>y</var><code>)</code></dt><dd> power function (<var>x<sup>y</sup></var>)</dd>
-<dt> <code>rand()</code></dt><dd> value uniformly distributed over the interval [0.0, 1.0) with a 2 to the 128th-1 period</dd>
-<dt> <code>round()</code></dt><dd> round to integral value, regardless of rounding direction</dd>
-<dt> <code>sign(</code><var>x</var><code>)</code></dt><dd> return -1.0 if <var>x</var> is less than 0.0 otherwise 1.0</dd>
-<dt> <code>sin(</code><var>x</var><code>)</code></dt><dd> sine function</dd>
-<dt> <code>sinc(</code><var>x</var><code>)</code></dt><dd> sinc function (max=1, min=-0.21); sinc(<var>x</var>)=sin(<var>pi*x</var>)/(<var>pi*x</var>)</dd>
-<dt> <code>squish(</code><var>x</var><code>)</code></dt><dd> squish function; squish(<var>x</var>)=1.0/(1.0+exp(<var>-x</var>))</dd>
-<dt> <code>sinh(</code><var>x</var><code>)</code></dt><dd> hyperbolic sine function</dd>
-<dt> <code>sqrt(</code><var>x</var><code>)</code></dt><dd> square root function</dd>
-<dt> <code>tan(</code><var>x</var><code>)</code></dt><dd> tangent function</dd>
-<dt> <code>tanh(</code><var>x</var><code>)</code></dt><dd> hyperbolic tangent function</dd>
-<dt> <code>trunc(</code><var>x</var><code>)</code></dt><dd> round to integer, towards zero</dd>
-<dt> <code>while(</code><var>condition</var>,<var>expression</var><code>)</code></dt><dd> iterate while the condition is not equal to 0</dd>
+<dl class="row">
+<dt class="col-md-4"> <var>x</var> <code>^</code> <var>y</var></dt><dd class="col-md-8"> exponentiation (<var>x<sup>y</sup></var>)</dd>
+<dt class="col-md-4"> <code>(</code> ... <code>)</code></dt><dd class="col-md-8"> grouping</dd>
+<dt class="col-md-4"> <var>x</var> <code>*</code> <var>y</var></dt><dd class="col-md-8"> multiplication (the asterisk <code>*</code> is optional, for example, <code>2u</code> or <code>2(x+y)</code> are acceptable)</dd>
+<dt class="col-md-4"> <var>x</var> <code>/</code> <var>y</var></dt><dd class="col-md-8"> division</dd>
+<dt class="col-md-4"> <var>x</var> <code>%</code> <var>y</var></dt><dd class="col-md-8"> modulo</dd>
+<dt class="col-md-4"> <var>x</var> <code>+</code> <var>y</var></dt><dd class="col-md-8"> addition</dd>
+<dt class="col-md-4"> <var>x</var> <code>-</code> <var>y</var></dt><dd class="col-md-8"> subtraction</dd>
+<dt class="col-md-4"> <var>x</var> <code>&lt;&lt;</code> <var>y</var></dt><dd class="col-md-8"> left shift</dd>
+<dt class="col-md-4"> <var>x</var> <code>&gt;&gt;</code> <var>y</var></dt><dd class="col-md-8"> right shift</dd>
+<dt class="col-md-4"> <var>x</var> <code>&lt;</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x</var> &lt; <var>y</var>,  otherwise 0.0</dd>
+<dt class="col-md-4"> <var>x</var> <code>&lt;=</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x</var> &lt;= <var>y</var>,  otherwise 0.0</dd>
+<dt class="col-md-4"> <var>x</var> <code>&gt;</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x</var> &gt; <var>y</var>,  otherwise 0.0</dd>
+<dt class="col-md-4"> <var>x</var> <code>&gt;=</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x</var> &gt;= <var>y</var>,  otherwise 0.0</dd>
+<dt class="col-md-4"> <var>x</var> <code>==</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x </var>==<var> y</var>, otherwise 0.0</dd>
+<dt class="col-md-4"> <var>x</var> <code>!=</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x </var>!=<var> y</var>, otherwise 0.0</dd>
+<dt class="col-md-4"> <var>x</var> <code>&amp;</code> <var>y</var></dt><dd class="col-md-8"> binary AND</dd>
+<dt class="col-md-4"> <var>x</var> <code>|</code> <var>y</var></dt><dd class="col-md-8"> binary OR</dd>
+<dt class="col-md-4"> <var>x</var> <code>&amp;&amp;</code> <var>y</var></dt><dd class="col-md-8"> logical AND connective, return value 1.0 if <var>x</var> &gt; 0 and <var>y</var> &gt; 0,  otherwise 0.0</dd>
+<dt class="col-md-4"> <var>x</var> <code>||</code> <var>y</var></dt><dd class="col-md-8"> logical OR connective (inclusive), return value 1.0 if <var>x</var> &gt; 0 or <var>y</var> &gt; 0 (or both),  otherwise 0.0</dd>
+<dt class="col-md-4"> <code>~</code><var>x</var></dt><dd class="col-md-8"> logical NOT operator, return value 1.0 if <var>not</var> <var>x</var> &gt; 0,  otherwise 0.0</dd>
+<dt class="col-md-4"> <code>+</code><var>x</var></dt><dd class="col-md-8"> unary plus, return 1.0*value</dd>
+<dt class="col-md-4"> <code>-</code><var>x</var></dt><dd class="col-md-8"> unary minus, return -1.0*value</dd>
+<dt class="col-md-4"> <var>x</var> <code>?</code> <var>y</var> <code>:</code> <var>z</var> </dt><dd class="col-md-8">ternary conditional expression, return value <var>y</var> if <var>x</var> != 0, otherwise <var>z</var>; only one ternary conditional permitted per statement</dd>
+<dt class="col-md-4"> <var>x</var> <code>=</code> <var>y</var></dt><dd class="col-md-8">assignment; assignment variables are restricted to letter combinations only (e.g. Xi not X1)</dd>
+<dt class="col-md-4"> <var>x</var> <code>;</code> <var>y</var></dt><dd class="col-md-8">statement separator </dd>
+<dt class="col-md-4"> <code>phi</code></dt><dd class="col-md-8"> constant (1.618034...)</dd>
+<dt class="col-md-4"> <code>pi</code></dt><dd class="col-md-8"> constant (3.14159265359...)</dd>
+<dt class="col-md-4"> <code>e</code></dt><dd class="col-md-8"> constant (2.71828...)</dd>
+<dt class="col-md-4"> <code>QuantumRange</code></dt><dd class="col-md-8"> constant maximum pixel value (255 for Q8, 65535 for Q16)</dd>
+<dt class="col-md-4"> <code>QuantumScale</code></dt><dd class="col-md-8"> constant 1.0/<code>QuantumRange</code></dd>
+<dt class="col-md-4"> <code>intensity</code></dt><dd class="col-md-8"> pixel intensity whose value respects the <a href="command-line-options.html#intensity">-intensity</a> option.</dd>
+<dt class="col-md-4"> <code>hue</code></dt><dd class="col-md-8"> pixel hue</dd>
+<dt class="col-md-4"> <code>saturation</code></dt><dd class="col-md-8"> pixel saturation</dd>
+<dt class="col-md-4"> <code>lightness</code></dt><dd class="col-md-8"> pixel lightness; equivalent to 0.5*max(red,green,blue) + 0.5*min(red,green,blue)</dd>
+<dt class="col-md-4"> <code>luminance</code></dt><dd class="col-md-8"> pixel luminance; equivalent to <code>0.212656*red + 0.715158*green + 0.072186*blue</code></dd>
+<dt class="col-md-4"> <code>red, green, blue</code>, etc.</dt><dd class="col-md-8"> color names</dd>
+<dt class="col-md-4"> <code>#ccc, #cbfed0, #b9e1cc00</code>, etc.</dt><dd class="col-md-8"> color hex values</dd>
+<dt class="col-md-4"> <code>rgb(), rgba(), cmyk(), cmyka(), hsl(), hsla()</code></dt><dd class="col-md-8"> color functions</dd>
+<dt class="col-md-4"> <code>s, t, u, v, n, i, j, w, h, z, r, g, b, a, o, c, y, m, k</code></dt><dd class="col-md-8"> symbols</dd>
+<dt class="col-md-4"> <code>abs(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> absolute value function</dd>
+<dt class="col-md-4"> <code>acos(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> arc cosine function</dd>
+<dt class="col-md-4"> <code>acosh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> inverse hyperbolic cosine function</dd>
+<dt class="col-md-4"> <code>airy(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> Airy function (max=1, min=0); airy(<var>x</var>)=[jinc(<var>x</var>)]<sup>2</sup>=[2*j1(<var>pi*x</var>)/(<var>pi*x</var>)]<sup>2</sup></dd>
+<dt class="col-md-4"> <code>alt(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> sign alternation function (return 1.0 if int(<var>x</var>) is even, -1.0 if int(<var>x</var>) is odd)</dd>
+<dt class="col-md-4"> <code>asin(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> arc sine function</dd>
+<dt class="col-md-4"> <code>asinh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> inverse hyperbolic sine function</dd>
+<dt class="col-md-4"> <code>atan(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> arc tangent function</dd>
+<dt class="col-md-4"> <code>atanh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> inverse hyperbolic tangent function</dd>
+<dt class="col-md-4"> <code>atan2(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> arc tangent function of two variables</dd>
+<dt class="col-md-4"> <code>ceil(</code><var>x</var><code>)</code></dt><dd class="col-md-8">smallest integral value not less than argument</dd>
+<dt class="col-md-4"> <code>channel(</code><var>r</var>,<var>g</var>,<var>b</var>,<var>a</var><code>)</code></dt><dd class="col-md-8">select numeric argument based on current channel</dd>
+<dt class="col-md-4"> <code>channel(</code><var>c</var>,<var>m</var>,<var>y</var>,<var>k</var>,<var>a</var><code>)</code></dt><dd class="col-md-8">select numeric argument based on current channel</dd>
+<dt class="col-md-4"> <code>clamp(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> clamp value</dd>
+<dt class="col-md-4"> <code>cos(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> cosine function</dd>
+<dt class="col-md-4"> <code>cosh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> hyperbolic cosine function</dd>
+<dt class="col-md-4"> <code>debug(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> print <var>x</var> (useful for debugging your expression)</dd>
+<dt class="col-md-4"> <code>drc(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> dynamic range compression (knee curve); drc(<var>x</var>,<var>y</var>)=(<var>x</var>)/(<var>y</var>*(<var>x</var>-1)+1); -1&lt;<var>y</var>&lt;1 </dd>
+<dt class="col-md-4"> <code>erf(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> error function</dd>
+<dt class="col-md-4"> <code>exp(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> natural exponential function (<var>e<sup>x</sup></var>)</dd>
+<dt class="col-md-4"> <code>floor(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> largest integral value not greater than argument</dd>
+<dt class="col-md-4"> <code>gauss(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> gaussian function; gauss(<var>x</var>)=exp(<var>-x*x/2</var>)/sqrt(2*pi)</dd>
+<dt class="col-md-4"> <code>gcd(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> greatest common denominator</dd>
+<dt class="col-md-4"> <code>hypot(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> the square root of x<sup>2</sup>+y<sup>2</sup></dd>
+<dt class="col-md-4"> <code>int(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> greatest integer function (return greatest integer less than or equal to <var>x</var>)</dd>
+<dt class="col-md-4"> <code>isnan(</code><var>x</var><code>)</code></dt><dd class="col-md-8">return 1.0 if <var>x</var> is NAN, 0.0 otherwise</dd>
+<dt class="col-md-4"> <code>j0(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> Bessel functions of <var>x</var> of the first kind of order 0</dd>
+<dt class="col-md-4"> <code>j1(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> Bessel functions of <var>x</var> of the first kind of order 1</dd>
+<dt class="col-md-4"> <code>jinc(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> jinc function (max=1, min=-0.1323); jinc(<var>x</var>)=2*j1(pi*<var>x</var>)/(pi*<var>*x</var>)</dd>
+<dt class="col-md-4"> <code>ln(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> natural logarithm function</dd>
+<dt class="col-md-4"> <code>log(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> logarithm base 10</dd>
+<dt class="col-md-4"> <code>logtwo(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> logarithm base 2</dd>
+<dt class="col-md-4"> <code>ln(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> natural logarithm</dd>
+<dt class="col-md-4"> <code>max(</code><var>x</var>, <var>y</var><code>)</code></dt><dd class="col-md-8"> maximum of <var>x</var> and <var>y</var></dd>
+<dt class="col-md-4"> <code>min(</code><var>x</var>, <var>y</var><code>)</code></dt><dd class="col-md-8"> minimum of <var>x</var> and <var>y</var></dd>
+<dt class="col-md-4"> <code>mod(</code><var>x</var>, <var>y</var><code>)</code></dt><dd class="col-md-8"> floating-point remainder function</dd>
+<dt class="col-md-4"> <code>not(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> return 1.0 if <var>x</var> is zero, 0.0 otherwise</dd>
+<dt class="col-md-4"> <code>pow(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> power function (<var>x<sup>y</sup></var>)</dd>
+<dt class="col-md-4"> <code>rand()</code></dt><dd class="col-md-8"> value uniformly distributed over the interval [0.0, 1.0) with a 2 to the 128th-1 period</dd>
+<dt class="col-md-4"> <code>round()</code></dt><dd class="col-md-8"> round to integral value, regardless of rounding direction</dd>
+<dt class="col-md-4"> <code>sign(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> return -1.0 if <var>x</var> is less than 0.0 otherwise 1.0</dd>
+<dt class="col-md-4"> <code>sin(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> sine function</dd>
+<dt class="col-md-4"> <code>sinc(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> sinc function (max=1, min=-0.21); sinc(<var>x</var>)=sin(<var>pi*x</var>)/(<var>pi*x</var>)</dd>
+<dt class="col-md-4"> <code>squish(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> squish function; squish(<var>x</var>)=1.0/(1.0+exp(<var>-x</var>))</dd>
+<dt class="col-md-4"> <code>sinh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> hyperbolic sine function</dd>
+<dt class="col-md-4"> <code>sqrt(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> square root function</dd>
+<dt class="col-md-4"> <code>tan(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> tangent function</dd>
+<dt class="col-md-4"> <code>tanh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> hyperbolic tangent function</dd>
+<dt class="col-md-4"> <code>trunc(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> round to integer, towards zero</dd>
+<dt class="col-md-4"> <code>while(</code><var>condition</var>,<var>expression</var><code>)</code></dt><dd class="col-md-8"> iterate while the condition is not equal to 0</dd>
 </dl>
 <br/>
 <p>The expression semantics include these rules:</p>
@@ -324,17 +324,17 @@
 
 <p>As an example, we form an image by averaging the first image and third images (the second (index 1) image is ignored and just junked):</p>
 
-<pre>
+<pre><code>
 convert image1.jpg image2.jpg image3.jpg -fx "(u+u[2])/2.0" image.jpg
-</pre>
+</code></pre>
 
 <p>By default, the image to which <code>p</code>, <code>r</code>, <code>g</code>, <code>b</code>, <code>a</code>, etc., are applied is the current image <code>s</code> in the image list. This is equivalent to <code>u</code> except when used in an escape sequence <code>%[fx:...]</code>. </p>
 
 <p>It is important to note the special role played by the first image. This is the only image in the image sequence that is modified, other images are used only for their data. As an illustrative example, consider the following, and note that the setting <a href="command-line-options.html#channel">-channel red</a> instructs <a href="command-line-options.html#fx">-fx</a> to modify only the red channel; nothing in the green or blue channels will change. It is instructive to ponder why the result is not symmetric.</p>
 
-<pre>
+<pre><code>
 convert -channel red logo: -flop logo: -resize "20%" -fx "(u+v)/2" image.jpg
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/logo-sm-flop.png"><img src="../images/logo-sm-flop.png" width="128" height="96" alt="logo-sm-flop.png" /></a>
@@ -350,17 +350,17 @@
 
 <p>The pixels are processed one at a time, but a different pixel of an image can be specified using a pixel index represented by <code>p</code>. For example,</p>
 
-<pre>
+<pre><code>
 p[-1].g      green value of pixel to the immediate left of the current pixel
 p[-1,-1].r   red value of the pixel diagonally left and up from current pixel
-</pre>
+</code></pre>
 
 <p>To specify an absolute position, use braces, rather than brackets.</p>
 
-<pre>
+<pre><code>
 p{0,0}.r     red value of the pixel in the upper left corner of the image
 p{12,34}.b   blue pixel value at column number 12, row 34 of the image
-</pre>
+</code></pre>
 
 <p>Integer values of the position retrieve the color of the pixel referenced, while non-integer position values return a blended color according to the current <a href="command-line-options.html#interpolate">-interpolate</a> setting.</p>
 
@@ -370,9 +370,9 @@
 
 <p>Use the <a href="command-line-options.html#channel">-channel</a> setting to specify the output channel of the result. If no output channel is given, the result is set over all channels except the opacity channel. For example, to replace the red channel of <code>alpha.png</code> with the average of the green channels from the images <code>alpha.png</code> and <code>beta.png</code>, use:</p>
 
-<pre>
+<pre><code>
 convert alpha.png beta.png -channel red -fx "(u.g+v.g)/2" gamma.png
-</pre>
+</code></pre>
 
 
 <h3>Results</h3>
@@ -384,19 +384,19 @@
 
 <p>For use with <a href="command-line-options.html#format_identify_">-format</a>, the value-escape <code>%[fx:]</code> is evaluated just once for each image in the current image sequence. As each image in the sequence is being evaluated, <code>s</code> and <code>t</code> successively refer to the current image and its index, while <code>i</code> and <code>j</code> are set to zero, and the current channel set to red (<a href="command-line-options.html#channel">-channel</a> is ignored). An example:</p>
 
-<pre>
+<pre><code>
 convert  canvas:'rgb(25%,50%,75%)' rose: -colorspace rgb  \ 
   -format 'Red channel of NW corner of image #%[fx:t] is %[fx:s]' info:
 Red channel of NW corner of image #0 is 0.453758 
 Red channel of NW corner of image #1 is 0.184588
-</pre>
+</code></pre>
 
 <p>Here we use the image indexes to <var>rotate</var> each image differently, and use <code>-set</code> with the image index to set a different <var>pause delay</var> on the first image in the animation:</p>
 
-<pre>
+<pre><code>
 convert rose: -duplicate 29 -virtual-pixel Gray -distort SRT '%[fx:360.0*t/n]' \
   -set delay '%[fx:t == 0 ? 240 : 10]' -loop 0 rose.gif"
-</pre>
+</code></pre>
 
 <p>The color-escape <code>%[pixel:]</code> or <code>%[hex:]</code> is evaluated once per image and per color channel in that image (<a href="command-line-options.html#channel">-channel</a> is ignored), The values generated are then converted into a color string (a named color or hex color value).  The symbols <code>i</code> and <code>j</code> are set to zero, and <code>s</code> and <code>t</code> refer to each successively current image and index.</p>
 
@@ -420,4 +420,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/gradient.html b/www/gradient.html
index 43952cd..c13afb5 100644
--- a/www/gradient.html
+++ b/www/gradient.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/gradient.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/gradient.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,36 +42,37 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">An image gradient creates a gradual blend between two colors formed into a shape that is linear, circular, or ellipical.</p>
 
 <p>For a linear gradient, the operator is either:</p>
 
-<pre>
+<pre><code>
 gradient:
 gradient:color1-color2
-</pre>
+</code></pre>
 
 <p> The for a radial gradient, the operator is either:</p>
 
-<pre>
+<pre><code>
 radial-gradient:
 radial-gradient:color1-color2
-</pre>
+</code></pre>
 
 <p> In the above, color1 is the fromColor and color2 is the toColor, as described in more detail below. The default is white for color1 and black for color2, i.e., white-black.</p> 
 
@@ -82,23 +82,23 @@
 
 <p>Here is an example linear gradient:</p>
 
-<pre>
+<pre><code>
 convert -size 256x256 gradient: linear_gradient.png
 convert -size 256x256 gradient:white-black linear_gradient.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/linear_gradient.png" width="256" height="256" /></p>
 
 <p>If you want a radial gradient, try:</p>
 
-<pre>
+<pre><code>
 convert -size 256x256 radial-gradient: radial_gradient.png
 convert -size 256x256 radial-gradient:white-black radial_gradient.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/radial_gradient.png" width="256" height="256" /></p>
 
 <p>As of IM 6.9.2.5, gradients have been enhanced through the use of several -defines.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td><code>-define gradient:vector=<var>x1</var>,<var>y1</var>, <var>x2</var>,<var>y2</var></code></td>
     <td>Specifies the direction of the linear gradient going from vector1 
@@ -141,7 +141,7 @@
 
 <p>We also support two convenience defines for setting the linear gradient direction and the radial gradient shape.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td><code>-define gradient:direction=<em>{NorthWest, North, Northeast, West, East, SouthWest, South, SouthEast}</em></code></td>
     <td>Specifies the direction of the linear gradient towards the 
@@ -168,56 +168,56 @@
 
 <p>The default linear gradient may also be generated in any of the following ways (or by reversing the direction and swapping color1 and color2):</p>
 
-<pre>
+<pre><code>
 convert -size 256x128 -define gradient:direction=north gradient:black-white linear_gradient_default.png
 convert -size 256x128 -define gradient:angle=0 gradient:black-white linear_gradient_default.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/linear_gradient_default.png" width="256" height="128" /></p>
 
 <p>The equivalent of </p>
 
-<pre>
+<pre><code>
 convert -size 128x256 gradient: -rotate 90 linear_gradient_east.png
-</pre>
+</code></pre>
 
 <p>can be generate by either of the following (or by reversing the direction and swapping color1 and color2):</p>
 
-<pre>
+<pre><code>
 convert -size 256x128 -define gradient:direction=east gradient:black-white linear_gradient_east.png
 convert -size 256x128 -define gradient:angle=90 gradient:black-white linear_gradient_east.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/linear_gradient_east.png" width="256" height="128" /></p>
 
 
 <p>Examples of radial gradients going from black in the center to white at the boundary for the cases of "maximum/circle/default", "minimum", "diagonal", "ellipse" and 45 degree rotated ellipse, respectively, follow below.</p>
 
 
-<pre>
+<pre><code>
 convert -size 256x128 radial-gradient:black-white radial_gradient_maximum.png
 convert -size 256x128 -define gradient:radii=128,128 radial-gradient:black-white radial_gradient_maximum.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/radial_gradient_maximum.png" width="256" height="128" /></p>
 
-<pre>
+<pre><code>
 convert -size 256x128 -define gradient:extent=minimum radial-gradient:black-white radial_gradient_minimum.png
 convert -size 256x128 -define gradient:radii=64,64 radial-gradient:black-white radial_gradient_minimum.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/radial_gradient_minimum.png" width="256" height="128" /></p>
 
-<pre>
+<pre><code>
 convert -size 256x128 -define gradient:extent=diagonal radial-gradient:black-white radial_gradient_diagonal.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/radial_gradient_diagonal.png" width="256" height="128" /></p>
 
-<pre>
+<pre><code>
 convert -size 256x128 -define gradient:extent=ellipse radial-gradient:black-white radial_gradient_ellipse.png
 convert -size 256x128 -define gradient:radii=128,64 radial-gradient:black-white radial_gradient_ellipse.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/radial_gradient_ellipse.png" width="256" height="128" /></p>
 
-<pre>
+<pre><code>
 convert -size 256x256 -define gradient:radii=128,64 -define gradient:angle=45 radial-gradient:black-white radial_gradient_ellipse_angle45.png
-</pre>
+</code></pre>
 <p><img src="../images/gradients/radial_gradient_ellipse_angle45.png" width="256" height="256" /></p>
 
 </div>
@@ -241,4 +241,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:01 -->
\ No newline at end of file
diff --git a/www/high-dynamic-range.html b/www/high-dynamic-range.html
index 5f2eb4d..9dbf682 100644
--- a/www/high-dynamic-range.html
+++ b/www/high-dynamic-range.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/high-dynamic-range.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/high-dynamic-range.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">High dynamic-range imaging (HDRI) permits a far greater dynamic range of exposures (i.e. a large difference between light and dark areas) than standard digital imaging techniques. HDRI accurately represents the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows.  The HDR imaging approach includes:</p>
@@ -67,7 +67,7 @@
   <li>apply tone-mapping for specific display</li>
 </ul>
 
-<h2 class="magick-header"><a id="enable"></a>Enabling HDRI in ImageMagick</h2>
+<h2 class="magick-post-title"><a id="enable"></a>Enabling HDRI in ImageMagick</h2>
 
 <p>By default, image pixels in ImageMagick version 7 are stored in a floating-point representation that range from 0 to the quantum depth, which is typically 16-bits (Q16).  With HDRI enabled, the pixels can include negative values as well as values that exceed the quantum depth. A majority of digital image formats do not support HDRI, and for those images any pixels outside the quantum range are clamped before they are stored.</p>
 
@@ -75,18 +75,18 @@
 
 <p>To disable the HDRI version of ImageMagick, use this Unix/Linux command:</p>
 
-<pre>
+<pre><code>
 ./configure --disable-hdri
-</pre>
+</code></pre>
 
 <p>Under Windows, uncomment the <code>MAGICKCORE_HDRI_SUPPORT</code> definition in the <code>magick-baseconfig.h</code> configuration file and build.</p>
 
 <p>To verify HDRI is properly configured, look for "HDRI" as a feature:</p>
 
-<pre>
+<pre><code>
 identify -version
 Features: HDRI
-</pre>
+</code></pre>
 </div>
   <footer class="magick-footer">
     <p><a href="support.html">Donate</a> •
@@ -107,4 +107,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/history.html b/www/history.html
index 373ed87..aec4442 100644
--- a/www/history.html
+++ b/www/history.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/history.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/history.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,22 +42,23 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
-<blockquote>
-I swear by my life and my love of it that I will never live for the sake of another man, nor ask another man to live for mine.<br />-- John Galt in "Atlas Shrugged", by Ayn Rand</blockquote>
+<p class="blockquote">
+I swear by my life and my love of it that I will never live for the sake of another man, nor ask another man to live for mine.<br />-- John Galt in "Atlas Shrugged", by Ayn Rand</p>
 
 <p class="lead magick-description">ImageMagick started with a request from my DuPont supervisor, Dr. David Pensak, to display computer-generated images on a monitor only capable of showing 256 unique colors simultaneously.</p>
 
@@ -97,4 +97,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:16 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:08 -->
\ No newline at end of file
diff --git a/www/identify.html b/www/identify.html
index 032fb4c..9a18627 100644
--- a/www/identify.html
+++ b/www/identify.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/identify.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/identify.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,36 +42,37 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="identify.html#usage">Example Usage</a> • <a href="identify.html#options">Option Summary</a></p>
 
 <p class="lead magick-description">The <code>identify</code> program describes the format and characteristics of one or more image files. It also reports if an image is incomplete or corrupt. The information returned includes the image number, the file name, the width and height of the image, whether the image is colormapped or not, the number of colors in the image, the number of bytes in the image, the format of the image (JPEG, PNM, etc.), and finally the number of seconds it took to read and process the image.  Many more attributes are available with the verbose option.  See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>identify</code> command or see below for example usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>identify</code> command here to illustrate its usefulness and ease of use. To get started, lets identify an image in the JPEG format:</p>
 
-<pre>
+<pre><code>
 -> magick identify rose.jpg
 rose.jpg JPEG 70x46 70x46+0+0 8-bit sRGB 2.36KB 0.000u 0:00.000
-</pre>
+</code></pre>
 
 <p>Next, we look at the same image in greater detail:</p>
 
-<pre class="pre-scrollable">-> magick identify -verbose rose.jpg
+<pre class="pre-scrollable"><code>-> magick identify -verbose rose.jpg
 Image: rose.jpg
   Format: JPEG (Joint Photographic Experts Group JFIF format)
   Mime type: images/jpeg
@@ -154,41 +154,41 @@
   User time: 0.000u
   Elapsed time: 0:01.000
   Version: ImageMagick 7.0.4-8 Q16 x86_64 http://www.imagemagick.org
-</pre>
+</code></pre>
 
 <p>To get the print size in inches of an image at 72 DPI, use:</p>
 
-<pre>
+<pre><code>
 -> magick identify -format "%[fx:w/72] by %[fx:h/72] inches" document.png
 8.5 x 11 inches
-</pre>
+</code></pre>
 
 <p>The depth and dimensions of a raw image must be specified on the command line:</p>
 
-<pre>
+<pre><code>
 -> magick identify -depth 8 -size 640x480 image.raw
 image.raw RGB 640x480 sRGB 9kb 0.000u 0:01
-</pre>
+</code></pre>
 
 <p>Here we display the image texture features, moments, perceptual hash, and the number of unique colors in the image:</p>
 
-<pre>
+<pre><code>
 -> magick identify -verbose -features 1 -moments -unique image.png
-</pre>
+</code></pre>
 
 <p>Here is a special define that outputs the location of the minimum or maximum pixel of the image:</p>
 
-<pre>
+<pre><code>
 magick identify -precision 5 -define identify:locate=maximum -define identify:limit=3 image.png
-</pre>
+</code></pre>
 
 <p>You can find additional examples of using <code>identify</code> in <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>identify</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -429,4 +429,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/import.html b/www/import.html
index c9e5cd7..5992e7a 100644
--- a/www/import.html
+++ b/www/import.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/import.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/import.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,46 +42,47 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="import.html#usage">Example Usage</a> • <a href="import.html#options">Option Summary</a></p>
 
 <p class="lead magick-description">Use the <code>import</code> program to capture some or all of an X server screen and save the image to a file. See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>import</code> command or see below for example usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>import</code> command here to illustrate its usefulness and ease of use.  To get started, lets import an image in the JPEG format:</p>
 
-<pre>
+<pre><code>
 magick import rose.jpg
-</pre>
+</code></pre>
 
 <p>To capture the entire X server screen in the Postscript image format:</p>
 
-<pre>
+<pre><code>
 magick import -window root screen.ps
-</pre>
+</code></pre>
 
 <p>You can find additional examples of using <code>import</code> in <a href="http://www.ibm.com/developerworks/library/l-graf/?ca=dnt-428">Graphics from the Command Line</a>.  Further discussion is available in  <a href="http://www.ibm.com/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine">More Graphics from the Command Line</a> and <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>import</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -427,4 +427,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/index.html b/www/index.html
index 614462d..e9f16e7 100644
--- a/www/index.html
+++ b/www/index.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/index.html"/>
-  <link rel="icon" href="https://www.imagemagick.org/images/wand.png"/>
-  <link rel="shortcut icon" href="https://www.imagemagick.org/images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/index.html" />
+  <link rel="icon" href="https://www.imagemagick.org/images/wand.png" />
+  <link rel="shortcut icon" href="https://www.imagemagick.org/images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="https://www.imagemagick.org/css/magick.html"/>
+  <link rel="stylesheet" href="https://www.imagemagick.org/css/magick.html" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="https://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,23 +42,24 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item active" href="https://www.imagemagick.org/index.html">Home</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/download.html">Download</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/resources.html">Resources</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link active" href="https://www.imagemagick.org/index.html">Home</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/download.html">Download</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/command-line-tools.html">Tools</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/resources.html">Resources</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="index.html#features">Features and Capabilities</a> • <a href="index.html#news">News</a> • <a href="index.html#community">Community</a></p>
 
-<p class="lead magick-description"><a href="https://www.imagemagick.org/images/wizard.png" title="And Now a Touch of Magick"><img class="img-responsive magick-icon" id="logo" alt="And Now a Touch of Magick" width="265" height="352" src="https://www.imagemagick.org/images/wizard.jpg" /></a> 
+<p class="lead magick-description"><a href="https://www.imagemagick.org/images/wizard.png" title="And Now a Touch of Magick"><img class="img-fluid magick-icon" id="logo" alt="And Now a Touch of Magick" width="265" height="352" src="https://www.imagemagick.org/images/wizard.jpg" /></a> 
 Use ImageMagick<sup><a href="http://tarr.uspto.gov/servlet/tarr?regser=serial&amp;entry=78333969">&#174;</a></sup> to create, edit, compose, or convert bitmap images.  It can read and write images in a variety of <a href="https://www.imagemagick.org/script/formats.html">formats</a> (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, <a href="https://www.imagemagick.org/script/motion-picture.html">DPX</a>, <a href="https://www.imagemagick.org/script/high-dynamic-range.html">EXR</a>, WebP, Postscript, PDF, and SVG.  Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.</p>
 
 <p>The functionality of ImageMagick is typically utilized from the <a href="https://www.imagemagick.org/script/command-line-processing.html">command-line</a> or you can use the features from programs written in your favorite language. Choose from these interfaces: <a href="https://www.imagemagick.org/script/develop.html#ada">G2F</a> (Ada), <a href="https://www.imagemagick.org/script/develop.html#c">MagickCore</a> (C), <a href="https://www.imagemagick.org/script/develop.html#c">MagickWand</a> (C), <a href="https://www.imagemagick.org/script/develop.html#ch">ChMagick</a> (Ch), <a href="https://www.imagemagick.org/script/develop.html#com_">ImageMagickObject</a> (COM+), <a href="https://www.imagemagick.org/script/develop.html#c__">Magick++</a> (C++), <a href="https://www.imagemagick.org/script/develop.html#java">JMagick</a> (Java), <a href="https://www.imagemagick.org/script/develop.html#julia">JuliaIO</a> (Julia), <a href="https://www.imagemagick.org/script/develop.html#lisp">L-Magick</a> (Lisp), <a href="https://www.imagemagick.org/script/develop.html#lua">Lua</a> (LuaJIT), <a href="https://www.imagemagick.org/script/develop.html#neko">NMagick</a> (Neko/haXe), <a href="https://www.imagemagick.org/script/develop.html#dot-net">Magick.NET</a> (.NET), <a href="https://www.imagemagick.org/script/develop.html#pascal">PascalMagick</a> (Pascal),  <a href="https://www.imagemagick.org/script/develop.html#perl">PerlMagick</a> (Perl), <a href="https://www.imagemagick.org/script/develop.html#php">MagickWand for PHP</a> (PHP),  <a href="https://www.imagemagick.org/script/develop.html#php">IMagick</a> (PHP), <a href="https://www.imagemagick.org/script/develop.html#python">PythonMagick</a> (Python), <a href="https://www.imagemagick.org/script/develop.html#ruby">RMagick</a> (Ruby), or <a href="https://www.imagemagick.org/script/develop.html#tcl">TclMagick</a> (Tcl/TK). With a language interface, use ImageMagick to modify or create images dynamically and <var>automagically</var>.</p>
@@ -68,16 +68,16 @@
 
 <p>The ImageMagick development process ensures a stable API and <a href="http://abi-laboratory.pro/tracker/timeline/imagemagick/">ABI</a>. Before each ImageMagick release, we perform a comprehensive security assessment that includes <a href="https://github.com/google/sanitizers/wiki/AddressSanitizer">memory error</a> and <a href="https://github.com/google/sanitizers/wiki/ThreadSanitizer">thread data race</a> detection to help prevent security vulnerabilities.</p>
 
-<p>The current release is ImageMagick <a href="https://www.imagemagick.org/script/download.html">7.0.5-10</a>.  It runs on <a href="https://www.imagemagick.org/script/download.html#unix">Linux</a>, <a href="https://www.imagemagick.org/script/download.html#windows">Windows</a>, <a href="https://www.imagemagick.org/script/download.html#macosx">Mac Os X</a>, <a href="https://www.imagemagick.org/script/download.html#iOS">iOS</a>, Android OS, and others.</p>
+<p>The current release is ImageMagick <a href="https://www.imagemagick.org/script/download.html">7.0.6-0</a>.  It runs on <a href="https://www.imagemagick.org/script/download.html#unix">Linux</a>, <a href="https://www.imagemagick.org/script/download.html#windows">Windows</a>, <a href="https://www.imagemagick.org/script/download.html#macosx">Mac Os X</a>, <a href="https://www.imagemagick.org/script/download.html#iOS">iOS</a>, Android OS, and others.</p>
 
 <p>The authoritative ImageMagick web site is <a href="https://www.imagemagick.org/">https://www.imagemagick.org</a>. The authoritative source code repository is <a href="http://git.imagemagick.org/repos/ImageMagick">http://git.imagemagick.org/repos/ImageMagick</a>.  We maintain a source code mirror at <a href="https://gitlab.com/ImageMagick/ImageMagick">GitLab</a> and <a href="https://github.com/ImageMagick/ImageMagick">GitHub</a>.</p>
 
 <p>We continue to maintain the legacy release of ImageMagick, version 6, at <a href="https://legacy.imagemagick.org/">https://legacy.imagemagick.org</a>.</p>
 
-<h2 class="magick-header"><a id="features"></a>Features and Capabilities</h2>
+<h2 class="magick-post-title"><a id="features"></a>Features and Capabilities</h2>
 <p>Here are just a few <a href="https://www.imagemagick.org/script/examples.html">examples</a> of what ImageMagick can do for you:</p>
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td><a href="https://www.imagemagick.org/Usage/anim_basics/">Animation</a></td>
     <td>create a GIF animation sequence from a group of images.</td>
@@ -209,15 +209,15 @@
 </table>
 </div>
 
-<p><a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a> shows how to use ImageMagick from the <a href="https://www.imagemagick.org/script/command-line-processing.html">command-line</a> to accomplish any of these tasks and much more. Also, see <a href="http://www.fmwconcepts.com/imagemagick/">Fred's ImageMagick Scripts</a>:  a plethora of command-line scripts that perform geometric transforms, blurs, sharpens, edging, noise removal, and color manipulations. With <a href="https://magick.codeplex.com/">Magick.NET</a>, use ImageMagick without having to install ImageMagick on your server or desktop.</p>
+<p><a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a> shows how to use ImageMagick from the <a href="https://www.imagemagick.org/script/command-line-processing.html">command-line</a> to accomplish any of these tasks and much more. Also, see <a href="http://www.fmwconcepts.com/imagemagick/">Fred's ImageMagick Scripts</a>:  a plethora of command-line scripts that perform geometric transforms, blurs, sharpens, edging, noise removal, and color manipulations. With <a href="https://github.com/dlemstra/Magick.NET">Magick.NET</a>, use ImageMagick without having to install ImageMagick on your server or desktop.</p>
 
-<h2 class="magick-header"><a id="news"></a>News</h2>
+<h2 class="magick-post-title"><a id="news"></a>News</h2>
 
 <p>Now that ImageMagick version 7 is released, we continue to maintain the legacy release of ImageMagick, version 6, at <a href="https://legacy.imagemagick.org/">https://legacy.imagemagick.org</a>.  Learn how ImageMagick version 7 differs from previous versions with our <a href="https://www.imagemagick.org/script/porting.html">porting guide</a>.</p>
 
 <p>ImageMagick best practices <strong>strongly</strong> encourages you to configure a <a href="https://www.imagemagick.org/script/security-policy.html">security policy</a> that suits your local environment.</p>
 
-<h2 class="magick-header"><a id="community"></a>Community</h2>
+<h2 class="magick-post-title"><a id="community"></a>Community</h2>
 <p>To join the ImageMagick community, try the <a href="https://www.imagemagick.org/discourse-server/">discourse server</a>.  You can review questions or comments (with informed responses) posed by ImageMagick users or ask your own questions. If you want to contribute image processing algorithms, other enhancements, or bug fixes, open an <a href="https://github.com/ImageMagick/ImageMagick/issues">issue</a>. </p>
 </div>
   <footer class="magick-footer">
@@ -239,4 +239,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:55 -->
\ No newline at end of file
diff --git a/www/install-source.html b/www/install-source.html
index 0c1a03a..a1f5c9d 100644
--- a/www/install-source.html
+++ b/www/install-source.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/install-source.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/install-source.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,74 +42,75 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="install-source.html#unix">Install from Unix Source</a> • <a href="install-source.html#windows">Install from Windows Source</a></p>
 
 <p class="lead magick-description">Chances are, ImageMagick is already installed on your computer if you are using some flavor of Unix, and its likely not installed if you are using some form of Windows.  In either case, you can type the following to find out:</p>
 
-<pre>
+<pre><code>
 identify -version
-</pre>
+</code></pre>
 
 <p>If the <a href="identify.html">identify</a> program executes and identifies itself as ImageMagick, you may not need to install ImageMagick from source unless you want to add support for additional image formats or upgrade to a newer version.  You also have the option of installing a pre-compiled <a href="download.html">binary release</a>.  However, if you still want to install from source, choose a platform, <a href="install-source.html#unix">Unix</a> or <a href="install-source.html#windows">Windows</a>.  Before installing from source, you may want to review recent <a href="changelog.html">changes</a> to the ImageMagick distribution.</p>
 
 <p>The authoritative source code repository is <a href="http://git.imagemagick.org/repos/ImageMagick">http://git.imagemagick.org/repos/ImageMagick</a>.  We maintain a source code mirror at <a href="https://github.com/ImageMagick/ImageMagick">GitHub</a>.  We test and deploy ImageMagick with <a href="https://travis-ci.org/ImageMagick">Travis CI</a> and <a href="https://ci.appveyor.com/project/dlemstra/imagemagick-windows">AppVeyor</a>.</p>
 
-<h2 class="magick-header"><a id="unix"></a>Install from Unix Source</h2>
+<h2 class="magick-post-title"><a id="unix"></a>Install from Unix Source</h2>
 
 <p>ImageMagick builds on a variety of Unix and Unix-like operating systems including Linux, Solaris, FreeBSD, Mac OS X, and others.  A compiler is required and fortunately almost all modern Unix systems have one.  Download <a href="https://www.imagemagick.org/download/ImageMagick.tar.gz">ImageMagick.tar.gz</a> from <a href="https://www.imagemagick.org/download">www.imagemagick.org</a> or a <a href="mirror.html">mirrors</a> and verify its <a href="https://www.imagemagick.org/download/digest.rdf">message digest</a>.</p>
 
 <p>Unpack the distribution with this command:</p>
 
-<pre>
+<pre><code>
 tar xvzf ImageMagick.tar.gz
-</pre>
+</code></pre>
 
 <p>Next configure and compile ImageMagick:</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.5</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>./configure</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>make</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.6</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>./configure</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>make</span></pre>
 <p>If ImageMagick configured and compiled without complaint, you are ready to install it on your system.  Administrator privileges are required to install.  To install, type</p>
 
-<pre>
+<pre><code>
 sudo make install
-</pre>
+</code></pre>
 
 <p>You may need to configure the dynamic linker run-time bindings:</p>
 
-<pre>
+<pre><code>
 sudo ldconfig /usr/local/lib
-</pre>
+</code></pre>
 
 <p>Finally, verify the ImageMagick install worked properly, type</p>
 
-<pre>
+<pre><code>
 /usr/local/bin/convert logo: logo.gif
-</pre>
+</code></pre>
 
 <p>For a more comprehensive test, run the ImageMagick validation suite. Ghostscript is a prerequisite, otherwise the EPS, PS, and PDF tests will fail.</p>
 
-<pre>
+<pre><code>
 make check
-</pre>
+</code></pre>
 
 <p>Congratulations, you have a working ImageMagick distribution and you are ready to use ImageMagick to <a href="https://www.imagemagick.org/Usage/">convert, compose, or edit</a> your images or perhaps you'll want to use one of the <a href="develop.html">Application Program Interfaces</a> for C, C++, Perl, and others.</p>
 
 <p>The above instructions will satisfy a great number of ImageMagick users, but we suspect a few will have additional questions or problems to consider.  For example, what does one do if ImageMagick fails to configure or compile?  Or what if you don't have administrator privileges and what if you don't want to install ImageMagick in the default <code>/../usr/local</code> folder?  You will find the answer to these questions, and more, in <a href="advanced-unix-installation.html">Advanced Unix Source Installation</a>.</p>
 
-<h2 class="magick-header"><a id="windows"></a>Install from Windows Source</h2>
+<h2 class="magick-post-title"><a id="windows"></a>Install from Windows Source</h2>
 
 <p>Building ImageMagick source for Windows requires a modern version of Microsoft Visual Studio IDE.  Users have reported success with the Borland C++ compiler as well.  If you don't have a compiler you can still install a self-installing <a href="download.html">binary release</a>.</p>
 
@@ -118,29 +118,29 @@
 
 <p>You can unpack the distribution with <a href="http://www.winzip.com">WinZip</a> or type the following from any MS-DOS Command Prompt window:</p>
 
-<pre>
+<pre><code>
 unzip ImageMagick-windows.zip
-</pre>
+</code></pre>
 
-<p>Next, launch your Visual Studio IDE and choose <kbd>Open->Project</kbd>.  Select the configure workspace from the <kbd>ImageMagick-7.0.5/VisualMagick/configure</kbd> folder and press Open.  Choose <kbd>Build->Build Solution</kbd>
+<p>Next, launch your Visual Studio IDE and choose <kbd>Open->Project</kbd>.  Select the configure workspace from the <kbd>ImageMagick-7.0.6/VisualMagick/configure</kbd> folder and press Open.  Choose <kbd>Build->Build Solution</kbd>
 to compile the program and on completion run the program.</p>
 
-<p><img class="img-responsive center-block" src="../images/configure.jpg" alt="[configure]" /></p>
+<p><img class="img-fluid center-block" src="../images/configure.jpg" alt="[configure]" /></p>
 
-<p>Press <kbd>Next</kbd> and click on the multi-threaded static build.  If you are using the Visual Studio 6.0 IDE, make sure no check is next to the <var>Generate Visual Studio 7</var> format option.  Now press, on <kbd>Next</kbd> twice and finally <kbd>Finish</kbd>.  The configuration utility just created a workspace required to build ImageMagick from source.  Choose <kbd>Open->Project</kbd> and select the VisualStaticMT workspace from the <kbd>ImageMagick-7.0.5/VisualMagick/</kbd>  folder.  Finally, choose <kbd>Build->Build Solution</kbd> to compile and build the ImageMagick distribution.</p>
+<p>Press <kbd>Next</kbd> and click on the multi-threaded static build.  If you are using the Visual Studio 6.0 IDE, make sure no check is next to the <var>Generate Visual Studio 7</var> format option.  Now press, on <kbd>Next</kbd> twice and finally <kbd>Finish</kbd>.  The configuration utility just created a workspace required to build ImageMagick from source.  Choose <kbd>Open->Project</kbd> and select the VisualStaticMT workspace from the <kbd>ImageMagick-7.0.6/VisualMagick/</kbd>  folder.  Finally, choose <kbd>Build->Build Solution</kbd> to compile and build the ImageMagick distribution.</p>
 
 <p>To verify ImageMagick is working properly, launch a MS-DOS Command Prompt window and type</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.5</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>convert logo: image.jpg</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.6</span><span class='crtout'><br/></span><span class="crtprompt"> </span><span class='crtin'>convert logo: image.jpg</span></pre>
 <p>For a more comprehensive test, run the ImageMagick validation suite:</p>
 
-<pre>
+<pre><code>
 validate
-</pre>
+</code></pre>
 
 <p>Congratulations, you have a working ImageMagick distribution under Windows and you are ready to use ImageMagick to <a href="https://www.imagemagick.org/Usage/">convert, compose, or edit</a> your images or perhaps you'll want to use one of the <a href="develop.html">Application Program Interfaces</a> for C, C++, Perl, and others.</p>
 
-<p>The above instructions will satisfy a great number of ImageMagick users, but we suspect a few will have additional questions or problems to consider.  For example, what does one do if ImageMagick fails to configure or compile?  Or what if you want to install ImageMagick in a place other than the <kbd>ImageMagick-7.0.5/VisualMagick/bin</kbd> folder?  Or perhaps you want to build and install the <a href="ImageMagickObject.html">ImageMagickObject</a> COM+ component.  You will find the answer to these questions, and more, in <a href="advanced-windows-installation.html">Advanced Windows Source Installation</a>.</p>
+<p>The above instructions will satisfy a great number of ImageMagick users, but we suspect a few will have additional questions or problems to consider.  For example, what does one do if ImageMagick fails to configure or compile?  Or what if you want to install ImageMagick in a place other than the <kbd>ImageMagick-7.0.6/VisualMagick/bin</kbd> folder?  Or perhaps you want to build and install the <a href="ImageMagickObject.html">ImageMagickObject</a> COM+ component.  You will find the answer to these questions, and more, in <a href="advanced-windows-installation.html">Advanced Windows Source Installation</a>.</p>
 
 </div>
   <footer class="magick-footer">
@@ -162,4 +162,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/jp2.html b/www/jp2.html
index 31ed733..cf7bb43 100644
--- a/www/jp2.html
+++ b/www/jp2.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/jp2.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/jp2.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">ImageMagick's JPEG-2000 image formats, JP2 and JPC, accept a plethora of encoding options as detailed below.  As an example, suppose you are interested in these options:</p>
@@ -69,50 +69,50 @@
 
 <p>Use this command to convert a JPEG-2000 image to the PNG image format:</p>
 
-<pre>
+<pre><code>
 convert wizard.jp2 wizard.png
-</pre>
+</code></pre>
 
 <p>Let's convert a JPEG image to a lossless JPEG-2000 image:</p>
 
-<pre>
+<pre><code>
 convert wizard.jpg -quality 0 wizard.jp2
-</pre>
+</code></pre>
 
 <p>Here we extract an area from the image:</p>
 
-<pre>
+<pre><code>
 convert 'wizard.jp2[640x480+0+0]' wizard.png
-</pre>
+</code></pre>
 
 <p>Extract a particular tile from the image:</p>
 
-<pre>
+<pre><code>
 convert 'wizard.jp2[2]' wizard.png
-</pre>
+</code></pre>
 
 <p>Specify a subsampling factor:</p>
 
-<pre>
+<pre><code>
 convert wizard.png -colorspace YUV -sampling-factor 2,2 wizard.jp2
-</pre>
+</code></pre>
 
 <p>Save a tiled JPEG-2000 image:</p>
 
-<pre>
+<pre><code>
 convert wizard.png 'wizard.png[512x512]'
-</pre>
+</code></pre>
 
 <p>Write a digital Cinema 4K profile compliant codestream:</p>
 
-<pre>
+<pre><code>
 convert wizard.png -resize 4096x2160! -depth 12 wizard.jp2
-</pre>
+</code></pre>
 
 <p>Here is a complete list of JPEG-2000 decoding options:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>jp2:quality-layers=<var>x</var></td>
     <td>set the maximum number of quality layers to decode.</td>
@@ -126,7 +126,7 @@
 <p>Here is a complete list of JPEG-2000 encoding options:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>jp2:number-resolutions=<var>x</var></td>
     <td>number of resolutions to encode.</td>
@@ -164,4 +164,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:04 -->
\ No newline at end of file
diff --git a/www/license.html b/www/license.html
index 3cf1c8d..754f24e 100644
--- a/www/license.html
+++ b/www/license.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/license.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/license.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="license.html#terms">Terms and Conditions for Use, Reproduction, and Distribution</a> • <a href="license.html#apply">How to Apply the License to your Work</a></p>
 
@@ -106,7 +106,7 @@
 </ul>
 
 <a id="terms"></a>
-<h2 class="magick-header">Terms and Conditions for Use, Reproduction, and Distribution</h2>
+<h2 class="magick-post-title">Terms and Conditions for Use, Reproduction, and Distribution</h2>
 
 <p>The legally binding and authoritative terms and conditions for use, reproduction, and distribution of ImageMagick follow:</p>
 
@@ -163,11 +163,11 @@
 <p><b>9. Accepting Warranty or Additional Liability</b>. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.</p>
 
 <a id="apply"></a>
-<h2 class="magick-header">How to Apply the License to your Work</h2>
+<h2 class="magick-post-title">How to Apply the License to your Work</h2>
 
 <p>To apply the ImageMagick License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information (don't include the brackets). The text should be enclosed in the appropriate comment syntax for the file format.  We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.</p>
 
-<pre>
+<pre><code>
    Copyright [yyyy] [name of copyright owner]
 
    Licensed under the ImageMagick License (the "License"); you may not use
@@ -181,7 +181,7 @@
    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
    License for the specific language governing permissions and limitations
    under the License.
-</pre>
+</code></pre>
 
 </div>
   <footer class="magick-footer">
@@ -203,4 +203,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:00 -->
\ No newline at end of file
diff --git a/www/links.html b/www/links.html
index bdea97f..4d9b0e6 100644
--- a/www/links.html
+++ b/www/links.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/links.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/links.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,105 +42,106 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="links.html#web">Use ImageMagick on the Web</a> • <a href="links.html#command-line">Command-line Tutorials</a> • <a href="links.html#program-interfaces">Program Interface Tutorials</a> • <a href="links.html#techniques">ImageMagick Techniques</a> • <a href="links.html#install">Installation Tutorials</a> • <a href="links.html#topics">ImageMagick Topics</a> • <a href="links.html#book-review">ImageMagick Book Review</a> • <a href="links.html#mirrors">Web Site Mirrors</a> • <a href="links.html#bank">Image Bank</a> • <a href="links.html#other-projects">Other Projects</a></p>
 
 <p class="lead magick-description">Listed here are a number of external web sites that are related to ImageMagick.  ImageMagick Studio does not maintain or endorse these sites, excepting the Wizard's Toolkit site, but we feel they are a helpfull adjunct to this web site.</p>
 
-<h2 class="magick-header"><a id="web"></a>Use ImageMagick on the Web</h2>
+<h2 class="magick-post-title"><a id="web"></a>Use ImageMagick on the Web</h2>
 <ul>
-  <dd><a href="http://jqmagick.imagemagick.org/">JqMagick</a></dd>
-  <dd><a href="http://transloadit.imagemagick.org/MagickStudio/">Magick Studio</a></dd>
+  <dd class="col-md-8"><a href="http://jqmagick.imagemagick.org/">JqMagick</a></dd>
+  <dd class="col-md-8"><a href="http://transloadit.imagemagick.org/MagickStudio/">Magick Studio</a></dd>
 </ul>
 
-<h2 class="magick-header"><a id="command-line"></a>Command-line Tutorials</h2>
+<h2 class="magick-post-title"><a id="command-line"></a>Command-line Tutorials</h2>
 <ul>
-  <dd><a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a></dd>
-  <dd><a href="http://www.smashingmagazine.com/2015/06/25/efficient-image-resizing-with-imagemagick/">Efficient Image Resizing With ImageMagick</a></dd>
-  <dd><a href="http://www.jpeek.com/articles/linuxmag/0606.pdf">ImageMagick, Part One</a></dd>
-  <dd><a href="http://www.jpeek.com/articles/linuxmag/0607.pdf">ImageMagick, Part Two</a></dd>
-  <dd><a href="http://www.ibm.com/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine">More Graphics from the Command Line</a></dd>
+  <dd class="col-md-8"><a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a></dd>
+  <dd class="col-md-8"><a href="http://www.smashingmagazine.com/2015/06/25/efficient-image-resizing-with-imagemagick/">Efficient Image Resizing With ImageMagick</a></dd>
+  <dd class="col-md-8"><a href="http://www.jpeek.com/articles/linuxmag/0606.pdf">ImageMagick, Part One</a></dd>
+  <dd class="col-md-8"><a href="http://www.jpeek.com/articles/linuxmag/0607.pdf">ImageMagick, Part Two</a></dd>
+  <dd class="col-md-8"><a href="http://www.ibm.com/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine">More Graphics from the Command Line</a></dd>
 </ul>
 
-<h2 class="magick-header"><a id="program-interfaces"></a>Program Interface Tutorials</h2>
+<h2 class="magick-post-title"><a id="program-interfaces"></a>Program Interface Tutorials</h2>
 
 <ul>
-  <dd><a href="http://www.ibm.com/developerworks/library/os-mosperl/">Create Mosaic Images with Perl and ImageMagick</a></dd>
-  <dd><a href="http://www.sitepoint.com/article/dynamic-images-imagemagick">Create Dynamic Images with ImageMagick</a></dd>
-  <dd><a href="http://www.ioncannon.net/php/75/how-to-compile-imagemagick-for-php-by-hand/">How to compile ImageMagick for PHP by hand</a></dd>
-  <dd><a href="http://members.shaw.ca/el.supremo/MagickWand/">MagickWand Examples in C</a></dd>
-  <dd><a href="http://www.html-editors.com/contest/1/82-read.html">PHP Extensions: MagickWand for PHP</a></dd>
-  <dd><a href="http://www.ioncannon.net/php/61/php-imagemagick-magickwand-examples/">PHP ImageMagick MagickWand Examples</a></dd>
-  <dd><a href="https://rmagick.github.io/rvgtut.html">RVG - Ruby Vector Graphics</a></dd>
-  <dd><a href="http://www.devshed.com/c/a/PHP/Security-Images-with-PHP-and-ImageMagick/">Security Images with PHP and ImageMagick</a></dd>
-  <dd><a href="http://php.net/manual/en/imagick.examples-1.html">Basic Uses of ImageMagick With PHP</a></dd>
+  <dd class="col-md-8"><a href="http://www.ibm.com/developerworks/library/os-mosperl/">Create Mosaic Images with Perl and ImageMagick</a></dd>
+  <dd class="col-md-8"><a href="http://www.sitepoint.com/article/dynamic-images-imagemagick">Create Dynamic Images with ImageMagick</a></dd>
+  <dd class="col-md-8"><a href="http://www.ioncannon.net/php/75/how-to-compile-imagemagick-for-php-by-hand/">How to compile ImageMagick for PHP by hand</a></dd>
+  <dd class="col-md-8"><a href="http://members.shaw.ca/el.supremo/MagickWand/">MagickWand Examples in C</a></dd>
+  <dd class="col-md-8"><a href="http://www.html-editors.com/contest/1/82-read.html">PHP Extensions: MagickWand for PHP</a></dd>
+  <dd class="col-md-8"><a href="http://www.ioncannon.net/php/61/php-imagemagick-magickwand-examples/">PHP ImageMagick MagickWand Examples</a></dd>
+  <dd class="col-md-8"><a href="https://rmagick.github.io/rvgtut.html">RVG - Ruby Vector Graphics</a></dd>
+  <dd class="col-md-8"><a href="http://www.devshed.com/c/a/PHP/Security-Images-with-PHP-and-ImageMagick/">Security Images with PHP and ImageMagick</a></dd>
+  <dd class="col-md-8"><a href="http://php.net/manual/en/imagick.examples-1.html">Basic Uses of ImageMagick With PHP</a></dd>
 </ul>
 
-<h2 class="magick-header"><a id="install"></a>Installation Tutorials</h2>
+<h2 class="magick-post-title"><a id="install"></a>Installation Tutorials</h2>
 
 <ul>
-  <dd><a href="http://cactuslab.com/imagemagick/">ImageMagick Installer for Mac OS X</a></dd>
-  <dd><a href="http://www.cloudgoessocial.net/2011/03/21/im-xcode4-ios4-3/">ImageMagick on iPhone</a></dd>
-  <dd><a href="https://github.com/juan-cardelino/imagemagick_lib_iphone/">Scripts and Instructions to Compile ImageMagick as a iOS Static Library</a></dd>
-  <dd><a href="http://www.digitalsanctum.com/2009/03/18/installing-imagemagick-from-source-on-ubuntu-804/">Installing ImageMagick from Source on Ubuntu</a></dd>
+  <dd class="col-md-8"><a href="http://cactuslab.com/imagemagick/">ImageMagick Installer for Mac OS X</a></dd>
+  <dd class="col-md-8"><a href="http://www.cloudgoessocial.net/2011/03/21/im-xcode4-ios4-3/">ImageMagick on iPhone</a></dd>
+  <dd class="col-md-8"><a href="https://github.com/juan-cardelino/imagemagick_lib_iphone/">Scripts and Instructions to Compile ImageMagick as a iOS Static Library</a></dd>
+  <dd class="col-md-8"><a href="http://www.digitalsanctum.com/2009/03/18/installing-imagemagick-from-source-on-ubuntu-804/">Installing ImageMagick from Source on Ubuntu</a></dd>
 </ul>
 
-<h2 class="magick-header"><a id="techniques"></a>ImageMagick Techniques</h2>
+<h2 class="magick-post-title"><a id="techniques"></a>ImageMagick Techniques</h2>
 
 <ul>
-  <dd><a href="../docs/AcceleratedTemplateMatchingUsingLocalStatisticsAndFourierTransforms.pdf">Accelerated Template Matching Using Local Statistics And Fourier Transforms</a></dd>
-  <dd><a href="http://www.fmwconcepts.com/imagemagick/digital_image_filtering.pdf">Digital Image Filtering</a></dd>
+  <dd class="col-md-8"><a href="../docs/AcceleratedTemplateMatchingUsingLocalStatisticsAndFourierTransforms.pdf">Accelerated Template Matching Using Local Statistics And Fourier Transforms</a></dd>
+  <dd class="col-md-8"><a href="http://www.fmwconcepts.com/imagemagick/digital_image_filtering.pdf">Digital Image Filtering</a></dd>
 </ul>
 
-<h2 class="magick-header"><a id="topics"></a>ImageMagick Topics</h2>
+<h2 class="magick-post-title"><a id="topics"></a>ImageMagick Topics</h2>
 <ul>
-  <dd><a href="http://www.freebsd.org/cgi/cvsweb.cgi/ports/graphics/ImageMagick/">FreeBSD port</a></dd> 
-  <dd><a href="http://directory.fsf.org/project/ImageMagick/">Free Software Foundation</a></dd> 
-  <dd><a href="http://www.enterprisetech.com/2014/07/16/convey-dell-fpga-appliance-accelerates-hyperscale-image-resizing/">Hyperscale Image Resizing</a> </dd> 
-  <dd><a href="http://pkgsrc.se/graphics/ImageMagick/">NetBSD</a></dd> 
-  <dd><a href="http://sourceforge.net/projects/imagemagick/">SourceForge</a></dd> 
-  <dd><a href="http://en.wikipedia.org/wiki/ImageMagick">WikiPedia</a></dd> 
+  <dd class="col-md-8"><a href="http://www.freebsd.org/cgi/cvsweb.cgi/ports/graphics/ImageMagick/">FreeBSD port</a></dd> 
+  <dd class="col-md-8"><a href="http://directory.fsf.org/project/ImageMagick/">Free Software Foundation</a></dd> 
+  <dd class="col-md-8"><a href="http://www.enterprisetech.com/2014/07/16/convey-dell-fpga-appliance-accelerates-hyperscale-image-resizing/">Hyperscale Image Resizing</a> </dd> 
+  <dd class="col-md-8"><a href="http://pkgsrc.se/graphics/ImageMagick/">NetBSD</a></dd> 
+  <dd class="col-md-8"><a href="http://sourceforge.net/projects/imagemagick/">SourceForge</a></dd> 
+  <dd class="col-md-8"><a href="http://en.wikipedia.org/wiki/ImageMagick">WikiPedia</a></dd> 
 </ul>
 
-<h2 class="magick-header"><a id="book-review"></a>ImageMagick Book Review</h2>
+<h2 class="magick-post-title"><a id="book-review"></a>ImageMagick Book Review</h2>
 <ul>
-  <dd><a href="http://www.linux.com/article.pl?sid=06/09/29/1917210">Book review: ImageMagick Tricks</a></dd>
-  <dd><a href="http://books.slashdot.org/books/06/03/13/1442239.shtml">The Definitive Guide To ImageMagick</a></dd>
+  <dd class="col-md-8"><a href="http://www.linux.com/article.pl?sid=06/09/29/1917210">Book review: ImageMagick Tricks</a></dd>
+  <dd class="col-md-8"><a href="http://books.slashdot.org/books/06/03/13/1442239.shtml">The Definitive Guide To ImageMagick</a></dd>
 </ul>
 
-<h2 class="magick-header"><a id="mirrors"></a>ImageMagick Web Site Mirrors</h2>
+<h2 class="magick-post-title"><a id="mirrors"></a>ImageMagick Web Site Mirrors</h2>
 <ul>
-  <dt>Denmark</dt>
-    <dd><a href="http://imagemagick.europnews.de/">http://imagemagick.europnews.de</a></dd>
-  <dt>United States</dt>
-    <dd><a href="https://www.imagemagick.org/">https://www.imagemagick.org</a></dd>
+  <dt class="col-md-4">Denmark</dt>
+    <dd class="col-md-8"><a href="http://imagemagick.europnews.de/">http://imagemagick.europnews.de</a></dd>
+  <dt class="col-md-4">United States</dt>
+    <dd class="col-md-8"><a href="https://www.imagemagick.org/">https://www.imagemagick.org</a></dd>
 </ul>
 
-<h2 class="magick-header"><a id="bank"></a>Image Bank</h2>
+<h2 class="magick-post-title"><a id="bank"></a>Image Bank</h2>
 
 <ul>
-  <dd><a href="https://www.imagemagick.org/download/image-bank/">Image Bank</a>: a small digital test image bank</dd>
+  <dd class="col-md-8"><a href="https://www.imagemagick.org/download/image-bank/">Image Bank</a>: a small digital test image bank</dd>
 </ul>
 
-<h2 class="magick-header"><a id="other-projects"></a>Other Projects</h2>
+<h2 class="magick-post-title"><a id="other-projects"></a>Other Projects</h2>
 <ul>
-  <dd><a href="https://github.com/puelocesar/android-lib-magick">ImageMagick API on the Android Platform</a></dd>
-  <dd><a href="https://www.imagemagick.org/download/iOS/">ImageMagick API on the iOS / iPhone  Platform</a></dd>
-  <dd><a href="http://www.wizards-toolkit.org/">Wizard's Toolkit</a></dd>
-  <dd><a href="http://www.multipole.org/">Computational Simulation of Multi-Body Interactions with O(n) Scaling</a></dd>
+  <dd class="col-md-8"><a href="https://github.com/puelocesar/android-lib-magick">ImageMagick API on the Android Platform</a></dd>
+  <dd class="col-md-8"><a href="https://www.imagemagick.org/download/iOS/">ImageMagick API on the iOS / iPhone  Platform</a></dd>
+  <dd class="col-md-8"><a href="http://www.wizards-toolkit.org/">Wizard's Toolkit</a></dd>
+  <dd class="col-md-8"><a href="http://www.multipole.org/">Computational Simulation of Multi-Body Interactions with O(n) Scaling</a></dd>
 </ul>
 </div>
   <footer class="magick-footer">
@@ -163,4 +163,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/magick++.html b/www/magick++.html
index a9b45ea..f06e0ad 100644
--- a/www/magick++.html
+++ b/www/magick++.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/magick++.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/magick++.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="magick++.html#documentation">Documentation</a> • <a href="magick++.html#get">Obtaining Magick++</a> • <a href="magick++.html#install">Installation</a> • <a href="magick++.html#bugs">Reporting Bugs</a></p>
 
@@ -80,24 +80,24 @@
 list-style operations are provided so that operations may be
 performed on multiple images stored in STL containers. 
 </p>
-<h2 class="magick-header">Documentation</h2>
+<h2 class="magick-post-title">Documentation</h2>
 <a id="documentation"></a>
 <p>Detailed <a href="http://www.imagemagick.org/api/magick++-classes.html">documentation</a> is
 provided for all Magick++ classes, class methods, and template
 functions which comprise the API.  See a <a href="https://www.imagemagick.org/Magick++/tutorial/Magick++_tutorial.pdf">  Gentle Introduction to Magick++</a> for an introductory tutorial to Magick++.  We include the <a href="https://www.imagemagick.org/Magick++/tutorial/Magick++_tutorial.odt" >source</a> if you want to correct, enhance, or expand the tutorial.</p>
-<h2 class="magick-header">Obtaining Magick++</h2>
+<h2 class="magick-post-title">Obtaining Magick++</h2>
 <a id="get"></a>
 <p>Magick++ is included as part of <a href="../index.html">ImageMagick</a>
 source releases and may be retrieved via <a href="https://www.imagemagick.org/script/download.html">ftp</a>
 or <a href="http://git.imagemagick.org/repos/ImageMagick/Magick++">GIT</a>.
 </p>
-<h2 class="magick-header">Installation</h2>
+<h2 class="magick-post-title">Installation</h2>
 <a id="install"></a>
 <p>Once you have the Magick++ sources available, follow these detailed
 <a href="../Magick++/Install.html">installation instructions</a> for UNIX and
 Windows. 
 </p>
-<h2 class="magick-header">Usage</h2>
+<h2 class="magick-post-title">Usage</h2>
 <p>A helper script named <code>Magick++-config</code> is installed
 under Unix which assists with recalling compilation options required
 to compile and link programs which use Magick++. For example, the
@@ -105,31 +105,31 @@
 to produce the executable <code>demo</code> (notice that quotes are
 backward quotes): 
 </p>
-<pre>
+<pre><code>
 c++ `Magick++-config --cxxflags --cppflags` -O2 -o demo demo.cpp \
   `Magick++-config --ldflags --libs`
-</pre>
+</code></pre>
 <p>Set the <code>PKG_CONFIG_PATH</code> environment variable if ImageMagick is not in your default system path:</p>
 
-<pre>
+<pre><code>
 export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig
-</pre>
+</code></pre>
 
 <p>Windows users may get started by manually editing a project file
 for one of the Magick++ demo programs. 
 </p>
 <p>Note, under Windows (and possibly the Mac) it may be necessary to initialize the ImageMagick library prior to using the Magick++ library. This initialization is performed by passing the path to the ImageMagick DLLs (assumed to be in the same directory as your program) to the InitializeMagick() function call. This is commonly performed by providing the path to your program (argv[0]) as shown in the following example: </p>
-<pre>
+<pre><code>
 int main( int argc, char ** argv) {
   InitializeMagick(*argv);
   ...
-</pre>
+</code></pre>
 <p>This initialization step is not required under Unix, Linux,
 Cygwin, or any other operating environment that supports the notion
 of <var>installing</var> ImageMagick in a known location.  </p>
 <p>Here is a example program that utilizes the Magick++ API to get you started, <a href="http://www.imagemagick.org/source/magick++.cpp">magick++.cpp</a>. It reads an image, crops it, and writes it to disk in the PNG image format.</p>
 
-<pre class="pre-scrollable">
+<pre class="pre-scrollable"><code>
 #include &lt;Magick++.h> 
 #include &lt;iostream> 
 
@@ -161,8 +161,8 @@
     } 
   return 0; 
 }
-</pre>
-<h2 class="magick-header">Reporting Bugs</h2>
+</code></pre>
+<h2 class="magick-post-title">Reporting Bugs</h2>
 <a id="bugs"></a>
 <p>Questions regarding usage should be directed to or to report any bugs go to
 <a href="https://www.imagemagick.org/discourse-server/viewforum.html?f=23">Magick++ bug tracking forum</a>.
@@ -187,4 +187,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:56 -->
\ No newline at end of file
diff --git a/www/magick-core.html b/www/magick-core.html
index a802151..d598438 100644
--- a/www/magick-core.html
+++ b/www/magick-core.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/magick-core.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/magick-core.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p  class="lead magick-description">The <a href="http://www.imagemagick.org/api/MagickCore/index.html">MagickCore API</a> is a low-level interface between the C programming language and the ImageMagick image processing libraries and is recommended for wizard-level programmers only.  Unlike the <a href="magick-wand.html">MagickWand</a> C API which uses only a few opaque types and accessors, with MagickCore you almost exlusively access the structure members directly.  A description of the MagickCore public methods are found here:</p>
@@ -117,19 +117,19 @@
 
 <p>After you write your MagickCore program, compile it like this:</p>
 
-<pre>
+<pre><code>
 cc -o core core.c `pkg-config --cflags --libs MagickWand`
-</pre>
+</code></pre>
 
 <p>Set the <code>PKG_CONFIG_PATH</code> environment variable if ImageMagick is not in your default system path:</p>
 
-<pre>
+<pre><code>
 export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig
-</pre>
+</code></pre>
 
 <p>Here is a example program that utilizes the MagickCore API to get you started, <a href="http://www.imagemagick.org/source/core.c">core.c</a>. It reads a GIF image, creates a thumbnail, and writes it to disk in the PNG image format.</p>
 
-<pre class="pre-scrollable">#include &lt;stdio.h>
+<pre class="pre-scrollable"><code>#include &lt;stdio.h>
 #include &lt;stdlib.h>
 #include &lt;string.h>
 #include &lt;time.h>
@@ -191,10 +191,10 @@
   exception=DestroyExceptionInfo(exception);
   MagickCoreTerminus();
   return(0);
-}</pre>
+}</code></pre>
 <p><a id="image-view"></a>Now lets perform the same contrast enhancement while taking advantage of our dual or quad-core processing system by running the algorithm in parallel utilizing wand views.  The <a href="http://www.imagemagick.org/source/core/sigmoidal-contrast.c">sigmoidal-contrast.c</a> module reads an image, applies sigmoidal non-linearity contrast control, and writes the result to disk just like the previous contrast enhancement program, but now it does its work in parallel (assumes ImageMagick is built with OpenMP support).</p>
 
-<pre class="pre-scrollable">#include &lt;stdio.h>
+<pre class="pre-scrollable"><code>#include &lt;stdio.h>
 #include &lt;stdlib.h>
 #include &lt;math.h>
 #include &lt;MagickCore/MagickCore.h>
@@ -310,7 +310,7 @@
   image_info=DestroyImageInfo(image_info);
   MagickCoreTerminus();
   return(0);
-}</pre>
+}</code></pre>
 </div>
   <footer class="magick-footer">
     <p><a href="support.html">Donate</a> •
@@ -331,4 +331,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:07 -->
\ No newline at end of file
diff --git a/www/magick-script.html b/www/magick-script.html
index 1c9db4c..48a1bfd 100644
--- a/www/magick-script.html
+++ b/www/magick-script.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/magick-script.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/magick-script.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">Use the <code>magick-script</code> scripting language to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.   See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>convert</code> command or see below for example usages of the command.</p>
 
@@ -64,17 +64,17 @@
 <pre class="code">
     #!/bin/env magick-script
     -size 100x100 xc:red ( rose: -rotate -90 ) +append  -write show:
-</pre>
+</code></pre>
 
 
 <p>You can find additional examples of using <code>magick-script</code> in <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>magick</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td><a href="command-line-options.html#adaptive-blur">-adaptive-blur <var>geometry</var></a></td>
     <td>adaptively blur pixels; decrease effect near edges</td>
@@ -1282,4 +1282,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/magick-vector-graphics.html b/www/magick-vector-graphics.html
index 24fd4d4..942bd41 100644
--- a/www/magick-vector-graphics.html
+++ b/www/magick-vector-graphics.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/magick-vector-graphics.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/magick-vector-graphics.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,30 +42,31 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="http://www.imagemagick.org/www/magick-vector-graphics.html#overview">MVG Overview</a> • <a href="http://www.imagemagick.org/www/magick-vector-graphics.html#primitives">Drawing Primitives</a></p>
 
 <p class="lead magick-description">This specification defines the features and syntax for Magick Vector Graphics (MVG), a modularized language for describing two-dimensional vector and mixed vector/raster graphics in ImageMagick.  You can use the language to draw from the
 command line, from an MVG file, from an <a href="http://www.w3.org/TR/SVG/">SVG -- Scalable Vector Graphics</a> file or from one of the ImageMagick <a href="http://www.imagemagick.org/www/api.html">program interfaces</a>.  Use this command, for example, to render an arc:</p>
 
-<pre>
+<pre><code>
 convert -size 100x60 canvas:skyblue -fill white -stroke black \
   -draw "path 'M 30,40  A 30,20  20  0,0 70,20 A 30,20  20  1,0 30,40 Z '" \
   arc.png
-</pre>
+</code></pre>
 
 <p>and here is the result:</p>
 
@@ -76,7 +76,7 @@
 
 <p>When the drawing gets sufficiently complex, we recommend you assemble the graphic primitives into a MVG file. For our example, we use <a href="http://www.imagemagick.org/source/piechart.mvg">piechart.mvg</a>:</p>
 
-<pre class="pre-scrollable">push graphic-context
+<pre class="pre-scrollable"><code>push graphic-context
   viewbox 0 0 624 369
   affine 0.283636 0 0 0.283846 -0 -0
   push graphic-context
@@ -226,13 +226,13 @@
     pop graphic-context
   pop graphic-context
 pop graphic-context
-</pre>
+</code></pre>
 
 <p>to render a pie chart with this command:</p>
 
-<pre>
+<pre><code>
 convert mvg:piechart.mvg piechart.png
-</pre>
+</code></pre>
 
 <p>which produces this rendering:</p>
 
@@ -242,16 +242,16 @@
 
 <p>However, in general, MVG is sufficiently difficult to work with that you probably want to use a program to generate your graphics in the SVG format.  ImageMagick automagically converts SVG to MVG and renders your image, for example, we render <a href="http://www.imagemagick.org/source/piechart.svg">piechart.svg</a> with this command:</p>
 
-<pre>
+<pre><code>
 convert mvg:piechart.svg piechart.jpg
-</pre>
+</code></pre>
 
 
 <p>to produce the same pie chart we created with the MVG language.</p>
 
 <p>Drawing is available from many of the ImageMagick <a href="http://www.imagemagick.org/www/api.html">program interfaces</a> as well.  ImageMagick converts the drawing API calls to MVG and renders it.  Here is example code written in the <a href="http://www.imagemagick.org/www/magick-wand.html">MagickWand</a> language: </p>
 
-<pre class="pre-scrollable">(void) PushDrawingWand(draw_wand);
+<pre class="pre-scrollable"><code>(void) PushDrawingWand(draw_wand);
 {
   const PointInfo points[6] =
   {
@@ -276,34 +276,34 @@
   DrawPolygon(draw_wand,6,points);
 }
 (void) PopDrawingWand(draw_wand);
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="overview"></a>MVG Overview</h2>
+<h2 class="magick-post-title"><a id="overview"></a>MVG Overview</h2>
 
 <p>MVG ignores all white-space between commands. This allows multiple MVG commands per line. It is common convention to terminate each MVG command with a new line to make MVG easier to edit and read. This syntax description uses indentation in MVG sequences to aid with understanding. Indentation is supported but is not required.</p>
 
 <p>Metafile wrapper syntax (to support stand-alone MVG files):</p>
 
-<pre>
+<pre><code>
 push graphic-context
   viewbox 0 0 width height
   [ any other MVG commands ]
 pop graphic-context
-</pre>
+</code></pre>
 
 <p>Pattern syntax (saving and restoring context):</p>
 
-<pre>
+<pre><code>
 push pattern id x,y width,height
  push graphic-context
   [ drawing commands ]
  pop graphic-context
 pop pattern
-</pre>
+</code></pre>
 
 <p>an example is (%s is a identifier string):</p>
 
-<pre>
+<pre><code>
 push defs
  push pattern %s 10,10 20,20
   push graphic-context
@@ -316,31 +316,31 @@
   pop graphic-context
  pop pattern
 pop defs
-</pre>
+</code></pre>
 
 <p>For image tiling use:</p>
 
-<pre>
+<pre><code>
 push pattern id x,y width,height
  image Copy ...
 pop pattern
-</pre>
+</code></pre>
 
 <p>Note you can use the pattern for either the fill or stroke like:</p>
 
-<pre>
+<pre><code>
 stroke url(#%s)
-</pre>
+</code></pre>
 
 <p>or</p>
 
-<pre>
+<pre><code>
 fill url(#%s)
-</pre>
+</code></pre>
 
 <p>The clip path defines a clipping area, where only the contained area to be drawn upon.  Areas outside of the clipping areare masked.</p>
 
-<pre>
+<pre><code>
 push defs
  push clip-path %s
   push graphic-context
@@ -349,14 +349,14 @@
  pop clip-path
 pop defs
 clip-path url(#%s)
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="primitives"></a>Drawing Primitives</h2>
+<h2 class="magick-post-title"><a id="primitives"></a>Drawing Primitives</h2>
 
 <p>Here is a complete description of the MVG drawing primitives:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <th>Primitive</th>
     <th>Description</th>
@@ -388,32 +388,32 @@
   <tr>
     <td><a id="clip-rule"></a>clip-rule <var>rule</var></td>
     <td>Choose from these rule types:
-<pre>evenodd
-nonzero</pre></td>
+<pre><code>evenodd
+nonzero</code></pre></td>
   </tr>
   <tr>
     <td><a id="clip-units"></a>clip-units <var>units</var></td>
     <td>Choose from these unit types:
-<pre>userSpace
+<pre><code>userSpace
 userSpaceOnUse
-objectBoundingBox</pre></td>
+objectBoundingBox</code></pre></td>
   </tr>
   <tr>
     <td><a id="color"></a>color <var>x</var>,<var>y</var> <var>method</var></td>
     <td>Choose from these method types:
-<pre>point
+<pre><code>point
 replace
 floodfill
 filltoborder
-reset</pre></td>
+reset</code></pre></td>
   </tr>
   <tr>
     <td><a id="decorate"></a>decorate <var>type</var></td>
     <td>Choose from these types of decorations:
-<pre>none
+<pre><code>none
 line-through
 overline
-underline</pre></td>
+underline</code></pre></td>
   </tr>
   <tr>
     <td><a id="ellipse"></a>ellipse <var>center<sub>x</sub></var>,<var>center<sub>y</sub></var>   <var>radius<sub>x</sub></var>,<var>radius<sub>y</sub></var>   <var>arc<sub>start</sub></var>,<var>arc<sub>stop</sub></var></td>
@@ -430,8 +430,8 @@
   <tr>
     <td><a id="fill-rule"></a>fill-rule <var>rule</var></td>
     <td>Choose from these rule types:
-<pre>evenodd
-nonzero</pre></td>
+<pre><code>evenodd
+nonzero</code></pre></td>
   </tr>
   <tr>
     <td><a id="font"></a>font <var>name</var></td>
@@ -448,7 +448,7 @@
   <tr>
     <td><a id="font-stretch"></a>font-stretch <var>type</var></td>
     <td>Choose from these stretch types:
-<pre>all
+<pre><code>all
 normal
 ultra-condensed
 extra-condensed
@@ -457,20 +457,20 @@
 semi-expanded
 expanded
 extra-expanded
-ultra-expanded</pre></td>
+ultra-expanded</code></pre></td>
   </tr>
   <tr>
     <td><a id="font-style"></a>font-style <var>style</var></td>
     <td>Choose from these styles:
-<pre>all
+<pre><code>all
 normal
 italic
-oblique</pre></td>
+oblique</code></pre></td>
   </tr>
   <tr>
     <td><a id="font-weight"></a>font-weight <var>weight</var></td>
     <td>Choose from these weights:
-<pre>all
+<pre><code>all
 normal
 bold
 100
@@ -481,19 +481,19 @@
 600
 700
 800
-900</pre></td>
+900</code></pre></td>
   </tr>
   <tr>
     <td><a id="gradient-units"></a>gradient-units <var>units</var></td>
     <td>Choose from these units:
-<pre>userSpace
+<pre><code>userSpace
 userSpaceOnUse
-objectBoundingBox</pre></td>
+objectBoundingBox</code></pre></td>
   </tr>
   <tr>
     <td><a id="gravity"></a>gravity <var>type</var></td>
     <td>Choose from these gravity types:
-<pre>NorthWest
+<pre><code>NorthWest
 North
 NorthEast
 West
@@ -501,7 +501,7 @@
 East
 SouthWest
 South
-SouthEast</pre></td>
+SouthEast</code></pre></td>
   </tr>
   <tr>
     <td><a id="compose"></a>image <var>compose x,y width,height 'filename'</var></td>
@@ -696,11 +696,11 @@
   <tr>
     <td><a id="matte"></a>matte <var>x,y method</var></td>
     <td>Choose from these methods:
-<pre>point
+<pre><code>point
 replace
 floodfill
 filltoborder
-reset</pre></td>
+reset</code></pre></td>
   </tr>
   <tr>
     <td><a id="offset"></a>offset <var>offset</var></td>
@@ -817,16 +817,16 @@
   <tr>
     <td><a id="stroke-linecap"></a>stroke-linecap <var>type</var></td>
     <td>Choose from these cap types:
-<pre>butt
+<pre><code>butt
 round
-square</pre></td>
+square</code></pre></td>
   </tr>
   <tr>
     <td><a id="stroke-linejoin"></a>stroke-linejoin <var>type</var></td>
     <td>Choose from these join types:
-<pre>bevel
+<pre><code>bevel
 miter
-round</pre></td>
+round</code></pre></td>
   </tr>
   <tr>
     <td><a id="stroke-miterlimit"></a>stroke-miterlimit <var>limit</var></td>
@@ -881,4 +881,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:59 -->
\ No newline at end of file
diff --git a/www/magick-wand.html b/www/magick-wand.html
index 2808188..2cf7e99 100644
--- a/www/magick-wand.html
+++ b/www/magick-wand.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/magick-wand.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/magick-wand.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">The <a href="http://www.imagemagick.org/api/MagickWand/index.html">MagickWand API</a> is the recommended interface between the C programming language and the ImageMagick image processing libraries.  Unlike the <a href="magick-core.html">MagickCore</a> C API, MagickWand uses only a few opaque types.  Accessors are available to set or get important wand properties.  A description of the MagickWand public methods are found here:</p>
@@ -75,19 +75,19 @@
 
 <p>After you write your MagickWand program, compile it like this:</p>
 
-<pre>
+<pre><code>
 cc -o wand wand.c `pkg-config --cflags --libs MagickWand`
-</pre>
+</code></pre>
 
 <p>Set the <code>PKG_CONFIG_PATH</code> environment variable if ImageMagick is not in your default system path:</p>
 
-<pre>
+<pre><code>
 export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig
-</pre>
+</code></pre>
 
 <p>Here is a example program that utilizes the MagickWand API to get you started, <a href="http://www.imagemagick.org/source/wand.c">wand.c</a>. It reads an image, creates a thumbnail, and writes the result to disk.</p>
 
-<pre class="pre-scrollable">#include &lt;stdio.h>
+<pre class="pre-scrollable"><code>#include &lt;stdio.h>
 #include &lt;stdlib.h>
 #include &lt;wand/MagickWand.h>
 
@@ -142,11 +142,11 @@
   MagickWandTerminus();
   return(0);
 }
-</pre>
+</code></pre>
 
 <p>Here is another program that shows one way to get and set image pixels with the MagickWand API, <a href="http://www.imagemagick.org/source/contrast.c">contrast.c</a>. It reads an image, applies sigmoidal non-linearity contrast control, and writes the result to disk.</p>
 
-<pre class="pre-scrollable">#include &lt;stdio.h>
+<pre class="pre-scrollable"><code>#include &lt;stdio.h>
 #include &lt;stdlib.h>
 #include &lt;math.h>
 #include &lt;wand/MagickWand.h>
@@ -252,10 +252,10 @@
   MagickWandTerminus();
   return(0);
 }
-</pre>
+</code></pre>
 <p><a id="wand-view"></a>Now lets perform the same contrast enhancement while taking advantage of our dual or quad-core processing system by running the algorithm in parallel utilizing wand views.  The <a href="http://www.imagemagick.org/source/wand/sigmoidal-contrast.c">sigmoidal-contrast.c</a> module reads an image, applies sigmoidal non-linearity contrast control, and writes the result to disk just like the previous contrast enhancement program, but now it does its work in parallel (assumes ImageMagick is built with OpenMP support).</p>
 
-<pre class="pre-scrollable">#include &lt;stdio.h>
+<pre class="pre-scrollable"><code>#include &lt;stdio.h>
 #include &lt;stdlib.h>
 #include &lt;math.h>
 #include &lt;wand/MagickWand.h>
@@ -361,7 +361,7 @@
   MagickWandTerminus();
   return(0);
 }
-</pre>
+</code></pre>
 <p><a href="../MagickWand/index.html">MagickWand Examples in C</a> illustrates how to use the ImageMagick MagickWand API. Each example is presented as a C function, complete with headers, so that it can be copied to a file and then included in your own C project.</p>
 </div>
   <footer class="magick-footer">
@@ -383,4 +383,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:03 -->
\ No newline at end of file
diff --git a/www/magick.html b/www/magick.html
index 70e6b39..48aed10 100644
--- a/www/magick.html
+++ b/www/magick.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/magick.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/magick.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,33 +42,34 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">Use the <code>magick</code> program to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.   See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>convert</code> command or see below for example usages of the command.</p>
 
 <p>We list a few examples of the <code>magick</code> command here to illustrate its usefulness and ease of use.  To get started, lets convert an image in the JPEG format to PNG:</p>
 
-<pre>
+<pre><code>
 magick rose.jpg rose.png
-</pre>
+</code></pre>
 
 <p>Next, we reduce the image size before it is written to the PNG format:</p>
 
-<pre>
+<pre><code>
 magick rose.jpg -resize 50% rose.png
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/rose.jpg">
@@ -83,11 +83,11 @@
 
 <p>You can combine multiple image-processing operations to produce complex results:</p>
 
-<pre>
+<pre><code>
 magick -size 320x85 canvas:none -font Bookman-DemiItalic -pointsize 72 \
   -draw "text 25,60 \'Magick\'" -channel RGBA -blur 0x6 -fill darkred -stroke magenta \
   -draw "text 20,55 \'Magick\'" fuzzy-magick.png
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/fuzzy-magick.png"><img src="../images/fuzzy-magick.png" width="320" height="85" alt="fuzzy-magick" /></a>
@@ -95,28 +95,28 @@
 
 <p>or here we resize an image with improved quality:</p>
 
-<pre>
+<pre><code>
 magick input.png -colorspace RGB +sigmoidal-contrast 11.6933 \
   -define filter:filter=Sinc -define filter:window=Jinc -define filter:lobes=3 \
   -resize 400% -sigmoidal-contrast 11.6933 -colorspace sRGB output.png');
-</pre>
+</code></pre>
 
 <p>Utilize other command-line <a href="command-line-tools.html">tools</a> from the <code>magick</code> tool.  To invoke this functionality, simply create a symbolic link to the <code>magick</code> tool or specify the tool you want to use as the first argument.  These two methods are equivalent:</p>
 
-<pre>
+<pre><code>
 ln -s magick convert
 convert rose.jpg rose.png
 magick convert rose.jpg rose.png
-</pre>
+</code></pre>
 
 <p>You can find additional examples of using <code>magick</code> in <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>magick</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td><a href="command-line-options.html#adaptive-blur">-adaptive-blur <var>geometry</var></a></td>
     <td>adaptively blur pixels; decrease effect near edges</td>
@@ -1324,4 +1324,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:03 -->
\ No newline at end of file
diff --git a/www/miff.html b/www/miff.html
index 1c7239e..1aa613a 100644
--- a/www/miff.html
+++ b/www/miff.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/miff.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/miff.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,25 +42,26 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="miff.html#miff-header">MIFF Header</a> • <a href="miff.html#binary">MIFF Binary Data</a></p>
 
 <p class="lead magick-description">The Magick Image File Format (MIFF) is ImageMagick's own platform-independent format for storing bitmap images.  It has an advantage over other image formats in that it stores all metadata known to ImageMagick (e.g. image color profiles, comments, author, copyright, etc.), whereas, other formats may only support a small portion of available metadata or none at all.  A MIFF image file consist of two sections.  The first section is a header composed of keys describing the image in text form.  The next section is the binary image data.  We discuss these sections in detail below.</p>
 
-<h2 class="magick-header"><a id="miff-header"></a>MIFF Header</h2>
+<h2 class="magick-post-title"><a id="miff-header"></a>MIFF Header</h2>
 
 
 <p>The MIFF header is composed entirely of ISO-8859-1 characters.  The fields in the header are key and value combination in the <var>key = value</var> format, with each key and value separated by an equal sign (<code>=</code>).  Each <var>key = value</var> combination is delimited by at least one control or whitespace character.  Comments may appear in the header section and are always delimited by braces.  The MIFF header always ends with a colon (<code>:</code>) character, followed by a <var>ctrl-Z</var> character.  It is also common to proceed the colon with a <var>formfeed</var> and a <var>newline</var> character.  The <var>formfeed</var> prevents the listing of binary data when using the <code>more</code> Unix program, whereas, the <var>ctrl-Z</var> has the same effect with the <code>type</code> command on the Windows command line.</p>
@@ -69,7 +69,7 @@
 <p>The following is a partial list of <var> key = value</var> combinations that are typically be found in a MIFF file:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>background-color = <var>color</var></td>
     <td> </td>
@@ -114,10 +114,10 @@
     <td>dispose = <var>value</var></td>
     <td>layer disposal method.  Here are the valid values:
 	  <ul>
-	    <dd>0. No disposal specified.</dd>
-  	  <dd>1. Do not dispose between frames.</dd>
-  	  <dd>2. Overwrite frame with background color from header.</dd>
-  	  <dd>3. Overwrite with previous frame.</dd>
+	    <dd class="col-md-8">0. No disposal specified.</dd>
+  	  <dd class="col-md-8">1. Do not dispose between frames.</dd>
+  	  <dd class="col-md-8">2. Overwrite frame with background color from header.</dd>
+  	  <dd class="col-md-8">3. Overwrite with previous frame.</dd>
   	</ul>
     </td>
   </tr>
@@ -194,7 +194,7 @@
 
 <p>Other key value pairs are permitted.  If a value contains whitespace it must be enclosed with braces as illustrated here:</p>
 
-<pre>
+<pre><code>
 id=ImageMagick
 class=PseudoClass  colors=256  matte=False
 columns=1280  rows=1024  depth=8
@@ -202,7 +202,7 @@
 colorspace=RGB
 copyright={© 1999-2017 ImageMagick Studio LLC}
 &#8942;
-</pre>
+</code></pre>
 
 <p>Note that <var>key = value</var> combinations may be separated by <var>newlines</var> or spaces and may occur in any order within the header.  Comments (within braces) may appear anywhere before the colon.</p>
 
@@ -212,7 +212,7 @@
 
 <p>The header is separated from the image data by a <code>:</code> character immediately followed by a <var>newline</var>.</p>
 
-<h2 class="magick-header"><a id="binary"></a>MIFF Binary Data</h2>
+<h2 class="magick-post-title"><a id="binary"></a>MIFF Binary Data</h2>
 
 <p>Next comes the binary image data itself.  How the image data is formatted depends upon the class of the image as specified (or not specified) by the value of the class key in the header.</p>
 
@@ -245,4 +245,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:07 -->
\ No newline at end of file
diff --git a/www/mirror.html b/www/mirror.html
index c37deeb..8af0c96 100644
--- a/www/mirror.html
+++ b/www/mirror.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/mirror.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/mirror.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,56 +42,57 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">ImageMagick source and binary distributions are available from a variety of FTP and Web mirrors around the world listed below.  ImageMagick stable and development source releases are also available from <a href="http://git.imagemagick.org/repos/ImageMagick">Git</a>.  Before you download, you may want to review recent <a href="changelog.html">changes</a> to the ImageMagick distribution.  The authoritative source code repository is <a href="http://git.imagemagick.org/repos/ImageMagick">http://git.imagemagick.org/repos/ImageMagick</a>.</p>
-<p>The latest release of ImageMagick is version 7.0.5-10.</p>
-<dl class="dl-horizontal">
-  <dt>Germany</dt>
-    <dd><a href="http://mirror.checkdomain.de/imagemagick/">http://mirror.checkdomain.de/imagemagick/</a></dd>
-    <dd><a href="ftp://mirror.checkdomain.de/imagemagick/">ftp://mirror.checkdomain.de/imagemagick/</a></dd>
-  <dt>Japan</dt>
-    <dd><a href="ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/">ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/</a></dd>
-    <dd><a href="ftp://ftp.u-aizu.ac.jp/pub/graphics/images/ImageMagick/imagemagick.org/">ftp://ftp.u-aizu.ac.jp/pub/graphics/images/ImageMagick/imagemagick.org</a></dd>
-  <dt>Netherlands</dt>
-    <dd><a href="ftp://ftp.nluug.nl/pub/ImageMagick/">ftp://ftp.nluug.nl/pub/ImageMagick</a></dd>
-    <dd><a href="http://ftp.nluug.nl/ImageMagick/">http://ftp.nluug.nl/ImageMagick/</a></dd>
-  <dt>Poland</dt>
-    <dd><a href="ftp://sunsite.icm.edu.pl/packages/ImageMagick/">ftp://sunsite.icm.edu.pl/packages/ImageMagick/</a></dd>
-    <dd><a href="ftp://ftp.tpnet.pl/pub/graphics/ImageMagick/">ftp://ftp.tpnet.pl/pub/graphics/ImageMagick/</a></dd>
-    <dd><a href="rsync://ftp.tpnet.pl/pub/graphics/ImageMagick/">rsync://ftp.tpnet.pl/pub/graphics/ImageMagick/</a></dd>
-  <dt>Sweden</dt>
-    <dd><a href="http://ftp.acc.umu.se/mirror/imagemagick.org/ftp/">http://ftp.acc.umu.se/mirror/imagemagick.org/ftp/</a></dd>
-    <dd><a href="rsync://ftp.acc.umu.se/mirror/imagemagick.org/ftp/">rsync://ftp.acc.umu.se/mirror/imagemagick.org/ftp/</a></dd>
-  <dt>South Africa</dt>
-    <dd><a href="http://imagemagick.afri.cc/">http://imagemagick.afri.cc/</a></dd>
-  <dt>United States</dt>
-    <dd><a href="https://www.imagemagick.org/download">https://www.imagemagick.org/download</a></dd>
-    <dd><a href="http://transloadit.imagemagick.org/download">http://transloadit.imagemagick.org/download</a></dd>
-    <dd><a href="ftp://transloadit.imagemagick.org/ImageMagick">ftp://transloadit.imagemagick.org/pub/ImageMagick (ftp)</a></dd>
-    <dd><a href="ftp://ftp.fifi.org/pub/ImageMagick/">ftp://ftp.fifi.org/pub/ImageMagick/</a> (ftp)</dd>
-    <dd><a href="http://git.imagemagick.org/repos/ImageMagick">http://git.imagemagick.org/repos/ImageMagick</a> (Git)</dd>
-    <dd><a href="https://github.com/ImageMagick/ImageMagick">https://github.com/ImageMagick/ImageMagick</a> (Git Mirror)</dd>
-  <dt>Select Binaries </dt>
-    <dd><a href="http://www.macports.org/ports.html?by=name&amp;substr=imagemagick">http://www.macports.org/ports.html?by=name&amp;substr=imagemagick</a> (Mac OS X)</dd>
-    <dd><a href="http://hpux.connect.org.uk/hppd/hpux/X11/Viewers/">http://hpux.connect.org.uk/hppd/hpux/X11/Viewers/</a> (HP-UX 10.20 and 11.00)</dd>
-  <dt>Rsync Mirrors </dt>
-    <dd><a href="rsync://rsync.is.co.za/IS-Mirror/mirror.imagemagick.org/">rsync://rsync.is.co.za/IS-Mirror/mirror.imagemagick.org/</a></dd>
-    <dd><a href="rsync://rsync.fifi.org/ImageMagick">rsync://rsync.fifi.org/ImageMagick</a></dd>
-    <dd><a href="rsync://mirror.imagemagick.org/magick_html">rsync://mirror.imagemagick.org/magick_html/</a> (Web site mirror)</dd>
-    <dd><a href="rsync://mirror.imagemagick.org/magick_ftp">rsync://mirror.imagemagick.org/magick_ftp/</a> (FTP mirror)</dd>
+<p>The latest release of ImageMagick is version 7.0.6-0.</p>
+<dl class="row">
+  <dt class="col-md-4">Germany</dt>
+    <dd class="col-md-8"><a href="http://mirror.checkdomain.de/imagemagick/">http://mirror.checkdomain.de/imagemagick/</a></dd>
+    <dd class="col-md-8"><a href="ftp://mirror.checkdomain.de/imagemagick/">ftp://mirror.checkdomain.de/imagemagick/</a></dd>
+  <dt class="col-md-4">Japan</dt>
+    <dd class="col-md-8"><a href="ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/">ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/</a></dd>
+    <dd class="col-md-8"><a href="ftp://ftp.u-aizu.ac.jp/pub/graphics/images/ImageMagick/imagemagick.org/">ftp://ftp.u-aizu.ac.jp/pub/graphics/images/ImageMagick/imagemagick.org</a></dd>
+  <dt class="col-md-4">Netherlands</dt>
+    <dd class="col-md-8"><a href="ftp://ftp.nluug.nl/pub/ImageMagick/">ftp://ftp.nluug.nl/pub/ImageMagick</a></dd>
+    <dd class="col-md-8"><a href="http://ftp.nluug.nl/ImageMagick/">http://ftp.nluug.nl/ImageMagick/</a></dd>
+  <dt class="col-md-4">Poland</dt>
+    <dd class="col-md-8"><a href="ftp://sunsite.icm.edu.pl/packages/ImageMagick/">ftp://sunsite.icm.edu.pl/packages/ImageMagick/</a></dd>
+    <dd class="col-md-8"><a href="ftp://ftp.tpnet.pl/pub/graphics/ImageMagick/">ftp://ftp.tpnet.pl/pub/graphics/ImageMagick/</a></dd>
+    <dd class="col-md-8"><a href="rsync://ftp.tpnet.pl/pub/graphics/ImageMagick/">rsync://ftp.tpnet.pl/pub/graphics/ImageMagick/</a></dd>
+  <dt class="col-md-4">Sweden</dt>
+    <dd class="col-md-8"><a href="http://ftp.acc.umu.se/mirror/imagemagick.org/ftp/">http://ftp.acc.umu.se/mirror/imagemagick.org/ftp/</a></dd>
+    <dd class="col-md-8"><a href="rsync://ftp.acc.umu.se/mirror/imagemagick.org/ftp/">rsync://ftp.acc.umu.se/mirror/imagemagick.org/ftp/</a></dd>
+  <dt class="col-md-4">South Africa</dt>
+    <dd class="col-md-8"><a href="http://imagemagick.afri.cc/">http://imagemagick.afri.cc/</a></dd>
+  <dt class="col-md-4">United States</dt>
+    <dd class="col-md-8"><a href="https://www.imagemagick.org/download">https://www.imagemagick.org/download</a></dd>
+    <dd class="col-md-8"><a href="http://transloadit.imagemagick.org/download">http://transloadit.imagemagick.org/download</a></dd>
+    <dd class="col-md-8"><a href="ftp://transloadit.imagemagick.org/ImageMagick">ftp://transloadit.imagemagick.org/pub/ImageMagick (ftp)</a></dd>
+    <dd class="col-md-8"><a href="ftp://ftp.fifi.org/pub/ImageMagick/">ftp://ftp.fifi.org/pub/ImageMagick/</a> (ftp)</dd>
+    <dd class="col-md-8"><a href="http://git.imagemagick.org/repos/ImageMagick">http://git.imagemagick.org/repos/ImageMagick</a> (Git)</dd>
+    <dd class="col-md-8"><a href="https://github.com/ImageMagick/ImageMagick">https://github.com/ImageMagick/ImageMagick</a> (Git Mirror)</dd>
+  <dt class="col-md-4">Select Binaries </dt>
+    <dd class="col-md-8"><a href="http://www.macports.org/ports.html?by=name&amp;substr=imagemagick">http://www.macports.org/ports.html?by=name&amp;substr=imagemagick</a> (Mac OS X)</dd>
+    <dd class="col-md-8"><a href="http://hpux.connect.org.uk/hppd/hpux/X11/Viewers/">http://hpux.connect.org.uk/hppd/hpux/X11/Viewers/</a> (HP-UX 10.20 and 11.00)</dd>
+  <dt class="col-md-4">Rsync Mirrors </dt>
+    <dd class="col-md-8"><a href="rsync://rsync.is.co.za/IS-Mirror/mirror.imagemagick.org/">rsync://rsync.is.co.za/IS-Mirror/mirror.imagemagick.org/</a></dd>
+    <dd class="col-md-8"><a href="rsync://rsync.fifi.org/ImageMagick">rsync://rsync.fifi.org/ImageMagick</a></dd>
+    <dd class="col-md-8"><a href="rsync://mirror.imagemagick.org/magick_html">rsync://mirror.imagemagick.org/magick_html/</a> (Web site mirror)</dd>
+    <dd class="col-md-8"><a href="rsync://mirror.imagemagick.org/magick_ftp">rsync://mirror.imagemagick.org/magick_ftp/</a> (FTP mirror)</dd>
 </dl>
 <p>If you want to add a new mirror, please <a href="https://www.imagemagick.org/script/contact.php">contact us</a>.</p>
 </div>
@@ -115,4 +115,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:16 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:02 -->
\ No newline at end of file
diff --git a/www/mogrify.html b/www/mogrify.html
index 80c47dc..08d446f 100644
--- a/www/mogrify.html
+++ b/www/mogrify.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/mogrify.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/mogrify.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,32 +42,33 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="mogrify.html#usage">Example Usage</a> • <a href="mogrify.html#options">Option Summary</a></p>
 
 <p class="lead magick-description">Use the <code>mogrify</code> program to resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.   This tool is similar to <a href="convert.html">convert</a> except that the original image file is <em>overwritten</em> (unless you change the file suffix with the <a href="command-line-options.html#format">-format</a> option) with any changes you request.  See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>mogrify</code> command or see below for sample usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>mogrify</code> command here to illustrate its usefulness and ease of use.  To get started, let's reduce the size of our
 rose:</p>
 
-<pre>
+<pre><code>
 magick mogrify -resize 50% rose.jpg
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/rose.jpg">
@@ -82,26 +82,26 @@
 
 <p>You can resize all your JPEG images in a folder to a maximum dimension of 256x256 with this command:</p>
 
-<pre>
+<pre><code>
 magick mogrify -resize 256x256 *.jpg
-</pre>
+</code></pre>
 
 <p>Finally, we convert all our PNG images in a folder to the JPEG format:</p>
 
-<pre>
+<pre><code>
 magick mogrify -format jpg *.png
-</pre>
+</code></pre>
 
 <p>Here image files 1.png, 2.png, etc., are left untouched and files 1.jpg, 2.jpg, etc., are created.  They are copies of their respective PNG images except are stored  in the JPEG image format.</p>
 
 
 <p>You can find additional examples of using <code>mogrify</code> in <a href="http://www.ibm.com/developerworks/library/l-graf/?ca=dnt-428">Graphics from the Command Line</a>.  Further discussion is available in  <a href="http://www.ibm.com/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine">More Graphics from the Command Line</a> and <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>mogrify</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -1297,4 +1297,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:56 -->
\ No newline at end of file
diff --git a/www/montage.html b/www/montage.html
index e6a7cd7..9a6e1c0 100644
--- a/www/montage.html
+++ b/www/montage.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/montage.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/montage.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,31 +42,32 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="montage.html#usage">Example Usage</a> • <a href="montage.html#options">Option Summary</a></p>
 
 <p class="lead magick-description">Use the <code>montage</code> program to create a composite image by combining several separate images.  The images are tiled on the composite image optionally adorned with a border, frame, image name, and more. See <a href="command-line-processing.html">Command Line Processing</a> for advice on how to structure your <code>montage</code> command or see below for example usages of the command.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>montage</code> command here to illustrate its usefulness and ease of use.  To get started, let's montage two images into a single composite:</p>
 
-<pre>
+<pre><code>
 magick montage -background '#336699' -geometry +4+4 rose.jpg red-ball.png montage.jpg
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/rose.jpg">
@@ -84,9 +84,9 @@
 
 <p>Ok, let's add some decorations:</p>
 
-<pre>
+<pre><code>
 magick montage -label %f -frame 5 -background '#336699' -geometry +4+4 rose.jpg red-ball.png frame.jpg
-</pre>
+</code></pre>
 
 <ul>
   <a href="../images/rose.jpg">
@@ -103,11 +103,11 @@
 
 <p>You can find additional examples of using <code>montage</code> at <a href="https://www.imagemagick.org/Usage/montage/">Examples of ImageMagick Usage</a> and <a href="http://www.ibm.com/developerworks/library/l-graf/?ca=dnt-428">Graphics from the Command Line</a>.  Further discussion is available in  <a href="http://www.ibm.com/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine">More Graphics from the Command Line</a> and <a href="https://www.imagemagick.org/Usage/">Examples of ImageMagick Usage</a>.</p>
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>montage</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -638,4 +638,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:59 -->
\ No newline at end of file
diff --git a/www/motion-picture.html b/www/motion-picture.html
index 251dbdb..54e986d 100644
--- a/www/motion-picture.html
+++ b/www/motion-picture.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/motion-picture.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/motion-picture.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,21 +42,22 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
-<p class="text-center"><a href="motion-picture.html#log">Log Format</a> • <a href="motion-picture.html#properties">DPX properties</a> • <a href="motion-picture.html#settings">DPX Settings</a></p>
+<p class="text-center"><a href="motion-picture.html#log">Log Format</a> • <a href="motion-picture.html#properties">DPX Properties</a> • <a href="motion-picture.html#settings">DPX Settings</a></p>
 
 <p class="lead magick-description">DPX (SMPTE 268M-2003) - This format is used in Motion Picture and Effects industry that makes particular use of the extensive header information and the format's flexibility in being able to handle high dynamic range and logarithmic color values at a variety of bit depths using RGB or YCbCr pixel descriptions.  It is based on, but largely supersedes, Kodak's Cineon format that has more a more film specific header.</p>
 
@@ -71,7 +71,7 @@
 
 <p>The header can contain Film and/or Television specific data related to a production. For example the television header can contain a SMPTE time code so that shots exported as a DPX sequence from a production's edit can be easily replaced once any effects have been added. The film header holds information about the reel of film the frames originated from and various camera settings that were used while filming.  All these details usually stay with the images as they are passed between post-production companies.</p>
 
-<h2 class="magick-header"><a id="log"></a>Log Format</h2>
+<h2 class="magick-post-title"><a id="log"></a>Log Format</h2>
 
 <p>The color values for each pixel are often stored logarithmically (particularly if the sequence is destined to be transferred back on to film) which more naturally reflects the density of how color information is stored in the emulsion on the original film. When viewed without alteration logarithmic files appear to have very low contrast (leftmost image), and so require a 'look up table' to translate the logarithmic image to something that resembles what you might see if the image was transferred back to film and projected in a cinema (rightmost image). Apart from making the image linear (like most typical computer images) and adjusting the gamma level this table sets where the black and white point lies.</p>
 
@@ -89,11 +89,11 @@
   <a href="../images/bluebells_darker.jpg"><img src="../images/bluebells_darker.jpg" width="384" height="288" class="image-slices" alt="bluebells-darker" /></a>
 </ul>
 
-<h2 class="magick-header"><a id="properties"></a>DPX Properties</h2>
+<h2 class="magick-post-title"><a id="properties"></a>DPX Properties</h2>
 
 <p>ImageMagick supports these DPX properties:</p>
 
-<pre class="pre-scrollable">dpx:file.copyright
+<pre class="pre-scrollable"><code>dpx:file.copyright
 dpx:file.creator
 dpx:file.filename
 dpx:file.project
@@ -139,40 +139,40 @@
 dpx:television.white_level
 dpx:user.id
 dpx:user.data
-</pre>
+</code></pre>
 
 <p>Look for any user data as the <code>dpx:user-data</code> image profile.</p>
 
 <p> To determine which properties are associated with your DPX image, use this command for example:</p>
 
-<pre>
+<pre><code>
 identify -verbose bluebells.dpx
-</pre>
+</code></pre>
 
 <p>To identify a particular property, try this:</p>
 
-<pre>
+<pre><code>
 identify -format "%[dpx:television.time.code]" bluebells.dpx
-</pre>
+</code></pre>
 
 <p>Finally, to set a property:</p>
 
-<pre>
+<pre><code>
 convert bluebells.dpx -define dpx:television.time.code=10:00:02:15 bluebells-001.dpx
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="settings"></a>DPX Settings</h2>
+<h2 class="magick-post-title"><a id="settings"></a>DPX Settings</h2>
 
 <p>Use <a href="command-line-options.html#set">-set</a> to specify the image or film gamma or black and white points.  For example use:
 </p>
 
-<pre>
+<pre><code>
 -set gamma 1.7
 -set film-gamma 0.6
 -set reference-black 95
 -set reference-white 685
 -set profile dpx:user.data
-</pre>
+</code></pre>
 
 </div>
   <footer class="magick-footer">
@@ -194,4 +194,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/opencl.html b/www/opencl.html
index 651dd6d..cdee1eb 100644
--- a/www/opencl.html
+++ b/www/opencl.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/opencl.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/opencl.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,23 +42,24 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">The following is a list of image operators that have been <a href="http://en.wikipedia.org/wiki/OpenCL">OpenCL</a>-accelerated:</p>
-<pre class="pre-scrollable">
+<pre class="pre-scrollable"><code>
 blur
 charcoal
 contrast
@@ -80,28 +80,28 @@
 resize
 sketch
 unsharp
-</pre>
+</code></pre>
 <p>When the OpenCL acceleration is invoked for the first time, ImageMagick conducts a series of tests to configure the OpenCL environment according to the system hardware; therefore, it is normal to experience a higher latency the first time you use an accelerated option.  The OpenCL kernels are embedded inside ImageMagick in source format.  During the initial setup, ImageMagick discovers all the available OpenCL devices and compiles the kernels for each of these targets.  ImageMagick also runs several performance tests internally to determine the preferred device to use.  The compiled kernel code and the performance test results are stored into the cache directory so that the data can be reused by subsequent invocations of the OpenCL path.  By default, the OpenCL cached data is stored in <code>$HOME/.cache/ImageMagick</code> on Linux and on MacOSX or in <code>%LOCALAPPDATA%\.cache\ImageMagick</code> on Windows.  To change the cache directory, set the IMAGEMAGICK_OPENCL_CACHE_DIR environment variable.  ImageMagick is able to detect hardware changes, driver updates, and new kernel sources and re-run the setup and the calibration test.  You can also force ImageMagick to re-run the process by removing the content from the cache directory.</p>
 <p>If ImageMagick includes OpenCL support, the OpenCL path is enable by default.  You can disable it, simply set the environment variable MAGICK_OCL_DEVICE to <code>OFF</code>.  You could also force the OpenCL path to use a particular class of devices by setting it to <code>GPU</code> or <code>CPU</code>.</p>
 <p>In addition to the environment variables just mentioned, ImageMagick provides a set of APIs that allow developers to gain a finer grain control of the OpenCL acceleration.  For example, use the InitImageMagickOpenCL) function to turn off OpenCL:</p>
-<pre>
+<pre><code>
 InitImageMagickOpenCL(MAGICK_OPENCL_OFF, NULL, NULL, exception); 
-</pre>
+</code></pre>
 <p>Use InitImageMagickOpenCL() to find out which OpenCL device are automagically selected by ImageMagick:</p>
-<pre>
+<pre><code>
 cl_device_id selectedDevice;  // OpenCL device used by ImageMagick
 InitImageMagickOpenCL(MAGICK_OPENCL_DEVICE_SELECT_AUTO, NULL, (void*)&amp;selectedDevice, exception);
-</pre>
+</code></pre>
 
 <p>Or you could request ImageMagick to use a specific OpenCL device:</p>
-<pre>
+<pre><code>
 cl_device_id myDevices[4];
 cl_uint numDevices;
 // Get all the available OpenCL devices from the runtime
 clGetDeviceIDs(myPlatform, CL_DEVICE_TYPE_ALL, 4, myDevices, &amp;numDevices);
 // ask ImageMagick to use the 3rd device
 InitImageMagickOpenCL(MAGICK_OPENCL_DEVICE_SELECT_USER, (void*)(myDevices+2), NULL, exception);
-</pre>
+</code></pre>
 </div>
   <footer class="magick-footer">
     <p><a href="support.html">Donate</a> •
@@ -122,4 +122,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/openmp.html b/www/openmp.html
index 6464021..c67d99c 100644
--- a/www/openmp.html
+++ b/www/openmp.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/openmp.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/openmp.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,33 +42,34 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">Many of ImageMagick's internal algorithms are threaded to take advantage of speed-ups offered by the multicore processor chips and <a href="http://www.openmp.org">OpenMP</a>. OpenMP, is an API specification for parallel programming. If your compiler supports OpenMP (e.g. gcc, Visual Studio 2005) directives, ImageMagick automatically includes support. To verify, look for the OpenMP feature of ImageMagick with this command:</p>
-<pre>
+<pre><code>
 -> identify -version
 Version: ImageMagick 7.0.3-2 2016-10-14 Q16 https://www.imagemagick.org
 Copyright: © 1999-2017 ImageMagick Studio LLC
 Features: OpenMP
-</pre>
+</code></pre>
 <p>With OpenMP enabled, most ImageMagick algorithms execute on all the cores on your system in parallel.  ImageMagick typically divides the work so that each thread processes four rows of pixels. As rows are completed, OpenMP assigns more chunks of pixel rows to each thread until the algorithm completes. For example, if you have a quad-core system, and attempt to resize an image, the resizing takes place on 4 cores (8 if hyperthreading is enabled).</p>
 <h4>The Perils of Parallel Execution</h4>
 <p>It can be difficult to predict behavior in a parallel environment. Performance might depend on a number of factors including the compiler, the version of the OpenMP library, the processor type, the number of cores, the amount of memory, whether hyperthreading is enabled, the mix of applications that are executing concurrently with ImageMagick, or the particular image-processing algorithm you utilize. The only way to be certain of the optimal performance, in terms of the number of threads, is to benchmark. ImageMagick includes progressive threading when benchmarking a command and returns the elapsed time and efficiency for one or more threads. This can help you identify how many threads are the most efficient in your environment. Here is an example benchmark for threads 1-8:</p>
 
-<pre>
+<pre><code>
 -> convert -bench 40 model.png -sharpen 0x1 null:
 Performance[1]: 40i 0.712ips 1.000e 14.000u 0:14.040
 Performance[2]: 40i 1.362ips 0.657e 14.550u 0:07.340
@@ -79,7 +79,7 @@
 Performance[6]: 40i 3.802ips 0.842e 15.280u 0:02.630
 Performance[7]: 40i 4.274ips 0.857e 15.540u 0:02.340
 Performance[8]: 40i 4.831ips 0.872e 15.680u 0:02.070
-</pre>
+</code></pre>
 <p>Better performance correlates with higher values of IPS (iterations-per-second).  In our example, 8 cores are optimal.  However, in certain cases it might be optimal to set the number of threads to 1 (e.g. <code>-limit thread 1</code>) or to disable OpenMP completely.  To disable this feature, add <code>--disable-openmp</code> to your configure script command line then rebuild and re-install ImageMagick.</p>
 </div>
   <footer class="magick-footer">
@@ -101,4 +101,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/perl-magick.html b/www/perl-magick.html
index ef2918f..3b0b9b2 100644
--- a/www/perl-magick.html
+++ b/www/perl-magick.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/perl-magick.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/perl-magick.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="perl-magick.html#installation">Installation</a> • <a href="perl-magick.html#overview">Overview</a> • <a href="perl-magick.html#example">Example Script</a> • <a href="perl-magick.html#read">Read or Write an Image</a> • <a href="perl-magick.html#manipulate">Manipulate an Image</a> • <a href="perl-magick.html#set-attribute">Set an Image Attribute</a> • <a href="perl-magick.html#get-attribute">Get an Image Attribute</a> • <a href="perl-magick.html#compare">Compare an Image to its Reconstruction</a> • <a href="perl-magick.html#montage">Create an Image Montage</a> • <a href="perl-magick.html#blobs">Working with Blobs</a> • <a href="perl-magick.html#direct-access">Direct-access to Image Pixels</a> • <a href="perl-magick.html#miscellaneous">Miscellaneous Methods</a> • <a href="perl-magick.html#exceptions">Handling Exceptions</a>• <a href="perl-magick.html#constants">Constant</a> </p>
 
@@ -66,45 +66,45 @@
 
 <p>You can try PerlMagick from your Web browser at the <a href="https://www.imagemagick.org/MagickStudio/scripts/MagickStudio.cgi">ImageMagick Studio</a>. Or, you can see <a href="examples.html">examples</a> of select PerlMagick functions.</p>
 
-<h2 class="magick-header"><a id="installation"></a>Installation</h2>
+<h2 class="magick-post-title"><a id="installation"></a>Installation</h2>
 
 <p><b>UNIX</b></p>
 
 <p>Is PerlMagick available from your system RPM repository?  For example, on our CentOS system, we install PerlMagick thusly:</p>
 
-<pre>
+<pre><code>
 yum install ImageMagick-perl
-</pre>
+</code></pre>
 
 <p>If not, you must install PerlMagick from the ImageMagick source distribution.  Download the latest <a href="https://www.imagemagick.org/download/ImageMagick.tar.gz">source</a> release.</p>
 
 <p>Unpack the distribution with this command:</p>
 
-<pre>
+<pre><code>
 tar xvzf ImageMagick.tar.gz
-</pre>
+</code></pre>
 
 <p>Next configure and compile ImageMagick:</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.5</span><span class='crtout'></span><span class="crtprompt"> </span><span class='crtin'>./configure -with-perl</span><span class='crtout'></span><span class="crtprompt"> </span><span class='crtin'>make</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>cd ImageMagick-7.0.6</span><span class='crtout'></span><span class="crtprompt"> </span><span class='crtin'>./configure -with-perl</span><span class='crtout'></span><span class="crtprompt"> </span><span class='crtin'>make</span></pre>
 <p>If ImageMagick / PerlMagick configured and compiled without complaint, you are ready to install it on your system.  Administrator privileges are required to install.  To install, type</p>
 
-<pre>
+<pre><code>
 sudo make install
-</pre>
+</code></pre>
 
 <p>You may need to configure the dynamic linker run-time bindings:</p>
 
-<pre>
+<pre><code>
 sudo ldconfig /usr/local/lib
-</pre>
+</code></pre>
 
 
 <p>Finally, verify the PerlMagick install worked properly, type</p>
 
-<pre>
+<pre><code>
 perl -MImage::Magick -le 'print Image::Magick->QuantumDepth'
-</pre>
+</code></pre>
 
 <p>Congratulations, you have a working ImageMagick distribution and you are ready to use PerlMagick to <a href="https://www.imagemagick.org/Usage/">convert, compose, or edit</a> your images.</p>
 
@@ -114,12 +114,12 @@
 
 <p>Next, type</p>
 
-<pre>
+<pre><code>
 cd PerlMagick
 perl Makefile.nt
 nmake
 nmake install
-</pre>
+</code></pre>
 
 <p>See the <a href="http://www.dylanbeattie.net/magick/">PerlMagick Windows HowTo</a> page for further installation instructions.</p>
 
@@ -127,76 +127,76 @@
 
 <p>To verify a correct installation, type</p>
 
-<pre>
+<pre><code>
 make test
-</pre>
+</code></pre>
 
 <p>Use <code>nmake test</code> under Windows. There are a few demonstration scripts available to exercise many of the functions PerlMagick can perform. Type</p>
 
-<pre>
+<pre><code>
 cd demo
 make
-</pre>
+</code></pre>
 
 <p>You are now ready to utilize the PerlMagick methods from within your Perl scripts.</p>
 
-<h2 class="magick-header"><a id="overview"></a>Overview</h2>
+<h2 class="magick-post-title"><a id="overview"></a>Overview</h2>
 
 <p>Any script that wants to use PerlMagick methods must first define the methods within its namespace and instantiate an image object. Do this with:</p>
 
-<pre>
+<pre><code>
 use Image::Magick;
 
 $image = Image::Magick-&gt;new;
-</pre>
+</code></pre>
 
 <p>PerlMagick is <var>quantum</var> aware.  You can request a specific quantum depth when you instantiate an image object:</p>
 
-<pre>
+<pre><code>
 use Image::Magick::Q16;
 
 $image = Image::Magick::Q16-&gt;new;
-</pre>
+</code></pre>
 
 <p>The new() method takes the same parameters as <a href="perl-magick.html#set-attribute">SetAttribute</a> . For example,</p>
 
-<pre>
+<pre><code>
 $image = Image::Magick-&gt;new(size=&gt;'384x256');
-</pre>
+</code></pre>
 
 <p>Next you will want to read an image or image sequence, manipulate it, and then display or write it. The input and output methods for PerlMagick are defined in <a href="perl-magick.html#read">Read or Write an Image</a>. See <a href="perl-magick.html#set-attribute">Set an Image Attribute</a> for methods that affect the way an image is read or written. Refer to <a href="perl-magick.html#manipulate">Manipulate an Image</a> for a list of methods to transform an image. <a href="perl-magick.html#get-attribute">Get an Image Attribute</a> describes how to retrieve an attribute for an image. Refer to <a href="perl-magick.html#montage">Create an Image Montage</a> for details about tiling your images as thumbnails on a background. Finally, some methods do not neatly fit into any of the categories just mentioned. Review <a href="perl-magick.html#misc">Miscellaneous Methods</a> for a list of these methods.</p>
 
 <p>Once you are finished with a PerlMagick object you should consider destroying it. Each image in an image sequence is stored in virtual memory. This can potentially add up to mebibytes of memory. Upon destroying a PerlMagick object, the memory is returned for use by other Perl methods. The recommended way to destroy an object is with <code>undef</code>:</p>
 
-<pre>
+<pre><code>
 undef $image;
-</pre>
+</code></pre>
 
 <p>To delete all the images but retain the <code>Image::Magick</code> object use</p>
 
-<pre>
+<pre><code>
 @$image = ();
-</pre>
+</code></pre>
 
 <p>and finally, to delete a single image from a multi-image sequence, use</p>
 
-<pre>
+<pre><code>
 undef $image-&gt;[$x];
-</pre>
+</code></pre>
 
 <p>The next section illustrates how to use various PerlMagick methods to manipulate an image sequence.</p>
 
 <p>Some of the PerlMagick methods require external programs such as <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a>. This may require an explicit path in your PATH environment variable to work properly. For example (in Unix),</p>
 
-<pre>
+<pre><code>
 $ENV{PATH}' . "='/../bin:/usr/bin:/usr/local/bin';
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="example"></a>Example Script</h2>
+<h2 class="magick-post-title"><a id="example"></a>Example Script</h2>
 
 <p>Here is an example script to get you started:</p>
 
-<pre>
+<pre><code>
 #!/usr/local/bin/perl
 use Image::Magick;<br />
 my($image, $x);<br />
@@ -207,11 +207,11 @@
 warn "$x" if "$x";<br />
 $x = $image-&gt;Write('x.png');
 warn "$x" if "$x";
-</pre>
+</code></pre>
 
 <p>The script reads three images, crops them, and writes a single image as a GIF animation sequence. In many cases you may want to access individual images of a sequence. The next example illustrates how this done:</p>
 
-<pre class="pre-scrollable">#!/usr/local/bin/perl
+<pre class="pre-scrollable"><code>#!/usr/local/bin/perl
 use Image::Magick;<br />
 my($image, $p, $q);<br />
 $image = new Image::Magick;
@@ -229,60 +229,60 @@
 $q = $p-&gt;Montage();
 undef $image;
 $q-&gt;Write('x.miff');
-</pre>
+</code></pre>
 
 <p>Suppose you want to start out with a 100 by 100 pixel white canvas with a red pixel in the center. Try</p>
 
-<pre>
+<pre><code>
 $image = Image::Magick-&gt;new;
 $image-&gt;Set(size=&gt;'100x100');
 $image-&gt;ReadImage('canvas:white');
 $image-&gt;Set('pixel[49,49]'=&gt;'red');
-</pre>
+</code></pre>
 
 <p>Here we reduce the intensity of the red component at (1,1) by half:</p>
 
-<pre>
+<pre><code>
 @pixels = $image-&gt;GetPixel(x=&gt;1,y=&gt;1);
 $pixels[0]*=0.5;
 $image-&gt;SetPixel(x=&gt;1,y=&gt;1,color=&gt;\@pixels);
-</pre>
+</code></pre>
 
 <p>Or suppose you want to convert your color image to grayscale:</p>
 
-<pre>
+<pre><code>
 $image-&gt;Quantize(colorspace=&gt;'gray');
-</pre>
+</code></pre>
 
 <p>Let's annotate an image with a Taipai TrueType font:</p>
 
-<pre>
+<pre><code>
 $text = 'Works like magick!';
 $image-&gt;Annotate(font=&gt;'kai.ttf', pointsize=&gt;40, fill=&gt;'green', text=&gt;$text);
-</pre>
+</code></pre>
 
 <p>Perhaps you want to extract all the pixel intensities from an image and write them to STDOUT:</p>
 
-<pre>
+<pre><code>
 @pixels = $image-&gt;GetPixels(map=&gt;'I', height=&gt;$height, width=&gt;$width, normalize=&gt;true);
 binmode STDOUT;
 print pack('B*',join('',@pixels));
-</pre>
+</code></pre>
 
 <p>Other clever things you can do with a PerlMagick objects include</p>
 
-<pre>
+<pre><code>
 $i = $#$p"+1";   # return the number of images associated with object p
 push(@$q, @$p);  # push the images from object p onto object q
 @$p = ();        # delete the images but not the object p
 $p-&gt;Convolve([1, 2, 1, 2, 4, 2, 1, 2, 1]);   # 3x3 Gaussian kernel
-</pre>
+</code></pre>
 
-  <h2 class="magick-header"><a id="read"></a>Read or Write an Image</h2>
+  <h2 class="magick-post-title"><a id="read"></a>Read or Write an Image</h2>
 
 <p>Use the methods listed below to either read, write, or display an image or image sequence:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
 <caption>Read or Write Methods</caption>
 <colgroup>
   <col width="20%" />
@@ -331,59 +331,59 @@
 
 <p>For convenience, methods Write(), Display(), and Animate() can take any parameter that <a href="perl-magick.html#set-attribute">SetAttribute</a> knows about. For example,</p>
 
-<pre>
+<pre><code>
 $image-&gt;Write(filename=&gt;'image.png', compression=&gt;'None');
-</pre>
+</code></pre>
 
 <p>Use <code>-</code> as the filename to method Read() to read from standard in or to method Write() to write to standard out:</p>
 
-<pre>
+<pre><code>
 binmode STDOUT;
 $image-&gt;Write('png:-');
-</pre>
+</code></pre>
 
 <p>To read an image in the GIF format from a PERL filehandle, use:</p>
 
-<pre>
+<pre><code>
 $image = Image::Magick-&gt;new;
 open(IMAGE, 'image.gif');
 $image-&gt;Read(file=&gt;\*IMAGE);
 close(IMAGE);
-</pre>
+</code></pre>
 
 <p>To write an image in the PNG format to a PERL filehandle, use:</p>
 
-<pre>
+<pre><code>
 $filename = "image.png";
 open(IMAGE, ">$filename");
 $image-&gt;Write(file=&gt;\*IMAGE, filename=&gt;$filename);
 close(IMAGE);
-</pre>
+</code></pre>
 
 <p>Note, reading from or writing to a Perl filehandle may fail under Windows due to different versions of the C-runtime libraries between ImageMagick and the ActiveState Perl distributions or if one of the DLL's is linked with the /MT option.  See <a href="http://msdn.microsoft.com/en-us/library/ms235460.aspx">Potential Errors Passing CRT Objects Across DLL Boundaries</a> for an explanation.</p>
 
 <p>If <code>%0Nd, %0No, or %0Nx</code> appears in the filename, it is interpreted as a printf format specification and the specification is replaced with the specified decimal, octal, or hexadecimal encoding of the scene number. For example,</p>
 
-<pre>
+<pre><code>
 image%03d.miff
-</pre>
+</code></pre>
 
 <p>converts files image000.miff, image001.miff, etc.</p>
 
 <p>You can optionally add <i>Image</i> to any method name. For example, ReadImage() is an alias for method Read().</p>
 
-<h2 class="magick-header"><a id="manipulate"></a>Manipulate an Image</h2>
+<h2 class="magick-post-title"><a id="manipulate"></a>Manipulate an Image</h2>
 
 <p>Once you create an image with, for example, method ReadImage() you may want to operate on it. Below is a list of all the image manipulations methods available to you with PerlMagick.  There are <a href="examples.html">examples</a> of select PerlMagick methods. Here is an example call to an image manipulation method:</p>
 
-<pre>
+<pre><code>
 $image-&gt;Crop(geometry=&gt;'100x100+10+20');
 $image-&gt;[$x]-&gt;Frame("100x200");
-</pre>
+</code></pre>
 
 <p>And here is a list of other image manipulation methods you can call:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
 <caption>Image Manipulation Methods</caption>
 <tbody>
   <tr>
@@ -1237,28 +1237,28 @@
 
 <p>You can specify <code>@filename</code> in both Annotate() and Draw(). This reads the text or graphic primitive instructions from a file on disk. For example,</p>
 
-<pre>
+<pre><code>
 image-&gt;Draw(fill=&gt;'red', primitive=&gt;'rectangle',
  points=&gt;'20,20 100,100  40,40 200,200  60,60 300,300');
-</pre>
+</code></pre>
 
 <p>Is equivalent to</p>
 
-<pre>
+<pre><code>
 $image-&gt;Draw(fill=&gt;'red', primitive=&gt;'@draw.txt');
-</pre>
+</code></pre>
 
 <p>Where <code>draw.txt</code> is a file on disk that contains this:</p>
 
-<pre>
+<pre><code>
 rectangle 20, 20 100, 100
 rectangle 40, 40 200, 200
 rectangle 60, 60 300, 300
-</pre>
+</code></pre>
 
 <p>The <i>text</i> parameter for methods, Annotate(), Comment(), Draw(), and Label() can include the image filename, type, width, height, or other image attribute by embedding these special format characters:</p>
 
-<pre class="pre-scrollable">%b   file size
+<pre class="pre-scrollable"><code>%b   file size
 %c   comment
 %d   directory
 %e   filename extension
@@ -1294,13 +1294,13 @@
 %%   a percent sign
 \n   newline
 \r   carriage return
-</pre>
+</code></pre>
 
 <p>For example,</p>
 
-<pre>
+<pre><code>
 text=&gt;"%m:%f %wx%h"
-</pre>
+</code></pre>
 
 <p>produces an annotation of <b>MIFF:bird.miff 512x480</b> for an image titled <b>bird.miff</b> and whose width is 512 and height is 480.</p>
 
@@ -1308,14 +1308,14 @@
 
 <p>Most of the attributes listed above have an analog in <a href="convert.html">convert</a>. See the documentation for a more detailed description of these attributes.</p>
 
-<h2 class="magick-header"><a id="set-attribute"></a>Set an Image Attribute</h2>
+<h2 class="magick-post-title"><a id="set-attribute"></a>Set an Image Attribute</h2>
 
 <p>Use method Set() to set an image attribute. For example,</p>
 
-<pre>
+<pre><code>
 $image-&gt;Set(dither=&gt;'True');
 $image-&gt;[$x]-&gt;Set(delay=&gt;3);
-</pre>
+</code></pre>
 
 <p>Where this example uses 'True' and this document says '{True, False}',
 you can use the case-insensitive strings 'True' and 'False', or you
@@ -1325,7 +1325,7 @@
 
 <p>And here is a list of all the image attributes you can set:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <caption>Image Attributes</caption>
   <tbody>
   <tr>
@@ -1722,18 +1722,18 @@
 <p>Most of the attributes listed above have an analog in
 <a href="convert.html">convert</a>. See the documentation for a more detailed description of these attributes.</p>
 
-<h2 class="magick-header"><a id="get-attribute"></a>Get an Image Attribute</h2>
+<h2 class="magick-post-title"><a id="get-attribute"></a>Get an Image Attribute</h2>
 
 <p>Use method Get() to get an image attribute. For example,</p>
 
-<pre>
+<pre><code>
 ($a, $b, $c) = $image-&gt;Get('colorspace', 'magick', 'adjoin');
 $width = $image-&gt;[3]-&gt;Get('columns');
-</pre>
+</code></pre>
 
 <p>In addition to all the attributes listed in <a href="perl-magick.html#set-attribute">Set an Image Attribute</a> , you can get these additional attributes:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <caption>Image Attributes</caption>
   <tbody>
   <tr>
@@ -1995,11 +1995,11 @@
 <p>Most of the attributes listed above have an analog in
 <a href="convert.html">convert</a>. See the documentation for a more detailed description of these attributes.</p>
 
-<h2 class="magick-header"><a id="compare"></a>Compare an Image to its Reconstruction</h2>
+<h2 class="magick-post-title"><a id="compare"></a>Compare an Image to its Reconstruction</h2>
 
 <p>Mathematically and visually annotate the difference between an image and its reconstruction with the Compare() method.  The method supports these parameters:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <caption>Compare Parameters</caption>
   <tbody>
   <tr>
@@ -2036,7 +2036,7 @@
 
 <p>In this example, we compare the ImageMagick logo to a sharpened reconstruction:</p>
 
-<pre>
+<pre><code>
 use Image::Magick;
 
 $logo=Image::Magick->New();
@@ -2047,21 +2047,21 @@
 $difference=$logo->Compare(image=>$sharp, metric=>'rmse');
 print $difference->Get('error'), "\n";
 $difference->Display();
-</pre>
+</code></pre>
 
 <p>In addition to the reported root mean squared error of around 0.024, a difference image is displayed so you can visually identify the difference between the images.</p>
 
-<h2 class="magick-header"><a id="montage"></a>Create an Image Montage</h2>
+<h2 class="magick-post-title"><a id="montage"></a>Create an Image Montage</h2>
 
 <p>Use method Montage() to create a composite image by combining several separate images. The images are tiled on the composite image with the name of the image optionally appearing just below the individual tile. For example,</p>
 
-<pre>
+<pre><code>
 $image-&gt;Montage(geometry=&gt;'160x160', tile=&gt;'2x2', texture=&gt;'granite:');
-</pre>
+</code></pre>
 
 <p>And here is a list of Montage() parameters you can set:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <caption>Montage Parameters</caption>
   <tbody>
   <tr>
@@ -2182,13 +2182,13 @@
 
 <p>Most of the attributes listed above have an analog in <a href="montage.html">montage</a>. See the documentation for a more detailed description of these attributes.</p>
 
-<h2 class="magick-header"><a id="blobs"></a>Working with Blobs</h2>
+<h2 class="magick-post-title"><a id="blobs"></a>Working with Blobs</h2>
 
 <p>A blob contains data that directly represent a particular image
 format in memory instead of on disk. PerlMagick supports
 blobs in any of these image <a href="formats.html">formats</a> and provides methods to convert a blob to or from a particular image format.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <caption>Blob Methods</caption>
   <tbody>
   <tr>
@@ -2216,27 +2216,27 @@
 
 <p>ImageToBlob() returns the image data in their respective formats. You can then print it, save it to an ODBC database, write it to a file, or pipe it to a display program:</p>
 
-<pre>
+<pre><code>
 @blobs = $image-&gt;ImageToBlob();
 open(DISPLAY,"| display -") || die;
 binmode DISPLAY;
 print DISPLAY $blobs[0];
 close DISPLAY;
-</pre>
+</code></pre>
 
 <p>Method BlobToImage() returns an image or image sequence converted from the supplied blob:</p>
 
-<pre>
+<pre><code>
 @blob=$db-&gt;GetImage();
 $image=Image::Magick-&gt;new(magick=&gt;'jpg');
 $image-&gt;BlobToImage(@blob);
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="direct-access"></a>Direct-access to Image Pixels</h2>
+<h2 class="magick-post-title"><a id="direct-access"></a>Direct-access to Image Pixels</h2>
 
 <p>Use these methods to obtain direct access to the image pixels:</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
 <caption>Direct-access to Image Pixels</caption>
 <tbody>
   <tr>
@@ -2278,66 +2278,66 @@
 </tbody>
 </table>
 
-<h2 class="magick-header"><a id="miscellaneous"></a>Miscellaneous Methods</h2>
+<h2 class="magick-post-title"><a id="miscellaneous"></a>Miscellaneous Methods</h2>
 
 <p>The Append() method append a set of images. For example,</p>
 
-<pre>
+<pre><code>
 $p = $image-&gt;Append(stack=&gt;{true,false});
-</pre>
+</code></pre>
 
 <p>appends all the images associated with object <code>$image</code>. By default, images are stacked left-to-right. Set <code>stack</code> to True to stack them top-to-bottom.</p>
 
 <p>The Clone() method copies a set of images. For example,</p>
 
-<pre>
+<pre><code>
 $q = $p-&gt;Clone();
-</pre>
+</code></pre>
 
 <p>copies all the images from object <code>$p</code> to <code>$q</code>. You can use this method for single or multi-image sequences.</p>
 
 <p>The ComplexImages() method performs complex mathematics on an image sequence. For example,</p>
 
-<pre>
+<pre><code>
 $p = $image-&gt;ComplexImages('conjugate');
-</pre>
+</code></pre>
 
 <p>The EvaluateImages() method applies an arithmetic, logical or relational expression to a set of images. For example,</p>
 
 
-<pre>
+<pre><code>
 $p = $image-&gt;EvaluateImages('mean');
-</pre>
+</code></pre>
 
 <p>averages all the images associated with object <code>$image</code>.</p>
 
 <p>The Features() method returns features for each channel in the image in each of four directions (horizontal, vertical, left and right diagonals) for the specified distance.  The features include the angular second momentum, contrast, correlation, sum of squares: variance, inverse difference moment, sum average, sum varience, sum entropy, entropy, difference variance, difference entropy, information measures of correlation 1, information measures of correlation 2, and maximum correlation coefficient.  Values in RGB, CMYK, RGBA, or CMYKA order (depending on the image type).</p>
 
-<pre>
+<pre><code>
 @features = $image-&gt;Features(1);
-</pre>
+</code></pre>
 
 <p>Finally, the Transform() method accepts a fully-qualified geometry specification for cropping or resizing one or more images.  For example,</p>
 
-<pre>
+<pre><code>
 $p = $images-&gt;Transform(crop=>'100x100+10+60');
-</pre>
+</code></pre>
 
 <p>The Flatten() method flattens a set of images and returns it. For example,</p>
 
-<pre>
+<pre><code>
 $p = $images-&gt;Flatten(background=&gt;'none');
 $p-&gt;Write('flatten.png');
-</pre>
+</code></pre>
 
 <p>The sequence of images is replaced by a single image created by composing each image after the first over the first image.</p>
 
 <p>The Fx() method applies a mathematical expression to a set of images and returns the results. For example,</p>
 
-<pre>
+<pre><code>
 $p = $image-&gt;Fx(expression=&gt;'(g+b)/2.0',channel=&gt;'red');
 $p-&gt;Write('fx.miff');
-</pre>
+</code></pre>
 
 <p>replaces the red channel with the average of the green and blue channels.</p>
 
@@ -2347,9 +2347,9 @@
 
 <p>The Morph() method morphs a set of images. Both the image pixels and size are linearly interpolated to give the appearance of a meta-morphosis from one image to the next:</p>
 
-<pre>
+<pre><code>
 $p = $image-&gt;Morph(frames=&gt;<i>integer</i>);
-</pre>
+</code></pre>
 
 <p>where <i>frames</i> is the number of in-between images to generate.  The default is 1.</p>
 
@@ -2357,46 +2357,46 @@
 
 <p>Method Mogrify() is a single entry point for the image manipulation methods (<a href="perl-magick.html#manipulate">Manipulate an Image</a>). The parameters are the name of a method followed by any parameters the method may require. For example, these calls are equivalent:</p>
 
-<pre>
+<pre><code>
 $image-&gt;Crop('340x256+0+0');
 $image-&gt;Mogrify('crop', '340x256+0+0');
-</pre>
+</code></pre>
 
 <p>Method MogrifyRegion() applies a transform to a region of the image. It is similar to Mogrify() but begins with the region geometry. For example, suppose you want to brighten a 100x100 region of your image at location (40, 50):</p>
 
-<pre>
+<pre><code>
 $image-&gt;MogrifyRegion('100x100+40+50', 'modulate', brightness=&gt;50);
-</pre>
+</code></pre>
 
 <p>Ping() is a convenience method that returns information about an image without having to read the image into memory. It returns the width, height, file size in bytes, and the file format of the image. You can specify more than one filename but only one filehandle:</p>
 
-<pre>
+<pre><code>
 ($width, $height, $size, $format) = $image-&gt;Ping('logo.png');
 ($width, $height, $size, $format) = $image-&gt;Ping(file=&gt;\*IMAGE);
 ($width, $height, $size, $format) = $image-&gt;Ping(blob=&gt;$blob);
-</pre>
+</code></pre>
 
 <p>This a more efficient and less memory intensive way to query if an image exists and what its characteristics are.</p>
 
 <p>Poly() builds a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs):</p>
 
-<pre>
+<pre><code>
 $p = $image-&gt;Poly([0.5,1.0,0.25,2.0,1.0,1.0]);
-</pre>
+</code></pre>
 
 <p>PreviewImage() tiles 9 thumbnails of the specified image with an image processing operation applied at varying strengths. This may be helpful pin-pointing an appropriate parameter for a particular image processing operation. Choose from these operations: <code>Rotate, Shear, Roll, Hue, Saturation, Brightness, Gamma, Spiff, Dull, Grayscale, Quantize, Despeckle, ReduceNoise, AddNoise, Sharpen, Blur, Threshold, EdgeDetect, Spread, Solarize, Shade, Raise, Segment, Swirl, Implode, Wave, OilPaint, CharcoalDrawing, JPEG</code>. Here is an example:</p>
 
-<pre>
+<pre><code>
 $preview = $image-&gt;Preview('Gamma');
 $preview-&gt;Display();
-</pre>
+</code></pre>
 
 <p>To have full control over text positioning you need font metric information. Use</p>
 
-<pre>
+<pre><code>
 ($x_ppem, $y_ppem, $ascender, $descender, $width, $height, $max_advance) =
   $image-&gt;QueryFontMetrics(<i>parameters</i>);
-</pre>
+</code></pre>
 
 <p>Where <i>parameters</i> is any parameter of the <a href="perl-magick.html#manipulate">Annotate</a> method. The return values are:</p>
 
@@ -2420,120 +2420,120 @@
 
 <p>Call QueryColor() with no parameters to return a list of known colors names or specify one or more color names to get these attributes: red, green, blue, and opacity value.</p>
 
-<pre>
+<pre><code>
 @colors = $image-&gt;QueryColor();
 ($red, $green, $blue, $opacity) = $image-&gt;QueryColor('cyan');
 ($red, $green, $blue, $opacity) = $image-&gt;QueryColor('#716bae');
-</pre>
+</code></pre>
 
 <p>QueryColorname() accepts a color value and returns its respective name or hex value;</p>
 
-<pre>
+<pre><code>
 $name = $image-&gt;QueryColorname('rgba(80,60,0,0)');
-</pre>
+</code></pre>
 
 <p>Call QueryFont() with no parameters to return a list of known fonts or specify one or more font names to get these attributes: font name, description, family, style, stretch, weight, encoding, foundry, format, metrics, and glyphs values.</p>
 
-<pre>
+<pre><code>
 @fonts = $image-&gt;QueryFont();
 $weight = ($image-&gt;QueryFont('Helvetica'))[5];
-</pre>
+</code></pre>
 
 <p>Call QueryFormat() with no parameters to return a list of known image formats or specify one or more format names to get these attributes: adjoin, blob support, raw, decoder, encoder, description, and module.</p>
 
-<pre>
+<pre><code>
 @formats = $image-&gt;QueryFormat();
 ($adjoin, $blob_support, $raw, $decoder, $encoder, $description, $module) =
   $image-&gt;QueryFormat('gif');
-</pre>
+</code></pre>
 
 <p>Call MagickToMime() with the image format name to get its MIME type such as <code>images/tiff</code> from <code>tif</code>.</p>
 
-<pre>
+<pre><code>
 $mime = $image-&gt;MagickToMime('tif');
-</pre>
+</code></pre>
 
 <p>Use RemoteCommand() to send a command to an already running <a href="display.html">display</a> or <a href="animate.html">animate</a> application. The only parameter is the name of the image file to display or animate.</p>
 
-<pre>
+<pre><code>
 $image-&gt;RemoteCommand('image.jpg');
-</pre>
+</code></pre>
 
 <p>The Smush() method smushes a set of images together. For example,</p>
 
-<pre>
+<pre><code>
 $p = $image-&gt;Smush(stack=&gt;{true,false},offset=&gt;<var>integer</var>);
-</pre>
+</code></pre>
 
 <p>smushes together all the images associated with object <code>$image</code>. By default, images are smushed left-to-right. Set <code>stack</code> to True to smushed them top-to-bottom.</p>
 
 <p>Statistics() returns the image statistics for each channel in the image. The returned values are an array of depth, minima, maxima, mean, standard deviation, kurtosis, skewness, and entropy values in RGB, CMYK, RGBA, or CMYKA order (depending on the image type).</p>
 
-<pre>
+<pre><code>
 @statistics = $image-&gt;Statistics();
-</pre>
+</code></pre>
 
 <p>Finally, the Transform() method accepts a fully-qualified geometry specification for cropping or resizing one or more images.  For example,</p>
 
-<pre>
+<pre><code>
 $p = $image-&gt;Transform(crop=&gt;'100x100+0+0');
-</pre>
+</code></pre>
 
 <p>You can optionally add <i>Image</i> to any method name above. For example, PingImage() is an alias for method Ping().</p>
 
-<h2 class="magick-header"><a id="exceptions"></a>Handling Exceptions</h2>
+<h2 class="magick-post-title"><a id="exceptions"></a>Handling Exceptions</h2>
 
 <p>All PerlMagick methods return an undefined string context upon success. If any problems occur, the error is returned as a string with an embedded numeric status code. A status code less than 400 is a warning. This means that the operation did not complete but was recoverable to some degree. A numeric code greater or equal to 400 is an error and indicates the operation failed completely. Here is how exceptions are returned for the different methods:</p>
 
 <p>Methods which return a number (e.g. Read(), Write()):</p>
 
-<pre>
+<pre><code>
 $x = $image-&gt;Read(...);
 warn "$x" if "$x";      # print the error message
 $x =~ /(\d+)/;
 print $1;               # print the error number
 print 0+$x;             # print the number of images read
-</pre>
+</code></pre>
 
 <p>Methods which operate on an image (e.g. Resize(), Crop()):</p>
 
-<pre>
+<pre><code>
 $x = $image-&gt;Crop(...);
 warn "$x" if "$x";      # print the error message
 $x =~ /(\d+)/;
 print $1;               # print the error number
-</pre>
+</code></pre>
 
 <p>Methods which return images (EvaluateSequence(), Montage(), Clone()) should be checked for errors this way:</p>
 
-<pre>
+<pre><code>
 $x = $image-&gt;Montage(...);
 warn "$x" if !ref($x);  # print the error message
 $x =~ /(\d+)/;
 print $1;               # print the error number
-</pre>
+</code></pre>
 
 <p>Here is an example error message:</p>
 
-<pre>
+<pre><code>
 Error 400: Memory allocation failed
-</pre>
+</code></pre>
 
 <p>Review the complete list of <a href="exception.html">error and warning codes</a>.</p>
 
 <p>The following illustrates how you can use a numeric status code:</p>
 
-<pre>
+<pre><code>
 $x = $image-&gt;Read('rose.png');
 $x =~ /(\d+)/;
 die "unable to continue" if ($1 == ResourceLimitError);
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="constants"></a>Constants</h2>
+<h2 class="magick-post-title"><a id="constants"></a>Constants</h2>
 
 <p>PerlMagick includes these constants:</p>
 
-<pre class="pre-scrollable">BlobError
+<pre class="pre-scrollable"><code>BlobError
 BlobWarning
 CacheError
 CacheWarning
@@ -2575,13 +2575,13 @@
 WarningException
 XServerError
 XServerWarning
-</pre>
+</code></pre>
 
 <p>You can access them like this:</p>
 
-<pre>
+<pre><code>
 Image::Magick-&gt;QuantumDepth
-</pre>
+</code></pre>
 
 </div>
   <footer class="magick-footer">
@@ -2603,4 +2603,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:59 -->
\ No newline at end of file
diff --git a/www/porting.html b/www/porting.html
index 8d230c0..ed6972b 100644
--- a/www/porting.html
+++ b/www/porting.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/porting.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/porting.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="text-center"><a href="porting.html#imv7">ImageMagick Version 7</a> • <a href="porting.html#hdri">High Dynamic Range Imaging</a> • <a href="porting.html#channels">Pixel Channels</a> • <a href="porting.html#alpha">Alpha</a> • <a href="porting.html#grayscale">Grayscale</a> • <a href="porting.html#mask">Masks</a> • <a href="porting.html#core">MagickCore API</a> • <a href="porting.html#headers">Header Files</a>  • <a href="porting.html#deprecate">Deprecated Features Removed</a> • <a href="porting.html#cli">Command-line Interface</a> • <a href="porting.html#summary">Version 7 Change Summary</a> </p>
@@ -80,10 +80,10 @@
 
 <p>Once ImageMagick version 7 is released, we will continue to support and enhance version 6 for a minimum of 10 years.</p>
 
-<h2 class="magick-header"><a id="hdri"></a>High Dynamic Range Imaging</h2>
+<h2 class="magick-post-title"><a id="hdri"></a>High Dynamic Range Imaging</h2>
 <p>ImageMagick version 7 enables <a href="high-dynamic-range.html">high dynamic range imaging</a> (HDRI) by default.  HDRI accurately represents the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows.  In addition, image processing results are more accurate.  The disadvantage is it requires more memory and may result in slower processing times.  If you see differences in the results of your version 6 command-line with version 7, it is likely due to HDRI.  You may need to add <code>-clamp</code> to your command-line to constrain pixels to the 0 .. QuantumRange range, or disable HDRI when you build ImageMagick version 7.  To disable HDRI (recommended for smart phone builds such as iOS or production sites where performance is a premium), simply add <code>--disable-hdri</code> to the configure script command line when building ImageMagick.</p>
 
-<h2 class="magick-header"><a id="channels"></a>Pixel Channels</h2>
+<h2 class="magick-post-title"><a id="channels"></a>Pixel Channels</h2>
 <p>A pixel is comprised of one or more color values, or <var>channels</var> (e.g. red pixel channel).</p>
 <p>Prior versions of ImageMagick (4-6), support 4 to 5 pixel channels (RGBA or CMYKA).  The first 4 channels are accessed with the PixelPacket data structure.   The structure includes 4 members of type Quantum (typically 16-bits) of red, green, blue, and opacity.  The black channel or colormap indexes are supported by a separate method and structure, IndexPacket.  As an example, here is a code snippet from ImageMagick version 6 that negates the color components (but not the alpha component) of the image pixels:</p>
 
@@ -204,7 +204,7 @@
 <h4>Pixel Accessors</h4>
 <p>You can access pixel channel as array elements (e.g. <code>pixel[1]</code>) or use convenience accessors to get or set pixel channels:</p>
 
-<pre>
+<pre><code>
 GetPixela()                  SetPixela()
 GetPixelAlpha()              SetPixelAlpha()
 GetPixelb()                  SetPixelb()
@@ -225,24 +225,24 @@
 GetPixelRed()                SetPixelRed()
 GetPixelYellow()             SetPixelYellow()
 GetPixelY()                  SetPixelY()
-</pre>
+</code></pre>
 
 <p>You can find these accessors defined in the header file, <code>MagickCore/pixel-accessor.h</code></p>
 
 <h4>Pixel Traits</h4>
 <p>Each pixel channel includes one or more of these traits:</p>
-<dl class="dl-horizontal">
-<dt>Undefined</dt>
-<dd>no traits associated with this pixel channel</dd>
-<dt>Copy</dt>
-<dd>do not update this pixel channel, just copy it</dd>
-<dt>Update</dt>
-<dd>update this pixel channel</dd>
-<dt>Blend</dt>
-<dd>blend this pixel channel with the alpha mask if it's enabled</dd>
+<dl class="row">
+<dt class="col-md-4">Undefined</dt>
+<dd class="col-md-8">no traits associated with this pixel channel</dd>
+<dt class="col-md-4">Copy</dt>
+<dd class="col-md-8">do not update this pixel channel, just copy it</dd>
+<dt class="col-md-4">Update</dt>
+<dd class="col-md-8">update this pixel channel</dd>
+<dt class="col-md-4">Blend</dt>
+<dd class="col-md-8">blend this pixel channel with the alpha mask if it's enabled</dd>
 </dl>
 <p>We provide these methods to set and get pixel traits:</p>
-<pre>
+<pre><code>
 GetPixelAlphaTraits()    SetPixelAlphaTraits()
 GetPixelBlackTraits()    SetPixelBlackTraits()
 GetPixelBlueTraits()     SetPixelBlueTraits()
@@ -256,66 +256,66 @@
 GetPixelRedTraits()      SetPixelRedTraits()
 GetPixelYellowTraits()   SetPixelYellowTraits()
 GetPixelYTraits()        SetPixelYTraits()
-</pre>
+</code></pre>
 <p>For convenience you can set the active trait for a set of pixel channels with a channel mask and this method:</p>
-<pre>
+<pre><code>
 SetImageChannelMask()
-</pre>
+</code></pre>
 
 <p>Previously MagickCore methods had channel analogs, for example, NegateImage() and NegateImageChannels().  The channel analog methods are no longer necessary because the pixel channel traits specify whether to act on a particular pixel channel or whether to blend with the alpha mask.  For example, instead of</p>
-<pre>
+<pre><code>
 NegateImageChannel(image,channel);
-</pre>
+</code></pre>
 <p>we use:</p>
-<pre>
+<pre><code>
 channel_mask=SetImageChannelMask(image,channel);
 NegateImage(image,exception);
 (void) SetImageChannelMask(image,channel_mask);
-</pre>
+</code></pre>
 
 <h4>Pixel User Channels</h4>
 <p>In version 7, we introduce pixel user channels.  Traditionally we utilize 4 channels, red, green, blue, and alpha.   For CMYK we also have a black channel.  User channels are designed to contain whatever additional channel information that makes sense for your application.  Some examples include extra channels in TIFF or PSD images or perhaps you require a channel with infrared information for the pixel.  You can associate traits with the user channels so that they when they are acted upon by an image processing algorithm (e.g. blur) the pixels are copied, acted upon by the algorithm, or even blended with the alpha channel if that makes sense.</p>
 <h4>Pixel Metacontent</h4>
 <p>In version 7, we introduce pixel metacontent.  Metacontent is content about content. So rather than being the content itself, it's something that describes or is associated with the content.  Here the content is a pixel.  The pixel metacontent is for your exclusive use (internally the data is just copied, it is not modified) and is accessed with these MagickCore API methods:</p>
-<pre>
+<pre><code>
 SetImageMetacontentExtent()
 GetImageMetacontentExtent()
 GetVirtualMetacontent()
 GetAuthenticMetacontent()
 GetCacheViewAuthenticMetacontent()
 GetCacheViewVirtualMetacontent()
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="alpha"></a>Alpha</h2>
+<h2 class="magick-post-title"><a id="alpha"></a>Alpha</h2>
 <p>We support alpha now, previously opacity.  With alpha, a value of <kbd>0</kbd> means that the pixel does not have any coverage information and is transparent; i.e. there was no color contribution from any geometry because the geometry did not overlap this pixel. A value of <code>QuantumRange</code> means that the pixel is opaque because the geometry completely overlapped the pixel. As a consequence, in version 7, the PixelInfo structure member alpha has replaced the previous opacity member.  Another consequence is the alpha part of a sRGB value in hexadecimal notation is now reversed (e.g. #0000 is fully transparent).</p>
-<h2 class="magick-header"><a id="colorspace"></a>Colorspace</h2>
+<h2 class="magick-post-title"><a id="colorspace"></a>Colorspace</h2>
 <p>The <code>Rec601Luma</code> and <code>Rec709Luma</code> colorspaces are no longer supported.  Instead, specify the <code>gray</code> colorspace and choose from these intensity options:</p>
-<pre>
+<pre><code>
 Rec601Luma
 Rec601Luminance
 Rec709Luma
 Rec709Luminance
-</pre>
+</code></pre>
 <p>For example,</p>
-<pre>
+<pre><code>
 convert myImage.png -intensity Rec709Luminance -colorspace gray myImage.jpg
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="grayscale"></a>Grayscale</h2>
+<h2 class="magick-post-title"><a id="grayscale"></a>Grayscale</h2>
 <p>Previously, grayscale images were Rec601Luminance and consumed 4 channels: red, green, blue, and alpha.  With version 7, grayscale consumes only 1 channel requiring far less resources as a result.</p>
 
-<h2 class="magick-header"><a id="mask"></a>Masks</h2>
+<h2 class="magick-post-title"><a id="mask"></a>Masks</h2>
 <p>Version 7 supports masks for most image operators.  Black pixels in a read mask ignores corresponding pixel in an image whereas black pixels in a write mask protects the corresponding pixel in the image.  From the command-line, you can associate a mask with an image with the <code>-read-mask</code> and <code>-write-mask</code> options.  This polarity is the reverse of masks in version 6 of ImageMagick.  For convenience, we continue to support the <code>-mask</code> option in version 7 to match the behavior of version 6.</p>
 <p>In this example, we compute the distortion of a masked reconstructed image:</p>
-<pre>
+<pre><code>
 compare -metric rmse -read-mask hat_mask.png hat.png wizard.png difference.png
-</pre>
+</code></pre>
 <p>Here we protect certain pixels from change:</p>
-<pre>
+<pre><code>
 convert rose: -write-mask rose_bg_mask.png -modulate 110,100,33.3  +mask rose_blue.png
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="core"></a>MagickCore API</h2>
+<h2 class="magick-post-title"><a id="core"></a>MagickCore API</h2>
 <p>Here are a list of changes to the MagickCore API:</p>
 <ul>
 <li>Almost all image processing algorithms are now channel aware.</li>
@@ -329,29 +329,29 @@
 <li>The ChannelMoments structure member <code>I</code> is now <code>invariant</code>.  <code>I</code> conflicts with the <code>complex.h</code> header.</li>
 <li>We added a length parameter to FormatMagickSize() to permit variable length buffers.</li>
 </ul>
-<h2 class="magick-header"><a id="core"></a>MagickWand API</h2>
+<h2 class="magick-post-title"><a id="core"></a>MagickWand API</h2>
 <p>Here are a list of changes to the MagickWand API:</p>
 <ul>
 <li>The DrawMatte() method is now called DrawAlpha().</li>
 <li>The MagickSetImageBias() and MagickSetImageClipMask() methods are no longer supported.</li>
 </ul>
-<h2 class="magick-header"><a id="headers"></a>Header Files</h2>
+<h2 class="magick-post-title"><a id="headers"></a>Header Files</h2>
 <p>Prior versions of ImageMagick (4-6) reference the ImageMagick header files as <code>magick/</code> and <code>wand/</code>.  ImageMagick 7 instead uses <code>MagickCore/</code> and <code>MagickWand/</code> respectively.  For example,</p>
-<pre><code>#include &lt;MagickCore/MagickCore.h>
-#include &lt;MagickWand/MagickWand.h></code></pre>
+<pre><code><code>#include &lt;MagickCore/MagickCore.h>
+#include &lt;MagickWand/MagickWand.h></code></code></pre>
 
-<h2 class="magick-header"><a id="deprecate"></a>Deprecated Features Removed</h2>
+<h2 class="magick-post-title"><a id="deprecate"></a>Deprecated Features Removed</h2>
 <p>All deprecated features from ImageMagick version 6 are removed in version 7.  These include the <code>Magick-config</code> and <code>Wand-config</code> configuration utilities.  Instead use:</p>
 
-<pre>MagickCore-config
+<pre><code>MagickCore-config
 MagickWand-config
-</pre>
+</code></pre>
 <p>The FilterImage() method has been removed.  Use ConvolveImage() instead.</p>
 
 <p>In addition, all deprecated <a href="http://magick.imagemagick.org/api/deprecate.html">MagickCore</a> and <a href="http://magick.imagemagick.org/api/magick-deprecate.html">MagickWand</a> methods are no longer available in version 7.</p>
 
 
-<h2 class="magick-header"><a id="cli"></a>Shell API or Command-line Interface</h2>
+<h2 class="magick-post-title"><a id="cli"></a>Shell API or Command-line Interface</h2>
 
 <p>As mentioned the primary focus of the changes to the Shell API or Command
 Line Interface is the abstraction so that not only can <var>options</var> be
@@ -397,16 +397,16 @@
 
 <h3>Command Changes</h3>
 <p>Here are a list of changes to the ImageMagick commands:</p>
-<dl class="dl-horizontal">
-<dt>magick</dt>
-<dd>The "<code>magick</code>" command is the new primary command of the Shell
+<dl class="row">
+<dt class="col-md-4">magick</dt>
+<dd class="col-md-8">The "<code>magick</code>" command is the new primary command of the Shell
     API, replacing the old "<code>convert</code>" command. This allows you to
     create a 'magick script' of the form  "<code>#!/path/to/command/magick
     -script</code>", or pipe options into a command "<code>magick -script
     -</code>, as abackground process. </dd>
 
-<dt>magick-script</dt>
-<dd>This the same as "<code>magick</code>", (only command name is different)
+<dt class="col-md-4">magick-script</dt>
+<dd class="col-md-8">This the same as "<code>magick</code>", (only command name is different)
     but which has an implicit "<code>-script</code>" option.  This allows you to
     use it in an "<code>env</code>" style script form.  That is a magick script
     starts with the 'she-bang' line of "<code>#!/usr/bin/env
@@ -414,27 +414,27 @@
     on the users command "<code>PATH</code>".  This is required to get around
     a "one argument she-bang bug" that is common on most UNIX systems
     (including Linux, but not MacOSX).</dd>
-<dt>animate, compare, composite, conjure, convert, display, identify, import, mogrify, montage, stream</dt>
-<dd>To reduce the footprint of the command-line utilities, these utilities are symbolic links to the <code>magick</code> utility.  You can also invoke them from the <code>magick</code> utility, for example, use <code>magick convert logo: logo.png</code> to invoke the <code>convert</code> utility.
+<dt class="col-md-4">animate, compare, composite, conjure, convert, display, identify, import, mogrify, montage, stream</dt>
+<dd class="col-md-8">To reduce the footprint of the command-line utilities, these utilities are symbolic links to the <code>magick</code> utility.  You can also invoke them from the <code>magick</code> utility, for example, use <code>magick convert logo: logo.png</code> to invoke the <code>convert</code> utility.
 </dd></dl>
 
 <h3>Behavioral Changes</h3>
 <p>Image settings are applied to each image on the command line.  To associate a setting with a particular image, use parenthesis to remove ambiguity.  In this example we assign a unique page offset to each image:</p>
-<pre>
+<pre><code>
 convert \( -page +10+20 first.png \) \( -page +100+200 second.png \) ...
-</pre>
+</code></pre>
 
 <p>By default, image operations such as convolution blends alpha with each channel.  To convolve each channel independently, deactivate the alpha channel as follows:</p>
-<pre>
+<pre><code>
 convert ... -alpha discrete -blur 0x1 ...
-</pre>
+</code></pre>
 <p>To remove the alpha values from your image, use <code>-alpha off</code>.</p>
 <p>Some options have changed in ImageMagick version 7.  These include:</p>
 <dl>
-<dt>-channel</dt>
-<dd>the default is to update the RGBA channels, previously, in IMv6, the default was RGB.  If you get results that differ from IMv6, you may need to specify <code>-channel RGB</code> on your command line (e.g. -level-colors option).</dd>
-<dt>+combine</dt>
-<dd>This option now requires an argument, the image colorspace (e.g. +combine sRGB).</dd>
+<dt class="col-md-4">-channel</dt>
+<dd class="col-md-8">the default is to update the RGBA channels, previously, in IMv6, the default was RGB.  If you get results that differ from IMv6, you may need to specify <code>-channel RGB</code> on your command line (e.g. -level-colors option).</dd>
+<dt class="col-md-4">+combine</dt>
+<dd class="col-md-8">This option now requires an argument, the image colorspace (e.g. +combine sRGB).</dd>
 </dl>
 
 <h3>New Options</h3>
@@ -442,132 +442,132 @@
 to the "<code>magick</code>" command, or to use in "<code>magick</code>"
 scripts.</p>
 
-<dl class="dl-horizontal">
-<dt>{ ... }</dt>
-<dd>Save (and restore) the current image settings (internally known as the
+<dl class="row">
+<dt class="col-md-4">{ ... }</dt>
+<dd class="col-md-8">Save (and restore) the current image settings (internally known as the
     "image_info" structure).  This is automatically done with parenthesis (EG:
     '<code>(</code>' and '<code>)</code>') is "<code>-regard-parenthesis</code>" has
     been set, just as in IMv6.  Caution is advised to prevent un-balanced
     braces errors.</dd>
 
-<dt>--</dt>
-<dd>End of options, to be used in IMv7 "<code>mogrify</code>" command to
+<dt class="col-md-4">--</dt>
+<dd class="col-md-8">End of options, to be used in IMv7 "<code>mogrify</code>" command to
     explicitly separate the operations to be applied and the images that
     are to be processed 'in-place'.  (not yet implemented).  However if
     not provided, "<code>-read</code>" can still be used to differentiate
     secondary image reads (for use in things like alpha composition) from
     the 'in-place' image being processed. </dd>
 
-<dd>In other commands (such as "magick") it is equivalent to a explicit
+<dd class="col-md-8">In other commands (such as "magick") it is equivalent to a explicit
     "<code>-read</code>" (see below) of the next option as a image (as it was in
     IMv6).  </dd>
 
-<dt>-alpha discrete</dt>
-<dd>treat the alpha channel independently (do not blend).</dd>
+<dt class="col-md-4">-alpha discrete</dt>
+<dd class="col-md-8">treat the alpha channel independently (do not blend).</dd>
 
-<dt>-channel-fx <var>expression</var> </dt>
-<dd>
+<dt class="col-md-4">-channel-fx <var>expression</var> </dt>
+<dd class="col-md-8">
 <p>exchange, extract, or copy one or more image channels.</p>
 
 <p>The expression consists of one or more channels, either mnemonic or numeric (e.g. red or 0, green or 1, etc.), separated by certain operation symbols as follows:</p>
 
-<pre>
+<pre><code>
 &lt;=&gt;  exchange two channels (e.g. red&lt;=&gt;blue)
 =&gt;   copy one channel to another channel (e.g. red=&gt;green)
 =    assign a constant value to a channel (e.g. red=50%)
 ,    write new image with channels in the specified order (e.g. red, green)
 ;    add a new output image for the next set of channel operations (e.g. red; green; blue)
 |    move to the next input image for the source of channel data (e.g. | gray=>alpha)
-</pre>
+</code></pre>
 
 <p>For example, to create 3 grayscale images from the red, green, and blue channels of an image, use:</p>
 
-<pre>
+<pre><code>
 -channel-fx "red; green; blue"
-</pre>
+</code></pre>
 
 <p>A channel without an operation symbol implies separate (i.e, semicolon).</p>
 
 <p>Here we take an sRGB image and a grayscale image and inject the grayscale image into the alpha channel:</p>
-<pre>
+<pre><code>
 convert wizard.png mask.pgm -channel-fx '| gray=>alpha' wizard-alpha.png
-</pre>
+</code></pre>
 <p>Use a similar command to define a read mask:</p>
-<pre>
+<pre><code>
 convert wizard.png mask.pgm -channel-fx '| gray=>read-mask' wizard-mask.png
-</pre>
+</code></pre>
 
 <p>Add <code>-debug pixel</code> prior to the <code>-channel-fx</code> option to track the channel morphology.</p>
 
 </dd>
 
-<dt>-exit</dt>
-<dd>Stop processing at this point. No further options will be processed after
+<dt class="col-md-4">-exit</dt>
+<dd class="col-md-8">Stop processing at this point. No further options will be processed after
     this option. Can be used in a script to force the "<code>magick</code>"
     command to exit, without actually closing the pipeline that it is
     processing options from. </dd>
 
-<dd>May also be used as a 'final' option on the "<code>magick</code>" command
+<dd class="col-md-8">May also be used as a 'final' option on the "<code>magick</code>" command
     line, instead of a implicit output image, to completely prevent any image
     write. ASIDE: even the "<code>NULL:</code>" coder requires at least one
     image, for it to 'not write'! This option does not require any images at
     all. </dd>
 
-<dt>-read {image}</dt>
-<dd>Explicit read of an image, rather than an implicit read.  This allows you
+<dt class="col-md-4">-read {image}</dt>
+<dd class="col-md-8">Explicit read of an image, rather than an implicit read.  This allows you
     to read from filenames that start with an 'option' character, and which
     otherwise could be mistaken as an option (unknown or otherwise). This will
     eventually be used in "<code>mogrify</code>" to allow the reading of
     secondary images, and allow the use of image list operations within that
     command. </dd>
 
-<dt>-read-mask</dt>
-<dd>prevent updates to image pixels specified by the mask</dd>
+<dt class="col-md-4">-read-mask</dt>
+<dd class="col-md-8">prevent updates to image pixels specified by the mask</dd>
 
-<dt>-region</dt>
-<dd>supported in ImageMagick 7.0.2-6 and above</dd>
+<dt class="col-md-4">-region</dt>
+<dd class="col-md-8">supported in ImageMagick 7.0.2-6 and above</dd>
 
-<dt>-script {file}</dt>
-<dd>In "<code>magick</code>", stop the processing of command line arguments as
+<dt class="col-md-4">-script {file}</dt>
+<dd class="col-md-8">In "<code>magick</code>", stop the processing of command line arguments as
     image operations, and read all further options from the given file or
     pipeline.</dd>
-<dt>-write-mask</dt>
-<dd>prevent pixels from being written.</dd>
+<dt class="col-md-4">-write-mask</dt>
+<dd class="col-md-8">prevent pixels from being written.</dd>
 
 </dl>
 
 <h3>Changed Options</h3>
 <p>These options are known to have changed, in some way.</p>
-<dl class="dl-horizontal">
-<dt>-bias</dt>
-<dd>The option is no longer recognized.  Use <code>-define convolve:bias=<var>value</var></code> instead.</dd>
-<dt>-draw</dt>
-<dd>The <code>matte</code> primitive is now <code>alpha</code> (e.g. <code>-draw 'alpha 0,0 floodfill'</code>).</dd>
-<dt>-negate</dt>
-<dd>currently negates all channels, including alpha if present.  As such you
+<dl class="row">
+<dt class="col-md-4">-bias</dt>
+<dd class="col-md-8">The option is no longer recognized.  Use <code>-define convolve:bias=<var>value</var></code> instead.</dd>
+<dt class="col-md-4">-draw</dt>
+<dd class="col-md-8">The <code>matte</code> primitive is now <code>alpha</code> (e.g. <code>-draw 'alpha 0,0 floodfill'</code>).</dd>
+<dt class="col-md-4">-negate</dt>
+<dd class="col-md-8">currently negates all channels, including alpha if present.  As such you
     may need to use the -channel option to prevent alpha negation.  </dd>
 </dl>
 
 <h3>Deprecated warning given, but will work (for now)</h3>
-<dl class="dl-horizontal">
-<dt>-affine</dt>
-<dd>Replaced by <code>-draw "affine ..."</code>. (see transform)</dd>
-<dt>-average</dt>
-<dd>Replaced by <code>-evaluate-sequence Mean</code>.</dd>
-<dt>-box</dt>
-<dd>Replaced by <code>-undercolor</code>.</dd>
-<dt>-deconstruct</dt>
-<dd>Replaced by <code>-layers CompareAny</code>.</dd>
-<dt>-gaussian</dt>
-<dd>Replaced by <code>-gaussian-blur</code>.</dd>
-<dt>-/+map</dt>
-<dd>Replaced by <code>-/+remap</code>.</dd>
-<dt>-/+mask</dt>
-<dd>Replaced by <code>-/+read-mask</code>, <code>-/+write-mask</code>.</dd>
-<dt>-/+matte</dt>
-<dd>Replaced by <code>-alpha Set/Off</code>.</dd>
-<dt>-transform</dt>
-<dd>Replaced by <code>-distort Affine "..."</code>.</dd>
+<dl class="row">
+<dt class="col-md-4">-affine</dt>
+<dd class="col-md-8">Replaced by <code>-draw "affine ..."</code>. (see transform)</dd>
+<dt class="col-md-4">-average</dt>
+<dd class="col-md-8">Replaced by <code>-evaluate-sequence Mean</code>.</dd>
+<dt class="col-md-4">-box</dt>
+<dd class="col-md-8">Replaced by <code>-undercolor</code>.</dd>
+<dt class="col-md-4">-deconstruct</dt>
+<dd class="col-md-8">Replaced by <code>-layers CompareAny</code>.</dd>
+<dt class="col-md-4">-gaussian</dt>
+<dd class="col-md-8">Replaced by <code>-gaussian-blur</code>.</dd>
+<dt class="col-md-4">-/+map</dt>
+<dd class="col-md-8">Replaced by <code>-/+remap</code>.</dd>
+<dt class="col-md-4">-/+mask</dt>
+<dd class="col-md-8">Replaced by <code>-/+read-mask</code>, <code>-/+write-mask</code>.</dd>
+<dt class="col-md-4">-/+matte</dt>
+<dd class="col-md-8">Replaced by <code>-alpha Set/Off</code>.</dd>
+<dt class="col-md-4">-transform</dt>
+<dd class="col-md-8">Replaced by <code>-distort Affine "..."</code>.</dd>
 </dl>
 
 <h3>Deprecated warning given, and ignored (for now)</h3>
@@ -575,32 +575,32 @@
 deprecated, and does nothing. It does not even have associated code.  For
 example "+annotate", "+resize", "+clut", and "+draw" .</p>
 
-<dl class="dl-horizontal">
-<dt>-affinity</dt>
-<dd>Replaced by <code>-remap</code>.</dd>
-<dt>-maximum</dt>
-<dd>Replaced by <code>-evaluate-sequence Max</code>.</dd>
-<dt>-median</dt>
-<dd>Replaced by <code>-evaluate-sequence Median</code>.</dd>
-<dt>-minimum</dt>
-<dd>Replaced by <code>-evaluate-sequence Min</code>.</dd>
-<dt>-recolor</dt>
-<dd>Replaced by <code>-color-matrix</code>.</dd>
+<dl class="row">
+<dt class="col-md-4">-affinity</dt>
+<dd class="col-md-8">Replaced by <code>-remap</code>.</dd>
+<dt class="col-md-4">-maximum</dt>
+<dd class="col-md-8">Replaced by <code>-evaluate-sequence Max</code>.</dd>
+<dt class="col-md-4">-median</dt>
+<dd class="col-md-8">Replaced by <code>-evaluate-sequence Median</code>.</dd>
+<dt class="col-md-4">-minimum</dt>
+<dd class="col-md-8">Replaced by <code>-evaluate-sequence Min</code>.</dd>
+<dt class="col-md-4">-recolor</dt>
+<dd class="col-md-8">Replaced by <code>-color-matrix</code>.</dd>
 </dl>
 
 <h3>Removed / Replaced Options ("no such option" error and abort)</h3>
 
-<dl class="dl-horizontal">
-<dt>-interpolate filter</dt>
-<dd>remove slow and useless interpolation method</dd>
-<dt>-origin</dt>
-<dd>old option, unknown meaning.</dd>
-<dt>-pen</dt>
-<dd>Replaced by <code>-fill</code>.</dd>
-<dt>-passphrase</dt>
-<dd>old option, unknown meaning</dd>
+<dl class="row">
+<dt class="col-md-4">-interpolate filter</dt>
+<dd class="col-md-8">remove slow and useless interpolation method</dd>
+<dt class="col-md-4">-origin</dt>
+<dd class="col-md-8">old option, unknown meaning.</dd>
+<dt class="col-md-4">-pen</dt>
+<dd class="col-md-8">Replaced by <code>-fill</code>.</dd>
+<dt class="col-md-4">-passphrase</dt>
+<dd class="col-md-8">old option, unknown meaning</dd>
 </dl>
-<h2 class="magick-header"><a id="summary"></a>Version 7 Change Summary</h2>
+<h2 class="magick-post-title"><a id="summary"></a>Version 7 Change Summary</h2>
 <p>Changes from ImageMagick version 6 to version 7 are summarized here:</p>
 <h4>High Dynamic Range Imaging</h4>
 <ul>
@@ -664,4 +664,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/quantize.html b/www/quantize.html
index ca3e5ae..f82c32e 100644
--- a/www/quantize.html
+++ b/www/quantize.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="quantize.html"/>
-  <link rel="icon" href="https://www.imagemagick.org/images/wand.png"/>
-  <link rel="shortcut icon" href="https://www.imagemagick.org/images/wand.ico"/>
+  <link rel="canonical" href="quantize.html" />
+  <link rel="icon" href="https://www.imagemagick.org/images/wand.png" />
+  <link rel="shortcut icon" href="https://www.imagemagick.org/images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="https://www.imagemagick.org/css/magick.html"/>
+  <link rel="stylesheet" href="https://www.imagemagick.org/css/magick.html" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="https://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,25 +42,26 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="https://www.imagemagick.org/index.html">Home</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/download.html">Download</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/resources.html">Resources</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="https://www.imagemagick.org/index.html">Home</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/download.html">Download</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/command-line-tools.html">Tools</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/resources.html">Resources</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="quantize.html#describe">Algorithm Description</a> • <a href="quantize.html#measure">Measuring Color Reduction Error</a></p>
 
 <p class="lead magick-description">This document describes how ImageMagick performs color reduction on an image. To fully understand what follows, you should have a knowledge of basic imaging techniques and the tree data structure and terminology.</p>
 
-<h2 class="magick-header"><a id="describe"></a>Algorithm Description</h2>
+<h2 class="magick-post-title"><a id="describe"></a>Algorithm Description</h2>
 
 <p>For purposes of color allocation, an image is a set of <var>n</var> pixels, where each pixel is a point in RGB space. RGB space is a 3-dimensional vector space, and each pixel, <var>p(i)</var>, is defined by an ordered triple of red, green, and blue coordinates, (<var>r(i)</var>, <var>g(i)</var>, <var>b(i)</var>).</p>
 
@@ -85,14 +85,14 @@
 
 <p>Classification begins by initializing a color description tree of sufficient depth to represent each possible input color in a leaf. However, it is impractical to generate a fully-formed color description tree in the classification phase for realistic values of <var>Cmax</var>. If color components in the input image are quantized to <var>k</var>-bit precision, so that <var>Cmax</var> = <var>2^k-1</var>, the tree would need <var>k</var> levels below the root node to allow representing each possible input color in a leaf.  This becomes prohibitive because the tree's total number of nodes:</p>
 
-<pre>
+<pre><code>
 total nodes = 1+Sum(8^i), i=1,k
 
 For k=8,
 nodes = 1 + (8^1+8^2+....+8^8)
       = 1 + 8(8^8 - 1)/(8 - 1)
       = 19,173,961
-</pre>
+</code></pre>
 
 <p>Therefore, to avoid building a fully populated tree, ImageMagick:</p>
 
@@ -101,37 +101,37 @@
   <li>chooses a maximum depth for the tree as a function of the desired number of colors in the output image (currently the <var>base-two</var> logarithm of <var>Cmax</var>).</li>
 </ol>
 
-<pre>
+<pre><code>
 For Cmax=255,
 maximum tree depth = log<sub>2</sub>(256)
                    = 8
-</pre>
+</code></pre>
 
 <p>A tree of this depth generally allows the best representation of the source image with the fastest computational speed and the least amount of memory. However, the default depth is inappropriate for some images. Therefore, the caller can request a specific tree depth.</p>
 
 <p>For each pixel in the input image, classification scans downward from the root of the color description tree. At each level of the tree, it identifies the single node which represents a cube in RGB space containing the pixels' color. It updates the following data for each such node:</p>
 
-<dl class="dl-horizontal">
-<dt>n1</dt>
-	<dd>number of pixels whose color is contained in the RGB cube which this node represents;</dd>
-<dt>n2</dt>
-  <dd>number of pixels whose color is not represented in a node at lower depth in the tree; initially, <var>n2=0</var> for all nodes except leaves of the tree.</dd>
-<dt>Sr,Sg,Sb</dt>
-  <dd>sums of the <var>red</var>, <var>green</var>, and <var>blue</var> component values for all pixels not classified at a lower depth. The combination of these sums and <var>n2</var> will ultimately characterize the mean color of a set of pixels represented by this node.</dd>
-<dt>E</dt>
-  <dd>the distance squared in RGB space between each pixel contained within a node and the nodes' center. This represents the quantization error for a node.</dd>
+<dl class="row">
+<dt class="col-md-4">n1</dt>
+	<dd class="col-md-8">number of pixels whose color is contained in the RGB cube which this node represents;</dd>
+<dt class="col-md-4">n2</dt>
+  <dd class="col-md-8">number of pixels whose color is not represented in a node at lower depth in the tree; initially, <var>n2=0</var> for all nodes except leaves of the tree.</dd>
+<dt class="col-md-4">Sr,Sg,Sb</dt>
+  <dd class="col-md-8">sums of the <var>red</var>, <var>green</var>, and <var>blue</var> component values for all pixels not classified at a lower depth. The combination of these sums and <var>n2</var> will ultimately characterize the mean color of a set of pixels represented by this node.</dd>
+<dt class="col-md-4">E</dt>
+  <dd class="col-md-8">the distance squared in RGB space between each pixel contained within a node and the nodes' center. This represents the quantization error for a node.</dd>
 </dl>
 
 <p><b>Reduction</b></p>
 
 <p>Reduction repeatedly prunes the tree until the number of nodes with <var>n2</var> &gt; <var>0</var> is less than or equal to the maximum number of colors allowed in the output image. On any given iteration over the tree, it selects those nodes whose <var>E</var> value is minimal for pruning and merges their color statistics upward. It uses a pruning threshold, <var>Ep</var>, to govern node selection as follows:</p>
 
-<pre>
+<pre><code>
 Ep = 0
 while number of nodes with (n2 &gt; 0) &gt; required maximum number of colors
    prune all nodes such that E &lt;= Ep
    Set Ep  to minimum E in remaining nodes
-</pre>
+</code></pre>
 
 <p>This has the effect of minimizing any quantization error when merging two nodes together.</p>
 
@@ -156,7 +156,7 @@
 
 <p>Empirical evidence suggests that the distances in color spaces such as YUV, or YIQ correspond to perceptual color differences more closely than do distances in RGB space.  These color spaces may give better results when color reducing an image. Here the algorithm is as described except each pixel is a point in the alternate color space. For convenience, the color components are normalized to the range 0 to a maximum value, <var>Cmax</var>. The color reduction can then proceed as described.</p>
 
-<h2 class="magick-header"><a id="measure"></a>Measuring Color Reduction Error</h2>
+<h2 class="magick-post-title"><a id="measure"></a>Measuring Color Reduction Error</h2>
 
 <p>Depending on the image, the color reduction error may be obvious or invisible. Images with high spatial frequencies (such as hair or grass) will show error much less than pictures with large smoothly shaded areas (such as faces). This because the high-frequency contour edges introduced by the color reduction process are masked by the high frequencies in the image.</p>
 
@@ -167,7 +167,7 @@
 <p>These errors are measured and printed when the <a href="https://www.imagemagick.org/script/command-line-options.html#colors">-colors</a> and <a href="https://www.imagemagick.org/script/command-line-options.html#verbose">-verbose</a> options are specified on the <a href="https://www.imagemagick.org/script/convert.html">convert</a> command line:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>mean error per pixel</td>
     <td>is the mean error for any single pixel in the image.</td>
diff --git a/www/resources.html b/www/resources.html
index ad0bb8a..d9da904 100644
--- a/www/resources.html
+++ b/www/resources.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/resources.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/resources.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,77 +42,78 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item active" href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link active" href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="resources.html#configure">Configuration Files</a> • <a href="resources.html#modules">Modules</a> • <a href="resources.html#fonts">Fonts</a> • <a href="resources.html#environment">Environment Variables</a></p>
 
 <p class="lead magick-description">ImageMagick depends on a number of external resources including configuration files, loadable modules, fonts, and environment variables.</p>
 
-<h2 class="magick-header"><a id="configure"></a>Configuration Files</h2>
+<h2 class="magick-post-title"><a id="configure"></a>Configuration Files</h2>
 
 <p>ImageMagick depends on a number of external configuration files detailed here:</p>
 
-<dl class="dl-horizontal">
-<dt><a href="https://www.imagemagick.org/source/coder.xml">coder.xml</a></dt>
-  <dd>Associate an image format with the specified coder module.
+<dl class="row">
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/coder.xml">coder.xml</a></dt>
+  <dd class="col-md-8">Associate an image format with the specified coder module.
 
   ImageMagick has a number of coder modules to support the reading and/or writing of an image format (e.g. JPEG).  Some coder modules support more than one associated image format and the mapping between an associated format and its respective coder module is defined in this configuration file.  For example, the PNG coder module not only supports the PNG image format, but the JNG and MNG formats as well.
   </dd>
 
-<dt><a href="https://www.imagemagick.org/source/colors.xml">colors.xml</a></dt>
-  <dd>Associate a color name with its red, green, blue, and alpha intensities.
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/colors.xml">colors.xml</a></dt>
+  <dd class="col-md-8">Associate a color name with its red, green, blue, and alpha intensities.
 
   A number of command line options require a <a href="color.html">color parameter</a>.  It is often convenient to refer to a color by name (e.g. white) rather than by hex value (e.g. #fff).  This file maps a color name to its equivalent red, green, blue, and alpha intensities (e.g. for white, red = 255, green = 255, blue = 255, and alpha = 0).
   </dd>
 
-<dt><a id="configure.xml"/><a href="https://www.imagemagick.org/source/configure.xml">configure.xml</a></dt>
-  <dd>Set ImageMagick build parameters and system-wide environment variables (e.g. MAGICK_TEMPORARY_PATH).
+<dt class="col-md-4"><a id="configure.xml"/><a href="https://www.imagemagick.org/source/configure.xml">configure.xml</a></dt>
+  <dd class="col-md-8">Set ImageMagick build parameters and system-wide environment variables (e.g. MAGICK_TEMPORARY_PATH).
   As ImageMagick is built, a number of build parameters are saved to this configuration file.  They include the version, release date, dependent delegate libraries, and quantum depth among others.
   </dd>
 
-<dt><a href="https://www.imagemagick.org/source/delegates.xml">delegates.xml</a></dt>
-  <dd>Associate delegate programs with certain image formats.
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/delegates.xml">delegates.xml</a></dt>
+  <dd class="col-md-8">Associate delegate programs with certain image formats.
 
   ImageMagick relies on a number of delegate programs to support certain image formats such as <a href="http://ufraw.sourceforge.net/">ufraw-batch</a> to read raw camera formats or <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a> to read Postscript images.  Use this configuration file to map an input or output format to an external delegate program.
   </dd>
 
-<dt><a href="https://www.imagemagick.org/source/english.xml">english.xml</a></dt>
-  <dd>Associate message tags with English translations.</dd>
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/english.xml">english.xml</a></dt>
+  <dd class="col-md-8">Associate message tags with English translations.</dd>
 
-<dt><a href="https://www.imagemagick.org/source/francais.xml">francais.xml</a></dt>
-  <dd>Associate message tags with French translations.  </dd>
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/francais.xml">francais.xml</a></dt>
+  <dd class="col-md-8">Associate message tags with French translations.  </dd>
 
-<dt><a href="https://www.imagemagick.org/source/locale.xml">locale.xml</a></dt>
-  <dd>Associate message tags with a  translation for your locale.
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/locale.xml">locale.xml</a></dt>
+  <dd class="col-md-8">Associate message tags with a  translation for your locale.
 
   ImageMagick has a number of informational, warning, and error messages that are represented as tags.  Tags are short descriptions of a message such as
   <var>FileNotFound</var> or <var>MemoryAllocationFailed</var>.  This configuration file lists locales that have a translation for each tag recognized by ImageMagick.  Currently only English and French translations are available in the <code>english.xml</code> and <code>francais.xml</code> configuration files.
   </dd>
 
-<dt><a href="https://www.imagemagick.org/source/log.xml">log.xml</a></dt>
-  <dd>Configure logging parameters.
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/log.xml">log.xml</a></dt>
+  <dd class="col-md-8">Configure logging parameters.
   ImageMagick is capable of spewing copious amounts of informational or debugging statements.  Use this file to configure how the information will appear in a log message and where you want the logging messages posted.
   </dd>
 
-<dt><a href="https://www.imagemagick.org/source/magic.xml">magic.xml</a></dt>
-  <dd>Associate an image format with a unique identifier.
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/magic.xml">magic.xml</a></dt>
+  <dd class="col-md-8">Associate an image format with a unique identifier.
   Many image formats have identifiers that uniquely identify a particular image format.  For example, the GIF image format always begins with <code>GIF8</code> as the first 4 characters of the image.  ImageMagick uses this information to quickly determine the type of image it is dealing with when it reads an image.
   </dd>
 
-<dt><a href="https://www.imagemagick.org/source/mime.xml">mime.xml</a></dt>
-  <dd>Associate an internet media type with a unique identifier.
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/mime.xml">mime.xml</a></dt>
+  <dd class="col-md-8">Associate an internet media type with a unique identifier.
   Many files and data streams have identifiers that uniquely identify a
 particular internet media type. For example, files in the "Corel Draw
 drawing" format (mime type="application/vnd.corel-draw") are associated with
@@ -123,65 +123,65 @@
 file or data stream.
 </dd>
 
-<dt><a href="https://www.imagemagick.org/source/policy.xml">policy.xml</a></dt>
-  <dd>Configure ImageMagick policies.
-  By default any coder, delegate, filter, or file path is permitted.  Use a policy to deny access to, for example, the MPEG video delegate, or permit reading images from a file system but deny writing to that same file system.  Or use the resource policy to set resource limits.  Policies are useful for multi-user servers that want to limit the overall impact ImageMagick has on the system.  For example, to limit the maximum image size in memory to 100MB:
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/policy.xml">policy.xml</a></dt>
+  <dd class="col-md-8">Configure ImageMagick policies.
+  By default any coder, delegate, filter, or file path is permitted.  Use a policy to deny access to, for example, the MPEG video delegate, or permit reading images from a file system but deny writing to that same file system.  Or use the resource policy to set resource limits.  Policies are useful for multi-user servers that want to limit the overall impact ImageMagick has on the system.  For example, to limit the maximum image size in memory to 100MP:
 
-<pre>
-&lt;policy domain="resource" name="area" value="100KP"/>
-</pre>
+<pre><code>
+&lt;policy domain="resource" name="area" value="100MP"/>
+</code></pre>
 
 Any image larger than this area limit is cached to disk rather than memory.
 
 Use <code>width</code> to limit the maximum width of an image in pixels.  Exceed this limit and an exception is thrown and processing stops.
 
-<pre>
+<pre><code>
 &lt;policy domain="resource" name="width" value="8KP"/>
-</pre>
+</code></pre>
 
 To limit the elapsed time of any ImageMagick command to 5 minutes, use this policy:
 
-<pre>
+<pre><code>
 &lt;policy domain="resource" name="time" value="300"/>
-</pre>
+</code></pre>
 Define arguments for the memory, map, and disk resources with SI prefixes (.e.g 100MB).  In addition, resource policies are maximums for each instance of ImageMagick (e.g. policy memory limit 1GB, the <code>-limit 2GB</code> option exceeds policy maximum so memory limit is 1GB). </dd>
 
-<dt><a href="https://www.imagemagick.org/source/quantization-table.xml">quantization-table.xml</a></dt>
-  <dd>Custom JPEG quantization tables. Activate with <code>-define:q-table=quantization-table.xml</code>.</dd>
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/quantization-table.xml">quantization-table.xml</a></dt>
+  <dd class="col-md-8">Custom JPEG quantization tables. Activate with <code>-define:q-table=quantization-table.xml</code>.</dd>
 
-<dt><a href="https://www.imagemagick.org/source/thresholds.xml">thresholds.xml</a></dt>
-  <dd>Set threshold maps for ordered posterized dither.</dd>
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/thresholds.xml">thresholds.xml</a></dt>
+  <dd class="col-md-8">Set threshold maps for ordered posterized dither.</dd>
 
-<dt><a id="type.xml"></a><a href="https://www.imagemagick.org/source/type.xml">type.xml</a></dt>
-  <dd>Configure fonts.
+<dt class="col-md-4"><a id="type.xml"></a><a href="https://www.imagemagick.org/source/type.xml">type.xml</a></dt>
+  <dd class="col-md-8">Configure fonts.
   Define the font name, family, foundry, style, format, metrics, and glyphs for any font you want to use within ImageMagick.
   </dd>
 
-<dt><a href="https://www.imagemagick.org/source/type-ghostscript.xml">type-ghostscript.xml</a></dt>
-  <dd>Configure <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a> fonts.
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/type-ghostscript.xml">type-ghostscript.xml</a></dt>
+  <dd class="col-md-8">Configure <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a> fonts.
   The Ghostscript package includes a number of <a href="https://sourceforge.net/projects/gs-fonts/">fonts</a> that can be accessed with ImageMagick.
   </dd>
 
-<dt><a href="https://www.imagemagick.org/source/type-windows.xml">type-windows.xml</a></dt>
-  <dd>Associate names with Windows font glyphs.</dd>
+<dt class="col-md-4"><a href="https://www.imagemagick.org/source/type-windows.xml">type-windows.xml</a></dt>
+  <dd class="col-md-8">Associate names with Windows font glyphs.</dd>
 </dl>
 
 <p>Under Unix and Linux, ImageMagick searches for each of the configuration files listed above by looking in the locations given below, in order, and loads them if found:</p>
 
-<pre>
+<pre><code>
 $MAGICK_CONFIGURE_PATH
 $PREFIX/etc/ImageMagick-7 
 $PREFIX/share/ImageMagick-7 
 $XDG_CACHE_HOME/ImageMagick
 $HOME/.config/ImageMagick
 &lt;<var>client path</var>&gt;/etc/ImageMagick
-</pre>
+</code></pre>
 
 <p>The environmental variable $PREFIX is the default install path (e.g. <code>/usr/local</code>). The <var>client path</var> is the execution path of your ImageMagick client (e.g. <code>/usr/local</code>) .</p>
 
 <p>For the Unix or Linux pre-compiled uninstalled binary distributions, the configuration load order is:</p>
 
-<pre>
+<pre><code>
 $MAGICK_CONFIGURE_PATH
 $MAGICK_HOME/etc/ImageMagick-7 
 $MAGICK_HOME/share/ImageMagick-7 
@@ -190,79 +190,79 @@
 $HOME/.config/ImageMagick/
 &lt;<var>client path</var>&gt;/etc/ImageMagick
 &lt;<var>current directory</var>&gt;
-</pre>
+</code></pre>
 
 <p>Under Windows, ImageMagick searches for these configuration files in the following order, and loads them if found:</p>
 
-<pre>
+<pre><code>
 $MAGICK_CONFIGURE_PATH
 &lt;<var>windows registry</var>&gt;
 $PREFIX/config
 $USERPROFILE/.config/ImageMagick
 &lt;<var>client path</var>&gt;
-</pre>
+</code></pre>
 
-<p>Above, $PREFIX is the default install path, typically <code>c:\\Program Files\\ImageMagick-7.0.5</code>.</p>
+<p>Above, $PREFIX is the default install path, typically <code>c:\\Program Files\\ImageMagick-7.0.6</code>.</p>
 
 <p>For an uninstalled Windows installation, the configuration load order is:</p>
 
-<pre>
+<pre><code>
 $MAGICK_CONFIGURE_PATH
 $MAGICK_HOME
 $USERPROFILE/.config/ImageMagick
 <var>client path</var>
 &lt;<var>current directory</var>&gt;
-</pre>
+</code></pre>
 
 <p>If a configuration file cannot not be found, ImageMagick relies on built-in default values.</p>
 
-<h2 class="magick-header"><a id="modules"></a>Modules</h2>
+<h2 class="magick-post-title"><a id="modules"></a>Modules</h2>
 
 <h4>Coders</h4>
 <p>An image coder (i.e. encoder / decoder) is responsible for registering, optionally classifying, optionally reading, optionally writing, and unregistering one image format (e.g. PNG, GIF, JPEG, etc.).  ImageMagick searches for coders in the following order and it uses the first match found:</p>
 
-<pre>
-$MAGICK_HOME/lib/ImageMagick-7.0.5/modules-Q16/coders
-&lt;<var>client path</var>&gt;/../lib/ImageMagick-7.0.5/modules-Q16/coders
-$MAGICK_HOME/lib/ImageMagick-7.0.5/modules-Q16/coders
-$MAGICK_HOME/share/ImageMagick-7.0.5/modules-Q16/coders
+<pre><code>
+$MAGICK_HOME/lib/ImageMagick-7.0.6/modules-Q16/coders
+&lt;<var>client path</var>&gt;/../lib/ImageMagick-7.0.6/modules-Q16/coders
+$MAGICK_HOME/lib/ImageMagick-7.0.6/modules-Q16/coders
+$MAGICK_HOME/share/ImageMagick-7.0.6/modules-Q16/coders
 $XDG_CACHE_HOME/ImageMagick
 $HOME/.config/ImageMagick
-&lt;<var>client path</var>&gt;/lib/ImageMagick-7.0.5/modules-Q16/coders
-</pre>
+&lt;<var>client path</var>&gt;/lib/ImageMagick-7.0.6/modules-Q16/coders
+</code></pre>
 
 <h4>Filters</h4>
 <p>ImageMagick provides a convenient mechanism for adding your own custom image processing algorithms.  ImageMagick searches for filters in the following order and it uses the first match found:</p>
-<pre>
-$MAGICK_HOME/lib/ImageMagick-7.0.5/modules-Q16/filters
-&lt;<var>client path</var>&gt;/../lib/ImageMagick-7.0.5/modules-Q16/filters
-$MAGICK_HOME/lib/ImageMagick-7.0.5/modules-Q16/filters
-$MAGICK_HOME/share/ImageMagick-7.0.5/modules-Q16/filters
+<pre><code>
+$MAGICK_HOME/lib/ImageMagick-7.0.6/modules-Q16/filters
+&lt;<var>client path</var>&gt;/../lib/ImageMagick-7.0.6/modules-Q16/filters
+$MAGICK_HOME/lib/ImageMagick-7.0.6/modules-Q16/filters
+$MAGICK_HOME/share/ImageMagick-7.0.6/modules-Q16/filters
 $XDG_CACHE_HOME/ImageMagick
 $HOME/.config/ImageMagick
-&lt;<var>client path</var>&gt;/lib/ImageMagick-7.0.5/modules-Q16/filters
-</pre>
+&lt;<var>client path</var>&gt;/lib/ImageMagick-7.0.6/modules-Q16/filters
+</code></pre>
 
-<h2 class="magick-header"><a id="fonts"></a>Fonts</h2>
+<h2 class="magick-post-title"><a id="fonts"></a>Fonts</h2>
 
 <p>ImageMagick is able to load raw TrueType and Postscript font files.  It searches for the font configuration file, <a href="resources.html#type.xml">type.xml</a>, in the following order, and loads them if found:</p>
 
-<pre>
+<pre><code>
 $MAGICK_CONFIGURE_PATH
-$MAGICK_HOME/etc/ImageMagick/-7.0.5
-$MAGICK_HOME/share/ImageMagick-7.0.5
+$MAGICK_HOME/etc/ImageMagick/-7.0.6
+$MAGICK_HOME/share/ImageMagick-7.0.6
 $XDG_CACHE_HOME/ImageMagick
 $HOME/.config/ImageMagick
 &lt;<var>client path</var>&gt;/etc/ImageMagick
 $MAGICK_FONT_PATH
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="environment"></a>Environment Variables</h2>
+<h2 class="magick-post-title"><a id="environment"></a>Environment Variables</h2>
 
 <p>Environment variables recognized by ImageMagick include:</p>
 
 <div class="table-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>HOME</td>
     <td>Set path to search for configuration files in <code>$HOME/.config/ImageMagick</code> if the directory exists.</td>
@@ -383,4 +383,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:14 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:57 -->
\ No newline at end of file
diff --git a/www/search.html b/www/search.html
index 62b4ccd..d8926de 100644
--- a/www/search.html
+++ b/www/search.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item active" href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link active" href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description"> </p>
 <form class="form-inline">
diff --git a/www/security-policy.html b/www/security-policy.html
index 7d73a26..05d5d73 100644
--- a/www/security-policy.html
+++ b/www/security-policy.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/security-policy.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/security-policy.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="security-policy.html#policy">Security Policy </a> • <a href="security-policy.html#zero-configuration">Zero Configuration Security Policy</a> • <a href="security-policy.html#other">Other Security Considerations</a></p>
 
@@ -64,7 +64,7 @@
 
 <p>As an example, suppose you download an image from the internet and unbeknownst to you its been crafted to generate a 20000 by 20000 pixel image. ImageMagick attempts to allocate enough resources (memory, disk) and your system will likely deny the resource request and exit. However, its also possible that your computer might be temporarily sluggish or unavailable or ImageMagick may abort. To prevent such a scenario, you can set limits in the <code>policy.xml</code> configuration file. You may ask why ImageMagick does not already include reasonable limits? Simply because what is reasonable in your environment, might not be reasonable to someone else. For example, you may have ImageMagick sandboxed where security is not a concern, whereas another user may use ImageMagick to process images on their publically accessible website.  Or ImageMagick is running on a host with 1TB of memory whereas another ImageMagick instance is running on an iPhone. By policy, permitting giga-pixel image processing on the large memory host makes sense, not so much for the resource constrained iPhone. If you utilize ImageMagick from a public website, you may want to increase security by preventing usage of the MVG or HTTPS coders. Only you can decide what are reasonable limits taking in consideration your environment. We provide this policy with reasonable limits and encourage you to modify it to suit your local environment:</p>
 
-<pre class="pre-scrollable">
+<pre class="pre-scrollable"><code>
 &lt;policymap>
   &lt;policy domain="resource" name="temporary-path" value="/tmp"/>
   &lt;policy domain="resource" name="memory" value="256MiB"/>
@@ -83,37 +83,37 @@
   &lt;policy domain="delegate" rights="none" pattern="HTTPS" />  <!--  prevent 'curl' program from reading HTTPS URL's -->
   &lt;policy domain="path" rights="none" pattern="@*"/>  <!-- indirect reads not permitted -->
 &lt;/policymap>
-</pre>
+</code></pre>
 
 <p>Since we process multiple simultaneous sessions, we do not want any one session consuming all the available memory.With this policy, large images are cached to disk. If the image is too large and exceeds the pixel cache disk limit, the program exits. In addition, we place a time limit to prevent any run-away processing tasks. If any one image has a width or height that exceeds 8192 pixels, an exception is thrown and processing stops. As of ImageMagick 7.0.1-8 and 6.9.4-6, you can prevent the use of any delegate or all delegates (set the pattern to "*"). Note, prior to these releases, use a domain of <code>coder</code> to prevent delegate usage (e.g. <code>domain="coder" rights="none" pattern="HTTPS"</code>). The policy also prevents indirect reads. If you want to, for example, read text from a file (e.g. <code>caption:@myCaption.txt</code>), you'll need to disable the <code>path</code> policy.</p>
 
 <p>Here is what you can expect when you restrict the HTTPS coder, for example:</p>
 
-<pre>
+<pre><code>
 $ convert https://www.imagemagick.org/images/wizard.png wizard.jpg
 convert: not authorized `HTTPS'
 convert: unable to open file: No such file or directory
 convert: no images defined `wizard.jpg'
-</pre>
+</code></pre>
 
 <p>As of ImageMagick version 7.0.4-7, you can conveniently deny access to all delegates and coders except for a small subset of proven web-safe image types.  For example,</p>
 
-<pre>
+<pre><code>
   &lt;policy domain="delegate" rights="none" pattern="*" />
   &lt;policy domain="coder" rights="none" pattern="*" />
   &lt;policy domain="coder" rights="read | write" pattern="{GIF,JPEG,PNG,WEBP}" />
-</pre>
+</code></pre>
 
 <p>As of ImageMagick 7.0.5-5, you can allocate the pixel cache and some internal buffers with anonymous memory mapping rather than from heap.  As a consequence, the pixels are initialized to zero.  You can also securely delete any temporary files for increased security.  The value is the number of times to shred (replace its content with random data) before deleting a temporary file.  For example,</p>
-<pre>
+<pre><code>
   &lt;policy domain="system" name="memory-map" value="anonymous"/>
   &lt;policy domain="cache" name="memory-map" value="anonymous"/>
   &lt;policy domain="system" name="shred" value="1"/>
-</pre>
+</code></pre>
 
 <p>You can verify your policy changes are in effect with this command:</p>
 
-<pre class="pre-scrollable">
+<pre class="pre-scrollable"><code>
 -> identify -list policy
 Path: ImageMagick/policy.xml
   Policy: Resource
@@ -159,24 +159,27 @@
 Path: [built-in]
   Policy: Undefined
     rights: None 
-</pre>
+</code></pre>
 <p>Notice the <code>Cache</code> policy is not listed due to the <code>stealth</code> property.</p>
 
+<p>As of ImageMagick 7.0.6-0, you can programmatically set the ImageMagick security policy with SetMagickSecurityPolicy() (MagickCore) or MagickSetSecurityPolicy() (MagickWand).</p>
+
 <p>For additional details about resource limits and the policy configuration file, read <a href="resources.html">Resources</a> and <a href="architecture.html">Architecture</a>.</p>
 
-<h2 class="magick-header"><a id="zero-configuration"></a>Zero Configuration Security Policy</h2>
+<h2 class="magick-post-title"><a id="zero-configuration"></a>Zero Configuration Security Policy</h2>
 
 <p>A zero configuration build of ImageMagick does not permit external configuration files.  To define your security policy, you must instead edit the <code>MagickCore/policy-private.h</code> source module, add your policy statements, and then build the ImageMagick distribution.  Here is an example zero configuration security policy:</p>
 
-<pre>
+<pre><code>
 static const char
   *ZeroConfigurationPolicy = \
 "&lt;policymap> \
   &lt;policy domain=\"coder\" rights=\"none\" pattern=\"MVG\"/> \
 &lt;/policymap>";
-</pre>
+</code></pre>
 
-<h2 class="magick-header"><a id="other"></a>Other Security Considerations</h2>
+
+<h2 class="magick-post-title"><a id="other"></a>Other Security Considerations</h2>
 
 <p>If you spot a security flaw in ImageMagick, <a href="https://www.imagemagick.org/script/contact.php">contact us</a> and select Security Issue as the issue.  Alternatively, post your concern to <a href="https://github.com/ImageMagick/ImageMagick/issues">GitHub</a>.  Be sure to include how to reproduce the security flaw and a link to any images needed to reproduce the flaw.</p>
 
@@ -209,4 +212,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/sitemap.html b/www/sitemap.html
index e8345eb..e7db919 100644
--- a/www/sitemap.html
+++ b/www/sitemap.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/sitemap.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/sitemap.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,25 +42,26 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="sitemap.html#overview">ImageMagick Overview</a> • <a href="sitemap.html#download">Download ImageMagick</a> • <a href="sitemap.html#install">Install ImageMagick</a> • <a href="sitemap.html#command-line">Command-line Tools</a> • <a href="sitemap.html#program-interfaces">Program Interfaces</a> • <a href="sitemap.html#formats">Image Formats</a> • <a href="sitemap.html#help">Getting Help</a> • <a href="sitemap.html#support">Support ImageMagick</a> • <a href="sitemap.html#miscellaneous">Miscellaneous Topics</a></p>
 
 <p class="lead magick-description">Use this ImageMagick sitemap to quickly jump to one of the areas of interest listed below.  If you can't find what you want on this page, try our <a href="https://www.imagemagick.org/script/search.php">site search</a>.</p>
 
-<h2 class="magick-header"><a id="overview"></a>ImageMagick Overview</h2>
+<h2 class="magick-post-title"><a id="overview"></a>ImageMagick Overview</h2>
 
 <dl class="magick-list-unstyled">
   <li><a href="../index.html">Introduction</a>: convert, edit, or compose images from the command-line or program interface.</li>
@@ -79,7 +79,7 @@
   <li><a href="history.html">History</a>: how ImageMagick was conceived and developed.</li>
 </dl>
 
-<h2 class="magick-header"><a id="download"></a>Download ImageMagick</h2>
+<h2 class="magick-post-title"><a id="download"></a>Download ImageMagick</h2>
 
 <dl class="magick-list-unstyled">
   <li><a href="download.html">Download ImageMagick</a>: ImageMagick source and binary distributions are available from a variety of FTP and Web mirrors.</li>
@@ -93,7 +93,7 @@
   </dl> </li>
 </dl>
 
-<h2 class="magick-header"><a id="install"></a>Install ImageMagick</h2>
+<h2 class="magick-post-title"><a id="install"></a>Install ImageMagick</h2>
 
   <p>You can install ImageMagick from source. However, if you don't have a proper development environment or if you're anxious to get started, download a ready-to-run Unix or Windows executable.</p>
 <dl class="magick-list-unstyled">
@@ -102,7 +102,7 @@
     <li><a href="ImageMagickObject.html">Install ImageMagickObject COM+ component</a>: install the Windows ImageMagick COM+ component.</li>
 </dl>
 
-<h2 class="magick-header"><a id="command-line"></a>Command-line Tools</h2>
+<h2 class="magick-post-title"><a id="command-line"></a>Command-line Tools</h2>
 <dl class="magick-list-unstyled">
   <li><a href="command-line-tools.html">Command-line tools</a>: overview of the ImageMagick commands.</li>
   <li> <dl class="magick-list-unstyled">
@@ -124,7 +124,7 @@
   <li><a href="http://www.fmwconcepts.com/imagemagick/">Fred's ImageMagick Scripts</a>:  a plethora of command-line scripts that perform geometric transforms, blurs, sharpens, edging, noise removal, and color manipulations.</li>
 </dl>
 
-<h2 class="magick-header"><a id="program-interfaces"></a>Program Interfaces</h2>
+<h2 class="magick-post-title"><a id="program-interfaces"></a>Program Interfaces</h2>
 
 <dl class="magick-list-unstyled">
   <li><a href="develop.html">Program interfaces</a>: application programming interfaces.</li>
@@ -148,7 +148,7 @@
   </dl></li>
 </dl>
 
-<h2 class="magick-header"><a id="format"></a>Image Formats</h2>
+<h2 class="magick-post-title"><a id="format"></a>Image Formats</h2>
 <dl class="magick-list-unstyled">
   <li><a href="formats.html">Supported image formats</a>: annotated list of all image formats that ImageMagick can read and/or write.</li>
   <li><a href="motion-picture.html">Motion picture digital images</a>: use SMPTE DPX Version 2.0 to process images used by the motion picture (film and high-definition) industry.</li>
@@ -157,7 +157,7 @@
   <li><a href="miff.html">Magick Image File Format</a>: MIFF is ImageMagick's own platform-independent format for storing bitmap images.</li>
 </dl>
 
-<h2 class="magick-header"><a id="help"></a>Getting Help</h2>
+<h2 class="magick-post-title"><a id="help"></a>Getting Help</h2>
 
 <dl class="magick-list-unstyled">
   <li><a href="http://www.amazon.com/exec/obidos/redirect?link_code=ur2&amp;camp=1789&amp;tag=imagemagick-20&amp;creative=9325&amp;path=tg/detail/-/1590595904/qid=1123551819/sr=8-1/ref=pd_bbs_sbs_1?v=glance%26s=books%26n=507846">Definitive Guide to ImageMagick</a>: this book explains ImageMagick in a practical, learn-by-example fashion.</li>
@@ -166,14 +166,14 @@
   <li><a href="https://www.imagemagick.org/script/contact.php">Contact the Wizards</a>: for bug reports (only if you do not want to sign up to the <a href="https://www.imagemagick.org/discourse-server/">discourse server</a>), a source or documentation patch, a security or license issue, or if you want to be a sponsor of the ImageMagick project.</li>
 </dl>
 
-<h2 class="magick-header"><a id="support"></a>Support ImageMagick</h2>
+<h2 class="magick-post-title"><a id="support"></a>Support ImageMagick</h2>
 
 <dl class="magick-list-unstyled">
   <li><a href="https://www.imagemagick.org/discourse-server/viewforum.html?f=3">Report bugs and vulnerabilities</a>: our highest priority is to fix security defects and bug reports, usually within 48 hours of your report.  The bug discourse server requires that you register.  If you do not want to register, you can <a href="https://www.imagemagick.org/script/contact.php">contact the ImageMagick developers</a> with a convenient web form.</li>
   <li><a href="support.html">Sponsor ImageMagick</a>: contribute bug fixes, enhancements, hardware, funds, etc. to ensure the ImageMagick project thrives.</li>
 </dl>
 
-<h2 class="magick-header"><a id="miscellaneous"></a>Miscellaneous Topics</h2>
+<h2 class="magick-post-title"><a id="miscellaneous"></a>Miscellaneous Topics</h2>
 
 <dl class="magick-list-unstyled">
   <li><a href="https://www.imagemagick.org/Usage/anim_basics/">Animation</a>: create a GIF animation sequence from a group of images.</li>
@@ -214,7 +214,7 @@
   <li><a href="https://www.imagemagick.org/Usage/masking/">Transparency</a>: render portions of an image invisible.</li>
   <li><a href="architecture.html#virtual-pixels">Virtual pixel support</a>: convenient access to pixels outside the image region.</li>
 </dl>
-<h2 class="magick-header"><a id="legacy"></a>ImageMagick Legacy</h2>
+<h2 class="magick-post-title"><a id="legacy"></a>ImageMagick Legacy</h2>
 <p>We continue to maintain the legacy release of ImageMagick, version 6, at <a href="https://legacy.imagemagick.org/">https://legacy.imagemagick.org</a></p>
 </div>
 
@@ -237,4 +237,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:06 -->
\ No newline at end of file
diff --git a/www/stream.html b/www/stream.html
index d43d262..8e2afaf 100644
--- a/www/stream.html
+++ b/www/stream.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/stream.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/stream.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,51 +42,52 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="stream.html#usage">Example Usage</a> • <a href="stream.html#options">Option Summary</a></p>
 
 <p class="lead magick-description"><code>Stream</code> is a lightweight tool to stream one or more pixel components of the image or portion of the image to your choice of storage formats.  It writes the pixel components as they are read from the input image a row at a time making <code>stream</code> desirable when working with large images or when you require raw pixel components.</p>
 
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a id="usage"></a>Example Usage</h2>
 
 <p>We list a few examples of the <code>stream</code> command here to illustrate its usefulness and ease of use. To get started, lets stream the red, green, blue components of a 640x480 JPEG image to disk as unsigned characters:</p>
 
-<pre>
+<pre><code>
 magick stream -map rgb -storage-type char image.jpg pixels.dat
 magick display -depth 8 -size 640x480 rgb:pixels.dat
-</pre>
+</code></pre>
 
 <p>Here we extract a 100x100 region from a TIFF image in the grayscale format as doubles:</p>
 
-<pre>
+<pre><code>
 magick stream -map i -storage-type double -extract 100x100+30+40 image.tif gray.raw
-</pre>
+</code></pre>
 
 <p>You can also associate the region to extract with the image filename:</p>
 
-<pre>
+<pre><code>
 magick stream -map i -storage-type double 'image.tif[100x100+30+40]' gray.raw
-</pre>
+</code></pre>
 
 
-<h2 class="magick-header"><a id="options"></a>Option Summary</h2>
+<h2 class="magick-post-title"><a id="options"></a>Option Summary</h2>
 
 <p>The <code>stream</code> command recognizes these options.  Click on an option to get more details about how that option works.</p>
 
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tbody>
   <tr>
     <th align="left">Option</th>
@@ -272,4 +272,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:07 -->
\ No newline at end of file
diff --git a/www/subversion.html b/www/subversion.html
index 93752b1..10090af 100644
--- a/www/subversion.html
+++ b/www/subversion.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="subversion.html"/>
-  <link rel="icon" href="https://www.imagemagick.org/images/wand.png"/>
-  <link rel="shortcut icon" href="https://www.imagemagick.org/images/wand.ico"/>
+  <link rel="canonical" href="subversion.html" />
+  <link rel="icon" href="https://www.imagemagick.org/images/wand.png" />
+  <link rel="shortcut icon" href="https://www.imagemagick.org/images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="https://www.imagemagick.org/css/magick.html"/>
+  <link rel="stylesheet" href="https://www.imagemagick.org/css/magick.html" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="https://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,37 +42,38 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="https://www.imagemagick.org/index.html">Home</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/download.html">Download</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/resources.html">Resources</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="https://www.imagemagick.org/index.html">Home</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/download.html">Download</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/command-line-tools.html">Tools</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/resources.html">Resources</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 
 <p class="lead magick-description">The ImageMagick <a href="https://github.com/ImageMagick/ImageMagick/tree/ImageMagick-6/">stable</a> and <a href="https://github.com/ImageMagick/ImageMagick">development</a> source releases are available from <a href="http://subversion.tigris.org/">Subversion</a>. This a convenient way for developers to download the ImageMagick source, fix bugs, or add new features.</p>
 
 <p>To retrieve, or check out ImageMagick stable, use this command:</p>
 
-<pre><span class="crtprompt"> </span><span class='crtin'>svn co https://subversion.imagemagick.org/subversion/ImageMagick/branches/ImageMagick-7.0.5 ImageMagick-7.0.5</span></pre>
+<pre><span class="crtprompt"> </span><span class='crtin'>svn co https://subversion.imagemagick.org/subversion/ImageMagick/branches/ImageMagick-7.0.6 ImageMagick-7.0.6</span></pre>
 <p>To retrieve, or check out ImageMagick development, use this command:</p>
 
-<pre>
+<pre><code>
 svn co https://subversion.imagemagick.org/subversion/ImageMagick/trunk ImageMagick
-</pre>
+</code></pre>
 
 <p>To update the sources within a previously checked out directory, execute:</p>
 
-<pre>
+<pre><code>
 svn update
-</pre>
+</code></pre>
 
 <p>and only the files which have changed are updated.</p>
 </div>
@@ -96,4 +96,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:17 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:09 -->
\ No newline at end of file
diff --git a/www/support.html b/www/support.html
index b76971f..870101b 100644
--- a/www/support.html
+++ b/www/support.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/support.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/support.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="text-center"><a href="support.html#contribute">Contribute a Bug Fix or Enhancement</a> • <a href="support.html#support">Support the ImageMagick Project</a></p>
 
@@ -65,16 +65,16 @@
 <p class="lead magick-description">We want to thank the following sponsors of the ImageMagick project, including:</p>
 
 <dl>
-  <dt><a href="http://www.networkredux.com"> <img class="clearfix" src="../images/networkredux.png" width="140" height="31" alt="[Network Redux]" /></a>   We manage everything so you don't have to</dt><br/>
-  <dt><a href="http://www.amd.com"> <img class="clearfix" src="../images/amd.png" width="132" height="31" alt="[AMD]" /></a> Enabling today. Inspiring tomorrow.</dt><br/>
-  <dt><a href="http://www.transloadit.com"> <img class="clearfix" src="../images/transloadit.png" width="205" height="52" alt="[TransloadIt]" /></a>   The world's most versatile file uploading and processing service</dt><br/>
-  <dt><a href="http://boundforhealth.com"> <img class="clearfix" src="../images/boundforhealth.png" width="342" height="105" alt="[Bound for Health]" /></a>  BoundForHealth &#8211; Change Course.  Cure disease.  Be well.</dt><br/>
+  <dt class="col-md-4"><a href="http://www.networkredux.com"> <img class="clearfix" src="../images/networkredux.png" width="140" height="31" alt="[Network Redux]" /></a>   We manage everything so you don't have to</dt><br/>
+  <dt class="col-md-4"><a href="http://www.amd.com"> <img class="clearfix" src="../images/amd.png" width="132" height="31" alt="[AMD]" /></a> Enabling today. Inspiring tomorrow.</dt><br/>
+  <dt class="col-md-4"><a href="http://www.transloadit.com"> <img class="clearfix" src="../images/transloadit.png" width="205" height="52" alt="[TransloadIt]" /></a>   The world's most versatile file uploading and processing service</dt><br/>
+  <dt class="col-md-4"><a href="http://boundforhealth.com"> <img class="clearfix" src="../images/boundforhealth.png" width="342" height="105" alt="[Bound for Health]" /></a>  BoundForHealth &#8211; Change Course.  Cure disease.  Be well.</dt><br/>
 </dl>
 
-<h2 class="magick-header"><a id="contribute"></a>Contribute a Bug Fix or Enhancement</h2>
+<h2 class="magick-post-title"><a id="contribute"></a>Contribute a Bug Fix or Enhancement</h2>
 <p>Post any ImageMagick patches to the <a href="https://github.com/ImageMagick/ImageMagick/issues">Issues</a> forum if you think you have found and fixed a bug or security vulnerability. Post to the <a href="https://www.imagemagick.org/discourse-server/viewforum.html?f=2">Developers</a> forum if you want to propose an enhancement for discussion.</p>
 
-<h2 class="magick-header"><a id="support"></a>Support the ImageMagick Project</h2>
+<h2 class="magick-post-title"><a id="support"></a>Support the ImageMagick Project</h2>
 
 <p>ImageMagick has been available for free since the early 1990's. It has consistently been one of the most comprehensive free image processing packages available, but, unlike competing packages, it continues to be supported and enhanced.  Today, ImageMagick is more comprehensive and better supported than ever.</p>
 <p>ImageMagick has enjoyed considerable support from commercial users. Since ImageMagick is not restricted from use in commercial or proprietary applications, it is used to support thousands of commercial web sites and is used in professional digital image and movie studios as well as publishing shops. It is also used as a component of a number of commercial applications. Many of these commercial users have made contributions to ImageMagick, large and small, often anonymous, but always appreciated.</p>
@@ -110,24 +110,23 @@
 <p>Flattr is a microdonation system. You donate a small amount every month and
  click Flattr buttons on worthy sites to share the donation among those sites, similar to a tip jar (for more details see Wikipedia's <a href="http://en.wikipedia.org/wiki/Flattr">Flattr</a> article).</p>
 <ul>
-<dt><a href="https://flattr.com/submit/auto?user_id=magick&amp;url=http%3A%2F%2Fwww.imagemagick.org" target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0"/></a>
-</dt>
+<dt class="col-md-4"><a href="https://flattr.com/submit/auto?fid=8oev2q&url=https%3A%2F%2Fwww.imagemagick.org" target="_blank"><img src="http://button.flattr.com/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></dt>
 </ul>
 <h3>Litecoin</h3>
 <p>Our Litecoin Address is: <kbd>LcZLAmym4EMvUPc9koagkccRLYQbsgGwmj</kbd>.  Or you can reference the below QR code:</p>
 <ul>
-<dt><img src="../images/litecoin.png" alt="Click to Donate to ImageMagick via Litecoin" title="Click to Donate to ImageMagick via Litecoin" width="256" height="256" /></dt>
+<dt class="col-md-4"><img src="../images/litecoin.png" alt="Click to Donate to ImageMagick via Litecoin" title="Click to Donate to ImageMagick via Litecoin" width="256" height="256" /></dt>
 </ul>
 <h3>Check</h3>
 <p>Check, in USD funds, made payable to
   <a href="https://www.imagemagick.org/">ImageMagick Studio LLC</a>, and send to:</p>
 <ul>
-<pre>
+<pre><code>
 ImageMagick Studio LLC
 P.O. Box 40
 Landenberg, PA  19350
 USA
-</pre>
+</code></pre>
 </ul>
 </fieldset>
 <br/>
@@ -155,4 +154,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 10:57 -->
\ No newline at end of file
diff --git a/www/webp.html b/www/webp.html
index 7f1d2f8..54f3c9e 100644
--- a/www/webp.html
+++ b/www/webp.html
@@ -25,14 +25,13 @@
   <meta name="distribution" content="Global"/>
   <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
   <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
-  <link rel="canonical" href="https://www.imagemagick.org/script/webp.html"/>
-  <link rel="icon" href="../images/wand.png"/>
-  <link rel="shortcut icon" href="../images/wand.ico"/>
+  <link rel="canonical" href="https://www.imagemagick.org/script/webp.html" />
+  <link rel="icon" href="../images/wand.png" />
+  <link rel="shortcut icon" href="../images/wand.ico" />
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
-  <link rel="stylesheet" href="css/magick.css"/>
+  <link rel="stylesheet" href="css/magick.css" />
 </head>
 <body>
-<div class="main">
 <div class="magick-masthead">
   <div class="container">
     <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script>    <ins class="adsbygoogle"
@@ -43,19 +42,20 @@
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-    <nav class="magick-nav">
-      <a class="magick-nav-item " href="../index.html">Home</a>
-      <a class="magick-nav-item " href="download.html">Download</a>
-      <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
-      <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
-      <a class="magick-nav-item " href="resources.html">Resources</a>
-      <a class="magick-nav-item " href="develop.html">Develop</a>
-      <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
-      <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
+    <nav class="nav magick-nav">
+      <a class="nav-link " href="../index.html">Home</a>
+      <a class="nav-link " href="download.html">Download</a>
+      <a class="nav-link " href="command-line-tools.html">Tools</a>
+      <a class="nav-link " href="command-line-processing.html">Command-line</a>
+      <a class="nav-link " href="resources.html">Resources</a>
+      <a class="nav-link " href="develop.html">Develop</a>
+      <a class="nav-link " href="https://www.imagemagick.org/script/search.php">Search</a>
+      <a class="nav-link float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
     </nav>
   </div>
 </div>
 <div class="container">
+<div class="magick-main">
 <div class="magick-header">
 <p class="lead magick-description">ImageMagick's WebP image format accepts a plethora of encoding options as detailed below. As an example, suppose you are interested in these options:</p>
 
@@ -66,14 +66,14 @@
 
 <p>Use this command:</p>
 
-<pre>
+<pre><code>
 convert wizard.png -quality 50 -define webp:lossless=true wizard.webp
-</pre>
+</code></pre>
 
 <p>Here is a complete list of WebP encoding options:</p>
 
 <div class=" able-responsive">
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
   <tr>
     <td>alpha-compression=<var>value</var></td>
     <td>encode the alpha plane: 0 = none, 1 = compressed.</td>
@@ -182,4 +182,4 @@
 </div>
 </body>
 </html>
-<!-- Magick Cache 10th June 2017 13:15 -->
\ No newline at end of file
+<!-- Magick Cache 29th June 2017 11:07 -->
\ No newline at end of file