@charset "UTF-8";

/*start thumb #2 */

.thumbnail2 {
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0; 

}

 /*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail2:hover{

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail2 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail2  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 0px;

border-style: double;  border-width: 5px; border-color: #525200; border-radius: 10px;


}
 
.thumbnail2:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -195px;
margin-top: -195px;
width: 879px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 2 */








/*start thumb #3 */

.thumbnail3{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail3:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail3 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail3  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail3:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -220px;
margin-top: -195px;
width: 301px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 3 */



/*start thumb #4 */

.thumbnail4{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail4:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail4 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail4  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail4:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -310px;
margin-top: -195px;
width: 456px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 4 */





/*start thumb #5 */

.thumbnail5{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail5:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail5 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail5  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail5:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -500px;
margin-top: -195px;
width: 512px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 5 */



/*start thumb #6 */

.thumbnail6{
 
position: relative; /*note this positioning*/
 
text-indent: 0;

/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail6:hover {

background-color: transparent;
 
z-index: 50;
/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 
}
 
.thumbnail6 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

top: -500px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;



border-radius: 10px;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;
line-height: 14px;
font-size: 13px;
font-family: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
}
 
.thumbnail6 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding: 5px;



}
 
.thumbnail6:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -365px;
margin-top: -550px;
width: 809px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb #6 */




/*start thumb #7 */

.thumbnail7 {
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/ 
z-index: 1; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail7:hover a{

background-color: transparent;
 

z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 

}
 
.thumbnail7 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: -1000px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria, georgia, serif;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail7  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 0px;

border-style: double;  border-width: 5px; border-color: #525200; border-radius: 10px;
}
 
.thumbnail7:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -125px;
margin-top: -175px;
width: 588px; 
 /*position where enlarged image should offset horizontally */

}


/*end thumb # 7 */





/*start thumb #8 */

.thumbnail8{
 
position: relative; /*note this positioning*/
 
text-indent: 0;

/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail8:hover {

background-color: transparent;
 
z-index: 50;
/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 
}
 
.thumbnail8 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

top: -500px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;



border-radius: 10px;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;
line-height: 14px;
font-size: 13px;
font-family: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
}
 
.thumbnail8 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding: 5px;



}
 
.thumbnail8:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -80px;
margin-top: -250px;
width: 981px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb #8 */








/*start thumb #9 */

.thumbnail9{
 
position: relative; /*note this positioning*/
 
text-indent: 0;

/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail9:hover {

background-color: transparent;
 
z-index: 50;
/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 
}
 
.thumbnail9 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

top: -500px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;



border-radius: 10px;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;
line-height: 14px;
font-size: 13px;
font-family: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
}
 
.thumbnail9 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding: 5px;



}
 
.thumbnail9:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -200px;
margin-top: -250px;
width: 636px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb #9 */



/*start thumb #10 */

.thumbnail10{
 
position: relative; /*note this positioning*/
 
text-indent: 0;

/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail10:hover {

background-color: transparent;
 
z-index: 50;
/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 
}
 
.thumbnail10 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

top: -500px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;



border-radius: 10px;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;
line-height: 14px;
font-size: 13px;
font-family: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
}
 
.thumbnail10 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding: 5px;



}
 
.thumbnail10:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -275px;
margin-top: -650px;
width: 710px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb #10 */











/*start thumb #11 */

.thumbnail11 {
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/ 
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail11:hover {

background-color: transparent;
 

z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 

}
 
.thumbnail11 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: -1000px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria, georgia, serif;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail11  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 0px;

border-style: double;  border-width: 5px; border-color: #525200; border-radius: 10px;
}
 
.thumbnail11:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -50px;
margin-top: -150px;
width: 511px; 
 /*position where enlarged image should offset horizontally */

}


/*end thumb # 11 */









/*start thumb #12 */

.thumbnail12 {
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/ 
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail12:hover {

background-color: transparent;
 

z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 

}
 
.thumbnail12 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: -1000px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria, georgia, serif;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail12  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 0px;

border-style: double;  border-width: 5px; border-color: #525200; border-radius: 10px;
}
 
