@charset "utf-8";
/* 
	CSS Document
	Copyright (c) 2010 Spotnil (http://spotnil.com)
	Version: 1.0 (11/15/2010)
	
	Skin 7

	To change any button position or size use the standard CSS rules: width, height, top, bottom, left, right below.
	The position is relative to the 0,0 point of the banner
	
	All the buttons use one background image with three/two different states for the different events of the mouse - Over, Click, Active.
	Each event visual effect is achieved by changing the background image position.
	
	IMPORTANT! Because of the pure css positioning, it is possible your website css to affect the banner elements.
	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.
	
/* =========================== */	
/*        General Rules        */	
/* =========================== */

.li-banner * {
	margin: 0px;
	padding: 0px;
	border: none;
	}

.li-banner {
	z-index:100;  /* Change it if the slider overlaps your drop-down navigation or other elements */
	position: relative;
	background-color: #fff; /* slider background color */
	background: url(../images/preloader-squares-blue.gif) no-repeat 376px 201px; /* preloader image - JS hides the preloader automatically*/
	}

.li-banner ul {
	z-index: -100;
	overflow: hidden;
	width: 100%;
	height: 100%;
	}

.li-banner ul li {
	display: none;
	list-style: none;
	}

.li-banner-image-wrap {
	overflow: hidden;
	}

.li-banner ul, .li-banner ul li, .li-banner-image-wrap {
	position: absolute;
	top: 0px; 
	left: 0px;
	}


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

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

/* --- Previous and Next Buttons --- */
.prev-btn, .next-btn {
	width: 66px; 
	height: 101px; /* If you change the position here change the position for "active" state as well */
	top: 150px; 
	z-index: 102;
	} 

.prev-btn {	
	left: 20px; 
	background-image: url(images/prev-arrow.png);}

.next-btn {	
	right: 20px; 
	background-image: url(images/next-arrow.png);}

/* onMouse Over Event  */		
.prev-btn:hover, .next-btn:hover { 
	background-position: 0 -102px;
	}
	
/* onMouse Click Event  */		
.prev-btn:active, .next-btn:active {
	top: 151px;
	}

.prev-btn:active {
	left: 21px;
	}

.next-btn:active {
	right: 19px;
	}


/* --- Play pause buttons --- */
.play-btn, .pause-btn {
	right: 10px; /* if you change the position here change the position for "active" state as well */
	bottom: 10px;
	z-index: 101;
	width: 29px;
	height: 33px;
	}

.play-btn { 
	background-image: url(images/play.png);
	}
	
.pause-btn {
	background-image: url(images/pause.png);
	}
	
/* this controls the visual for onMouse Over event  */
.play-btn:hover, .pause-btn:hover {
	background-position: 0 -34px;
	}
	
/* this controls the visual for onMouse click event  */
.play-btn:active, .pause-btn:active {
	right: 10px;
	bottom: 9px;
	}


/* --- Middle Buttons Settings --- */
.nav-btns {
	bottom: 5px;
	margin: 0px auto;
	text-align: center;
	width: 100%;
	}
	
/* Individual Button Properties */
.nav-btns {
	bottom: 11px;
	text-align: center;
	width: 100%;
	margin: 0px auto;
	cursor: default;
	}