/*Now the CSS*/
* {margin: 0; padding: 0;}

.org-chart {
	width:880px;
	margin:0 auto;
}
ul.top-section {
	margin:0 auto;
}
ul.top-section,  ul.top-section ul {
	padding-top: 50px; 
	position: relative;	
	display:table;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
 ul.top-section > li {
	/*margin-left:50px;*/
}
 ul.top-section li {
	float: left; 
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 40px 5px 0 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

 ul.top-section li::before,  ul.top-section li::after{
	content: '';
	position: absolute; 
	top: 0; 
	right: 50%;
	border-top: 2px solid #bbb;
	width: 50%; 
	height: 20px;
}
 ul.top-section li::after{
	right: auto; left: 50%;
	border-left: 2px solid #bbb;
}
 ul.top-section li.sub-head {
	padding:0 20px 0 0;
	width:220px;
}
 ul.top-section li.sub-head2 ul,  ul.top-section li.sub-head2 ul li, 
 ul.top-section li.sub-head ul,  ul.top-section li.sub-head ul li {
	padding:0;
}
/*We need to remove left-right connectors from elements without 
any siblings*/
 ul.top-section li:only-child::after,  ul.top-section li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
 ul.top-section li:only-child{ 
	padding-top: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
 ul.top-section li:first-child::before,  ul.top-section li:last-child::after{
	border: 0 none;
}

 ul.top-section li.sub-head ul,  ul.top-section li.sub-head2 ul {
	margin-top:-44px;
}

 ul.top-section li.sub-head ul::before {
	left:auto;
	right:0;
	border:0;
}
 ul.top-section li.sub-head2 ul::before {
	left:0;
	right:auto;
	border:0;
}
 ul.top-section li.sub-head::after,  ul.top-section li.sub-head::before  {
	border: 0;
}
 ul.top-section li.sub-head2::after,  ul.top-section li.sub-head2::before  {
	border: 0;
}
 ul.top-section li.sub-head2 ul li::after,  ul.top-section li.sub-head2 ul li::before,
 ul.top-section li.sub-head ul li::after,  ul.top-section li.sub-head ul li::before   {
	border: 0;
}
 ul.top-section li.sub-head::before  {
	border-right: 2px solid #bbb;
    border-top: 2px solid #bbb;
    right: 0;
    top: -26px;
	height:26px;
}
ul.top-section li.sub-head::after {
	border-right: 2px solid #bbb;
	border-bottom: 2px solid #bbb;
	right:0;
	left:auto;
}
 ul.top-section li.sub-head2::after  {
	border-left: 2px solid #bbb;
    border-top: 2px solid #bbb;
    left: 0;
    top: -26px;
	height:26px;
}

 ul.top-section li.sub-head2 {
	padding:0 0 0 20px;
	width:220px;
}
 ul.top-section li.sub-head2 li,  ul.top-section li.sub-head li{
	z-index:9;
}
 ul.top-section li.sub-head2 li a,  ul.top-section li.sub-head li a {
	background:#006a98;
}
 ul.top-section li.sub-head a,  ul.top-section li.sub-head2 a{
	padding:8px 20px;
	color:#fff;
}
 ul.top-section li.sub-head2::before,  ul.top-section li.sub-head::after {
	border-bottom: 2px solid #bbb;
	height:26px;
}
 ul.top-section li.sub-head2 li:last-child a,  ul.top-section li.sub-head li:last-child a {
	margin-top:15px;
}
 ul.top-section li.sub-head2::before {
	border-left: 2px solid #bbb;
	left:0;
}
 ul.top-section li.head-icon, .blank-head {
	padding:0 5px 40px;	
	width:300px;
}
 ul.top-section li.head-icon a{
	position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 100%;
    padding: 10px;
    background: #fff url('../images/chart_icons.png') 0 0 no-repeat;
	border:2px solid #006a98;
    z-index: 9;
    left: 50%;
    margin-left: -29px;
    top: -29px;
}


/*Time to add downward connectors from parents*/
ul.top-section ul::before{
	content: '';
	position: absolute; 
	top: 0; 
	left: 50%;
	border-left: 2px solid #bbb;
	width: 0; 
	height: 140px;
}

 ul.top-section li a {
	padding: 5px 10px;
	text-decoration: none;
	display: inline-block;
	background:#fff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

ul.mid-section {
	clear:both;
	position:relative;
}
ul.mid-section::after{
	content: '';
	position: absolute; 
	top: 0; 
	left: 50%;
	border-left: 2px solid #bbb;
	width: 0; 
	height: 940px;
}
ul.mid-section > li{
	width:50%;
	float:left;
	padding-top:20px;
}
ul.mid-section > li.hearing-box {
	margin-top:-54px;
}
ul.mid-section li.safty-box {
	clear:left;
}
ul.mid-section > li a:hover {
	text-decoration:none;
}
ul.mid-section li > ul {
	width:300px;
	background:#fff;
	border-radius: 5px;
	display:table;
	margin:30px 30px 0 0;
	position:relative;
}
ul.mid-section li:nth-child(even) > ul {
	float:left;
	margin-left:30px;
	margin-right:0;
}
ul.mid-section li > ul:after {
	left: 100%;
	top: 60%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #fff;
	border-width: 10px;
	margin-top: -10px;
}
ul.mid-section li:nth-child(even) > ul:after {
	left:auto;
	right:100%;
	border-left-color: transparent;
	border-right-color: #fff;
}
ul.mid-section li > ul:before {
	right: -40px;
	top: 60%;
	content: " ";
	height: 20px;
	width: 20px;
	margin-top: -10px;
	background:#fff;
	position: absolute;
	border-radius: 100%;
	border:3px solid transparent;
	z-index:9;
}
ul.mid-section li:nth-child(even) > ul:before {
	left:-40px;
	right:auto;
	border-color: transparent;
}
ul.mid-section li > ul li a.title {
	width:100%;
	display:inline-block;
	padding:15px 10px 5px;
	text-align:center;
	color:#fff;
	font-size:17px;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
}
ul.mid-section li > ul li a.title span{
	width:55px;
	height:55px;
	background:#fff url('../images/chart_icons.png') 0 0 no-repeat;
	border-radius:100%;
	border:2px solid transparent;	
	display:block;
	margin:-50px auto 0;
}
ul.mid-section li > ul li a {
	padding:5px 10px;
	display:inline-block;
	line-height:24px;
	font-size:15px;
	color:#666;
}
ul.mid-section li > ul li a .arrow-left {
  width: 0; 
  height: 0; 
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent; 
  
  border-right:7px solid transparent; 
  margin-left:10px;
  display:inline-block;
  position:relative;
  top:5px;
  float:right;
}

/*--- Vice Chairman ---*/
ul.mid-section li > ul.vice-chair:before {
	border-color:#89bd4f;
}
.vice-chair li a.title{
	background:#89bd4f;
}
ul.mid-section li > ul.vice-chair li a.title span{
	background-position: -111px -2px;
	border-color: #89bd4f;
}
ul.mid-section li > ul.vice-chair li a .arrow-left {
 border-right-color:#89bd4f;
}

/*--- Assistant Chairman ---*/
ul.mid-section li > ul.assist-chair:before {
	border-color:#00adbb;
}
.assist-chair li a.title{
	background:#00adbb;
}
ul.mid-section li > ul.assist-chair li a.title span{
	background-position: -57px -2px;
	border-color: #00adbb;
}
ul.mid-section li > ul.assist-chair li a .arrow-left {
 border-right-color:#00adbb;
}

/*-- Secretary General --*/
ul.mid-section li > ul.secretary-general {
	margin-top:-30px;
}
ul.mid-section li > ul.secretary-general:before {
	border-color:#fec749;
	top:55%;
}
ul.mid-section li > ul.secretary-general:after {
	top:55%;
}
.secretary-general li a.title{
	background:#fec749;
}
ul.mid-section li > ul.secretary-general li a.title span{
	background-position: -222px -2px;
	border-color: #fec749;
}
ul.mid-section li > ul.secretary-general li a .arrow-left {
 border-right-color:#fec749;
}

/*-- General Admin --*/

ul.mid-section li > .cross-box, ul.mid-section li > .cross-box2 {
	width:100px;
	height:230px;
	float:left;
	padding-left:40px;
	position:relative;
	display:table;
	margin-top:45px;
}
ul.mid-section li > .cross-box2 {
	float:right;
	margin-top:20px;
	padding-right:40px;
	padding-left:33px;
}
ul.mid-section li > .cross-box::before, ul.mid-section li > .cross-box2::before {
	content: '';
    position: absolute;
    top: 50%;
	left:0;
    border-bottom: 2px solid #bbb;
    width: 40px;
    height: 0;
}
ul.mid-section li > .cross-box2::before {
	left:auto;
	right:0;
}
ul.mid-section li .blue-box {
	background:#448ccb;
	color:#fff;
	height:230px;
	padding-top:30px;
	margin-top:15px;
	border-radius:5px;
	text-align:center;
	margin:auto 0;
}
ul.mid-section li  .cross-box2 .blue-box {
	padding:30px 5px 0;
}
ul.mid-section li > ul.general-admin {
	margin-top:35px;
}
ul.mid-section li > ul.general-admin:before {
	border-color:#f68e1e;
	top:50%;
	left:-38px;
}
ul.mid-section li > ul.general-admin:after {
	top:50%;
}
.general-admin li a.title{
	background:#f68e1e;
}
ul.mid-section li > ul.general-admin li a.title span{
	background-position: -167px -2px;
	border-color: #f68e1e;
}
ul.mid-section li > ul.general-admin li a .arrow-left {
 border-right-color:#f68e1e;
}

/*--- Hearing Affairs ---*/
ul.mid-section li > ul.hearing-affairs:before {
	border-color:#975696;
	top:58%;
}
ul.mid-section li > ul.hearing-affairs:after {
	top:58%;
}
.hearing-affairs li a.title{
	background:#975696;
}
ul.mid-section li > ul.hearing-affairs li a.title span{
	background-position: 0 -55px;
	border-color: #975696;
}
ul.mid-section li > ul.hearing-affairs li a .arrow-left {
 border-right-color:#975696;
}
/*-- women department --*/

ul.mid-section li > ul.women-dpt {
	margin-top:35px;
}

ul.mid-section li > ul.women-dpt:before {
	border-color:#fd7cad;
}
.women-dpt li a.title{
	background:#fd7cad;
}
ul.mid-section li > ul.women-dpt li a.title span{
	background-position: -57px -57px;
	border-color: #fd7cad;
}
ul.mid-section li > ul.women-dpt li a .arrow-left {
 border-right-color:#fd7cad;
}

/*-- Safty & Security --*/

ul.mid-section li > ul.safty-security:before {
	border-color:#d82431;
}
.safty-security li a.title{
	background:#d82431;
}
ul.mid-section li > ul.safty-security li a.title span{
	background-position: -113px -57px;
	border-color: #d82431;
}
ul.mid-section li > ul.safty-security li a .arrow-left {
 border-right-color:#d82431;
}

/*-- Committee Affair --*/

ul.mid-section li > ul.committee-affair {
	margin-top:0;
}

ul.mid-section li > ul.committee-affair:before {
	border-color:#a67c52;
	top:70%;
}
ul.mid-section li > ul.committee-affair:after {
	top:70%;
}
.committee-affair li a.title{
	background:#a67c52;
}
ul.mid-section li > ul.committee-affair li a.title span{
	background-position: -167px -57px;
	border-color: #a67c52;
}
ul.mid-section li > ul.committee-affair li a .arrow-left {
 border-right-color:#a67c52;
}