/**
* @author	Jasal Vadgama/Simon Wyse - Javelin Group
* @version	1.0
* @media	screen
*
* @info		Controls all rich media and related components
			E.g, Info Panels, Hotspots, Carousel, Flash viewers etc
*
* @contents
* =1: Flash Viewers
*
* =2: Messaging
* 
* =3: Quickfinder
* 
* =4: Loaders
*
* =5: Hotspots
*
* =6: Image Panels
*	=6.1: Carousel
*	=6.2: Category HP MIF Panel
*	=6.3: Gallery Summary 2 MIF Panel
*
* =7: Hero Info Panels
*/

/**
* =1: Flash Viewers
*
* @info Set background for all flash viewers
*/
#s7ZoomWrapper, #s7VideoWrapper,
#s7PanoramicWrapper, #s7SpinsetWrapper {
	background-color: #fff;
}

/**
* =2: Messaging
*
* @info Update Flash / Noscript messaging
*/
.updateFlash, .noscript {
	border: 2px solid #f60;
	padding: 15px;
}
.updateFlash h2, .noscript h2 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 5px;
}
.updateFlash a {
	text-decoration: underline;
	margin-right: 5px;
}
.heroWrapper .updateFlash, 
.heroWrapper .noscript {
	height: 211px;
	padding-top: 170px;
}
.productHero .updateFlash, 
.productHero .noscript { height: 420px; }
.productHero .updateFlash h2, 
.productHero .noscript h2 { padding: 10px 0 10px; }
.pagingBlock .noscript { margin-bottom: 10px; }


/**
* =3: Quickfinder
*
* @info Quickfinder layout
*/
#quickFinder {
	display: none;
	padding-bottom: 15px;
}
#quickFinder form {
	padding: 6px;
	width: 716px;
	background: #f1efee;
}
#qfinder {
	position: relative;
	width: 706px;
	background: #fff;
}
#qfinder legend span {
	position: absolute; 
	left: 0; 
	width: 130px; 
	height: 88px; 
	display: block; 
	background: #f1efee url(/images/qfinder_label.png) center center no-repeat;
}
#qfinder ul {
	background: #fff;
	width: 588px; 
	padding-left: 128px; 
	min-height: 62px;
}
#qfinder ul li {
	float: left; 
	width: 260px; 
	height: 38px;
	padding: 6px 0 0 8px;
}
#qfinder ul li.button {
	width: 20px;
	padding: 6px 0 0 12px;
}
#qfinder ul li.clearer { clear: left; }
#qfinder li label {
	float: left;
	width: 70px; 
	font-weight: bold;
	text-align: right;
	padding: 2px 5px 0 0; 
	background-color: #fff;
}
#qfinder li select {
	float: left;
	width: 185px;
}
#qfinder li p {
	display: none;
	float: left; 
	padding: 2px;
	width: 181px; 
	background-color: #f5f3f2;
}
#qfinder li p span {
	float: left;
	width: 165px; 
}
#qfinder li p a {
	float: right; 
	width: 15px; 
	height: 15px; 
	background-color: #000;
	background: url(/images/qfinder_change.png) no-repeat;
}

/**
* =4: Loaders
*
* @info Loading symbol for AJAX related components
*/
#loader, #heroLoader {
	width: 596px;
	position: absolute;
	left: 130px;
	top: 2px;
	height: 62px;
	background: #fff url(/images/ajax-loader.gif) center center no-repeat;
	z-index: 1;
}
#quickFinder #loader { 
	height: 85px; 
	width: 586px;
}
#heroLoader {
	left: 0px;
	top: 0px;
	height: 400px;
	width: 716px;
	z-index: 3;
}

