diff --git a/art/record.html b/art/record.html
index bded24e..0a3e280 100644
--- a/art/record.html
+++ b/art/record.html
@@ -78,171 +78,262 @@
 
             <h2 style="background-color: #F8ECC2;">Photography</h2>
             <div class="row">
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/1.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/1.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/1.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/2.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/2.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/2.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/3.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/3.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/3.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/4.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/4.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/4.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/5.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/5.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/5.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/6.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/6.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/6.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/7.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/7.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/7.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/8.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/8.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/8.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/9.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/9.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/9.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/10.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/10.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/10.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/11.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/11.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/11.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/12.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/12.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/12.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/13.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/13.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/13.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/14.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/14.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/14.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/15.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/15.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/15.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/16.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/16.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/16.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/16.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/16.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/16.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/17.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/17.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/17.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/18.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/18.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/18.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/19.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/19.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/19.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/20.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/20.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/20.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/21.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/21.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/21.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/22.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/22.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/22.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/photos/23.JPG" alt="..." data-lightbox="photos">
-                            <img src="/images/art/photos/23.JPG" alt="..." class="img-rounded" width="150px">
+                            <img src="/images/art/photos/23.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi1.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi1.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi2.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi2.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi3.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi3.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi4.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi4.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi5.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi5.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi6.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi6.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi7.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi7.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi8.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi8.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi9.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi9.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi10.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi10.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi11.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi11.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi12.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi12.JPG" alt="..." class="img-rounded photothumb">
+                        </a>
+                    </a>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                    <a href="#" class="thumbnail">
+                        <a href="/images/art/photos/hi13.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/hi13.JPG" alt="..." class="img-rounded photothumb">
                         </a>
                     </a>
                 </div>
@@ -261,7 +352,7 @@
             </a>
             <h2 style="background-color: #F8ECC2;">Gradiented Images</h2>
             <div class="row">
-                <div class="col-xs-6 col-md-3">
+                <div class="col-xs-6 col-md-2">
                     <a href="#" class="thumbnail">
                         <a href="/images/art/ai/clock1grad.jpg" alt="..." data-lightbox="gradiented">
                             <img src="/images/art/ai/clock1grad.jpg" alt="..." width="300px" class="img-rounded">
diff --git a/css/custom.css b/css/custom.css
index d3729ac..2ed4efa 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -38,4 +38,8 @@
 }
 .bordered {
     border: 2px solid #000;
+}
+.photothumb {
+    width: 180px;
+    height: 140px;
 }
\ No newline at end of file
diff --git a/images/art/photos/hi1.jpg b/images/art/photos/hi1.jpg
new file mode 100755
index 0000000..073f625
Binary files /dev/null and b/images/art/photos/hi1.jpg differ
diff --git a/images/art/photos/hi10.jpg b/images/art/photos/hi10.jpg
new file mode 100755
index 0000000..712a661
Binary files /dev/null and b/images/art/photos/hi10.jpg differ
diff --git a/images/art/photos/hi11.jpg b/images/art/photos/hi11.jpg
new file mode 100755
index 0000000..d41a250
Binary files /dev/null and b/images/art/photos/hi11.jpg differ
diff --git a/images/art/photos/hi12.jpg b/images/art/photos/hi12.jpg
new file mode 100755
index 0000000..9478ba5
Binary files /dev/null and b/images/art/photos/hi12.jpg differ
diff --git a/images/art/photos/hi13.jpg b/images/art/photos/hi13.jpg
new file mode 100755
index 0000000..c8048ca
Binary files /dev/null and b/images/art/photos/hi13.jpg differ
diff --git a/images/art/photos/hi2.jpg b/images/art/photos/hi2.jpg
new file mode 100755
index 0000000..4b2949e
Binary files /dev/null and b/images/art/photos/hi2.jpg differ
diff --git a/images/art/photos/hi3.jpg b/images/art/photos/hi3.jpg
new file mode 100755
index 0000000..899d2c3
Binary files /dev/null and b/images/art/photos/hi3.jpg differ
diff --git a/images/art/photos/hi4.jpg b/images/art/photos/hi4.jpg
new file mode 100755
index 0000000..3498330
Binary files /dev/null and b/images/art/photos/hi4.jpg differ
diff --git a/images/art/photos/hi5.jpg b/images/art/photos/hi5.jpg
new file mode 100755
index 0000000..6bd5630
Binary files /dev/null and b/images/art/photos/hi5.jpg differ
diff --git a/images/art/photos/hi6.jpg b/images/art/photos/hi6.jpg
new file mode 100755
index 0000000..e351aa6
Binary files /dev/null and b/images/art/photos/hi6.jpg differ
diff --git a/images/art/photos/hi7.jpg b/images/art/photos/hi7.jpg
new file mode 100755
index 0000000..e0eb4a0
Binary files /dev/null and b/images/art/photos/hi7.jpg differ
diff --git a/images/art/photos/hi8.jpg b/images/art/photos/hi8.jpg
new file mode 100755
index 0000000..05c3843
Binary files /dev/null and b/images/art/photos/hi8.jpg differ
diff --git a/images/art/photos/hi9.jpg b/images/art/photos/hi9.jpg
new file mode 100755
index 0000000..0fa7908
Binary files /dev/null and b/images/art/photos/hi9.jpg differ