@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: 5px;


}
 
.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: 344px; 
 /*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: -275px;
margin-top: -195px;
width: 338px; 
 /*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: 0;
 
padding-bottom: 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: -375px;
margin-top: -195px;
width: 610px; 
 /*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: -550px;
margin-top: -195px;
width: 614px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb # 5 */



/*start thumb #6 */

.thumbnail6{
 
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.*/
.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: -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;
}
 
.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: -550px;
margin-top: -100px;
width: 585px; 
 /*position where enlarged image should offset horizontally */

}
/*end thumb #6 */