/**********
* RESET
***********/
.zl_cream_tabs,
.zl_cream_tabs > li,
.zl_cream_tabs > li > ul,
.zl_cream_tabs > li > ul > li,
.zl_cream_tabs > li > a {
	margin: 0;
	padding: 0;
	border: 0 none;
	text-decoration: none;
	list-style-type: none;
	display: block;
	font-size: 100%;

	}
/**********
* MAIN
***********/

.zl_cream_tabs{
	
	z-index: 9999;
}
/*BUTTONS*/
.zl_cream_tabs > li > a{
	position: relative;
	overflow: hidden;
	/*make-up*/
	text-align: left;
	padding-left:20px;
}
.zl_cream_tabs > li > a:focus {
	outline: none;
}
.zl_overlay_btn{
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
/*CONTENT*/
.zl_cream_tabs > li > ul{
	position: absolute;
	overflow: hidden;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	z-index: 9999;
	/*make-up*/
	
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	
	
	
}
.zl_cream_tabs > li > ul > li{

	overflow: hidden;
	width: 100%;
	height: 100%;
	/*padding: 10px;*/
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
/*img*/
.zl_cream_tabs > li > ul > li img{
	max-width: 100%;
}
/*PANEL*/

/* HOVER EVENT: PANEL SHOW/HIDE */
/*.zl_cream_tabs > li > ul:hover > .zl_panel{
	display: block;
}*/
.zl_panel > div{
	width: 40px;
	float: left;
	/*make-up*/
	cursor: pointer;
	text-align: center;
}
.zl_panel .zl_count_li{
	float: right;
	padding-left: 10px;
	padding-right: 10px;
	/*make-up*/
	text-align: center;
	font-weight: bold;
}
[data-zlhands = zl_left_hand]{
	border-right-style: solid;
	border-right-width: 1px;
}
[data-zlhands = zl_right_hand]{
	border-left-style: solid;
	border-left-width: 1px;
}
.zl_pause_icon{
	position: absolute;
	top: 10px;
	right: 10px;
	text-align: center;
	display: none;
}





/*----------------------------
	CSS3 Animated Navigation
-----------------------------*/


.fancyNav{
	/* Affects the UL element */
	overflow: hidden;
	display: inline-block;
	border-bottom:3px solid #838383;
	
	min-width:38.6;
	
}

.fancyNav li{
	/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
	color:#FFF;
	
	
	
	border-radius: 10px 10px 0 0px;
	
	/* Adding a 1px inset highlight for a more polished efect: */
	
	
	position:relative;
	
	float: left;
	list-style: none;
}

.fancyNav li:after{

	/* This creates a pseudo element inslide each LI */	
	
	content:'.';
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1;
	opacity:0;
	background-color:#82b03c;
	/* Gradients! */
	
	
	
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	
	
	
	/* This will create a smooth transition for the opacity property */
	
	
}

/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
	border-radius: 10px 10px 0 0px;
	
}
.fancyNav li:first-child{
	border-radius: 10px 10px 0 0px;

}
.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
	
	background-color:#82b03c;
	border-radius: 10px 10px 0 0px;
}

.fancyNav li:last-child{
	border-radius: 10px 10px 0 0px;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
	
	
	border-radius: 10px 10px 0 0px;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
	/* This property triggers the CSS3 transition */
	opacity:1;
}

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
	/* Hides the targeted li when we are hovering on the UL */
	opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
	opacity:1 !important;
}

/* Styling the anchor elements */

.fancyNav li a{
	color: #FFF;
	display: inline-block;
	font: 20px/1 Lobster,Arial,sans-serif;
	padding: 9px 11px 4px;
	position: relative;
	z-index:2;
	text-decoration:none !important;
	white-space:nowrap;
}

.fancyNav a.homeIcon{
	background:url('../img/home.png') no-repeat center center;
	display: block;
	overflow: hidden;
	padding-left: 12px;
	padding-right: 12px;
	text-indent: -9999px;
	width: 16px;
}


/*-------------------------
	Demo Page Styles
--------------------------*/
.slideimstop{ margin:0 -2px 0 0; float:right;}