@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: 100;

/*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: 'arial narrow', sans-serif, arial;
 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: -200px;
margin-top: -195px;
width: 590px; 
 /*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: 75;

/*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: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

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

 border-width: 0px;
 

 padding: 0px;

border-style: double;  border-width: 5px; border-color: #525200; border-radius: 10px;
}
 
.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: -310px;
margin-top: -195px;
width: 554px; 
 /*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: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

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

 border-width: 0px;
 

padding: 0px;

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


}
 
.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: -425px;
margin-top: -195px;
width: 615px; 
 /*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: 25;

/*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: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

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

 border-width: 0px;
 

padding: 0px;

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


}
 
.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: -565px;
margin-top: -195px;
width: 612px; 
 /*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 a{

background-color: transparent;
 
z-index: 0;
/*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: -60px;
margin-top: -250px;
width: 359px; 
 /*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: 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.*/
.thumbnail7:hover  a{

background-color: transparent;

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

/*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: 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: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

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

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

padding: 0px;




}
 
.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: -85px;
margin-top: -200px;
width: 610px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 7 */



/*start thumb #8 */

.thumbnail8{
 
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.*/

.thumbnail8:hover {

background-color: transparent;

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

/*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;

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: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

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

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

padding: 0px;




}
 
.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: -450px;
width: 446px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 8 */


/*start thumb #9 */

.thumbnail9{
 
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.*/
.thumbnail9:hover   {

background-color: transparent;

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

/*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;

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: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

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

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

padding: 0px;

}
 
.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: -180px;
margin-top: -450px;
width: 451px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 9 */



/*start thumb #10 */

.thumbnail10 {
 
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.*/
.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;

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: 'arial narrow', sans-serif, arial;
 box-shadow: 0 0 15px black;
 
 padding: 5px;
 

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

 border-width: 0px;
 

 padding: 0px;

border-style: double;  border-width: 5px; border-color: #525200; border-radius: 10px;
}
 
.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: -175px;
margin-top: -440px;
width: 503px; 
 /*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: 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.*/
.thumbnail11: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; 

}
 
.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: 'arial narrow', sans-serif, arial;
 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: -350px;
margin-top: -150px;
width: 814px; 
 /*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: 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.*/
.thumbnail12: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; 

}
 
.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: 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.*/
.thumbnail13: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; 

}
 
.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: -150px;
margin-top: -20px;
width: 200px; 
 /*position where enlarged image should offset horizontally */

}


/*end thumb # 13 */