@charset "utf-8";
/* 
	CSS Document
	Copyright (c) 2011 Spotnil (http://www.spotnil.com/envato/codecanyon/li-slider/)
	Version: 2 (03/05/2011)
	
	To change any button position or size use the standard CSS rules below: width, height, top, bottom, left, right, margin, padding and so on.
	The positioning is "absolute" and the 0,0 point is the left top corner of the slider
	
	All the buttons use one background image with three/two different states for the different events of the mouse - Over, Click, Active.
	Each button visual effect is achieved by changing the background image position.
	
	If any of the elements of the banner are not visible or are not at the right position, please first make sure that
	your website css is not affecting the banner. In most cases it will not.
	
	All buttons in liJQuery Slider are DIV elements.
	
	IMPORTANT! Because of the pure css positioning, it is possible your website css to affect the banner elements.
	
*/
	
/* =========================== */	
/*        General Rules        */	
/* =========================== */

.li-banner {
	z-index:10;  /* Change it if the slider overlaps your drop-down navigation or other elements */
	position: relative;
	background-color: transparent;
	margin: 0px auto;
	padding: 0px;
	border: none;
	}

.li-banner ul {
	z-index: -100;
	overflow: hidden !important;
	width: 100% !important;
	margin: 0px !important;
	padding: 0px !important;
	border: none !important;
	height: 100% !important;
	}
	
.li-banner ul li {
	display: block;
	display: none;
	list-style-type: none !important;
	z-index: 0;
	margin: 0px !important;
	padding: 0px !important;
	border: none !important;
	}

.li-banner-image-wrap {
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	border: none;
	}

.li-banner ul, .li-banner ul li, .li-banner-image-wrap {
	position: absolute;
	top: 0px !important; 
	left: 0px !important;
	height: 100%;
	}

.li-banner ul li ul  {
	overflow:  visible;
	position: relative;
	height: auto;
}
.li-banner ul li ul li {
	list-style-position: inside;
	list-style-type: circle;
	position: relative;
	display: list-item;
	
}

/* =========================== */	
/* Buttons Sizes and Positions */	
/* =========================== */	

.li-banner .prev-btn, .li-banner .next-btn, .li-banner .nav-btns, .li-banner .play-btn, .li-banner .pause-btn { 
	position: absolute; 
	background-repeat: no-repeat; 
	display: block; 
	cursor: pointer;
	}

	
.li-banner .prev-btn, .li-banner .next-btn {
	z-index: 105;
	} 


/* --- PLAY and PAUSE buttons --- */
.li-banner .play-btn, .li-banner .pause-btn {
	z-index: 105;
	}

/* --- MIDDLE BUTTONS  --- */
.li-banner .nav-btns {
	cursor: default;
	z-index: 102;
	}
	
.li-banner .nav-btn {
	cursor: pointer;
	z-index: 14;
	background-position: center 0px;
	background-repeat: no-repeat; 
	display: inline-block;
	}

.li-banner .nav-btns .nav-btn.current-slide {
	cursor: default;
	}
	

/* --- Timers Settings --- */
/* Below are all styles for all timers. Change only the style for timer you used in the slider settings in HTML page */

.li-banner .timer-horizontal-bottom, .li-banner .timer-horizontal-top {  /* do not change this styles */
	position: absolute;
	left: 0px;
	z-index: 105;
}

.li-banner .timer-vertical-right, .li-banner .timer-vertical-left {  /* do not change this styles */
	position: absolute;
	top: 0px;
}

.li-banner .timer-vertical-right {
	right: 0px;
}

.li-banner .timer-vertical-left {
	left: 0px;
}

.li-banner .timer-horizontal-bottom { /* If you have horizontal bottom timer change here */
	bottom: 0px;
}

.li-banner .timer-horizontal-top { /* If you have horizontal top timer change here */
	top: 0px;
}

.li-banner .tooltip { /* Here you can set the vertical distance and an arrow (if you want to have one) */
	z-index: 150;
	overflow: visible !important;
	display: block !important;
}

/* Tooltip with an image */
.li-banner .tooltip img {
	}

/* Tooltip with text */
.li-banner .tooltip .tooltip-text {
	overflow: visible !important;
	display: block !important;
	z-index: 104 !important;
}