/*!************************************************************************
*
* ADOBE SYSTEMS INCORPORATED
*  Copyright 2017 Adobe Systems Incorporated
*  All Rights Reserved.
*
* NOTICE:  Adobe permits you to use, modify, and distribute this file in 
* accordance with the terms of the Adobe license agreement accompanying it. 
* If you have received this file from a source other than Adobe, then your 
* use, modification, or distribution of it requires the prior written 
* permission of Adobe.
**************************************************************************/

/*
	CSS for desktop systems goes here.
	This section is always processed by the web browser, both for desktop systems and touch devices. Touch-specific
	CSS rules should be defined in the sections below.
*/

/* work-around for MS Edge bug with Flex layout*/
.s7zoomverticalviewer[class] {
}

.s7zoomverticalviewer {
	width:100%;
	height:auto;
}

.s7zoomverticalviewer .s7container .s7innercontainer {
	display: flex; 
	flex-direction: row; 
	justify-content: center; 
	position: relative;
}

.s7zoomverticalviewer .s7container .s7viewcontainer {
	background-color: rgb(68, 68, 68);
	flex-grow: 1;
}

.s7zoomverticalviewer .s7container .s7swatchescontainer {
	background-color: rgb(68, 68, 68);
	width: 150px;
}

.s7zoomverticalviewer .s7container .s7pageindicatorcontainer {
	background-color: rgb(68, 68, 68);
	display: none;
	text-align: center;
}

 /* For medium sizes: */
.s7zoomverticalviewer.s7size_medium .s7container .s7innercontainer  {
	flex-direction: column-reverse; 
}
  
.s7zoomverticalviewer.s7size_medium .s7container .s7viewcontainer {
	width: 100%;
}

.s7zoomverticalviewer.s7size_medium .s7container .s7swatchescontainer {
	width: 100%;
	height: 195px;
}

 /* For small sizes: */
.s7zoomverticalviewer.s7size_small .s7container .s7innercontainer {
	flex-direction: column-reverse; 
}

.s7zoomverticalviewer.s7size_small .s7container .s7viewcontainer {
	width: 100%;
}

.s7zoomverticalviewer.s7size_small .s7container .s7swatchescontainer {
	display: none;
}

.s7zoomverticalviewer.s7size_small .s7container .s7pageindicatorcontainer {
	display: block;
	width: 100%;
}

/* ZoomView - common styles */
.s7zoomverticalviewer .s7zoomview {
	background-color: rgb(68, 68, 68);
	position: absolute;	
	top: 0px;
	left: 0px;
	z-index:1;
}

/* FlyoutZoomView - common styles */
.s7zoomverticalviewer .s7flyoutzoomview  {
	border:none;
}

.s7zoomverticalviewer .s7flyoutzoomview  {
	position: absolute;	
	top: 0px;
	left: 0px;
	border:none;
	z-index:1;
	background-color: rgb(68, 68, 68);
}

.s7zoomverticalviewer .s7flyoutzoomview .s7highlight {
	opacity:0;
}

.s7zoomverticalviewer .s7flyoutzoomview .s7cursor {
	opacity:0;
}

.s7zoomverticalviewer .s7flyoutzoomview .s7overlay {
	opacity:0;
}

.s7zoomverticalviewer .s7flyoutzoomview .s7flyoutzoom {
	width:100%;
	height:100%;
	position: absolute;	
	left:0;
	top:0;
	border:none;
	z-index:1;
	pointer-events:auto !important;
	cursor: crosshair;
}

.s7zoomverticalviewer .s7flyoutzoomview .s7tip {
	bottom:100px;
}

/*************************************************************************/
/* SetIndicator - common styles */
.s7zoomverticalviewer .s7setindicator {
    z-index:1;
}
.s7zoomverticalviewer .s7setindicator .s7dot {
	width:8px;
	height:8px;
	margin-top:6px;
	margin-bottom:2px;
	background-color:#d6d6d6;
 }
.s7zoomverticalviewer .s7setindicator .s7dot[state='selected'] {
	width:12px;
	height:12px;
	margin-top:4px;
	margin-bottom:0px;
	background-color:#ffffff;
 }
.s7zoomverticalviewer .s7setindicator .s7dot[state='unselected'] {
	background-color:#d6d6d6;
 }

