/*!
  iPanorama 360 - jQuery Virtual Tour
  @name ipanorama.css
  @description a jQuery plugin for creating a panorama viewer and virtual tours
  @version 1.3.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.2;
@popover-arrow-width:11px;
@popover-arrow-outer-width:11px;
@popover-arrow-color:#fff;
@popover-arrow-outer-color:rgba(0,0,0,.2);

//===========================================
// Colors
//===========================================
@color-bg:#fbfbfb;
@color-controls-border:rgba(0,0,0,0.4);
@color-controls-bg:#fff;
@color-controls-bg-hover:#efefef;
@color-controls-text:#333;
@color-control-progress-bg:#999;
@color-hotspot-border:#000;
@color-hotspot-border-hover:#fff;
@color-popover-bg:#fff;
@color-title-bg:#fff;


//===========================================
// Mixins
//===========================================
.shadow(@string) {
	-webkit-box-shadow:@string;
	box-shadow:@string;
}
.transition(@string) {
	-webkit-transition:@string;
	transition:@string;
}
.box-shadow(@string) {
	-webkit-box-shadow: @string;
	box-shadow: @string;
}
.transform(@string) {
	-webkit-transform: @string;
	transform: @string;
}
.keyframes(@name; @arguments) {
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}
.animation(@string) {
	-webkit-animation: @string;
	animation: @string;
}
.hidden() {
	opacity:0;
	visibility:hidden;
}
.visible() {
	opacity:1;
	visibility:visible;
}
.reset-text() {
	font-family: @font-family-base;
	// We deliberately do NOT reset font-size.
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-break: auto;
	line-height: @line-height-base;
	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;
}
.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;
	}
}

//===========================================
// iPanorama General Styles
//===========================================
.ipnrm {
	.reset-styles();
	.reset-text(); // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element. So reset our font and text properties to avoid inheriting weird values.
	position:relative;
	height:100%;
	width:100%;
	outline:none;
	font-size:14px;
	
	&:-moz-full-screen {
		height:100% !important;
		width:100% !important;
	}
	&:-webkit-full-screen {
		height:100% !important;
		width:100% !important;
	}
	&:fullscreen {
		height:100% !important;
		width:100% !important;
	}
	
	&.ipnrm-fullscreen-emulation {
		display:block;
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:99999;
		overflow:hidden;
	}
	
	.ipnrm-notransition {
		-webkit-transition: none !important;
		transition: none !important;
	}
	
	.ipnrm-view,
	.ipnrm-preview,
	.ipnrm-scene,
	.ipnrm-scene canvas,
	.ipnrm-hotspots {
		position:absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
	}
	
	.ipnrm-preview {
		background:transparent;
		background-position:center center;
		background-repeat:no-repeat;
		background-size:cover
	}
	
	.ipnrm-hotspots {
		overflow:hidden;
	}
	
	.ipnrm-hotspot-custom {
		position:absolute;
		z-index:2;
	}
	
	.ipnrm-hotspot-image {
		position:relative;
		
		img {
			display:block;
			max-width:none;
		}
	}
	
	.ipnrm-hotspot-link {
		&, a {
			display:block;
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
		}
		
		a {
			border:none;
			text-decoration:none;
		}
	}
	
	.ipnrm-hotspot-data {
		position:absolute;
		top:0;
		left:0;
	}
	
	// cursor icons
	.ipnrm-grab {
		cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjYiIHdpZHRoPSIyNiI+PHBhdGggc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIiBkPSJNMTUuMyAyMC41czYuMzgtNi43MyA0LjY0LTguMjQtMy40NyAxLjAxLTMuNDcgMS4wMSAzLjYxLTUuNzIgMS40MS02LjQ5Yy0yLjItLjc3LTMuMzMgNC4zNi0zLjMzIDQuMzZzLjg3My01Ljc2LTEuMDYtNS43Ni0xLjU4IDUuMzktMS41OCA1LjM5LS41NzQtNC41OS0yLjE4LTQuMTJjLTEuNjEuNDY4LS41NzIgNS41MS0uNTcyIDUuNTFzLTEuNTgtNC44OS0yLjkzLTMuNzljLTEuMzUgMS4xMS4yNTggNS4yNS41NzIgNi42Mi44MzYgMi40MyAyLjAzIDIuOTQgMi4xNyA1LjU1Ii8+PC9zdmc+) 12 8, default;
	}
	.ipnrm-grabbing {
		cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjYiIHdpZHRoPSIyNiI+PHBhdGggc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIiBkPSJNMTUuMyAyMC41czUuMDctNS4yOSAzLjc3LTYuNzRjLTEuMzEtMS40NS0yLjUzLjE0LTIuNTMuMTRzMi43NC0zLjI5LjUzNS00LjA2Yy0yLjItLjc3LTIuNTIgMS4zLTIuNTIgMS4zcy44MS0yLjEzLTEuMTItMi4xMy0xLjUyIDEuNzctMS41MiAxLjc3LS4yNi0xLjU5LTEuODctMS4xMmMtMS42MS40NjgtLjg3NCAyLjE3LS44NzQgMi4xN3MtLjY1LTEuNTUtMi0uNDQ1Yy0xLjM1IDEuMTEtLjY4IDIuMjUtLjM2NCAzLjYyLjgzNiAyLjQzIDIuMDMgMi45NCAyLjE3IDUuNTUiLz48L3N2Zz4=) 12 8, default;
	}
	.ipnrm-target {
		cursor:crosshair;
	}
	
	.ipnrm-scene-thumbs {
		overflow:hidden;
		
		// prevent annoying iPad cut/paste actions
		-webkit-touch-callout: none;
		-webkit-user-select: none;
	}
	
	.ipnrm-toolbar,
	.ipnrm-btn-scene-menu,
	.ipnrm-btn-scene-prev,
	.ipnrm-btn-scene-next,
	.ipnrm-btn-zoom-in,
	.ipnrm-btn-zoom-out,
	.ipnrm-btn-fullscreen,
	.ipnrm-btn-autorotate,
	.ipnrm-btn-share,
	.ipnrm-compass {
		.transition(opacity .6s);
	}
	
	&.ipnrm-hide-controls {
		.ipnrm-toolbar,
		.ipnrm-btn-scene-menu,
		.ipnrm-btn-scene-prev,
		.ipnrm-btn-scene-next,
		.ipnrm-btn-zoom-in,
		.ipnrm-btn-zoom-out,
		.ipnrm-btn-fullscreen,
		.ipnrm-btn-autorotate,
		.ipnrm-btn-share,
		.ipnrm-compass {
			opacity:0 !important;
		}
	}
	
	.ipnrm-compass,
	.ipnrm-title,
	.ipnrm-toolbar {
		z-index:2;
	}
	
	.ipnrm-btn {
		//.transform(translateZ(9999px)); // Fix Safari fullscreen bug
		z-index:2;
	}
	
	.ipnrm-popover {
		.hidden();
		.transition(e("opacity .3s"));
		position:absolute;
		top:0px;
		left:-99999px;
		z-index:3;
		
		&.ipnrm-hidden {
			opacity:0 !important;
			visibility:hidden !important;
		}
		
		&.ipnrm-active {
			.visible();
		}
	}
}