/*
 * 6pm Multiview Styles ======================================================
 *
 */

/* `Base Definitions
----------------------------------------------------------------------------*/
body {font-family:Verdana, sans; margin-top:0;}
#content {background:#fff; padding-top:8px;}
a {color:#369;}

/* `Header with close button
----------------------------------------------------------------------------*/
h1 {position:relative; margin:0 10px 3px; padding:5px 15px; background:#999; color:#000; font-size:75%; text-shadow:0 0 0 #000;}
h1#prHead {background:transparent;}
h1 a {position:absolute; top:5px; right:20px; padding-right:19px; background:url(/prd/imgs/spPopover.20151120140959.png) no-repeat 33px -27px; color:#000; font-weight:normal;}

/* `Containers: House the normal image, zoom icon, and viewport
----------------------------------------------------------------------------*/
#mvWrap {width:480px; position:relative; margin:0 auto;}
#image {width:480px; min-height:360px; margin:0; padding:0; z-index:20; background:#fff;}
#image .normalImage {position:relative; bottom:0; left:0; z-index:30; height:360px; width:480px;}
#image .normalImage.tallImage {height:560px;}
#image .normalImage img {display:block;}

/* `Viewport: the element in which the zoom image is contained
----------------------------------------------------------------------------*/
#viewport {overflow:hidden; display:none; position:absolute; top:0; left:0; z-index:50; background-color:#fff; border:5px solid #aaa; cursor:crosshair;}
#viewport img {position:absolute; top:0; left:0; z-index:50;}

/* `Views: The thumbnails showing different product shots
----------------------------------------------------------------------------*/
#views {position:relative; clear:both; width:480px; margin:0 auto; top:5px; left:0px;}
#views ul {list-style:none; margin:0; padding:0;}
#views li {display:block; position:relative; float:left; border:1px solid #FFF; margin-right:3px; overflow:hidden;}
#views li:hover {cursor:pointer;}
#views li.active {border: 1px solid #999 !important;}
#views #videoThumb img {margin:0 0 0 -1px; border:1px solid #e8e8e8;}

/* `Navigator: Shows which part of the image is being viewed when zoomed
----------------------------------------------------------------------------*/
#navigator {display:none; width:10px; height:10px; position:absolute; left:0; top:0; background-color:#999; border:1px solid #FFF; opacity:0.6; filter:alpha(opacity=60) !important;}

/* `Ajax Loader: Graphic shown while Image Cache is populated
----------------------------------------------------------------------------*/
#ajaxLoader {position:absolute; top:30px; left:0; z-index:50;}

/* `No Zoom Message
----------------------------------------------------------------------------*/
#noZoom {clear:both; width:458px; margin:10px auto 0; padding:10px; border:1px solid #F0C36D; background-color:#F9EDBE; font-size:12px;}
#noZoom p {margin:0; padding:0;}

/* `Misc Helper Classes
----------------------------------------------------------------------------*/
.clearfix:before, .clearfix:after {content:""; display:table;}
.clearfix:after {clear:both;}
#videoContainer {position:absolute; top:0; left:0; height:337px; width:480px; padding:0; z-index:-15; background:#fff;}
#videoContainer.clothingVideo {height:532px;}
#mvWrap .videoVisible {z-index:100; padding-top:28px;}
#videoContainer object {position:absolute; top:0; left:0; display:none;}
#videoContainer #omnomDino {position:absolute; top:0px; left:0px; z-index:40001;}
#videoContainer #omnomDino img {border:0;}
.abPos {position:absolute;}

ul.vPControls {position:absolute; top:0; left:0; width:460px; margin:0; padding:10px 10px 5px 10px; z-index:200; list-style-type:none; background:rgb(0,0,0); background:rgba(0,0,0,0.7); text-align:right;}
ul.vPControls li {display:inline; padding:10px;}
ul.vPControls li a {opacity:0.5;}
ul.vPControls li a img {border:none;}
ul.vPControls li a:hover {opacity:1;}

#playButton {position:absolute; width:75px; height:75px; top:34%; left:41%; padding:10px; background:rgba(0,0,0,0.5); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; z-index:3000;}
.videoVisible:hover #playButton {background:rgba(0,0,0,0.8); cursor:pointer;}
#playButton div {width:50px; margin:5px 0 0 10px; border-color:transparent transparent transparent #fff; border-style:solid; border-width:30px 0 30px 60px;}

#vPEmbedContainer {display:none; position:absolute; top:70px; left:0; z-index:300; width:428px; padding:20px 0 35px 52px; background:#000;}
#vPEmbedContainer textarea {float:left; width:364px;}
#vPEmbedContainer #embedClose {float:left; width:366px; display:inline-block; margin:0; padding:10px 0; color:#fff; font-size:12px; text-align:center; text-decoration:none; background:#000; background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#222)); background:-moz-linear-gradient(top, #333 0%, #222 100%); border:none; cursor:pointer;}

#videoPoster {cursor:pointer; z-index:300;}

ul.vPControls,
#videoPoster,
#videoContainer object,
#videoContainer video {position:absolute; top:35px; left:0;}

.hide {display:none;}
.show,
#videoContainer object.show {display:block;}