/*
	AnythingSlider v1.8+ LESS cs-portfolio theme
	By Curtis Scott (http://www.curtisscott.com/portfolio.html)
*/

/*** Note: the nav-cs-portfolio.png used for navigation and slideshow buttons uses a semi-transparent png,
     through which the background color is seen... so colors set will turn out darker than normal ***/

/*****************************
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                 : 0;

/* current navigation tab styling - uses same navigation background image */
@inactive-background-current   : #0d5c9f;
@navigation-text-color-current : #000;

/* non-current navigation styling */
@inactive-background-tab       : #fff;

@navigation-text-color         : #000;
@navigation-height             : 49px;
@navigation-padding-left       : 75px; /* distance from left edge (must be > than @back-arrow-left + @arrow-width */
.navigation-text-styling {
	font: 11px/18px Georgia, Serif;
	width: 17px;
	height: 17px;
	margin: 0 5px 0 0;
	padding: 0;
}
.navigation-background {
	/* top shadow */
	background: @inactive-background-tab url(../images/cs-portfolio.png) right -20px no-repeat;
}

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

/* start-stop button text - HIDDEN */
@inactive-start-stop-text      : #ddd;
@active-start-stop-text        : #fff;
@active-start-stop-text-hover  : #fff;

.start-stop-position {
	right: 60px;
	top: 15px;
	margin: 0;
	padding: 0;
}

/* navigation arrows */
@arrow-width                   : 26px;
@arrow-height                  : 27px;
@forward-arrow-right           : 20px; /* distance from right edge */
@back-arrow-left               : 20px; /* distance from left edge */
@arrow-image                   : url(../images/cs-portfolio.png);
@arrow-back-position           : left top;
@arrow-back-position-hovered   : left -27px;
@arrow-forward-position        : -24px top;
@arrow-forward-position-hovered: -24px -27px;

.anythingSlider-cs-portfolio {
	/*
	=================================
	Default state (no keyboard focus)
	=================================
	*/
	/* Overall Wrapper */
	margin: 0 auto;
	padding: 0;

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

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

		/* 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-color: @inactive-start-stop-stopped;
			background-position: right top;
			color: @inactive-start-stop-text;

			/* 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 {
				background-color: @active-start-stop-stopped;
				color: @active-start-stop-text-hover;
			}

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

				&:hover {
					background-color: @active-start-stop-playing;
				}
			}


		}

	}

	/************************
	NAVIGATION POSITIONING
	************************/
	/* Navigation Arrows */
	.arrow {
		display: block;
		position: absolute;
		bottom: -@navigation-height/2 - @arrow-height/2; /* this is -18px for IE7 */
		z-index: 100;

		a {
			display: block;
			width: @arrow-width;
			height: @arrow-height;
			text-align: center;
			outline: 0;
			background: @arrow-image no-repeat;
		}

	}

	/* back arrow */
	.back {
		left: @back-arrow-left;

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

	}

	/* forward arrow */
	.forward {
		right: @forward-arrow-right;

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

	}

	/* Navigation Links */
	.anythingControls {

		position: relative;
		background: @arrow-image repeat-x bottom center;
		height: @navigation-height;
		margin: 0 auto;
		padding-left: @navigation-padding-left;
		text-align: center;

		ul {
			margin: 0;
			padding: 0;
			z-index: 100;

			&.thumbNav {
				padding-top: 18px;
			}

			li {
				margin: 0;
				padding: 0;
				display: inline;
			}

			a {
				.navigation-text-styling;
				float: left;
				text-decoration: none;
				text-align: center;
				outline: 0;
				border: 0;
			}

		}

		/* navigationSize window */
		.anythingNavWindow {
			margin: 0 5px 0 0;
			overflow: hidden;
			float: left;
		}

		/* Navigation size window arrows */
		li.next a, li.prev a {
			margin: 19px 5px 0 0;
			width: 16px;
			height: 15px;
			background: @arrow-image -25px -54px no-repeat;
		}
		li.prev a { background-position: -9px -54px; }
		li.next a:hover { background-position: -56px -54px; }
		li.prev a:hover { background-position: -41px -54px; }

		/* Autoplay Start/Stop button */
		.start-stop {
			.start-stop-position;
			position: absolute;
			text-align: center;
			width: 20px;
			height: 20px;
			z-index: 100;
			border: 0;
		}

	}

}

/***********************
IE8 AND OLDER STYLING
***********************/
.as-oldie .anythingSlider-cs-portfolio {

	/* Navigation Arrows */
	.arrow a span, .anythingControls a span {
		/* line-height: 1px; needed for IE7 */
	}

	/* IE7 png fix*/
	.arrow a, .anythingControls, .anythingControls a {
		background-image: url(../images/cs-portfolio.png);
		_background:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/cs-portfolio.png',sizingMethod='crop');
	}

}

/***********************
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, .anythingControls 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;
	}

}