@charset "utf-8";
@import url('../li-slider.css'); 
/* 
		Skin name: Pure
*/
/* =========================== */	
/*       Preloader Image       */	
/* =========================== */	
.li-banner {
	/* PRELOADER image - JS hides the preloader automatically */
	background: url(../images/preloader-squares-blue.gif) no-repeat center; 
	}

/* =========================== */	
/* Buttons Sizes and Positions */	
/* =========================== */	
/*
	 Positioning general rule: To position button in the middle of the slider use the following styling:
   If an object has dimensions 50px x 50px:

		Vertical Centering								Horizontal Centering
			top: 50%;													left: 50%;
			margin-top: -25px!important;			margin-left: -25px!important;		
		
		where -25px is half the size of the object.
*/
	
/* =========================== */	
/*  PREVIOUS and NEXT Buttons  */	
/* =========================== */	
.li-banner .prev-btn, .li-banner .next-btn {
	width: 23px; 
	height: 23px; 
	top: 50%;
	margin-top: -13px!important; /* if you change the position here, change the position for ":active" state as well */
	} 

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

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

/* onMouse Over Event  */		
.li-banner .prev-btn:hover, .li-banner .next-btn:hover { 
	background-position: 0 -23px;
	}
	
/* onMouse Click Event  */		
.li-banner .prev-btn:active, .li-banner .next-btn:active {
	top: 50%;
	margin-top: -12px!important;
	}

.li-banner .prev-btn:active {
	left: 16px;
	}

.li-banner .next-btn:active {
	right: 14px;
	}


/* =========================== */	
/*    PLAY and PAUSE Buttons   */	
/* =========================== */	
.li-banner .play-btn, .li-banner .pause-btn {
	width: 54px;
	height: 54px;
	top: 50%;
	left: 50%;
	margin-top: -27px!important;
	margin-left: -27px!important;
	}

.li-banner .play-btn { 
	background-image: url(images/play.png);
	}
	
.li-banner .pause-btn {
	background-image: url(images/pause.png);
	}
	
/* this controls the visual for onMouse Over event  */
.li-banner .play-btn:hover, .li-banner .pause-btn:hover {
	background-position: 0 -54px;
	}
	
/* this controls the visual for onMouse click event  */
.li-banner .play-btn:active, .li-banner .pause-btn:active {
	top: 50%;
	left: 50%;
	margin-top: -26px!important;
	margin-left: -26px!important;
	}

/* =========================== */	
/*        MIDDLE Buttons       */	
/* =========================== */	
/* When you change the vertical position of this you need to change the Tooltip positions as well. Tooltip styles are below */
.li-banner .nav-btns {
	text-align: right;											/* HORIZONTAL position of all dots: left/center/right */
	margin: 0px 5px -5px 0px!important;	/* VERTICAL dots position/shifting. Use bottom positive value to push them upward. Top value to push them downward. Negative values will reverse the effect */
	padding: 0px 0px 0px 0px!important;	/* SPACING DOTS. If you use values for left/right you need to manually calculate the width (equal to the banner width minus the padding/margin */
	bottom: 0px;													/* VERTICAL POSITION - General - "top" or "bottom". If you need the dots at the top/bottom change this rule to "top" or "bottom" and adjust the margin above */
	right: 0;
	width: 100%;
	height: 36px;
	background-image: url(../../../media/Pure/images/buttons_background.png);
	background-repeat: repeat-x;
	}
	
/* Individual button properties */
.li-banner .nav-btn {
	width: 20px; /* DOTS WIDTH AND SPACING. Used for space between dots. If your image is 20px wide and you need 5px from both sides, use 30px. Do not use padding/margin, it will break IE7 */
	height: 16px;
	background-image: url(images/button.png);
	margin: 11px 0px 0px 0px!important; /* VERTICAL DOTS alignement only if background is present for .nav-btns*/
	}

/* Hack for IE =< 7 for the lack of support for display:inline-block. This is partitial support for IE6 and below. In the next update the support for IE6 and below will be dropped */
.li-banner .nav-btns, {
	bottom: 0px;
	}
	
.li-banner .nav-btn, {	
	display:inline;
	zoom:1;
	}

/* This controls the visual for onMouse Over event  */
.li-banner .nav-btns .nav-btn:hover {
	background-position: center -17px;
	}
	
/* This controls the visual for onMouse click event  */
.li-banner .nav-btns .nav-btn.current-slide {
	background-position: center -34px;
	}
	

/* =========================== */	
/*        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-vertical-right {
	width: 5px;
	background-color: #272727; /* You can combine color and background image if the background image is transparent PNG24 */
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
  opacity: 0.5;
	filter:alpha(opacity=50);
}

.li-banner .timer-vertical-left {
	width: 5px;
	background-color: #272727; /* You can combine color and background image if the background image is transparent PNG24 */
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
  opacity: 0.5;
	filter:alpha(opacity=50);
}

.li-banner .timer-horizontal-bottom { /* If you have horizontal bottom timer change here */
	height: 5px; /* Height of the timer */
	background-color: #272727; /* You can combine color and background image if the background image is transparent PNG24 */
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
  opacity: 0.5;
	filter:alpha(opacity=50);
		
}

.li-banner .timer-horizontal-top { /* If you have horizontal top timer change here */
	height: 5px; /* Height of the timer */
	background-color: #272727; /* You can combine color and background image if the background image is transparent PNG24 */
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
  opacity: 0.5;
	filter:alpha(opacity=50);

}

/* =========================== */	
/*     TOOLTIP IMAGE/TEXT      */	
/* =========================== */	
/* The tooltip is the image preview when the mouse is over the small buttons. The size of it is controlled by Javascript
   The tooltip is consist of one div tag and an image inside of it.
   The only thing you can not change through CSS is the horizontal alignement. It is automatically calculate to center of the thumbnail */

.li-banner .tooltip { /* Here you can set the vertical distance and an arrow (if you want to have one) */
	bottom: 22px; /* VERTICAL POSITION. It is relative to .li-slider class. */
	background-image: url(images/thumbnails-arrow.png); /* Thumbnail arrow */
	margin: 0px 5px 0px -8px!important; /* Tooltip alignement. If your tooltip is shifted left or right adjust the negative value so the tooltip is centered */
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom: 1px!important;
}

*:first-child+html .li-banner .tooltipi {padding-bottom: 5px!important;} /* Fix for IE7. If you change the thumbnail position (image only) you need to adjust it. */

/* Tooltip with an image */
.li-banner .tooltip img {
	border: 3px solid #272727!important;
	-moz-border-radius: 3px;/* CSS3 round corners and shadow. Not available in IE7/8 */
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;

}

/* Tooltip with text */
.li-banner .tooltip .tooltip-text {
	font-family: Tahoma, Geneva, sans-serif!important;
	font-size: 11px!important;
	color: #fff;
	letter-spacing: .1em;
	background-color: #272727;
	padding: 3px 3px 3px 3px!important;/* Tooltip alignement. If your tooltip is shifted left or right adjust the negative value so the tooltip is centered */
	margin-bottom: 5px!important;
	-moz-border-radius: 3px; /* CSS3 round corners and shadow. Not available in IE7/8 */
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
	display: block!important;
}