.s7zoomverticalviewer .s7setindicator[mode="numeric"] .s7dot {
	width:18px;
	height:18px;
	line-height:18px;
	margin-top:2px;
	border-radius:9px;
}

/**
 * Buttons component  
 */

/*************************************************************************/
/* Left Button - common styles */   
.s7zoomverticalviewer .s7panleftbutton {
	position:absolute;
	bottom: 50%;
	left: 0px;
	background-size:40px;
	z-index:1;
}
/* Left Button - desktop size and art */ 
.s7zoomverticalviewer.s7mouseinput .s7panleftbutton {
	width:40px;
	height:40px;
	margin-bottom: -20px;
	margin-left: 20px;
}
.s7zoomverticalviewer.s7mouseinput .s7panleftbutton[state]  {
    background-image: url(../../viewers/s7viewers/html5/images/v2/ImageSet_Vertical_LeftButton_dark_sprite.png);
}

.s7zoomverticalviewer.s7mouseinput .s7panleftbutton[state='disabled'] { background-position: -0px -0px; }
.s7zoomverticalviewer.s7mouseinput .s7panleftbutton[state='down'] { background-position: -0px -40px; }
.s7zoomverticalviewer.s7mouseinput .s7panleftbutton[state='over'] { background-position: -0px -80px; }
.s7zoomverticalviewer.s7mouseinput .s7panleftbutton[state='up'] { background-position: -0px -120px;  }


/* Left Button - touch device size and art */
.s7zoomverticalviewer.s7touchinput .s7panleftbutton {
	display:none;
}

/*************************************************************************/
/* Right Button - common styles */
	
.s7zoomverticalviewer .s7panrightbutton{
	position:absolute;
	bottom: 50%;
	right: 0px;
	background-size:40px;
	z-index:1;
 }
 
/* Right Button - desktop size and art */  
.s7zoomverticalviewer.s7mouseinput .s7panrightbutton {
	width:40px;
	height:40px;
	margin-bottom: -20px;
	margin-right: 20px;
}
.s7zoomverticalviewer.s7mouseinput .s7panrightbutton[state]  {
    background-image: url(../../viewers/s7viewers/html5/images/v2/ImageSet_Vertical_RightButton_dark_sprite.png);
}

.s7zoomverticalviewer.s7mouseinput .s7panrightbutton[state='disabled'] { background-position: -0px -0px; }
.s7zoomverticalviewer.s7mouseinput .s7panrightbutton[state='down'] { background-position: -0px -40px; }
.s7zoomverticalviewer.s7mouseinput .s7panrightbutton[state='over'] { background-position: -0px -80px; }
.s7zoomverticalviewer.s7mouseinput .s7panrightbutton[state='up'] { background-position: -0px -120px;  }

/* Right Button - touch device size and art */
.s7zoomverticalviewer.s7touchinput .s7panrightbutton {
	display:none;
}

/*************************************************************************/
/* Swatches component */
.s7zoomverticalviewer .s7swatches2 {
    background: transparent;
}

.s7zoomverticalviewer .s7swatches2 .s7thumb {
    width: 100px;
    height: 150px;
}

