/*          CSS for the full-size photo            */
.photo                  { position: relative; width: 500px; height: 250px; margin: auto; text-align: center; margin-bottom: 20px; background-repeat: no-repeat; background-position: center; overflow: hidden; }
.photo img              { position: absolute; top: 0px; left: 0px; border: 1px solid gray; }

/*          Create the container for the thumbnails and their navigation overlay.       */
.thumbsnav              { position: relative; border: 0px; width: 600px; height: 60px; margin: auto; margin-top: 15px; margin-bottom: 15px; overflow: hidden; }

/*          Thumbnails.                                                                                 */
.thumbnails             { position: relative; white-space: nowrap; display: none; text-align: center; }
.thumbnails img         { border: 1px solid #666666; }
.thumbnails .selected   { border: 1px solid white; }

/*          CSS for the categories                                                      */
div.categories              { width: 100%; background-color: #2c2c2c; text-align: center; padding-top: 10px; padding-bottom: 10px; }
table.categories            { margin: auto; text-align: center; border: 0px; color: #DDDDDD; font: bold 11px sans-serif; letter-spacing: 0.15em; }
table.categories tr td      { padding-left: 5px; padding-right: 5px; font-weight: normal; font-size: 10px; }
table.categories tr td img  { margin-bottom: 10px; }
table.categories tr td img.selected { border: 1px solid white; }

table.galleries            { margin: auto; text-align: center; border: 0px; color: #DDDDDD; font: bold 11px sans-serif; letter-spacing: 0.15em; }
table.galleries tr td      { padding-left: 5px; padding-right: 5px; font-weight: normal; font-size: 10px; }
table.galleries tr td img  { margin-bottom: 10px; }
table.galleries tr td img.selected { border: 1px solid white; }