#thumbnail_gal_main

{

width:970px;
height:470px;


}

/*Also, the gallery3 div is assigned which holds the bigger image as well as the thumbnails,
inside the main gallery. The style for which is given below:*/

#thumbnail_gallery

{width:1000px;
position:relative;
background-color: transparent;
}

/*NOTE: The above height and width parameters are arbitrary and would depend on the
size of your gallery.

2. In the next step we assign the div for our thumbnail images, the style for which
was given as:*/

#thumbnail_gallery ul

{
list-style:none;
padding:4px;
margin-top:10px;
margin-left:20px;

width:100%;
float:left;
}

/*Div for single thumbnail image*/

#thumbnail_gallery ul li
{
display:inline;
width:80px;

height:80px;
/*float:left;*/
}

/*Div for padding of thumbnail image*/

#thumbnail_gallery ul li a {
display:inline;

width:70px;

height:30px;

text-decoration:none;

}

/*Style for the thumbnail image */
#thumbnail_gallery ul li a img

{
width:70px;
height:30px;
/*border:0;*/
padding:4px;
border:8px solid #fff;
}

/*3. In the third step we assign the placeholder and style for our big image, as given
below*/

#thumbnail_gallery ul li a b

{
position:absolute;
left:-9999px;
display:block;

width:1000px;
height:310px;
background-color:transparent;
}

/*In the above style, for the original position for the big image, the values are
given in negative so that it does not show before hovering takes place. The style
for the big image assigned was:*/

#thumbnail_gallery ul li a b img {
width:auto;
height:auto;

border:1px solid #fff;
}

/*4. In the last step we would assign the hover effects.

The style for the big image that would show on hovering above the thumbnail is shown
below:*/

#thumbnail_gallery ul li a:hover b img

{
width:auto;
height:auto;

border:1px solid transparent;
margin-left:4.75px;
}

/*The style for the thumbnails on hovering is shown below.*/

#thumbnail_gallery ul li a:hover,
#thumbnail_gallery ul li a:active,
#thumbnail_gallery ul li a:focus {white-space:normal; border-color:transparent; outline:0;}

/*The style for the placeholder of big image on hovering the thumbnail is shown below:*/

#thumbnail_gallery ul li a:hover b

{
position:absolute;
left:-1.5px;
top:1.5px;
z-index:100;
}



/* --------------gallery 2----------------------------*/
#thumbnail_gal_main2

{

width:970px;
height:470px;


}

/*Also, the gallery div is assigned which holds the bigger image as well as the thumbnails,
inside the main gallery. The style for which is given below:*/

#thumbnail_gallery2

{width:1000px;
position:relative;
background-color: transparent;
}

/*NOTE: The above height and width parameters are arbitrary and would depend on the
size of your gallery.

2. In the next step we assign the div for our thumbnail images, the style for which
was given as:*/

#thumbnail_gallery2 ul

{
list-style:none;
padding:0;
margin-top:10px;
margin-left:20px;

width:100%;
float:left;
}

/*Div for single thumbnail image*/

#thumbnail_gallery2 ul li
{
display:inline;
width:80px;

height:80px;
/*float:left;*/
}

/*Div for padding of thumbnail image*/

#thumbnail_gallery2 ul li a {
display:inline;

width:70px;

height:30px;

text-decoration:none;

}

/*Style for the thumbnail image */
#thumbnail_gallery2 ul li a img

{
width:70px;
height:30px;
/*border:0;*/
padding:4px;
border:8px solid #fff;
}

/*3. In the third step we assign the placeholder and style for our big image, as given
below*/

#thumbnail_gallery2 ul li a b

{
position:absolute;
left:-9999px;
display:block;

width:860px;
height:510px;
background-color:transparent;
}

/*In the above style, for the original position for the big image, the values are
given in negative so that it does not show before hovering takes place. The style
for the big image assigned was:*/

#thumbnail_gallery2 ul li a b img {
width:auto;
height:auto;

border:1px solid #fff;
}

/*4. In the last step we would assign the hover effects.

The style for the big image that would show on hovering above the thumbnail is shown
below:*/

#thumbnail_gallery2 ul li a:hover b img

{
width:auto;
height:auto;

border:1px solid transparent;
margin-left:4.75px;
}

/*The style for the thumbnails on hovering is shown below.*/

#thumbnail_gallery2 ul li a:hover,
#thumbnail_gallery2 ul li a:active,
#thumbnail_gallery2 ul li a:focus {white-space:normal; border-color:transparent; outline:0;}

/*The style for the placeholder of big image on hovering the thumbnail is shown below:*/

#thumbnail_gallery2 ul li a:hover b

{
position:absolute;
left:-1.5px;
top:30.5px;  /*/up or down/*/
z-index:100;
}


