/**
* =gallery
* @subsection gallery
* --------------------------------------------------------------------------------------------------
*/
body.media.photo-gallery #wrapper {
	background-image: url(../../../images/layout/media/photo-gallery-bg.jpg);
}
body.media.art-gallery #wrapper {
	background-image: url(../../../images/layout/media/art-gallery-bg.jpg);
}
body.media-index #wrapper {
	background-image: url(../../../images/layout/script.jpg);
}
body.media #content,
body.media #container {
	overflow: hidden; zoom: 1;
	padding: 0;
	background-color: transparent;
}
body.media-route #content {
	overflow: visible;
	width: 542px;
	margin-left: 30px;
}
body.media .gallery {
	width: 542px;
}
body.media .gallery h3.title {
	position: relative;
	height: 23px;
	margin: 0 0 15px;
	background-color: #eee9e1;
}
body.media #content .gallery h3.title a {
	display: block;
	height: 23px;
	color: #A2A09E; text-decoration: none;
}
body.media .gallery h3.title span,
body.media .gallery h3.title img {
	position: absolute; top: 0; left: 0;
}
body.media .gallery h3.title span {
	height: 32px;
}
body.media .gallery li p,
body.media .gallery li h3 {
	display: none;
}
body.media .gallery li {
	height: 80px;
	text-align: center;
}

body.media-index #container {
	margin: 0 0 0 -15px; padding: 0 70px;
	background: url(../../../images/layout/bg.jpg) repeat 0 0;
}
body.media-index #container #content {
	background: transparent;
}
#media-listing-intro {
	padding: 40px 0;
}
#media-listing-intro ul {
	overflow: hidden;
	list-style: none;
}
#media-listing-intro ul li {
	float: left; position: relative;
	width: 265px;
	margin: 0 20px 0 0; padding: 0 0 50px;
}
#media-listing-intro ul li.last {
	margin-right: 0;
}
#media-listing-intro ul li a {
	display: block;
	height: 263px;
	background-color: #fff;
	border: 1px solid #ccc;
}
#media-listing-intro ul li a img {
	display: block;
	margin: 0 auto; padding: 7px 0;
}
#media-listing-intro ul li h3 {
	position: absolute; bottom: 0; left: 50%;
	height: 40px;
	margin: 0;
	cursor: pointer;
}
#media-listing-intro ul li a:hover h3,
#media-listing-intro ul li.hover a h3 {
	background-position: 0 -40px;
}
#media-listing-intro ul #media-listing-photo-gallery h3 {
	width: 135px;
	margin-left: -67px;
	background-image: url(../../../images/layout/media/photo-gallery.gif);
}
#media-listing-intro ul #media-listing-art-gallery h3 {
	width: 115px;
	margin-left: -58px;
	background-image: url(../../../images/layout/media/art-gallery.gif);
}
#media-listing-intro ul #media-listing-media-archive h3 {
	width: 140px;
	margin-left: -70px;
	background-image: url(../../../images/layout/media/media-archive.gif);
}


body.media #container div.gallery h3 {
	position: relative; zoom: 1;
	margin: 0 0 10px;
}
body.media #container div.gallery h3 a {
	display: block; zoom: 1;
}
body.media #container div.gallery .gallery-images,
body.media #container div.gallery ul {
	position: relative; overflow: hidden; zoom: 1;
	width: 542px;
}
body.media #container div.gallery ul {
	padding: 0 0 20px; margin: 0;
}
body.media #container div.gallery ul li {
	float: left;
	margin: 0 10px 10px 0;
}

html.js body.media #container div.gallery {
	overflow: visible; position: relative;
}
html.js body.media #container div.gallery div.gallery-images {
	position: relative; overflow: hidden;
	width: 542px;
}
html.js body.media #container div.gallery div.gallery-images ul {
	position: relative; overflow: hidden;
	width: auto; height: 80px;
	padding: 0; margin: 0 0 20px;
}
html.js body.media div.scrollingHotSpotLeft,
html.js body.media div.scrollingHotSpotRight {
	position: absolute; top: 65px; z-index: 1000;
	display: block;
	height: 20px; width: 20px;
	background: no-repeat 0 0;
	cursor: pointer;
}
html.js body.media div.scrollingHotSpotLeft {
	display: none;
	left: -30px;
	background-image: url(../../../images/layout/media/left.gif);
}
html.js body.media div.scrollingHotSpotRight {
	right: -30px;
	background-image: url(../../../images/layout/media/right.gif);
}
html.js body.media div.closed div.scrollingHotSpotLeft,
html.js body.media div.closed div.scrollingHotSpotRight {
	display: none !important;
}
* html.js body.media div.shown div.scrollingHotSpotLeft,
* html.js body.media div.shown div.scrollingHotSpotRight {
	display: block !important;
}

html.js body.media #container div.gallery div.gallery-images ul {
	display: none;
}
html.js body.media #container div.gallery.f div.gallery-images ul {
	display: block;
}