/* photo gallery */

/**************************************************************************************
/* update the following classes to change the appearance of the photo gallery drop-in 
/* application
/*************************************************************************************/

/* this is the class used on the outside container element for the photo gallery */
/* html example: <div class="PhotoGallery_Wrapper"> */
/* this element is used to avoid the broken box model object in ie6 */
.PhotoGallery_Wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* this is the class used on the inside container element for the photo gallery */
/* html example: <div class="PhotoGallery_Wrapper"><div class="PhotoGallery"> */
.PhotoGallery {
	width: 100%;
	margin: 0;
	padding: 10px 0;
}

/* this is the class used on the html table that lists the images */
/* html example: <table border="0" cellspacing="0" class="Images"> */
.PhotoGallery table.Images {
	width: 100%;
}

/* the table cells (<td>) that hold each image */
/* html example: <td><a href="..."><img src="..." ... /></a></td> */
.PhotoGallery table.Images td {
	width: 20%;
	text-align: center;
}

/* the container element for the paging control (<< | < | > | >>) */
/* html example: <div class="Paging"> */
.PhotoGallery .Paging {
	text-align: center;
}

/* the link elements that are used in the paging control */
/* html example: <a href="..." class="Next">&gt;</a> */
.PhotoGallery a:link, .PhotoGallery a:active, .PhotoGallery a:visited {}
.PhotoGallery a:hover {}

/* the First (<<) link element used in the paging control */
/* html example: <a href="..." class="First">&lt;&lt;</a> */
/** overrides .PhotoGallery a **/
.PhotoGallery a.First:link, .PhotoGallery a.First:active, .PhotoGallery a.First:visited {}
.PhotoGallery a.First:hover {}

/* the Previous (<) link element used in the paging control */
/* html example: <a href="..." class="Previous">&lt;</a> */
/** overrides .PhotoGallery a **/
.PhotoGallery a.Previous:link, .PhotoGallery a.Previous:active, .PhotoGallery a.Previous:visited {}
.PhotoGallery a.Previous:hover {}

/* the Next (>) link element used in the paging control */
/* html example: <a href="..." class="Next">&gt;</a> */
/** overrides .PhotoGallery a **/
.PhotoGallery a.Next:link, .PhotoGallery a.Next:active, .PhotoGallery a.Next:visited {}
.PhotoGallery a.Next:hover {}

/* the Last (>>) link element used in the paging control */
/* html example: <a href="..." class="Last">&gt;&gt;</a> */
/** overrides .PhotoGallery a **/
.PhotoGallery a.Last:link, .PhotoGallery a.Last:active, .PhotoGallery a.Last:visited {}
.PhotoGallery a.Last:hover {}

/* the Separator (|) element used in the paging control between each of the links */
/* html example: <span class="Separator"> | </span> */
.PhotoGallery .Separator {}

/* the Separator (|) element used between the First and Previous links in the paging control */
/* html example: <span class="Separator FirstPreviousSeparator"> | </span> */
.PhotoGallery .FirstPreviousSeparator {}

/* the Separator (|) element used between the Previous and Next links in the paging control */
/* html example: <span class="Separator NextPreviousSeparator"> | </span> */
.PhotoGallery .NextPreviousSeparator {}

/* the Separator (|) element used between the Next and Last links in the paging control */
/* html example: <span class="Separator NextLastSeparator"> | </span> */
.PhotoGallery .NextLastSeparator {}

/* the container element for the text display of the current page (eg. Displaying page 4 of 9) */
/* html example: <div class="CurrentPage">Displaying page 1 of 2</div> */
.PhotoGallery .CurrentPage {
	text-align: center;
}