/**
 * @version		$Id$
 * @author		JoomlaUX
 * @package		Joomla.Site
 * @subpackage	mod_jux_timeline
 * @copyright	Copyright (C) 2013 JoomlaUX. All rights reserved.
 * @license		License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
*/

@charset "UTF-8";


.clearfix:after {

    content: "";

    display: table;

    line-height: 0;

}

.clearfix:after {

    clear: both;

}



.jux-tl {

}

.jux-tl-wrap {
	position: relative;
	background: url("../images/line.png") repeat-y scroll center center transparent;
	max-width: 80%;
	margin-left:10%;
	margin-right:10%
}

.jux-tl-line {

    background: url("../images/line.png") repeat-y scroll 0 0 transparent;

    height: 100%;

    left: 50%;

    position: absolute;

    transform: translate(-50%);

    width:3px;

}

.jux-tl-item {

    font-family: Calibri;
    font-weight:lighter;
    margin-bottom: 20px;

    position: relative;

    width: 50%;

}

.jux-tl-item.right{

	float: right;

}

.jux-tl-item.left {

	float: left;

}

.jux-tl-control{
	background: url("../images/plus.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 23px;
    position: absolute;
    top: 20px;
    width: 23px;
    cursor: pointer;
}
.jux-tl-item.right .jux-tl-control{
	left: -10px;
}
.jux-tl-item.left .jux-tl-control{
	right: -12px;
}
.jux-tl-item.selected .jux-tl-control{
	background: url("../images/minus.png") no-repeat scroll 0 0 transparent;
}

.jux-tl-item .jux-tl-time {
	font-family: Calibri;
	color: #000000;
	font-weight: bold;
	font-size: 14px;
	position: absolute;
	top: 20px;
	min-height: 23px;
	min-width: 230px;
	cursor: pointer;
}
.jux-tl-item.right .jux-tl-time {
    margin: 0 30px 0 0;
    right: 100%;
    text-align: right;
}
.jux-tl-item.left .jux-tl-time {
    left: 100%;
    margin-left: 30px;
    text-align: left;
}

.jux-tl-info {
	border: 1px solid;
	background: #000000 none repeat scroll 0 0;
	border-radius: 8px 8px 8px 8px;
	padding: 25px 40px;
	position: relative;
}
.jux-tl-item.left .jux-tl-info{

	margin-right: 30px;

}

.jux-tl-item.right .jux-tl-info{

	margin-left: 30px;

}

.jux-tl-item h2 a {
    margin: 0;
    color: #000000;
    text-decoration: none;
    transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    
}
.jux-tl-item h2 a:hover{
	text-decoration: none;
	color: #000000;
}
.jux-tl-item .jux-tl-desc {
   display:none;
   overflow: hidden;
   color:#ffffff;
}
.jux-tl-item.selected .jux-tl-desc{
	
}

@media (max-width: 767px){

	.jux-tl-item {

		width: 100%;

	}

	.jux-tl-item.right,

	.jux-tl-item.left{

		float: left;

	}

	.jux-tl-control{
		top: 0px
	}
	.jux-tl-item.left .jux-tl-control{

    	 right: 50%;

    	 margin-right: -12px;

	}

	.jux-tl-item.right .jux-tl-control{

		 left: 50%;

		 margin-left: -12px;

	}

	

	.jux-tl-item.right .jux-tl-info,

	.jux-tl-item.left .jux-tl-info{

		margin:40px 0 0 0;

	}

	

	.jux-tl-item.left .arrow,

	.jux-tl-item.right .arrow

	{

		border-bottom-color: #000000;

	    border-left-color: transparent;

	    border-right-color: transparent;

	    border-width: 0 10px 10px;

	    left: 50%;

	    margin-left: -10px;

	    margin-top: 0;

	    top: -10px;

	}

	.jux-tl-item.right .arrow:after,
	.jux-tl-item.left .arrow:after{
		border-width: 0 11px 11px;
		border-bottom-color: #000000;
		top: -1px;
		left: -11px;
	}
	.jux-tl-item .jux-tl-time{
		top:0
	}
	.jux-tl-item.left .jux-tl-time{

		 left: 50%;

	}

	.jux-tl-item.right .jux-tl-time{

		 right: 50%;

	}

}