.ZZZ_viewer {
	width: 646px;
	height: 319px;
	position: relative;
	background-color: orange;
	border: 2px solid #000;
	overflow: hidden;
	display: none;
	font: 12px Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

.viewer {
	width: 646px;
	height: 319px;
	position: relative;
	background-color: #383937;
	border: 2px solid #000;
	overflow: hidden;
	display: none;
	font: 12px Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

/* @group Map */

.viewer .jmap {
	height: 299px;
	width: 542px;
	margin: 0;
	padding: 0;
	color: #000;
}

.jmap .jmapicon {
	width: 50%;
	height: 50%;
}

.mapctrl {
	height: 20px;
	color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: url(images/bg-video-ctrl.png) repeat-x 0 top;
	font-weight: bold;
	line-height: 20px;
}

.mapctrl label {
	padding-right: 16px;
	color: #ccc;
}

/* @end */

/* @group Buttons */

.viewer .panel {
	height: 323px;
	width: 118px;
	position: absolute;
	top: 0;
	right: 0;
	padding: 1px 0 0;
	margin: 0;
}

.panel .button {
	width: 121px;
	height: 79px;
	display: block;
	list-style-type: none;
	text-align: center;
	line-height: 70px;
	font-size: 20px;
	position: relative;
	background: url(images/bg-button.png) no-repeat;
}

.button a {
	color: #fff;
	text-decoration: none;
	display: block;
	width: 112px;
	height: 78px;
	margin: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	border-style: none;
	border-width: 0;
	outline: none;
}

.btn-map {
	background-image: url(images/bg-circuit.jpg);
}

.btn-map.selected, a:hover.btn-map {
	background-image: url(images/bg-circuit-on.jpg);
}

.btn-videos {
	background-image: url(images/bg-videos.jpg);
}

.btn-videos.selected, a:hover.btn-videos {
	background-image: url(images/bg-videos-on.jpg);
}

.lnk-photos {
	background-image: url(images/bg-photos.jpg);
}

.lnk-photos.selected, a:hover.lnk-photos {
	background-image: url(images/bg-photos-on.jpg);
}
 
.btn-live {
	background-image: url(images/bg-live.jpg);
}

.btn-live.selected, a:hover.btn-live {
	background-image: url(images/bg-live-on.jpg);
}

.panel .btn-filler-top {
	width: 121px;
	height: 8px;
	background: url(images/bg-filler-top.png) no-repeat left top;
}

.panel .btn-filler {
	width: 121px;
	height: 324px;
	background: url(images/bg-filler.png) repeat-y left;
}

/* @end */

.viewer .cache {
	position: absolute;
	right: 112px;
	height: 19px;
	width: 40px;
	bottom: -2px;
	background: url(images/fc-bar-cache.png) repeat-x 0 top;
}

.viewcontainer {
	overflow: hidden;
	display: none;
	position: relative;
	height: 319px;
}

/* @group Vidéos */

#videolist {
	text-align: center;
	float: left;
	width: 480px;
	height: 323px;
	z-index: 0;
	margin-top: 2px;
	padding: 0;
}

.videoTitle {
	height: 27px;
	color: #fff;
	font-weight: bold;
	line-height: 10px;
	background-color: #1a1a19;
	font-size: 9px;
	width: 480px;
}

#vprev, #vnext {
	height: 320px;
	width: 27px;
	float: left;
	z-index: 1000;
	background: #666 url(images/bg-video-navbtn.png) repeat-y left;
	text-align: center;
}

#vprev {
}

#vnext {
	background-color: #666;
}

#vprev img, #vnext img {
	margin-top: 150px;
	z-index: 1000;
}

/* @end */

/* @group Photos */

#photos {
	text-align: center;
}

#photolist {
	text-align: center;
	width: 465px;
	height: 323px;
	z-index: 0;
	padding: 0;
	position: absolute;
	left: 34px;
	top: 2px;
}

#pprev, #pnext {
	height: 110px;
	width: 68px;
	text-align: center;
	position: absolute;
	top: 80px;
	background-repeat: no-repeat;
}

#pprev {
	left: 0;
	background-image: url(images/hud-prev.png);
}

#pnext {
	right: 112px;
	background-image: url(images/hud-next.png);
}

.photoTitle {
	height: 27px;
	color: #fff;
	font-weight: bold;
	line-height: 10px;
	background-color: #1a1a19;
	font-size: 9px;
	width: 465px;
}

/* @end */