/*
Evo Slider Pro v1.4.0 - jQuery slideshow and content slider plugin
http://evoslider.com

Copyright 2012, Fikri Rakala

Skin Name: Evo Slider tlf Theme

Date: 02 May 2012
*/ 

/*
TABLE OF CONTENTS

01 SLIDER
02 TOGGLE ICON/INDEX
03 DIRECTION NAVIGATION
04 CONTROL NAVIGATION (BULLETS, THUMBNAILS, ROTATOR)
05 PLAY/PAUSE BUTTON
06 CONTENT
07 TEXT DESCRIPTION
*/
 
 
/*  _______________________________________

	01 SLIDER
    _______________________________________  */
	
/* Container / frame surrounding the slider */
.evoslider.tlf
{
	position: relative;
	width :960px; /* set width via option */
	height :360px; /* set height via option */
    margin: 0 auto;
	border: 15px solid #fafafa;
	padding: 5px;
	background :#d3d3d3;
	overflow : visible ;
	
	/* shadow */
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#4e4e4e, direction=120, strength=5)";
    filter: progid:DXImageTransform.Microsoft.Shadow(Color=#4e4e4e, direction=120, strength=5);  
}

/* You can set up the border of the dl element here  */
.evoslider.tlf dl
{
	border: 0;
}

/*
Slider title bar.

The title bar are rotated, so you will need to swap your directions.
To change the width of the title bar, you will need to modify the height property.
You will also need to make sure that any background imagery used is rotated horizontally.

To give unique custom appearance for each title, you can give a unique class for each title, for example:
	.evoslider dt.slide_1
	.evoslider dt.slide_2
	.evoslider dt.slide_3
	etc...
*/ 
.evoslider.tlf dt
{
	height : 45px;
    color :#4e4e4e;
    font-family :Arial , Verdana;
    font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing :1px;
	line-height: 40px;
	text-align : left;
	padding-left: 70px;
    background: #d3d3d3 url('title_bar.png') no-repeat;
    
    /* text shadow */
	text-shadow: -1px 1px 1px #9f9f9f;
}

/* The hover state of the title bar */ 
.evoslider.tlf dt:hover
{
	cursor :pointer ;
}

/* The active state of the title bar */
.evoslider.tlf dt.active
{
	cursor :tlf;
}

/* 
The slide content area

The width and height will automatically be defined by the plugin.
*/
.evoslider.tlf dd 
{
	background: #fff;
}


/*  _______________________________________

	02 TOGGLE ICON/INDEX
    _______________________________________  */

/* 
The toggle icon of title bar.

You can specify the position of the icon by setting its left and top position.
You can set the toggle icon for the tlf, hover, and active state via the background property.
To display index, set the showToggleIndex plugin option to true.
*/
.evoslider.tlf dt .toggle_icon
{
	left : 5px;
	top: 0;
	width: 40px;
	height: 40px;
	font-family: Arial, Verdana ;
    font-size: 18px;
	font-weight: bold;
	color :#4e4e4e;
	text-align: center ;
	
	/* text shadow*/
	text-shadow: 0 1px 1px #9f9f9f;	
}

/* Toggle icon position for ie8+  */
.evoslider.tlf dt .toggle_icon.ie 
{
	left: 0;
	top: auto;
	bottom: 5px;
}

/* The hover state of the toggle icon */ 
.evoslider.tlf dt:hover .toggle_icon
{
	color: #4e4e4e;
}

/* The active state of the toggle icon */
 
.evoslider.tlf dt.active .toggle_icon
{
	color : #4e4e4e;
}


/*  _______________________________________

	03 DIRECTION NAVIGATION
    _______________________________________  */

/* The arrow next */
.evoslider.tlf .arrow_next 
{
	position :absolute ;
	right : 10px;
	top : 150px;
	width : 35px;
	height : 34px;
	background : url('arrows.png') no-repeat -35px 0;
	cursor : pointer ;
	margin :0;
	padding :0;
	border : 0;
	text-decoration: none;
}

/* The hover state of the arrow next */
.evoslider.tlf .arrow_next:hover
{
	cursor: pointer;
}

/*
The state of the arrow next on the last item 
when the loop option is set to false. 
*/
.evoslider.tlf .arrow_next.last
{
	cursor: tlf ; 
}

/* The arrow prev */
.evoslider.tlf .arrow_prev 
{
	position :absolute ;
	left: 10px;
	top: 150px;
	width: 35px;
	height: 34px;
	background : url('arrows.png') no-repeat 0 0;
	cursor :pointer ;
	margin :0;
	padding :0;
	border :none;
	text-decoration: none;
}

/* The hover state of the arrow prev */
.evoslider.tlf .arrow_prev:hover 
{
	cursor: pointer;
}

/* 
The state of the arrow prev on the first item,
when the loop option is set to false. 
*/
.evoslider.tlf .arrow_prev.first
{
	cursor :tlf ;
}


/*  _______________________________________

	04 CONTROL NAVIGATION (BULLETS, THUMBNAILS, ROTATOR)
    _______________________________________  */

/* The container of the control if set to outside */
.evoslider.tlf .outer_control
{
	margin: 0;
	padding: 0;
	border: 0;
	background: #fafafa;
}

/* Control navigation container */
.evoslider.tlf .controlNav 
{
	left : 10px;
	bottom : 10px;
	margin :0;
	border : 0;
}

.evoslider.tlf .control_wrapper 
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Control list */
.evoslider.tlf .controlNav ul 
{
	overflow: visible;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The bullets control */
.evoslider.tlf .controlNav li.bullets 
{
	width : 20px;
	height : 20px;
	margin : 5px;
	padding :0;
	border :none;
	background : #eee;
	overflow: visible;
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	color: #4e4e4e;
}

/* Bullet last item */
.evoslider.tlf .controlNav li.bullets.last 
{
}

/* The hover state of the bullets control */
.evoslider.tlf .controlNav li.bullets:hover
{
	background: #4e4e4e;
	color: #fafafa;
}

/* The active state of the bullets control */
.evoslider.tlf .controlNav li.bullets.active 
{
	background: #4e4e4e;
	color: #fafafa;
}

/* Thumbnails control */
.evoslider.tlf .controlNav li.thumbnails 
{
	width : 200px;
	height : 74px;
	margin : 5px;
	padding :0;
	border :none;
	background : #eee;
	overflow: visible;
}

/* Thumbnail last item */
.evoslider.tlf .controlNav li.thumbnails.last 
{
}

/* The hover state of the thumbnail item */
.evoslider.tlf .controlNav li.thumbnails:hover
{
	background: #4e4e4e;
}

/* The active state of the thumbnail */
.evoslider.tlf .controlNav li.thumbnails.active 
{
	background: #4e4e4e;
}

/* Overlay effect */
.evoslider.tlf .controlNav li.thumbnails .overlay 
{
	background-color: #FFF;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/* The hover state of the overlay effect */
.evoslider.tlf .controlNav li.thumbnails:hover .overlay
{
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/* The active state of the overlay effect */
.evoslider.tlf .controlNav li.thumbnails.active .overlay 
{
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}


/* Rotator list navigation */
.evoslider.tlf .controlNav li.rotator 
{
	width : 300px;
	height : 110px;
	margin : 5px;
	padding :0;
	border :none;
	background : #eee;
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	color: #4e4e4e;
}

/* Rotator last item */
.evoslider.tlf .controlNav li.rotator.last 
{
}

/* Rotator list thumbnails */
.evoslider.tlf .controlNav li.rotator img 
{
	width: 60px;
	height: 60px;
	float: left;
	margin: 10px;
}

/* Rotator title */
.evoslider.tlf .controlNav li.rotator p
{
	margin-top: 5px;
	text-align: left;
}

.evoslider.tlf .controlNav li.rotator p span.title
{
	display: block;
	font-weight: bold;
}

.evoslider.tlf .controlNav li.rotator p span.date
{
	display: block;
	font-style: italic ;
}

/* The hover state of the rotator list */
.evoslider.tlf .controlNav li.rotator:hover
{
	cursor: pointer;
}

/* The active state of the rotator list */
.evoslider.tlf .controlNav li.rotator.active 
{
	cursor : tlf ;
}


/*  _______________________________________

	05 PLAY/PAUSE BUTTON
    _______________________________________  */

/* Play button container */
.evoslider.tlf .control_autoplay
{
	top: 10px;
	right: 10px;
	width: 22px;
	height: 22px;
	background: #fafafa;
	border: solid 1px #d9d9d9;
}

/* Play button position on accordion mode */
.evoslider.tlf dd .control_autoplay
{
	top: 5px;
	right: 5px;
}

/* Pause button */
.evoslider.tlf .pause_button 
{
    width: 22px;
    height: 22px;
    background: url('play.png') no-repeat -22px 0;
    cursor: pointer;
}

/* Play button */
.evoslider.tlf .play_button 
{
    width: 22px;
    height: 22px;
    background: url('play.png') no-repeat 0 0    ;
    cursor: pointer ;
}


/*  _______________________________________

	06 CONTENT
    _______________________________________  */

/* Image container */
.evoslider.tlf .evoImage 
{
	background-color: #000;
}

/* Video container */
.evoslider.tlf .evoVideo 
{
	background-color: #000;
}

/* Embed object container */
evoslider.tlf .evoEmbed 
{
	background-color: #000;
}

evoslider.tlf dd .evoEmbed img
{
	max-width: 100%;
	height: 100%;
}


/*  _______________________________________

	07 TEXT DESCRIPTION
    _______________________________________  */

/* Overlay text */
.evoslider.tlf .evoText.overlay 
{
	left: 10px;
	top: 10px;
	width: 300px;
	height: 90px;
	color: #fff;
	background: #252525;
	padding: 10px 20px;

	opacity: 0.9;
	filter: alpha(opacity=90);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

.evoslider.tlf .evoText.overlay h3 {
	color: #a1a37f;
	font-size: 14px;
	padding-bottom: 5px;
	color: #f7f7f7;
	margin-bottom: 0;
	font-weight: bold;
}

.evoslider.tlf .evoText.overlay p {
	padding-bottom: 0px;
	padding-top: 5px;
	color: #bcbcbc;
}

/* Partial left */
.evoslider.tlf .evoText.partialleft 
{
	width: 250px;
	background-color: #FAFAFA;
	padding: 20px;
}

.evoslider.tlf .evoText.partialleft h3 {
	font-size: 14px;
	padding-bottom: 5px;
	margin-bottom: 0;
	font-weight: bold;
	color: #4e4e4e;
}

.evoslider.tlf .evoText.partialleft p {
	padding-bottom: 0px;
	padding-top: 5px;
	color: #4e4e4e;
}

/* Partial right */
.evoslider.tlf .evoText.partialright 
{
	width: 250px;
	background-color: #FAFAFA;
	padding: 20px;
}

.evoslider.tlf .evoText.partialright h3 {
	font-size: 14px;
	padding-bottom: 5px;
	margin-bottom: 0;
	font-weight: bold;
	color: #4e4e4e;
}

.evoslider.tlf .evoText.partialright p {
	padding-bottom: 0px;
	padding-top: 5px;
	color: #4e4e4e;
}

/* Outer text */
.evoslider.tlf .outerText 
{
	width: 250px;
	background-color: #FAFAFA;
	padding: 20px;
}

.evoslider.tlf .outerText h3 {
	font-size: 16px;
	padding-bottom: 5px;
	margin-bottom: 0;
	font-weight: bold;
	color: #4e4e4e;
}

.evoslider.tlf .outerText p {
	padding-bottom: 0px;
	padding-top: 5px;
	color: #4e4e4e;
}