/************************************************************************************
 *
 *  GalleryBackground.txt styling.
 *
 ************************************************************************************/

/*
 *  By making the "position: relative;" on this outer wrapper the pictures that are displayed when hovering over
 *  a thumbnail will remain in their containment area when the browser window is expanded or contracted.  If this
 *  was not set to "relative" the displayed pictures would not be in the contained area when the browser window
 *  changed.
 */

#Gallery {
 display: block;
 position: relative;
 border: thick double maroon;
 padding: 10px;
 margin: 10px;
 text-align: justify;
 hei-ght: 540px;
 height: 660px;
}

#Gallery h1 {
 text-align: center;
 margin-top: 0px;
}

#DisplayWrapper {
 border: thick double #000000;
 margin: 0px;
 margin-bottom: 10px;
 position: absolute;
 widt-h: 680px;
 width: 895px;
 height: 530px;
 height: 640px;
 background-color: #7f7f7f;
}

#Gallery img {
 max-height: 560px;
 max-width: 795px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
width: auto;
height: auto;
}

#DisplayInstructions {
 width: 570px;
 height: 490px;
 margin: 0 auto;
 margin-top: 45px;
 padding-right: 20px;
}

#DisplayInstructions h3, #DisplayInstructions h4 {
 ma-rgin-left:       0px;
 }

/*
 *  "infobox" is the class name of the element that displays the textual description of the selected piece.  If the description
 *  is too big for the box there is a dilemma as to what to do.  If "overflow: auto;" is used then a scroll bar will appear and
 *  look fine.  The problem is that the scroll bar cannot be used because as soon as the mouse is moved off of the thumbnail to
 *  go and move the scroll. The scroll and the text both disappear.  If "overflow: hidden;" is used no scroll appears, but the
 *  text that overflowed is not visible.  If the overflow is not addressed, then it will spill outside of the box and lay on
 *  top of whatever is below it.  This is the worst of all the cases.  "overflow: hidden;" is the best choice because it is the
 *  least offensive.  Overflowing the box and overwriting what is below is really bad.  Seeing a scroll bar and not being able
 *  to activate it is frustrating and annoying.  So "overflow: hidden;" is what is left. The best thing is to keep the description
 *  short enough so that the box does not overflow.
 *
 *  The background color is important as a backdrop for the text because it covers up the instructions below it.  If a background
 *  color is not selected the description text will overlay the instruction text, which will still be visible.  Have the background
 *  match the instruction background so that it will be more visually seamless.  The background color to match is that from the
 *  "DisplayWrapper" division.
 */

.infobox {
 display: none;
 position: absolute;
 left: 30px;
 bottom: 30px;
 width: 650px;
 height: 500px;
 width: 845px;
 height: 610px;
 background-color: #7f7f7f;
 overflow: hidden;
}

.infobox li {
 font-style: italic;
}

.info-box ul {
 list-style-position: outside;
 list-style-type: circle;
}

a.title h1 {
 font-size: 42pt;
 font-weight: bold
 color: black;
 background-color: #7f7f7f;
}

/*
 *  This styles the top thumbnail box.  It is the capital sigma.
 */

a.title {
 text-decoration: none;
 color: #000000;
 color: white;
 background-color: #7f7f7f;
 background-color: #e2e2e2;
}

a.title h1 {
  co-lor: pink;
}

a.title:hover .infobox  {
 display: block;
}

.infobox {
  color: black;
}

.infobox p {
 font-size: 1em;
 text-align: justify;
 font-weight: 500;

}

.infobox p:first-letter {
 font-size: 2.0em;
 font-weight: bold;
}

.infobox span p {
 font-size: .9em;
}

.infobox h2 {
 font-size: 2em;
 text-align: center;
 font-weight: bold;
}

.infobox h4 {
 padding-top: 50px;
 font-size: 1.2em;
 text-align: center;
 font-weight: bold;
}

.instructions {
 display: block;
 position: absolute;
 border: 1px solid #000000;
 width: 400px;
 bottom: 250px;
 left: 300px;
 padding: 10px;
 padding-bottom: 0px;
 padding-left: 0px;
}

.instructions li {
 margin: 10px;
 margin-left: 0px;
}

img.horiz {
 visibility: hidden;
 position: absolute;
}

img.vert {
 visibility: hidden;
 position: absolute;
}

a.projectpic:hover {
 border: 1px solid #ff1;
}

a.projectpic:hover img, a.projectpic:hover span  {
 display: block;
 visibility: visible;
}

/*
 *  This styles the thumbnails in the scroll box.  The margin-left property moves
 *  the thumbnails in the scroll box to the left.  I changed this to 5 from 1
 *  on 8 Sept 2021 to more center the thumbnail in the scroll box.
 */

a.projectpic {
 visibility: visible;
 width: 75px;
 height: 75px;
 float: left;
 margin: 2px;
 margin-top: 1px;
 margin-bottom: 1px;
 margin-left: 5px;
 margin-right: auto;
 border: 1px solid #ffffff;
 outline: none;
 color: black;
 background-color: #7f7f7f;
}

/*
 *  This styles the images that are displayed when hovering over a thumbnail.
 */

a.projectpic img {
 display: block;
 border: 2px solid #000000;
 margin: 20px;
 margin: 0 auto;
 margin-left: auto;
 margin-right: auto;
 position: absolute;
 bottom: 62px;
}

a.horiz img {
 margin: 0 auto;
 le-ft: 15px;
 bottom: 100px;
}

a.vert img {
 bottom: 10px;
 l-eft: 125px;
margin:0 auto;
}

/*
 *  This class styles the images as they are displayed when the mouse hovers over the thumbnail.
 *  For seamless viewing use the same background color as the "DisplayWrapper" division.
 */

.dspbox {
 display: none;
 left: 30px;
 width: 630px;
 height: 520px;
 width: 845px;
 height: 610px;
 bottom: 20px;
 margin-bottom: 20px;
 marg-in: 0 auto;
 position: absolute;
 border: 1px solid #000000;
 background-color: #7f7f7f;
 border: 1px solid #ff0000;
}

/*
 *  Switch the height and width dimensions to make a vertical or horizontal scroll box.  Also change the height and
 *  width in "thumbs" division.   The last value for a given property takes precedence.
 */

/*
 * New 1-14-09.
 */

#scrollbox {
 visibility: visible;

 width: 405px;
 height: 96px;

 height: 405px;
 width: 96px;

 background-color: #f4f4f4;
 overflow: auto;
 border: 1px solid #000;
 margin-left: auto;
 margin-right: 0px;
 margin-bottom: 2px; color: #ff0000;
}

/*
 *  This styles the backgroud of the thumbnail list.
 */

#thumbnails {
 visibility: visible;

 width: 790px;
 height: 100%;

 width: 100%;
 height: 790px;

 back-ground-color: #b22222;
 background-color: #7f7f7f;
 border: 0px solid #ff0000;
}