/**
* =5: Hotspots
*
* @info Hotspot background image, icons and display panel
*/
.hotspotHeroWrapper {
	position: relative;
	width: 716px;
	height: 400px;
	overflow: hidden;
}
.hotspot {
	position: absolute;
	cursor: pointer;
	background: url(/images/hotspot.png) no-repeat;
	width: 26px;
	height: 26px;
	z-index: 2;
}
.hotspot-over { background: url(/images/hotspot-over.png) no-repeat; }
.hotspot a {
	display: block;
	width: 22px;
	height: 22px;
}
.panel {
	position: absolute;
	left: 0px;
	top: 400px;
	width: 320px; 
	height: 381px;
	border: 6px solid #f1efee;
	border-left: 0;
	border-bottom: 0; 
	background-color: #fff;
	z-index: 3;
}
.closePanel {
	background: url(/images/close-panel.png) no-repeat;
	overflow: hidden;
	width: 22px;
	height: 22px;
	position: absolute;
	top: 4px;
	right: 4px;
	cursor: pointer;
}
dl.panelInfo { padding: 8px 10px 0; }
dl.panelInfo dt { padding-bottom: 10px; }
dl.panelInfo dt a { font-weight: bold; }
dl.panelInfo a { text-decoration: underline; }
dl.panelInfo #videoCaveatWrapper { display: block; }
dl.panelInfo .videoAuxLink { margin-right: 5px; }
p.hotspotDesc {
	display: block;
	width: 100%;
}
p.hotspotDesc a {
	clear: both;
	float: left;
	padding-right: 10px;
	min-width: 1%;
	overflow: visible;
	background: url(/images/link-arrow-light.png) center right no-repeat;
}
p.hotspotRating {
	position: absolute; 
	bottom: 0px; 
	left: 0px; 
	padding: 0 10px; 
	height: 23px;
}
p.hotspotRating img {
	float: left;
	margin-right: 10px;
}
p.hotspotRating span { display: inline; }

/**
* =6: Image Panels
*
* @info Each panel inherits from carousel for thumbnail display 
*/

/**
* =6.1: Carousel
*
* @info Carousel Scrolling Panel
*/
#carouselWrapper {
	width: 716px;
	height: 62px;
	background: #fff url(/images/hero-bottom-bg.png) bottom left repeat-x; 
	position: relative;
}
#carouselMask {
	position: absolute; 
	overflow: hidden; 
	width: 644px; 
	height: 62px; 
	left: 37px;
}
#carouselContent {
	height: 62px; 
	position: absolute; 
	top: 0px; 
	left: 0px;
}
.carouselLeftEdge {
	width: 36px; 
	height: 57px; 
	border-right: 1px solid #e7e6e4; 
	position: absolute; 
	left: 0px;
}
.carouselRightEdge {
	width: 35px; 
	height: 57px;  
	position: absolute; 
	right: 0px;
}
.carouselLeftEdge img, .carouselRightEdge img {
	margin-left: 7px;
	margin-top: 18px;
	cursor: pointer;
}
.carouselItem, .catMifItem {
	width: 84px; 
	padding: 8px 0 0 7px; 
	border-right: 1px solid #e7e6e4; 
	position: relative; 
	float: left;
	cursor: pointer;
}
.carouselThumbnail, .thumbnailSelected {
	padding: 3px; 
	width: 71px; 
	height: 40px; 
	position: relative; 
	float: left;
}
.thumbnailSelected { background-color: #494c4e; }
.carouselMarker, .markerHighlight, .markerHidden {
	width: 69px; 
	height: 38px; 
	display: block; 
	position: absolute; 
	top: 3px; 
	left: 3px; 
	border: 1px solid #ded6d3;
}
.markerHighlight {
	width: 61px; 
	height: 30px; 
	border: 5px solid #ded6d3;
}
.markerHidden { visibility: hidden; }

/**
* =6.2: Category HP MIF Panel
*
* @info Basic MIF display
*/
#catMifWrapper {
	width: 716px; 
	min-height: 82px; 
	background: #fff url(/images/hero-bottom-bg.png) bottom left repeat-x;
}
#catMifWrapper h2 {
	width: 82px; 
	min-height: 82px; 
	float: left; 
}
#catMifContent {
	padding-left: 82px;
	width: 716px;
	min-height: 82px;
	float: left;
	background: url(/images/mif-label.png) bottom left no-repeat;
}
#catMifContent li { float: left; }
div.catMifItem { min-height: 55px; }
div.catMifItem a { padding-bottom: 5px; }
a.catMifThumbnail {
	display: block;
	position: relative; 
	width: 77px; 
	text-align: center;
	cursor: pointer;
}
.catMifImageHighlight {
	display: block; 
	padding: 3px; 
	width: 71px;
}
.catMifSelected { background-color: #494c4e; }
.catMifMarker {
	width: 69px; 
	height: 38px; 
	display: block; 
	position: absolute;
	top: 3px; 
	left: 3px; 
	border: 1px solid #ded6d3;
}
a.catMifThumbnail:hover span.catMifMarker {
	width: 61px; 
	height: 30px; 
	border: 5px solid #ded6d3;	
}

/**
* =6.3: Gallery Summary 2 MIF Panel
*
* @info Pannelled MIF display
*/
div#mifHeroPanelContent {
	width: 716px;
	min-height: 163px;
	background-color: #fff;
}
div#mifHeroPanelContent div#selectedMif { padding: 10px 5px 15px 15px; }
div#mifHeroPanelContent div#selectedMif img {
	border: 1px solid #ded6d3;
	display: inline;
	margin-right: 5px;
}
div#mifHeroPanelContent h3 {
	padding: 0 0 5px 15px;
	font-weight: bold;
	color: #6d7072;
}
div#mifHeroPanelContent div#catMifContent {
	padding-left: 0;
	height: auto;
	background: none;
}
div#mifHeroPanelContent li div.catMifItem {
	width: 77px;
	height: 65px;
	padding: 2px 12px 0 12px;
	cursor: default;
}
div#mifHeroPanelContent a.catMifThumbnail { position: static; }
div#mifHeroPanelContent a.catMifThumbnail img { margin: 3px; }
div#mifHeroPanelContent .catMifMarker {
	top: 5px;
	left: 15px;
}

