div.gallery-wrapper {
	height: 424px;
	width: 620px;
	position: relative;
	margin: auto;
	overflow: hidden;
}

div.gallery-wrapper a {
	color:#fff !important;
	text-decoration:none !important;	
}

div.gallery-wrapper div#title-overview {
	position:absolute;
	top:10px; left:0;
	display:block;
	width:100%;
	font-family: Arial, Geneva, sans-serif;
	font-size:22px;
	line-height: 120%;
	text-align:center;
	color:#333;
}

div.gallery-wrapper div#title-overview a {
	color:#333 !important;	
}

div.gallery-wrapper div#large-view {
	position:absolute;
	top:-350px;
	left:85px;
	width:440px;
	height:284px;
	/*overflow:hidden;*/
	z-index:201;
	border-radius: 24px;
	border:16px solid rgba(0,0,0,0.4);
	-moz-background-clip: border;     /* Firefox 3.6 */
	-webkit-background-clip: border;  /* Safari 4? Chrome 6? */
	background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
	-moz-background-clip: padding;     /* Firefox 3.6 */
	-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
	background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
	-moz-background-clip: content;     /* Firefox 3.6 */
	-webkit-background-clip: content;  /* Safari 4? Chrome 6? */
	background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
	
div.gallery-wrapper div#large-view img,
div.gallery-wrapper div#large-view object {
	border-radius: 8px;
	width:440px;
	height:284px;
}

div.gallery-wrapper ul.news-gallery {
	float: left;
	list-style: none;
	margin: 0; padding: 0;
	height: 272px;
	/*padding:12px 18px;*/
}
div.gallery-wrapper ul.news-gallery li {
	margin: 0; padding: 0px;
	float: left;
	position: relative;
	opacity: 0.3;
	width: 68px; height: 68px;
}
div.gallery-wrapper ul.news-gallery li.no-opacity {
	opacity: 1;
}
/*ul.news-gallery li a {
	display:block;
	width:64px;
	height:46px;
}*/
div.gallery-wrapper ul.news-gallery li img {
	display:none;
	border: 2px solid #000;
	background: #000;
	position: absolute;
	left: 0; top: 0;
	width: 64px; height: 64px;
}

div.gallery-wrapper ul.news-gallery li div.category,div.gallery-wrapper ul.news-gallery li div.title {
	display:none; 
}

div.gallery-wrapper div#large-view div.category {
	-ms-transform-origin: top left; -moz-transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left;
	-ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg);
	color:#fff;
	display:none;
	padding:1px 12px 3px 12px; 
	background: rgba(102,156,22, 0.5);
	position: absolute;
	font-family: 'Segoe ui','myriad pro', Geneva, sans-serif;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	left: 0; bottom: 0;
}

div.gallery-wrapper div#large-view div.category:hover {
	background: rgba(0,0,0, 0.6);
}

div.gallery-wrapper div#large-view div.close-preview {
	display:none;
	cursor:pointer;
	color:#fff;
	padding:2px 12px 2px 12px; 
	background: rgba(224,27,76, 0.3);
	position: absolute;
	font-family: 'Segoe ui','myriad pro', Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	right: 16px; top: 0px;
	
}
div.gallery-wrapper div#large-view div.close-preview:hover {
	opacity: 1;
	background: rgba(224,27,76, 0.5);
}

div.scrollingHotSpotLeft
{
	min-width: 75px;
	width: 24%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(/images/trans.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 24%;
	height: 100%;
	background-image: url(/images/trans.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;

}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-color: #fff;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: absolute;
	left: 0px;
	top:50px;
	overflow: hidden;
	width: 100%;
	height: 374px;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

div.gallery-info
{
	padding: 0px 20px 10px 20px;
}

div.gallery-info ul{
	list-style-type: square;
	padding: 0px;
	margin: 0px 0px 0px 15px;
}

div.gallery-info li{
	padding-left: 0px;
}