div#container
{width: 970px;
height: 505px;
}

div.content 
{
/** The display of content is enabled by a javascript generated style on the page.
   This is so that the slideshow content won't display unless javascript is enabled. **/
display: none;
float:left;
width:825px; 
border: 0px solid red;
font: normal 2.1em "Lucida Sans Unicode","Lucida Grande","Lucida Sans", Verdana, Arial, sans-serif;
}

div.content a, div.navigation a 
{
text-decoration: none;
color: #999999;
}

div.content  a:focus, div.content  a:hover, div.content  a:active 
{
outline: none;
}

/** slideshow controls **/

/**controls = all slideshow controls - not inc. thumb controls **/
/**nav-controls = previous, next **/
/**ss-controls = play slideshow **/

div.controls a 
{
padding-left: 20px;
}

div.ss-controls
{
position: absolute; right: 10px; top: 5px;
}

div.nav-controls
{
position: absolute; right: 10px; top: 30px;
}

div.nav-controls a 
{
display: block;
float: left;
margin-left: 3px;
padding: 2px 6px 2px 6px;
border: 1px solid #ccc;
color: #999999;
}

div.nav-controls a:hover 
{
background-color: #eee;
text-decoration: none;
}

/**loader**/

div.loader 
{
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 825px;
height: 505px
}

/** slideshow **/

div.slideshow 
{
clear: both;
}

div.slideshow span.image-wrapper /** to center images **/
{
text-align: center;
display: block; 
margin: auto;

}

div.slideshow a.advance-link 
{

display: block;
border: 0px solid #ccc;
}

.image-wrapper 
{
display: block;
margin: auto;
}

/** thumbnails **/

div.navigation 
{
/* The navigation style is set by a javascript generated style on the page.
   This is so that the javascript specific styles won't be applied unless javascript is enabled. */
}

ul.thumbs 
{
clear: both;
margin: 0;
padding: 0;
}

ul.thumbs li 
{
float: left;
padding: 0;
margin: 0px 5px 5px 0;
list-style: none;
}

a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}

ul.thumbs li.selected a.thumb 
{
background: #ff79bf;/** hb **/
border: 1px solid #ff79bf;/** hb **/
}

a.thumb:focus 
{
outline: none;
}

ul.thumbs img 
{
border: none;
display: block;
}

/** thumbnail navigation **/

div.pagination 
{
clear: both;
font: normal 2.1em "Lucida Sans Unicode","Lucida Grande","Lucida Sans", Verdana, Arial, sans-serif;/**hb**/

}

div.navigation div.top {
	margin-bottom: 12px;
	height: 11px;
}
div.navigation div.bottom {
	margin-top: 12px;
	
}

div.pagination a, div.pagination span.current 
{
display: block;
float: left;
margin-right: 3px;
padding: 2px 6px 2px 6px;
border: 1px solid #ccc;
margin-bottom: 5px;
}

div.pagination a:hover 
{
background-color: #eee;
text-decoration: none;
}

div.pagination span.current 
{
font-weight: bold;
background-color: #ff79bf;
border-color: #ff79bf;
color: #fff;
}