/**
* =7: Hero Info Panels
*
* @info Zone and Category HP / Gall Summ 1+2 / Range Info Panels
*		Zone has the basic info panel. Others inherit from this
*		Also included here is the mask for the MIF panel (6.3)
*/
div#infoAnchor {
	position: relative;
	top: 0px;
	left: 0px;
	background-color: #fff;
}
.anchorZone { height: 242px; }
div#heroInfoPanelMask { 
	width: 302px;
	height: 100px;
	position: absolute; 
	right: 0px; 
	top: -9999px;
	overflow: hidden;
	z-index: 110;
}
div#mifHeroPanelMask {
	width: 716px;
	height: 100px;
	position: absolute; 
	right: 0px; 
	top: -9999px;
	overflow: hidden;
	z-index: 100;
}
.heroPanel {
	position: absolute; 
	right: 0px; 
	background: url(/images/info-panel-top.png) top left no-repeat; 
	padding-top: 3px;
}
.heroPanel p.panelActivator {
	background-color: #484c4f;
	width: 300px;
}
.heroPanel p.panelActivator a {
	color: #fff; 
	font-weight: bold; 
	padding: 1px 25px 8px 15px; 
	background:url(/images/info-panel-arrow-up.png) 277px 10px no-repeat; 
	display: block;
}
dl#heroInfoPanel {
	border: 5px solid #f1efee; 
	width: 225px; 
	border-width: 5px 5px 0 0; 
	height: 135px; 
	background-color: #f1efee; 
	position: absolute;
	bottom: 0px;
}
div#moreInfoHeroPanel { width: 300px; }
div#mifHeroPanel { width: 716px; }
div#moreInfoHeroPanel dl#heroInfoPanel {
	width: 300px; 
	height: auto;
	position: static;
	border-right: none;
	border-top: none;
}
dl#heroInfoPanel dt, div#moreInfoHeroPanel dl#heroInfoPanel dt {
	background-color: #fff; 
	padding: 5px 10px; 
	font-weight: bold;
}
div#moreInfoHeroPanel dl#heroInfoPanel dt {
	padding: 8px 15px 5px;
}
div#moreInfoHeroPanel dl#heroInfoPanel dd {
	height: 125px;
	background-color: #fff;
	padding-left:15px;
}
div#moreInfoHeroPanel dl#heroInfoPanel dd.heroInfoPanelLinks {
	border-top: 4px solid #f1efee;
	height: auto;
	padding-left:0;
}
div#moreInfoHeroPanel dl#heroInfoPanel dd.heroInfoPanelLinks p {
	border-top: 2px solid #f1efee;
	padding: 8px 5px 8px 0px;
	position: relative;
	top: 0px;
	left: 0px;
	height: 1%;
}
div#moreInfoHeroPanel dl#heroInfoPanel dd.heroInfoPanelLinks p a {
	padding-right: 15px;
	padding-left: 45px;
	color: #484c4f;
	text-decoration: underline;
	font-weight: normal;
	background: url(/images/new-window-icon.png) 100% 55% no-repeat;
}
div#moreInfoHeroPanel dl#heroInfoPanel .plannerBox p a { background: none !important; }
div#moreInfoHeroPanel dl#heroInfoPanel dd.heroInfoPanelLinks a img {
	display: inline;
	position: absolute;
	left: 15px;
	top: 4px;
}
p#heroPromoCopy { padding: 8px 4px 8px 10px; }
div#moreInfoHeroPanel p#heroPromoCopy { padding: 8px 10px 8px 0; }
a#heroViewAllLink {
	font-weight: bold; 
	text-decoration: underline;
	padding-right: 10px;
	background: url(/images/link-arrow-bold.png) 100% 55% no-repeat;
}

/* Q&A link */
#panelInfo .questionsCountContent {
	background:url(/images/link-arrow-light.png) no-repeat right center;
	float:left;
	padding:0 10px 0 20px;
}