/**
 * Swatches scroll left\up buttons
 */
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7previousbutton {
    width: 20px;
    height: 20px;
	background-size:20px 240px;
	margin:15px;
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7previousbutton {
    width: 20px;
    height: 12px;
	background-size:40px 144px;
	margin:15px;
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal']  .s7previousbutton[state]  {
    background-image: url(../../viewers/s7viewers/html5/images/v2/ImageSet_Horizontal_LeftButtonScroll_dark_sprite.png);
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical']  .s7previousbutton[state]  {
    background-image: url(../../viewers/s7viewers/html5/images/v2/ImageSet_Vertical_UpButtonScroll_dark_sprite.png);
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7previousbutton[state="up"]{ background-position: 0px -220px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7previousbutton[state="over"]{ background-position: 0px -180px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7previousbutton[state="down"]{ background-position: 0px -200px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7previousbutton[state="disabled"]{ background-position: 0px -160px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7previousbutton[state="up"]{ background-position: 0px -132px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7previousbutton[state="over"]{ background-position: 0px -120px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7previousbutton[state="down"]{ background-position: 0px -108px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7previousbutton[state="disabled"]{ background-position: 0px -96px; }

.s7zoomverticalviewer.s7touchinput .s7swatches2[orientation='horizontal'] .s7previousbutton,
.s7zoomverticalviewer.s7touchinput .s7swatches2[orientation='vertical'] .s7previousbutton {
    width: 0px;
    height: 0px;
	visibility:hidden;
}

/**
 * Swatches scroll right\down buttons
 */
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7nextbutton {
    width: 20px;
    height: 20px;
	background-size:20px 240px;
	margin:15px;
}
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7nextbutton {
    width: 20px;
    height: 12px;
	background-size:40px 144px;
	margin:15px;
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal']  .s7nextbutton[state]  {
    background-image: url(../../viewers/s7viewers/html5/images/v2/ImageSet_Horizontal_RightButtonScroll_dark_sprite.png);
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical']  .s7nextbutton[state]  {
    background-image: url(../../viewers/s7viewers/html5/images/v2/ImageSet_Vertical_DownButtonScroll_dark_sprite.png);
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7nextbutton[state="up"]{ background-position: 0px -220px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7nextbutton[state="over"]{ background-position: 0px -180px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7nextbutton[state="down"]{ background-position: 0px -200px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='horizontal'] .s7nextbutton[state="disabled"]{ background-position: 0px -160px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7nextbutton[state="up"]{ background-position: 0px -132px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7nextbutton[state="over"]{ background-position: 0px -120px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7nextbutton[state="down"]{ background-position: 0px -108px; }
.s7zoomverticalviewer.s7mouseinput .s7swatches2[orientation='vertical'] .s7nextbutton[state="disabled"]{ background-position: 0px -96px; }

.s7zoomverticalviewer.s7touchinput .s7swatches2[orientation='horizontal'] .s7nextbutton,
.s7zoomverticalviewer.s7touchinput .s7swatches2[orientation='vertical'] .s7nextbutton {
    width: 0px;
    height: 0px;
	visibility:hidden;
}

.s7zoomverticalviewer .s7swatches2 .s7thumbcell[state]{
	border:none;
}

.s7zoomverticalviewer .s7swatches2 .s7thumbcell .s7thumb{
	margin:3px;
	border:1px solid #d6d6d6;
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2 .s7thumbcell {
    opacity: 0.5;
    -webkit-transition: opacity 0.15s ease;
    -moz-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2 .s7thumbcell:hover,
.s7zoomverticalviewer.s7mouseinput .s7swatches2 .s7thumbcell:focus {
	opacity: 1;
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2 .s7thumbcell:hover .s7thumb,
.s7zoomverticalviewer.s7mouseinput .s7swatches2 .s7thumbcell:focus .s7thumb{
	margin:3px;
	border:3px solid #d6d6d6;
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2 .s7thumbcell[state="selected"]{
	opacity: 1;
}

.s7zoomverticalviewer.s7mouseinput .s7swatches2 .s7thumbcell[state="selected"] .s7thumb,
.s7zoomverticalviewer.s7touchinput .s7swatches2 .s7thumbcell[state="selected"] .s7thumb{
	margin:3px;
	border:3px solid #FFFFFF;
}

.s7zoomverticalviewer .s7swatches2 .s7label {
	width:108px;
	height:12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Helvetica, sans-serif;
	font-size:12px;
	color: #FFFFFF;
}

/*************************************************************************/
/* Icon effect - common styles */
.s7zoomverticalviewer .s7zoomview .s7iconeffect {
    width:100px;
    height:100px;
	background-size:200px;
}
.s7zoomverticalviewer .s7zoomview .s7iconeffect[media-type] {
    background-image: url(../../viewers/s7viewers/html5/images/v2/IconEffect_zoom_sprite.png);
}
.s7zoomverticalviewer .s7zoomview .s7iconeffect[media-type='standard'] { background-position: -100px -400px; }
.s7zoomverticalviewer .s7zoomview .s7iconeffect[media-type='multitouch'] { background-position: -0px -400px; }

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .s7zoomverticalviewer .s7zoomview .s7iconeffect {
		background-size:100px;
	}
    .s7zoomverticalviewer.s7touchinput .s7zoomview .s7iconeffect[media-type='standard'] { background-position: -0px -100px; }
    .s7zoomverticalviewer.s7mouseinput .s7zoomview .s7iconeffect[media-type='standard'] { background-position: -0px -100px; }
    .s7zoomverticalviewer.s7touchinput .s7zoomview .s7iconeffect[media-type='multitouch'] { background-position: -0px -0px; }
}

