/*!
  ImageLinks - jQuery Interactive Image
  @name imagelinks.css
  @description A jQuery plugin for creating an interactive image for news, posters, albums and etc
  @version 1.4.0
  @author Max Lawrence 
  @site http://www.avirtum.com
  @copyright (c) 2016 Max Lawrence (http://www.avirtum.com)
*/

//===========================================
// Variables
//===========================================
@font-family-base:sans-serif;
@line-height-base:1;
@color-text:#333;


//===========================================
// Mixins
//===========================================
.imgl-shadow(@string) {
	-webkit-box-shadow:@string;
	box-shadow:@string;
}
.imgl-transition(@string) {
	-webkit-transition:@string;
	transition:@string;
}
.imgl-box-shadow(@string) {
	-webkit-box-shadow: @string;
	box-shadow: @string;
}
.imgl-transform(@string) {
	-webkit-transform: @string;
	transform: @string;
}
.imgl-keyframes(@name; @arguments) {
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}
.imgl-animation(@string) {
	-webkit-animation: @string;
	animation: @string;
}
.imgl-hidden() {
	filter:alpha(opacity=0);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}
.imgl-visible() {
	filter:alpha(opacity=100);
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}
.imgl-reset-text() {
	color:@color-text;
	font-family:@font-family-base;
	// We deliberately do NOT reset font-size.
	font-style:normal;
	font-weight:normal;
	letter-spacing:normal;
	line-height:@line-height-base;
	line-break:auto;
	text-align:left; // Fallback for where `start` is not supported
	text-align:start;
	text-decoration:none;
	text-shadow:none;
	text-transform:none;
	white-space:normal;
	word-break:normal;
	word-spacing:normal;
	word-wrap:normal;
}
.imgl-reset-styles {
	div, span, object, iframe, embed,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code,
	del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	b, i,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
		margin:0;
		padding:0;
		border:0;
		outline:0;
		//font-size:100%;
		//vertical-align:baseline;
		//background:transparent;
	}
}
.imgl-clear-fix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}
//===========================================
// ImageLinks General Styles
//===========================================
.imgl {
	position:relative;
	
	.imgl-img {
		.imgl-animation(imagelinks-animation-trigger 0.001s);
		
		img {
			display:block;
		}
	}
	
	.imgl-view {
		.imgl-reset-styles();
		.imgl-reset-text();
		position:absolute;
		outline:none;

		.imgl-hotspots {
			position:relative;
			width:100%;
			height:100%;
			
			.imgl-hotspot-custom {
				position:absolute;
				z-index:2;
			}
			
			.imgl-hotspot {
				position:absolute;
				top:0;
				left:0;
				z-index:2;
				cursor:pointer;
			}
			
			.imgl-hotspot-image {
				position:relative;
				
				img {
					display:block;
					max-width:none;
					border:none;
				}
			}
			
			.imgl-hotspot-link {
				&, a {
					display:block;
					position:absolute;
					left:0;
					top:0;
					width:100%;
					height:100%;
				}
				
				a {
					border:none;
					text-decoration:none;
					box-shadow:none;
				}
			}
			
			.imgl-hotspot-data {
				position:absolute;
				top:0;
				left:0;
			}
		}
		
		.imgl-popover {
			.imgl-hidden();
			.imgl-transition(e("opacity .3s"));
			position:absolute;
			z-index:2;

			&.imgl-active {
				.imgl-visible();
			}
			
			.imgl-content {
				.imgl-clear-fix();
			}
		}
		
		&.imgl-hotspot-setup {
			cursor:crosshair;
		}
	}
}
.imgl-keyframes(imagelinks-animation-trigger; {
	from { opacity: 0.99; }
	to   { opacity: 1; }
});