/* --------------gallery 3----------------------------*/
#thumbnail_gal_main3

{

width:970px;
height:470px;


}

/*Also, the gallery div is assigned which holds the bigger image as well as the thumbnails,
inside the main gallery. The style for which is given below:*/

#thumbnail_gallery3

{width:1000px;
position:relative;
background-color: transparent;
}

/*NOTE: The above height and width parameters are arbitrary and would depend on the
size of your gallery3.

2. In the next step we assign the div for our thumbnail images, the style for which
was given as:*/

#thumbnail_gallery3 ul

{
list-style:none;
padding:0;
margin-top:10px;
margin-left:20px;

width:100%;
float:left;
}

/*Div for single thumbnail image*/

#thumbnail_gallery3 ul li
{
display:inline;
width:80px;

height:80px;
/*float:left;*/
}

/*Div for padding of thumbnail image*/

#thumbnail_gallery3 ul li a {
display:inline;

width:70px;

height:30px;

text-decoration:none;

}

/*Style for the thumbnail image */
#thumbnail_gallery3 ul li a img

{
width:70px;
height:30px;
/*border:0;*/
padding:4px;
border:8px solid #fff;
}

/*3. In the third step we assign the placeholder and style for our big image, as given
below*/

#thumbnail_gallery3 ul li a b

{
position:absolute;
left:-9999px;
display:block;

width:860px;
height:610px;
background-color:transparent;
}

/*In the above style, for the original position for the big image, the values are
given in negative so that it does not show before hovering takes place. The style
for the big image assigned was:*/

#thumbnail_gallery3 ul li a b img {
width:auto;
height:auto;

border:1px solid #fff;
}

/*4. In the last step we would assign the hover effects.

The style for the big image that would show on hovering above the thumbnail is shown
below:*/

#thumbnail_gallery3 ul li a:hover b img

{
width:auto;
height:auto;

border:1px solid transparent;
margin-left:4.75px;
}

/*The style for the thumbnails on hovering is shown below.*/

#thumbnail_gallery3 ul li a:hover,
#thumbnail_gallery3 ul li a:active,
#thumbnail_gallery3 ul li a:focus {white-space:normal; border-color:transparent; outline:0;}

/*The style for the placeholder of big image on hovering the thumbnail is shown below:*/

#thumbnail_gallery3 ul li a:hover b

{
position:absolute;
left:-1.5px;
top:200.5px;
z-index:100;
}




/* --------------gallery 4----------------------------*/
#thumbnail_gal_main4

{

width:970px;
height:570px;


}

/*Also, the gallery div is assigned which holds the bigger image as well as the thumbnails,
inside the main gallery. The style for which is given below:*/

#thumbnail_gallery4

{width:1000px;
position:relative;
background-color: transparent;
}

/*NOTE: The above height and width parameters are arbitrary and would depend on the
size of your gallery3.

2. In the next step we assign the div for our thumbnail images, the style for which
was given as:*/

#thumbnail_gallery4 ul

{
list-style:none;
padding:0;
margin-top:10px;
margin-left:20px;

width:100%;
float:left;
}

/*Div for single thumbnail image*/

#thumbnail_gallery4 ul li
{
display:inline;
width:80px;

height:80px;
/*float:left;*/
}

/*Div for padding of thumbnail image*/

#thumbnail_gallery4 ul li a {
display:inline;

width:70px;

height:30px;

text-decoration:none;

}

/*Style for the thumbnail image */
#thumbnail_gallery4 ul li a img

{
width:70px;
height:30px;
/*border:0;*/
padding:4px;
border:8px solid #fff;
}

/*3. In the third step we assign the placeholder and style for our big image, as given
below*/

#thumbnail_gallery4 ul li a b

{
position:absolute;
left:-9999px;
display:block;

width:860px;
height:610px;
background-color:transparent;
}

/*In the above style, for the original position for the big image, the values are
given in negative so that it does not show before hovering takes place. The style
for the big image assigned was:*/

#thumbnail_gallery4 ul li a b img {
width:auto;
height:auto;

border:1px solid #fff;
}

/*4. In the last step we would assign the hover effects.

The style for the big image that would show on hovering above the thumbnail is shown
below:*/

#thumbnail_gallery4 ul li a:hover b img

{
width:auto;
height:auto;

border:1px solid transparent;
margin-left:4.75px;
}

/*The style for the thumbnails on hovering is shown below.*/

#thumbnail_gallery4 ul li a:hover,
#thumbnail_gallery4 ul li a:active,
#thumbnail_gallery4 ul li a:focus {white-space:normal; border-color:transparent; outline:0;}

/*The style for the placeholder of big image on hovering the thumbnail is shown below:*/

#thumbnail_gallery4 ul li a:hover b

{
position:absolute;
left:-1.5px;
top:290.5px;
z-index:100;
}