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

top: -100px;/*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: cambria;
 box-shadow: 0 0 15px black;
}
 
.thumbnail2 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding-bottom: 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: 508px; 
 /*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;

top: -100px;/*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: cambria;
 box-shadow: 0 0 15px black;
}
 
.thumbnail3 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding-bottom: 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: -425px;
margin-top: -195px;
width: 819px; 
 /*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: -180px;
margin-top: -195px;
width: 334px; 
 /*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;

top: -100px;/*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: cambria;
 box-shadow: 0 0 15px black;
}
 
.thumbnail5 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding-bottom: 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: -700px;
margin-top: -195px;
width: 743px; 
 /*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: 50; 

}

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


/*this offsets the low picture*/
margin-top: -800px;

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: cambria;
 box-shadow: 0 0 15px black;
 

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

border-width: 0;
 
padding-bottom: 5px;

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

}
 
.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: -245px;
margin-top: -575px;
width: 704px;




 /*position where enlarged image should offset horizontally */

}
/*end thumb #6 */






/*start thumb #7 */




.thumbnail7  {

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

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: cambria;
 box-shadow: 0 0 15px black;
}
 
.thumbnail7 span img{ /*CSS for enlarged image*/

border-width: 0;
 
padding-bottom: 5px;

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: -625px;
margin-top: -300px;
width: 680px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb #7 */