/**
 * NoNumber Page stylesheet
 *
 * @package         Sliders
 * @version         4.1.3
 *
 * @author          Peter van Westen <peter@nonumber.nl>
 * @link            http://www.nonumber.nl
 * @copyright       Copyright © 2015 NoNumber All Rights Reserved
 * @license         http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 */
/*
 * This is an example of how you can create custom styles
 * Do not edit this file, as it will not be loaded by default and will get overwritten if you update Tabs
 * Place your own custom styles in your templates stylesheet
 * or copy the style.css file to /templates/[YOUR TEMPLATE]/css/sliders/style.min.css and customise that
 */
@import "../../nnframework/less/init.less";

/* Custom Style: mystyle1 */
div.nn_sliders_slider {
	&.mystyle1 {
		a {
			.transition-duration(0s);
			font-size: 22px;
			#gradient > .vertical(#ff9999, #ffffff);
			&:hover {
				#gradient > .vertical(#9999ff, #ffffff);
			}
		}
		&.active {
			a {
				#gradient > .vertical(#99ff99, #ffffff);
			}
		}
	}
}

div.nn_sliders_content_wrapper {
	&.mystyle1 {
		div.nn_sliders_content {
			border-top: none;
			#gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, #ccffcc);
		}
	}

}

/* Custom Style: mystyle2 */
div.nn_sliders_slider {
	&.mystyle2 {
		a,
		a:hover {
			.border-radius(0 0 0 0);
			border-color: #666;
			.transition-duration(1s);
			font-family: @monoFontFamily;
			padding: 8px 20px;
			background-color: #aaa;
			color: #fff !important;
		}
		a:hover {
			background-color: #999;
		}
		&.active {
			a,
			a:hover {
				.border-radius(0 0 0 0);
				border-color: #666;
				background-color: #666 !important;
				color: #fff !important;
			}
		}
	}
}

div.nn_sliders_content_wrapper {
	&.mystyle2 {
		div.nn_sliders_content {
			.border-radius(0 0 0 0);
			border-color: #666;
			font-family: @monoFontFamily;
			background-color: #666;
			color: #fff;
		}
	}
}
