/*

ADOBE SYSTEMS INCORPORATED

 Copyright 2011 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.

*/

/*

The size of the static image

*/

.s7flyoutStaticImage {

	width : 450px;

	height : 333px;

}



/*

The size of the flyout view. Must not be higher than static image

*/

.s7flyoutFlyoutView {

	width : 483px;

	height : 384px;

}



/*

Flyout view border.

*/

.s7flyoutFlyoutViewBorder {

	border : 1px solid #c2c2c2;

}



/*

Horizontal offest of the top left flyout view corner from the top right static image corner. Negative values for "top" are permitted.

*/

.s7flyoutFlyoutViewOffset {

	left : 20px;

	top : 0px;

}



/*

The size of swatches container. Normallty the width should match the width of the static image.

*/

.s7flyoutSwatches {

	width : 474px;

	height : 100px;

}



/*

Swatches background is designed to be dynamic inwidth and fixed height. It is cut into three pieces: left (fixed-size), middle (fixed-height, variable-width) and right (fixed-size).

Viewer always spans the background across the width defined in s7flyoutSwatches, and resizes the middle portion as needed.

*/

/*

Left part of the swatches background.

*/

.s7flyoutSwatchesBackgroundLeft {

	width : 7px;

	height : 100px;

}



/*

Right part of the swatches background.

*/

.s7flyoutSwatchesBackgroundRight {

	width : 7px;

	height : 100px;

}



/*

Middle part of the swatches background.

*/

.s7flyoutSwatchesBackgroundMiddle {

	background-repeat : repeat-x;

	height : 100px;

	-webkit-background-size : 100% 100%;

}



/*

The size of a single swatch. Does not include borders.

*/

.s7flyoutSwatch {

	width : 54px;

	height : 52px;

}



/*

Swatch background and border, visible in all states (up, over, down). "filter" is for IE7 and IE8, "box-shadow" is for other browsers. background-color is must-have for IE7 and IE8.

When using 'filter' make sure that the filter applied adds identical marging on top/bottom and on left/right.

*/

.s7flyoutSwatchBackground {

	-webkit-box-shadow : 0px 1px 1px #a9a9a9; 

	box-shadow : 0px 1px 1px 0px #a9a9a9; 

	filter : progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a9a9a9,direction=90,strength=1) progid:DXImageTransform.Microsoft.Shadow(color=#a9a9a9,direction=180,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a9a9a9,direction=270,strength=1);

	background-color : #ffffff;

}



/*

Swatch active border. "filter" is for IE7 and IE8, "opacity" is for other browsers.

*/

.s7flyoutSwatchActiveBorder {

	border-width : 2px;

	border-color : rgb(0, 151, 193);

	border-style : solid;

	opacity : 0.9;

	filter : alpha(opacity=90);

}



/*

Swatch roll over border. "filter" is for IE7 and IE8, "opacity" is for other browsers.

*/

.s7flyoutSwatchOverBorder {

	border-width : 2px;

	border-color : rgb(0, 151, 193);

	border-style : solid;

	opacity : 0.9;

	filter : alpha(opacity=90);

}



/*

Configures inner-swatch spacing.

*/

.s7flyoutSwatchInnerSpacer {

	width : 15px;

}



/*

Configures the spacing between side swatches and the edges of swatch container. It is recommended to set this value at least as large as the size of swatch highlight or shadow.

*/

.s7flyoutSwatchOuterSpacer {

	width : 4px;

}



/*

The size of the swatch scroll button.

*/

.s7flyoutSwatchScrollButton {

	width : 32px;

	height : 72px;

}



/*

Spacing between the edge of the swatches container and scroll button.

*/

.s7flyoutSwatchScrollButtonOuterSpacer {

	width : 66px;

}



/*

Spacing between the scroll button and actual swatches.

*/

.s7flyoutSwatchScrollButtonInnerSpacer {

	width : 4px;

}



/*

Different artwork is used for default, "over", "down" and "disabled" button states.

*/

.s7flyoutSwatchScrollButtonLeft {

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-scroll-button-left-up?scl=1&fmt=png-alpha);

}

.s7flyoutSwatchScrollButtonLeft[state = 'over'] {

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-scroll-button-left-over?scl=1&fmt=png-alpha);

}

.s7flyoutSwatchScrollButtonLeft[state = 'down'] {

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-scroll-button-left-down?scl=1&fmt=png-alpha);

}

.s7flyoutSwatchScrollButtonLeft[state = 'disabled'] {

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-scroll-button-left-disabled?scl=1&fmt=png-alpha);

}



.s7flyoutSwatchScrollButtonRight {

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-scroll-button-right-up?scl=1&fmt=png-alpha);

}

.s7flyoutSwatchScrollButtonRight[state = 'over'] {

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-scroll-button-right-over?scl=1&fmt=png-alpha);

}

.s7flyoutSwatchScrollButtonRight[state = 'down'] {

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-scroll-button-right-down?scl=1&fmt=png-alpha);

}

.s7flyoutSwatchScrollButtonRight[state = 'disabled'] {

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-scroll-button-right-disabled?scl=1&fmt=png-alpha);

}



.s7flyoutFrame {

	border : 1px #a9a9a9 solid;

}



/*

Zoom cursor for desktop mode.

*/

.s7flyoutCursorDesktop {

	width : 80px;

	height : 80px;

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-zoom-cursor-desktop?scl=1&fmt=png-alpha);

}



/*

Shading applied to the static image around the zoom cursor in desktop mode. "filter" is for IE7 and IE8, "opacity" is for other browsers.

*/

.s7flyoutShading {

	background-color : #ffffff;

	opacity : 0.7;

	filter : alpha(opacity=70);

}



/*

Zoom cursor for tablet mode.

*/

.s7flyoutCursorTouch {

	width : 80px;

	height : 100px;

	background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-zoom-cursor-tablet-1x?scl=1&fmt=png-alpha);

}



@media screen and (-webkit-device-pixel-ratio:1.5) {

	.s7flyoutCursorTouch {

		background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-zoom-cursor-tablet-1.5x?scl=1&fmt=png-alpha);

		-webkit-background-size : 80px 100px;

	}

}



@media screen and (-webkit-device-pixel-ratio:2) {

	.s7flyoutCursorTouch {

		background-image : url(http://s7d2.scene7.com/is/image/Scene7SharedAssets/flyout-zoom-cursor-tablet-2x?scl=1&fmt=png-alpha);

		-webkit-background-size : 80px 100px;

	}

}



/*

Info message font settings, padding and location. Only vertical offset may be configured, viewer will automatically center the message horizontally.

*/

.s7flyoutInfoMessage {

	bottom : 50px;

	color : #ffffff;

	font-family : Arial;

	font-size : 12px;

	padding-bottom : 10px;

	padding-top : 10px;

	padding-left : 12px;

	padding-right : 12px;

}



/*

Info message background. Viewer will automatically position it to be behind actual message. "filter" is for IE7 and IE8, "opacity" is for other browsers. Rounded corners are not

supported on IE7 and IE8.

*/

.s7flyoutInfoMessageBackground {

	border-radius : 4px;

	background-color : #000000;

	opacity : 0.5;

	filter : alpha(opacity=50);

}