@charset "utf-8";
/* CSS Document */


ul{ padding:0 ; margin:0}
.overflow {
	/*overflow:auto;*/
	position:relative;
}
ul.tree {
	display:block;
	padding-bottom:100px;
}

ul.tree li {
    text-align: center;
    margin: 15px;
    vertical-align: top;
}

.list_family li{	
    display: inline-block;
	display:none;
}


ul.tree li.none {
	display:none;
}
ul.tree ul.show {
	display:block!important;
}
ul.tree li > div {
	display:inline-block;
	padding:0;
	text-decoration:none;
	position:relative;
	min-width:40px;
	z-index:2;
	color:#fff;
    font-weight: bold;
    cursor: pointer;
}
ul.tree li > div.zindex {
	z-index:inherit;
}
ul.tree li form {
	display:block;
	text-align:left;
	padding:10px;
	margin-top:15px;
	position:absolute;
	z-index:4;
	background:#da9628;
	color:#fff;
}
ul.tree li form input[type=checkbox] {
}
ul.tree li form img.close {
	float:right;
	cursor:pointer;
	background-color:#e02222;
	padding:2px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
ul.tree li textarea {
	height:35px;
	width:150px;
	background:#ffc;
	padding:4px;
	font:12px Arial, Helvetica, sans-serif;
	color:#000;
	border:none;
	margin:5px 0;
	display:block;
}
ul.tree li textarea.error {
	background:#d84a38;
}
ul.tree li textarea:focus {
	background:#ffc;
}
ul.tree li span.submit, ul.tree li span.edit {
	text-align:center;
	display:block;
	font:11px Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#fff;
	padding:3px 7px;
	cursor:pointer;
	margin-top:3px;
	background:#4d90fe;
}
ul.tree li span.submit:hover, ul.tree li span.edit:hover {
	background:#8a9ef5;
}


/*ul.tree li div.current {
	background:#28b779;
}
*/

/*ul.tree li div.children {
	background:#ffb848;
}
*/
/*ul.tree li div.parent {
	background:#852b99;
}
*/

ul.tree li span.vertical, ul.tree li span.horizontal {
	display:inline-block;
	position:absolute;
	z-index:1;
}

ul.tree li span.vertical {
	width:4px;
    background: none;
    border-left: 4px dashed #7bd156;
}

ul.tree li span.horizontal {
    height: 4px;
    background: none;
    border-top: 4px dashed #7bd156;
}
ul.tree li b.hide {
	position:absolute;
	width:11px;
	height:12px;
	bottom:0;
	left:-17px;
	background:url(../images/hide.png) no-repeat;
	cursor:pointer;
}
ul.tree li b.hide.show {
	background:url(../images/show.png) no-repeat;
}
ul.tree li b.hide.none {
	display:none;
}
ul.tree li span.add_action, ul.tree li span.edit_action, ul.tree li span.highlight, ul.tree li span.delete_action {
	position:absolute;
	width:10px;
	height:10px;
	cursor:pointer;
	display:none;
	padding:2px;
	background-color:#e02222;
	background-position:center;
	background-repeat:no-repeat;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
ul.tree li span.add_action {
	top:-5px;
	left:-5px;
	background-image:url(../images/add.png);
}
ul.tree li span.edit_action {
	bottom:-5px;
	left:-5px;
	background-image:url(../images/edit.png);
}

ul.tree li span.highlight {
    bottom: -5px;
    right: -5px;
    background-image: url(../images/highlight.png);
	display:none !important
}

ul.tree li span.delete_action {
	top:-5px;
	right:-5px;
	background-image:url(../images/close.png);
}
img.back_btn {
	position:fixed;
	left:15px;
	top:15px;
	cursor:pointer;
	z-index:3;
}
img.load {
	position:absolute;
}
div.drag_error, div.delete_msg, div.edit_msg, div.add_msg, div.drop_msg {
	position:absolute;
	color:#fff;
	position:absolute;
	right:10px;
	top:10px;
	padding:4px 10px;
	font:14px Arial, Helvetica, sans-serif;
	z-index:999;
}
div.drag_error {
	background:#b41616;
}
div.delete_msg {
	background:#b41616;
}
div.edit_msg {
	background:#17A769;
}
div.add_msg {
	background:#27A9E3;
}
div.drop_msg {
	background:#852b99;
}


.head_image {
}

.head_image i {
    display: block;
    background: url(../images/name.bg.png) no-repeat center center;
    color: #222;
    width: 100%;
    text-align: center;
    border: 0;
    margin-top: -36px !important;
    position: relative;
    font-size: 21px;
    height: 50px;
    line-height: 35px;
    font-style: normal;
}

.head_image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
}


.manu {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    /*border: 6px solid #7bd156;*/
    box-shadow: 0px 0px 0 4px #7bd156;
    -moz-box-shadow: 0px 0px 0 4px #7bd156;
    -webkit-box-shadow: 0px 0px 0 4px #7bd156;
    -ms-box-shadow: 0px 0px 0 4px #7bd156;
    width: 170px;
    height: 170px;
}




.list_family li div img {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    width: 100%;
    height: 100%;
}

.list_family li div .manu {
    box-shadow: 0px 0px 0 4px #7bd156;
   	-moz- box-shadow: 0px 0px 0 4px #7bd156;
    -webkit-box-shadow: 0px 0px 0 4px #7bd156;
    -o-box-shadow: 0px 0px 0 4px #7bd156;
    -ms-box-shadow: 0px 0px 0 4px #7bd156;
    /*border: 3px solid #7bd156;*/
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    height: 101px;
    width: 101px;
}

.list_family li div i {
    display: block;
    background: url(../images/info-child-bg.png) no-repeat center center;
    color: #222;
    width: 100%;
    text-align: center;
    border: 0;
    margin-top: -25px !important;
    position: relative;
    font-size: 17px;
    height: 37px;
    line-height: 28px;
    font-style: normal;
}

.current .manu {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
   /* border: 6px solid #FFB848;*/
    box-shadow: 0px 0px 0 6px #FFB848;
    -ms-box-shadow: 0px 0px 0 6px #FFB848;
    -webkit-box-shadow: 0px 0px 0 6px #FFB848;
    -moz-box-shadow: 0px 0px 0 6px #FFB848;
    -o-box-shadow: 0px 0px 0 6px #FFB848;
	}

.list_family li div img.img_wife {
    width: 100%;
    border-radius: 20px 0 20px 0 !important;
    -moz-border-radius: 20px 0 20px 0 !important;
    -webkit-border-radius: 20px 0 20px 0 !important;
    -o-border-radius: 20px 0 20px 0 !important;
    border: 3px solid #7bd156 ;
    height: 50px;
}

.wife {
    position: absolute;
    top: -5px;
    right: -20px;
    width: 50px;
    height: 50px;
}

.wife:after {
    content: "";
    background: url(../images/heart.png) no-repeat center center;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 30px;
    right: 30px;
}

.list_family li div.current .manu {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    /*border: 3px solid #FFB848;*/
    box-shadow: 0px 0px 0 5px #FFB848;
    -moz-box-shadow: 0px 0px 0 5px #FFB848;
    -webkit-box-shadow: 0px 0px 0 5px #FFB848;
    -o-box-shadow: 0px 0px 0 5px #FFB848;
    -ms-box-shadow: 0px 0px 0 5px #FFB848;
}


ul.tree li div.children  .manu {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    /*border: 5px solid #FFB848;*/
    box-shadow: 0px 0px 0 5px #FFB848;
    -moz-box-shadow: 0px 0px 0 5px #FFB848;
    -webkit-box-shadow: 0px 0px 0 5px #FFB848;
    -ms-box-shadow: 0px 0px 0 5px #FFB848;
    -o-box-shadow: 0px 0px 0 5px #FFB848;
	
}

ul.tree li div.parent .manu {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    /*border: 3px solid #F14D4D;*/
	
    box-shadow: 0px 0px 0 4px #F14D4D;
   	-moz- box-shadow: 0px 0px 0 4px #F14D4D;
    -webkit-box-shadow: 0px 0px 0 4px #F14D4D;
    -o-box-shadow: 0px 0px 0 4px #F14D4D;
    -ms-box-shadow: 0px 0px 0 4px #F14D4D;
}


ul.tree li div.head_image.parent .manu {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
	
    box-shadow: 0px 0px 0 6px #F14D4D;
    -moz-box-shadow: 0px 0px 0 6px #F14D4D;
    -webkit-box-shadow: 0px 0px 0 6px #F14D4D;
    -ms-box-shadow: 0px 0px 0 6px #F14D4D;
}






.list_family > li > .vertical {
    background: #bbb !important;
	border:0 !important
}
.list_family > li > .horizontal {
    background: #bbb !important;
	border:0 !important
}



/*.list_family > li > .vertical {
    background: none !important;
    border-left: 4px dashed #7bd156;
}
.list_family > li > .horizontal {
    background: none !important;
    border-top: 4px dashed #7bd156;
}
*/


.overflow{    
	transition: all 0s ease 0s;
	-webkit-transition: all 0s ease 0s;
	-moz-transition: all 0s ease 0s;
	-o-transition: all 0s ease 0s;
	-ms-transition: all 0s ease 0s;
}

.overflow *{
	transition: all 0s ease 0s;
	-webkit-transition: all 0s ease 0s;
	-moz-transition: all 0s ease 0s;
	-o-transition: all 0s ease 0s;
	-ms-transition: all 0s ease 0s;
}

ul.tree li span.vertical{    
	  -webkit-animation-duration: 0s;
	   -moz-animation-duration: 0s;
	    -ms-animation-duration: 0s;
	     -o-animation-duration: 0s;
	        animation-duration: 0s;
}

ul.tree li span.horizontal{    
	  -webkit-animation-duration: 0s;
	   -moz-animation-duration: 0s;
	    -ms-animation-duration: 0s;
	     -o-animation-duration: 0s;
	        animation-duration: 0s;
}

.cvs {
    background: #000;
    width: 25px;
    height: 25px;
    position: absolute;
    cursor: pointer;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    -o-border-radius: 100%;
	display:none
}