.thumbnail12:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -50px;
margin-top: -150px;
width: 377px; 
 /*position where enlarged image should offset horizontally */

}


/*end thumb # 12 */




/*start thumb #13 */

.thumbnail13 {
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/ 
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail13:hover {

background-color: transparent;
 

z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 

}
 
.thumbnail13 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: -1000px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria, georgia, serif;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail13  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 0px;

border-style: double;  border-width: 5px; border-color: #525200; border-radius: 10px;
}
 
.thumbnail13:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -50px;
margin-top: -150px;
width: 510px; 
 /*position where enlarged image should offset horizontally */

}


/*end thumb # 13 */









/*start thumb #14 */

.thumbnail14{
 
position: relative; /*note this positioning*/
 
text-indent: 0;

/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail14:hover {

background-color: transparent;
 
z-index: 50;
/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 
}
 
.thumbnail14 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

top: -500px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;



border-radius: 10px;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;
line-height: 14px;
font-size: 13px;
font-family: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
}
 
.thumbnail14 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding: 5px;



}
 
.thumbnail14:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -50px;
margin-top: -350px;
width: 361px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb #14 */














/*start thumb #15 */

.thumbnail15 {
 
position: relative; /*note this positioning*/
 
text-indent: 0;

/*this z-index number keeps the a link from showing thru on the overlapping images.  Otherwise it would be zero*/
z-index: 0; 

color: red;

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail15:hover {

background-color: transparent;
 
z-index: 50;
/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden; 
}
 
.thumbnail15 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

top: -500px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;



border-radius: 10px;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;
line-height: 14px;
font-size: 13px;
font-family: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
}
 
.thumbnail15 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding: 5px;



}
 
.thumbnail15:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -50px;
margin-top: -250px;
width: 329px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb #15 */







/*start thumb #16 */

.thumbnail16{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail16:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail16 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail16  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail16:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -125px;
margin-top: -195px;
width: 573px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 16 */






/*start thumb #17 */

.thumbnail17{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail17:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail17 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail17  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail17:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -150px;
margin-top: -195px;
width: 321px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 17 */





/*start thumb #18 */

.thumbnail18{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0;
color: red; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail18:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail18 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail18  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail18:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -150px;
margin-top: -30px;
width: 200px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 18 */


/*start thumb #19 */

.thumbnail19{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0;
color: red; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail19:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail19 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail19  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail19:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -50px;
margin-top: -30px;
width: 200px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 19 */




/*start thumb #20 */

.thumbnail20{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0;
color: red; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail20:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail20 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail20  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail20:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -50px;
margin-top: -30px;
width: 200px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 20 */


/*start thumb #21 */

.thumbnail21{
 
position: relative; /*note this positioning*/
 
text-indent: 0;
 
z-index: 0;
color: red; 

}

/*an a is added for older browsers(.thumbnail#: hover a) to stop the link from showing through the image when a text rollover is used.*/
.thumbnail21:hover {

background-color: transparent;
 
z-index: 50;

/*visibility hidden is used to keep the small image from showing through the large image on older IE browsers*/
visibility: hidden;

}
 
.thumbnail21 span { /*CSS for enlarged image*/
 
position: absolute;
 
background-color: #8e8e38;
 
padding: 5px;

border-radius: 10px;

top: 0px;/*this offsets the the added height of the picture so that you don't have added space to the bottom of your page.  This can also be used with left and right when dealing with a wide picture*/

margin-left: -1000px;

border: none;
 
visibility: hidden;
 
color: black;/*color of text of caption on enlarged   photo*/
 padding: 12px;
text-decoration: none;
text-align: justify;

line-height: 14px;
font-size: 13px;
font-family: cambria;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

}
 
.thumbnail21  span img{ /*CSS for enlarged image*/

 border-width: 0px;
 

 padding: 5px;


}
 
.thumbnail21:hover span { /*CSS for enlarged image on hover*/

visibility: visible;
top: 0; /*this makes the top of the expanded photo align with the  top of the div instead of th bottom.*/

margin-left: -100px;
margin-top: -30px;
width: 200px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 21 */