/*Now the CSS*/
.container > div.tree {
    line-height: 1em;
}


div.white-block{
	background-color:white;
	height:50px;
	width:10px;
	position:relative;
	float:left;
	bottom:62px;
	left:415px;
}


.tree {
		background:url(dot.png) repeat-y center;
		max-width:840px;
		margin:auto;
}

.tree ul{
		list-style: none;
	margin:0;
	padding:0;

}


.tree div p:nth-child(1) {
	padding-top: 10px;
}

.tree div p:nth-child(2) {
	font-weight: bold;
}

.tree li.rightside div{
	margin-right: 0;
	
	
}


.tree li.leftside {
	width:400px;
	
	float:left;

	
}

.tree li.leftside:after{
	content: "";
  display: table;
  clear: both;
}



.tree li.leftside div{
	margin-left:0;
	
}

.tree li.rightside{
	background:url(dot.png) repeat-x left;
	
	margin-left:50%;
	
}

.tree li.rightside:first-child{
	margin-left:0%;
}

.tree li div{
	margin: 0 auto;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #194B7D;
	font-size: 14px;
	text-align:center;
	background-color:#fff;
	background-image: linear-gradient(#fff, #D9E8F7);
	max-width: 400px;
	padding: 5px;
	margin-bottom:20px;
	box-shadow: 0 0 5px #fff inset;
}

@media (max-width:1200px){
	
	.tree{
		width:100%;
	}
	
	
}

@media (max-width:1000px){
	

	.tree li.leftside{
		float:none;
		margin-left:25%;
		margin-right:0;
		max-width:100%;
		background:url(dot.png) repeat-x 0px 50px/1px 1px;
		width:58%;
		
	}
	.tree li.rightside:first-child{
	margin-left:25%;
}
	
	.tree li.leftside div{
		margin-left:5%;
	}
	
	.tree li.rightside{
		margin-left:30%;
		max-width:100%;
		margin-right:20%;
		margin-left:25%;
	}
	
	.tree li.rightside div{
		margin-left:5.5%;
		width:100%;
	}
	
	.tree {
		background:url(dot.png) repeat-y 25% 0px/1px 100%;
		
	}
	
	div.white-block{
		left:24%;
	}

}