@import "library.less";

.action-area-cursor {
	cursor: url(../images/cursors/crosshair.png), auto;
}

.object {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
	overflow: hidden;
	/*-webkit-transform: translateZ(0);*/
	/*.box-sizing;*/
	
	&[data-desktop-hidden="true"] {
		display: none;
	}
	
	/* action area */
	&[data-type="actionArea"] {
		cursor: pointer;
		
		.default-image, .hover-image {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			.cover;
		}
		
		.hover-image {
			display: none;
		}
		
		&:hover {
			.default-image {
				display: none;
			}
			
			.hover-image {
				display: block;
			}
		}
	}
	
	&.action-area-act-in {
		pointer-events: none;
		.transition(@target: opacity, @duration: 400ms);
	}
	
	&.action-area-act-out {
		opacity: 0 !important;
		pointer-events: none;
		.transition(@target: opacity, @duration: 400ms);
	}
	
	/**/
	
	&[data-type="image"] {
		img {
			display: block;
			width: 100%;
		}
		.fx {
			position: absolute;
			display: none;
			opacity: 0.6;
			
			&.anim {
				display: block;
				-webkit-animation: myOrbit 1s linear infinite;
			}
		}
		
		&[data-wide-image="true"] {
			img {
				position: absolute;
			}
		}
		
		&[data-shared="true"], &[data-shares="true"] {
			@fb_color: #3c63ab;
			@vk_color: #2f8cc1;
			@tw_color: #4cc2ee;
			@width: 300px;
			@height: 100px;
			@button_height: 40px;
			@n: 2;
		
			.share-image-panel {
				display: none;
				position: absolute;
				width: 100%;
				height: @height;
				left: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
				min-width: @width;
				
				.label {
					color: #ffffff;
					height: 42px;
					line-height: 42px;
					font-size: 14px;
					text-align: center;
				}
				
				.button-wrapper {
					width: 100% / @n;
					height: @height / 2;
					float: left;
					text-align: center;
				}
				
				.button {
					display: inline-block;
					width: @width / @n;
					height: @button_height;
					cursor: pointer;
					opacity: 0.9;
					color: #ffffff;
					line-height: @button_height;
					text-align: center;
					font-size: 14px;
					/*margin-top: ( @height / 2 - @button_height ) / 2;*/
				
					&.vk {
						background-color: @vk_color;
					}
					
					&.fb {
						background-color: @fb_color;
					}
					
					&.tw {
						background-color: @tw_color;
					}
					
					&:hover {
						opacity: 1;
					}
				}
			}
			
			&:hover, &.show-share-image {
				.share-image-panel {
					display: block;
				}
			}
		}
	}
	
	&[data-type="text"] {
		background: rgba(255,255,255,0);
		.no-no-select;
		.box-sizing;
		
		.content {
			width: 100%;
			height: 100%;
		}
		.editor {
			overflow: hidden;
			width: 100%;
			height: 100%;
		}
	}
	
	&[data-type="media"] {
		.content {
			width: 100%;
			height: 100%;
		}
		.site-embed {
			display: block;
			color: inherit;
			text-decoration: none;
			
			.img {
				float: left;
				width: 100px;
				height: 100px;
				.cover;
			}
			.title {
				display: block;
				font-family: PTSerif-Regular;
				font-size: 18px;
				line-height: 22px;
				padding-left: 120px;
				text-decoration: none;
				padding-top: 5px;
			}
			.description {
				display: block;
				font-size: 16px;
				line-height: 18px;
				padding-left: 120px;
				padding-top: 5px;
				text-decoration: none;
				color: #666;
			}
		}
	}
	
	&[data-type="shares"] {
		z-index: 9999;
	}
	&[data-type="showcount"] {
		z-index: 9999;
	}
	
	&[data-type="audio"] {
		@player_color: #ffca24;
		overflow: visible;
		
		&.audio-player {
			width: 450px;
			height: 50px;
			
			.play {
				position: relative;
				float: left;
				width: 50px;
				height: 50px;
				cursor: pointer;
				background: @player_color;
				border-right: 1px solid lighten(@player_color, 20%);
				
				.ico-play, .ico-pause {
					position: absolute;
					width: 100%;
					height: 100%;
					background: url(../images/audio-player.png);
					z-index: 2;
				}
				.ico-pause {
					display: none;
					background-position: 0px -50px;
					z-index: 1;
				}
				&:hover {
					-webkit-filter: brightness(110%);
				}
			}
			.time {
				float: left;
				width: 50px;
				height: 36px;
				padding: 7px 0;
				background: @player_color;
				border-right: 1px solid lighten(@player_color, 20%);
				
				p {
					font-family: MonoCondensed-Bold, Arial, Helvetica, sans-serif;
					font-size: 12px;
					line-height: 18px;
					text-align: center;
					color: #fff;
					margin: 0;
				}
				.duration {
					color: rgba(255,255,255,0.6);
				}
			}
			.progress {
				float: left;
				width: 297px;
				height: 50px;
				background: lighten(@player_color, 15%);
				
				.slider {
					cursor: pointer;
					height: 100%;
					width: 100%;
				
					.ui-slider-handle {
						height: 13px !important;
						width: 1px !important;
						margin: 5px 0 0 -1px !important;
						cursor: pointer;
					}
					.ui-slider-range {
						background: @player_color;
						height: 100%;
					}
				}
			}
			.volume {
				float: left;
				position: relative;
				width: 50px;
				height: 50px;
				border-left: 1px solid lighten(@player_color, 20%);
				background: @player_color url(../images/audio-player.png) no-repeat 0px -100px;
				
				.bar {
					display: none;
					position: absolute;
					height: 100px;
					width: 50px;
					top: -50px;
					left: 0px;
					background: lighten(@player_color, 15%);
				}
				.slider {
					cursor: pointer;
					height: 100px;
					width: 100%;
				
					.ui-slider-handle {
						height: 13px !important;
						width: 1px !important;
						margin: 5px 0 0 -1px !important;
						cursor: pointer;
					}
					.ui-slider-range {
						background: @player_color;
						height: 9px;
						margin-top: 3px;
					}
				}
				&:hover {
					.bar {
						display: block;
					}
				}
				&:active {
					.bar {
						display: block !important;
					}
				}
			}
		}
		
		&.playing {
			.ico-play {
				display: none;
			}
			.ico-pause {
				display: block !important;
			}
		}
	}
	
	&.hide {
		opacity: 0;
	}
	
	&[data-scroll-effects="true"] {
		/*.transition(); */
		/*opacity: 0.3;*/
		
		-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
		-moz-transition: -moz-transform 1s ease, opacity 1s ease;
		-ms-transition: -ms-transform 1s ease, opacity 1s ease;
		-o-transition: -o-transform 1s ease, opacity 1s ease;
		transition: transform 1s ease, opacity 1s ease;
		
		&.scroll-effects-class-fade {
			opacity: 1;
		}
		
		&.scroll-effects-class-fade-start {
			opacity: 0;
		}
		&.scroll-effects-class-fade-end {
			opacity: 1;
		}
		
		&.scroll-effects-class-fade-out-start {
			opacity: 1;
		}
		&.scroll-effects-class-fade-out-end {
			opacity: 0;
		}
		
		&.scroll-effects-class-scale-start {
			opacity: 0;
			-webkit-transform: scale(0.7);
			-moz-transform: scale(0.7);
			-ms-transform: scale(0.7);
			-o-transform: scale(0.7);
			transform: scale(0.7);
		}
		&.scroll-effects-class-scale-end {
			opacity: 1;
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}
		
		&.scroll-effects-class-slide-left-start {
			opacity: 0;
			-webkit-transform: translateX(-200px);
			-moz-transform: translateX(-200px);
			-ms-transform: translateX(-200px);
			-o-transform: translateX(-200px);
			transform: translateX(-200px);
		}
		&.scroll-effects-class-slide-left-end {
			opacity: 1;
			-webkit-transform: translateX(0px);
			-moz-transform: translateX(0px);
			-ms-transform: translateX(0px);
			-o-transform: translateX(0px);
			transform: translateX(0px);
		}
		
		&.scroll-effects-class-slide-right-start {
			opacity: 0;
			-webkit-transform: translateX(200px);
			-moz-transform: translateX(200px);
			-ms-transform: translateX(200px);
			-o-transform: translateX(200px);
			transform: translateX(200px);
		}
		&.scroll-effects-class-slide-right-end {
			opacity: 1;
			-webkit-transform: translateX(0px);
			-moz-transform: translateX(0px);
			-ms-transform: translateX(0px);
			-o-transform: translateX(0px);
			transform: translateX(0px);
		}
	}
	
	&[data-type="slider"] {
		overflow: visible;
		
		.content {
			height: 100%;
		}
	}
	
	&[data-type="ajpg"] {
		.content {
			height: 100%;
		}
		
		&[data-ajpg-action="move"] {
			cursor: url(../images/cursors/ajpg-move.png), auto;
		}
	}
	
	&[data-type="colorchanger"] {
		width: 100%;
		height: 50px;
		z-index: 1000
	}
	
	&[data-image-3d="true"] {
		overflow: visible;
	}
	
	&[data-flip-image="true"] {
		overflow: visible;
		
		.content {
			overflow: visible;
			position: relative;
			
			-webkit-perspective: 800px;
			-moz-perspective: 800px;
			-ms-perspective: 800px;
			-o-perspective: 800px;
			perspective: 800px;
			
			>img {
				position: absolute;
				z-index: 2;
				-webkit-backface-visibility:hidden;
				-moz-backface-visibility:hidden;
				-ms-backface-visibility:hidden;
				-o-backface-visibility:hidden;
				backface-visibility:hidden;
				display: block;
				.transition();
			}
			&:hover {
				>img {
					-webkit-transform: rotateY(180deg);
					-moz-transform: rotateY(180deg);
					-ms-transform: rotateY(180deg);
					-o-transform: rotateY(180deg);
					transform: rotateY(180deg);
					
				}
				.back-side {
					-webkit-transform: rotateY(0deg);
					-moz-transform: rotateY(0deg);
					-ms-transform: rotateY(0deg);
					-o-transform: rotateY(0deg);
					transform: rotateY(0deg);
				}
			}
		}
		.back-side {
			/*position: absolute;*/
			top: 0px;
			left: 0px;
			font-family: ProximaNova-Regular;
			font-size: 18px;
			z-index: 1;
			.box-sizing;
			.cover;
			.transition();
			
			-webkit-transform: rotateY(-180deg);
			-moz-transform: rotateY(-180deg);
			-ms-transform: rotateY(-180deg);
			-o-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
			
			
			&.txt {
				padding: 30px;
				background: #fff;
				text-align: center;
			}
			
			.va {
				display:table;
				height: 100%;
				width: 100%;
				
				p {
					display: table-cell;
					vertical-align: middle;
				}
			}
		}
	}
	
	&[data-parallax-speed] {
		-webkit-transform: translateZ(0);
	}
	
	&[data-type="points"] {
		z-index: 20;
		overflow: visible;
		
		.point {
			position: relative;
			background: fadeout(#ffd445, 50%);
			width: 24px;
			height: 24px;
			cursor: pointer;
			.border-radius();
			
			i {
				position: absolute;
				display: block;
				width: 10px;
				height: 10px;
				background: #ffd445;
				top: 7px;
				left: 7px;
				.border-radius();
				.transition(@duration: 200ms);
			}
			
			.point-text {
				position: absolute;
				background: #ffd445;
				width: 200px;
				padding: 20px 12px;
				.box-sizing;
				cursor: default;
				top: 0px;
				left: -9999px;
				opacity: 0;
				.transition(@type:opacity);
				
				p {
					font-family: ProximaNova-Regular;
					font-size: 12px;
					line-height: 18px;
					margin-bottom: 0px;
				}
				
				&:before {
					position: absolute;
					content: '';
					width: 10px;
					height: 2px;
					padding: 12px 0;
					background-color: fadeout(#ffd445, 50%);
					left: -10px;
					top: 0px;
					background-clip: content-box;
				}
			}
			
			&:hover, &.active {
				i {
					-webkit-transform: scale(2);
					-moz-transform: scale(2);
					-ms-transform: scale(2);
					-o-transform: scale(2);
					transform: scale(2);
				}
				.point-text {
					left: 30px;
					opacity: 1;
				}
			}
			
			&.align-left:hover {
				i {
					-webkit-transform: scale(2);
					-moz-transform: scale(2);
					-ms-transform: scale(2);
					-o-transform: scale(2);
					transform: scale(2);
				}
				.point-text {
					left: -210px;
					opacity: 1;
					
					&:before {
						right: -10px;
						left: auto;
					}
				}
			}
		}
	}
	
	&[data-type="label"] {
		h1 {
			font-size: 50px;
			line-height: 60px;
		}
	}
	
	&[data-scroll-to-fixed="true"] {
		&.fixed {
			position: fixed;
		}
	}
	
	&[data-type="embed"] {
		.content {
			width: 100%;
			height: 100%;
		}
	
		.embed-error-message {
			position: absolute;
			display: none;
			width: 100%;
			height: 100%;
			z-index: 1;
			/*background-color: rgba(255, 20, 20, 0.7);*/
			background-color: #cc2728;
			
			p {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				color: #ffffff;
				font-family: Courier, "Courier New", monospace;
			}
			
			&.shown {
				display: table;
			}
		}
	}
	
	&.missing {
		background: rgba(255,0,0,0.3);
		box-shadow: none;
		border: 2px dashed rgba(255,0,0,0.3);
		
		&:before {
			content: 'Missing visual object "' attr(data-type) '"';
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -15px 0 0 -150px;
			text-align: center;
			width: 300px;
			height: 30px;
			font-size: 16px;
			line-height: 30px;
			font-family: 'Courier New';
			color: #fff;
		}
	}
}

.ajpg {
	width: 100%;
	height: 100%;

	.ajpg-content {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		
		.frame {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			top: 0%;
			left: 0%;
			display: none;
			.cover;
			
			&.current {
				display: block;
				z-index: 2;
			}
			
			&.old {
				display: block;
				z-index: 1;
			}
		}
	}
}

.color-changer {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
	pointer-events: none;
	
	div {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: 1;	
		.transition(@target: opacity, @duration: 400ms, linear);
	}
	.z1 {
		opacity: 1;
		.cover;
	}
	.z0 {
		opacity: 0;
		.cover;
	}
}

/*! jQuery UI - v1.9.2 - 2012-12-05
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.slider.css
* Copyright (c) 2012 jQuery Foundation and other contributors Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle {outline:none; top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle {outline:none; left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }