/*
	AnythingSlider v1.8+ LESS Minimalist Square theme
	By Rob Garrison
*/

/*****************************
SET DEFAULT DIMENSIONS HERE
*****************************/
/* change the ID & dimensions to match your slider */
#slider {
	width: 700px;
	height: 390px;
	list-style: none;
	/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
	overflow-y: auto;
	overflow-x: hidden;
}

/* slider borders */
@slider-border-size            : 3px;
@inactive-border-color         : #333;
@active-border-color           : #164054;

/* current navigation tab styling - uses same navigation background image */
@inactive-background-current   : #777;
@active-background-current     : #fff;
@navigation-text-color-current : #000;

/* non-current navigation styling */
@inactive-background-tab       : #333;
@active-background-tab         : #164054;
@navigation-text-color         : #fff;
@navigation-tab-size           : 10px;
.navigation-tab-styling {
	width: @navigation-tab-size;
	height: @navigation-tab-size;
	margin: 3px;
	padding: 0;
}
.navigation-border {
	border: #000 1px solid;
}

/* start-stop button background color */
@inactive-start-stop-stopped   : #040;
@inactive-start-stop-playing   : #800;
@active-start-stop-stopped     : #080;
@active-start-stop-playing     : #f00;

/* start-stop button text */
@inactive-start-stop-text      : #ddd;
@active-start-stop-text        : #fff;
@active-start-stop-text-hover  : #fff;
.start-stop-shadow (@shadow: inset 1px 2px 5px rgba(0,0,0,0.5)) {
	/* top shadow */
	-moz-box-shadow: @shadow;
	-webkit-box-shadow: @shadow;
	box-shadow: @shadow;
}

/* navigation arrows */
@arrow-width                   : 30px;
@arrow-height                  : 40px;
@arrow-image                   : url(../images/arrows-minimalist.png);
@arrow-back-position           : left bottom;
@arrow-back-position-hovered   : left top;
@arrow-forward-position        : right bottom;
@arrow-forward-position-hovered: right top;
@arrow-horizontal-pad          : 30px; /* distance the arrow protrudes horizontally outside of the AnythingSlider wrapper */
@navigation-bottom-pad         : 0; /* distance the navigation controls (tabs & start-stop button) protrudes below the wrapper */

.anythingSlider-minimalist-square {
	/*
	=================================
	Default state (no keyboard focus)
	=================================
	*/
	/* Overall Wrapper */
	margin: 0 auto;
	padding: 0 @arrow-horizontal-pad @navigation-bottom-pad @arrow-horizontal-pad;

	/* slider window - top & bottom borders, default state */
	.anythingWindow {
		border-top: @slider-border-size solid @inactive-border-color;
		border-bottom: @slider-border-size solid @inactive-border-color;
	}

	/* Navigation buttons + start/stop button, default state */
	.anythingControls a {
		background-color: @inactive-background-tab;
		color: @navigation-text-color;
		.navigation-border;

		/* Navigation current button, default state */
		&.cur, &:hover {
			background-color: @inactive-background-current;
			color: @navigation-text-color-current;
		}

		/* start-stop button, stopped, default state */
		&.start-stop {
			background: @inactive-start-stop-stopped;
			color: @inactive-start-stop-text;
			.start-stop-shadow;

			/* start-stop button, playing, default state */
			&.playing { background-color: @inactive-start-stop-playing; }

			/* start-stop button, default hovered text color (when visible) */
			/* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */
			&:hover, &.hover, .anythingControls ul a:hover {
				color: @active-start-stop-text-hover;
				.start-stop-shadow(inset 0 0 0 #000);
			}
		}

	}

	/*
	=================================
	Active State (has keyboard focus)
	=================================
	*/
	&.activeSlider {

		/* slider window - top & bottom borders, active state */
		.anythingWindow {
			border-color: @active-border-color;
		}

		/* Navigation buttons, active state */
		.anythingControls a {
			/* background image = top shadow */
			background-color: @active-background-tab;
			color: @navigation-text-color;

			/* Navigation current button, active state */
			&.cur, &:hover {
				background-color: @active-background-current;
				color: @navigation-text-color-current;
			}

			/* start-stop button, stopped, active state */
			&.start-stop {
				background: @active-start-stop-stopped;
				color: @active-start-stop-text;

				/* start-stop button, playing, active state */
				&.playing {
					color: @active-start-stop-text;
					background: @active-start-stop-playing;
				}

			}

		}

		/* start-stop button, active slider hovered text color (when visible) */
		.start-stop:hover, .start-stop.hover {
			color: @active-start-stop-text-hover;
		}

	}

	/************************
	NAVIGATION POSITIONING
	************************/
	/* Navigation Arrows */
	.arrow {
		top: 50%;
		position: absolute;
		display: block;

		a {
			display: block;
			width: @arrow-width;
			height: @arrow-height;
			margin: -@arrow-height/2 0 0 0; /* half height of image */
			text-align: center;
			outline: 0;
			background: @arrow-image no-repeat;
		}

	}

	/* back arrow */
	.back {
		left: 0;

		a {
			background-position: @arrow-back-position;
			&:hover, &.hover { background-position: @arrow-back-position-hovered; }
		}

	}

	/* forward arrow */
	.forward {
		right: 0;

		a {
			background-position: @arrow-forward-position;
			&:hover, &.hover { background-position: @arrow-forward-position-hovered; }
		}

	}

	/* Navigation Links */
	.anythingControls {

		height: @navigation-tab-size*1.5; /* limit height, needed for IE9 of all things */
		outline: 0;
		display: none;
		float: right;
		position: absolute;
		bottom: 5px;
		right: 20px;
		margin: 0 @arrow-width*1.5; /* needed for IE */
		z-index: 100;
		opacity: 0.90;
		filter: alpha(opacity=90);

		ul {
			margin: 0;
			padding: 0;
			float: left;

			li {
				list-style: none;
				float: left;
				margin: 0;
				padding: 0;
			}

			a {
				display: inline-block;
				.navigation-tab-styling;
				text-decoration: none;
				text-align: center;
				outline: 0;
			}

		}

		span {
			display: block;
			visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */
		}

		/* navigationSize window */
		.anythingNavWindow {
			overflow: hidden;
			float: left;
		}

		/* navigationSize nav arrow positioning */
		li.prev a span, li.next a span {
			visibility: visible;
			position: relative;
			top: -6px; /* bring navigationSize text arrows into view */
		}

		/* Autoplay Start/Stop button */
		.start-stop {
			margin: 3px;
			padding: 0;
			display: inline-block;
			.navigation-tab-styling;
			text-align: center;
			text-decoration: none;
			z-index: 100;
			outline: 0;
		}

	}

}

/***********************
IE8 AND OLDER STYLING
***********************/
.as-oldie .anythingSlider-minimalist-square {

	/* Navigation Arrows */
	.arrow {
		top: 45%;

		a {
			margin: 0;
		}

	}

}

/***********************
COMMON SLIDER STYLING
***********************/
/* Overall Wrapper */
.anythingSlider {

	display: block;
	overflow: visible !important;
	position: relative;

	/* anythingSlider viewport window */
	.anythingWindow {
		overflow: hidden;
		position: relative;
		width: 100%;
		height: 100%;
	}

	/* anythingSlider base (original element) */
	.anythingBase {
		background: transparent;
		list-style: none;
		position: absolute;
		overflow: visible !important;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
	}

	/* Navigation arrow text; indent moved to span inside "a", for IE7;
	apparently, a negative text-indent on an "a" link moves the link as well as the text */
	.arrow span {
		display: block;
		visibility: hidden;
	}

	/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
	.arrow.disabled {
		display: none;
	}

	/* all panels inside the slider; horizontal mode */
	.panel {
		background: transparent;
		display: block;
		overflow: hidden;
		float: left;
		padding: 0;
		margin: 0;
	}

	/* vertical mode */
	.vertical .panel {
		float: none;
	}

	/* fade mode */
	.fade {
		.panel {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.activePage {
			z-index: 1;
		}
	}

	/***********************
	RTL STYLING
	***********************/
	/* slider autoplay right-to-left, reverse order of nav links to look better */
	&.rtl {

		.anythingWindow {
			direction: ltr;
			unicode-bidi: bidi-override;
		}

		/* move nav link group to left */
		.anythingControls ul {
			float: left;

			/* reverse order of nav links */
			a { float: right; }
		}

		/* move start/stop button - in case you want to switch sides */
		.start-stop {
			/* float: right; */
		}

	}

	/* probably not necessary, but added just in case */
	.anythingWindow,
	.anythingControls ul a,
	.arrow a,
	.start-stop {
		transition-duration: 0;
		-o-transition-duration: 0;
		-moz-transition-duration: 0;
		-webkit-transition-duration: 0;
	}

}