/*Tree styles*/

div.grid {
    
}
div.grid a:hover {
}

div.grid div.chkCell {
    width: 20px;
    float: left;
    height: 16px;
}
div.grid div.spacerCell,
  div.grid div.cornerCell,
  div.grid div.tBarCell,
  div.grid div.lineBarCell {
    width: 30px;
    color: #F5F5F5;
    float: left;
} 

div.grid div.spacerCell,
  div.grid div.cornerCell,
  div.grid div.tBarCell,
  div.grid div.lineBarCell,
  div.grid div.pageNodeSelected div.spacerCell,
  div.grid div.pageNodeSelected div.cornerCell,
  div.grid div.pageNodeSelected div.tBarCell,
  div.grid div.pageNodeSelected div.lineBarCell,
  div.grid div.pageNode:hover div.spacerCell,
  div.grid div.pageNode:hover div.cornerCell,
  div.grid div.pageNode:hover div.tBarCell,
  div.grid div.pageNode:hover div.lineBarCell {
    width: 30px;
    color: #DDD;
    float: left;
}

div.grid div.spacerCell,
  div.grid div.cornerCell,
  div.grid div.tBarCell,
  div.grid div.lineBarCell {
    color: #F5F5F5;
}

div.grid div.spacerCell {
    background: transparent none repeat-x top left;
}
div.grid div.cornerCell {
    background: transparent url(images/cell-c.gif) no-repeat top left;
}
div.grid div.tBarCell {
    background: transparent url(images/cell-t.gif) no-repeat top left;
}
div.grid div.lineBarCell {
    background: transparent url(images/cell-l.gif) no-repeat top left;
}
div.grid div.pageNode,
  div.grid div.pageNodeSelected,
  div.grid div.pageNodeNotActive {
    position: relative;
    clear: left;
    height: 1.1em;
}

div.grid div.pageNodeNotActive {
    color: #AAA;
}


div.grid div.nCellwChild {
    background: transparent url(images/cell-n.gif) no-repeat bottom left;
}

div.grid div.options,
  div.grid div.nCell,
  div.grid div.nCellwChild,
  div.grid div.options > div {
    width: auto;
    display: inline;
}

div.grid div.options {
    position: absolute;
    right: 10%;
    top: 0;
    font-size: .8em;
    position: absolute;
    margin-left: 50px;
    z-index: 3; /*background-color: #F6F6F6;*/
}

div.grid div.options a {
    padding: 2px;
}


div.grid div.pageNodeSelected div.options,
   div.grid div.pageNode:hover div.options {
    background-color: #DDD;
}

div.grid div.pageNode:hover,
   div.grid div.pageNodeSelected {
    background-color: #DDD;
}

div.grid div.pageNode div.options > div,
   div.grid div.pageNodeSelected div.options > div {
    margin-left: 10px;
}
div.grid div.options > div:hover {
    margin-left: 10px;
    background-color: #BBB;
}
div.grid div.icons {
    display: inline;
    font-size: .8em;
}
/* Node Colors */

div.pageNode div.regularnode {
    display: inline;
}

div.pageNode div.currentnode, ul.tree div.currentnode {
    display: inline;
    background-color: #7E9DCC;
    color: #FFF;
    padding: 1px;
    padding-bottom: 0;
    border: solid 1px #AAD;
    font-weight: bold;
}
div.grid a.node1 {
    color: #000;
}
div.grid a.node2 {
    color: #700;
}
div.grid a.node3 {
    color: #AA0;
}
div.grid a.node4 {
    color: #070;
}
div.grid a.node5 {
    color: #00A;
}
div.grid a.node6 {
    color: #0A0;
}
div.grid a.node7 {
    color: #007;
}
div.grid a.node8 {
    color: #009;
}
div.grid a.node9 {
    color: #090;
}
div.grid a.node10 {
    color: #0AA;
}
div.grid a.node11 {
    color: #099;
}
div.grid a.node12 {
    color: #077;
}
div.grid a.node13 {
    color: #770;
}
div.grid a.node14 {
    color: #990;
}
div.grid a.node15 {
    color: #900;
}
div.grid a.node16 {
    color: #A0A;
}
div.grid a.node17 {
    color: #707;
}

div.grid a.addChild {
    font-size: .8em;
    background-color: #5E7DAC;
    padding: 2px;
    color: #FFF;
}
div.grid a.addChild:visited {
    color: #FFF;
}
/* End Node Colors */

/* Tree styles

.tree {
    height: 1%;
}
.tree a:hover {
}

.tree .chkCell {
    width: 20px;
    float: left;
    height: 16px;
}
.tree .cornerCell,
  .tree .tBarCell,
  .tree .lineBarCell {
    width: 30px;
    color: #F5F5F5;
    float: left;
} 

.tree .cornerCell,
  .tree .tBarCell,
  .tree .lineBarCell,
  .tree .pageNodeSelected .spacerCell,
  .tree .pageNodeSelected .cornerCell,
  .tree .pageNodeSelected .tBarCell,
  .tree .pageNodeSelected .lineBarCell,
  .tree .pageNode:hover .spacerCell,
  .tree .pageNode:hover .cornerCell,
  .tree .pageNode:hover .tBarCell,
  .tree .pageNode:hover .lineBarCell {
    width: 30px;
    color: #DDD;
    float: left;
}

.tree .cornerCell,
  .tree .tBarCell,
  .tree .lineBarCell {
    color: #F5F5F5;
}

.tree .cornerCell {
    background: transparent url(images/cell-c.gif) no-repeat top left;
}
.tree .tBarCell {
    background: transparent url(images/cell-t.gif) no-repeat top left;
}
.tree .lineBarCell {
    background: transparent url(images/cell-l.gif) no-repeat top left;
}
.tree .pageNode,
  .tree .pageNodeSelected,
  .tree .pageNodeNotActive {
    position: relative;
    clear: left;
}

.tree .pageNodeNotActive {
    color: #AAA;
}


.tree .nCellwChild {
    background: transparent url(images/cell-n.gif) no-repeat bottom left;
}

.tree .options,
  .tree .nCell,
  .tree .nCellwChild,
  .tree .options > div {
    width: auto;
    display: inline;
}

.tree .options {
    position: absolute;
    right: 10%;
    top: 0;
    font-size: .8em;
    position: absolute;
    margin-left: 50px;
    z-index: 3;
}

.tree .options a {
    padding: 2px;
}


.tree .pageNodeSelected .options,
   .tree .pageNode:hover .options {
    background-color: #DDD;
}

.tree .pageNode:hover,
   .tree .pageNodeSelected{
    background-color: #DDD;
}

.tree .pageNode .options > div,
   .tree .pageNodeSelected .options > div {
    margin-left: 10px;
}
.tree .options > div:hover {
    margin-left: 10px;
    background-color: #BBB;
}
.tree .icons {
    display: inline;
    font-size: .8em;
}

.pageNode .regularnode {
    display: inline;
}

.pageNode .currentnode {
    display: inline;
    background-color: #7E9DCC;
    color: #FFF;
    padding: 1px;
    padding-bottom: 0;
    border: solid 1px #AAD;
    font-weight: bold;
}
.tree a.node1 {
    color: #000;
}
.tree a.node2 {
    color: #700;
}
.tree a.node3 {
    color: #AA0;
}
.tree a.node4 {
    color: #070;
}
.tree a.node5 {
    color: #00A;
}
.tree a.node6 {
    color: #0A0;
}
.tree a.node7 {
    color: #007;
}
.tree a.node8 {
    color: #009;
}
.tree a.node9 {
    color: #090;
}
.tree a.node10 {
    color: #0AA;
}
.tree a.node11 {
    color: #099;
}
.tree a.node12 {
    color: #077;
}
.tree a.node13 {
    color: #770;
}
.tree a.node14 {
    color: #990;
}
.tree a.node15 {
    color: #900;
}
.tree a.node16 {
    color: #A0A;
}
.tree a.node17 {
    color: #707;
}

.tree a.addChild {
    font-size: .8em;
    background-color: #5E7DAC;
    padding: 2px;
    color: #FFF;
}
.tree a.addChild:visited {
    color: #FFF;
} */
.tree{
    margin: 0;
    padding:0;
    background: transparent url(images/cell-l.gif) repeat-y left top;
}
.tree li{
    position:relative;
    background: transparent url(images/cell-t.gif) no-repeat left top;
    vertical-align:top;
    margin:0;
    padding-left: 28px;
    list-style-type:none;
}
.tree li.cornerCell {
    background: #FFF url(images/cell-c.gif) no-repeat left top;
}
.tree li > div{
    position:relative;
    border-top: 1px solid #CCC;
}
.tree .hasChildren{
    background: transparent url(images/cell-n.gif) no-repeat bottom left;
}
.tree span{
    border: 1px solid #AAA;
}
.tree .options{
  position:absolute;
  top: 0;
  right: 0;   
  font-size: .8em;
}
.tree .options a {
    padding: 2px;
}
.tree a.node1 {
    color: #000;
}
.tree a.node2 {
    color: #700;
}
.tree a.node3 {
    color: #AA0;
}
.tree a.node4 {
    color: #070;
}
.tree a.node5 {
    color: #00A;
}
.tree a.node6 {
    color: #0A0;
}
.tree a.node7 {
    color: #007;
}
.tree a.node8 {
    color: #009;
}
.tree a.node9 {
    color: #090;
}
.tree a.node10 {
    color: #0AA;
}
.tree a.node11 {
    color: #099;
}
.tree a.node12 {
    color: #077;
}
.tree a.node13 {
    color: #770;
}
.tree a.node14 {
    color: #990;
}
.tree a.node15 {
    color: #900;
}
.tree a.node16 {
    color: #A0A;
}
.tree a.node17 {
    color: #707;
}

.tree li > div:hover{
    background-color: #EEE;   
}









/* Title Edit Styles */

#titles {
}
#titles div.parents, #titles div.current, #titles div.children {
    height: 4em;
    background: transparent url(images/form-separator.gif) no-repeat left bottom;
}
#titles div.parents a, #titles div.children a{
    background-color: #333; /* url(images/form-button-end.gif) repeat left center;*/
    padding: .78em;
    color: #FFF;
}
#titles div.parentTitle, #titles div.childTitle, #titles div.currentTitle {
    display:inline;
    margin: .2em;
    float: left;
}
#titles div.parentTitle, #titles div.childTitle{
    background-color: #FFF;
    border: solid 1px #333;
    border-left: none;
}

#titles div.currentTitle div.buttons{
    width: auto;
    background: none;
    padding-left: 0;
}
#titles div.form label{
    width: auto;
    
}

 #titles div.current{height: 5em;}
  #titles div.currentTitle{padding: .2em;}
#titles h3{
    float: left;
    width: 5em;
    text-align:right;
    padding: .5em;
    padding-top: 0;
    padding-bottom: 0;
    }
    
#titles input[type=submit].add,
 #titles input[type=submit].edit,
  #titles input[type=submit].remove{
  	border: none;
	padding: 0;
	padding-left: 25px; /* this is to make the text disappear for IE */
	color: transparent; /* this is to make the text disappear for FireFox */
	width: 25px;
}
#titles input[type=submit].add{
	background: transparent url(images/form-button-add.gif) no-repeat center bottom;
	
}
#titles input[type=submit].edit{
	background: transparent url(images/form-button-edit.gif) no-repeat center bottom;
}
#titles input[type=submit].remove{
	background: transparent url(images/form-button-remove.gif) no-repeat center bottom;
}

#titles input[type=submit].add:hover,
 #titles input[type=submit].edit:hover,
 #titles input[type=submit].remove:hover{
	background-position: left top;
	cursor: pointer;
}

/* End Title Edit Styles */

/* Family Styles */

#families {
    font-size: .75em;
}

#families h2 {
    clear: left;
}

.family {
    float: left;
    border: solid 1px #AAA;
    background-color: #CCC;
    margin: .6em;
}
li.family ol {
    clear: left;
}
li.family li {
    float: left;
}

div.male,
   div.female {
    min-width: 150px;
    float: left;
    border: solid 1px #CCC;
    margin: .5em;
    padding: .6em;
    background-color: #FFF;
}
.male {
    color: #68A;
}
.female {
    color: #A66;
}
.male div.individual {
    background: #e8e8e8 url(images/male.gif) no-repeat right bottom;
    min-width: 140px;
}

.female div.individual {
    background: #e8e8e8 url(images/female.gif) no-repeat right bottom;
    min-width: 140px;
}


div.individual div.links,
  div.individual-parent div.links,
  div.individual-child div.links,
  div.family div.links{
    position: absolute;
    top: 1.2em;
    right: 0;
    min-height: 20px;
    min-width: 35px;
    text-align: center;
    padding-right: 20px;
    background: transparent url(images/geneology-buttons.gif) no-repeat right 0px;
}

div.individual div.links h4,
  div.individual-parent div.links h4,
  div.individual-child div.links h4,
  div.family div.links h4{
    font-size: .5em;
    margin: 0;
    padding: 0;
}

div.individual div.links a,
  div.individual-parent div.links a,
  div.individual-child div.links a,
  div.family div.links a{
    display: none;
    margin: .3em;
    font-size: .6em;
    text-decoration: none;
}
div.individual-parent div.links a,
  div.individual-child div.links a,
  div.family div.links a{
    float:left;
    }

div.individual div.links:hover,
  div.individual-parent div.links:hover,
  div.individual-child div.links:hover,
  div.family div.links:hover{
    background: #EEE url(images/geneology-buttons.gif) no-repeat right -60px;
    border: solid 1px #666;
}

div.individual div.links:hover a,
  div.individual-parent div.links:hover a,
  div.individual-child div.links:hover a,
  div.family div.links:hover a{
    display: block;
}

div.individual div.links:hover h4,
  div.individual-parent div.links:hover h4,
  div.individual-child div.links:hover h4,
  div.family div.links:hover h4{
    display: none;
}


div.individual {
    position: relative;
    padding-right: 25px;
    min-height: 70px;
}

div.gedNumber {
    font-size: .6em;
}

div.name {
    font-weight: bold;
}
div.gender {
    position: absolute;
    bottom: 0;
    right: 13px;
    color: #CCC;
}

div.age {
    font-size: .8em;
}
div.birth {
    background: transparent url(images/geneology-icons.gif) no-repeat left -150px;
    height: 20px;
    padding-left: 20px;
    font-size: .8em;
}
div.death {
    background: transparent url(images/geneology-icons.gif) no-repeat left -225px;
    height: 20px;
    padding-left: 20px;
    font-size: .8em;
}

div.count {
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 10px;
    background: transparent url(images/geneology-icons.gif) no-repeat left -300px;
}
div.gedNumber {
    position: absolute;
    bottom: 0;
    right: 55px;
}

/*in families   Minis */

.family .name{
    position:relative;
}
div.family div.links{
    top:0;   
}

.family div.male,
   .family div.female {
    clear: left;
    padding: 0;
    margin: 0;
}


div.family div.female > div,
   div.family div.male > div {
    background-color: #E8E8E8;
    border: solid 1px #AAA;
    position: relative;
    width: 250px;
    min-height: 35px;
}

div.individual-parent {
}
div.individual-child,
  div.individual-child-selected {
    padding-left: 20px;
    background: transparent url(images/geneology-icons.gif) no-repeat left -400px;
}

div.family div.female .name,
   div.family div.male .name {
    padding-left: 20px;
    min-height: 20px;
}
div.family div.female .name {
    background: transparent url(images/geneology-icons.gif) no-repeat left 0;
}
div.family div.male .name {
    background: transparent url(images/geneology-icons.gif) no-repeat left -75px;
}
div.family div.birth,
   div.family div.death {
    width: 0;
    overflow: hidden;
    float: left;
}
div.family div.age,
   div.family div.gedNumber,
   div.family div.gender {
    clear: left;
}
div.family div.birth:hover,
   div.family div.death:hover,
   div.family div.age:hover {
    width: auto;
}

div.individual-parent-selected,
   div.individual-child-selected{
    border: solid 5px #A66 !important;
    
}

/* End Family Styles */

/* End tree Styles */

/* Start Sortable Styles */
.viewList
{
    float:left;
    width: 220px;
    border: 2px solid #888;
    padding: .5em;
    margin: 1em;
}
.viewBox
{
    border: 1px solid #AAA;
    background-color: #DEF;   
    width: 150px;
    position:relative;
}
.viewBox:hover
{
    /*background-color: #DFE;*/
    background-color: #7E9DCC;
    color: #FFF;
}
.viewBox:hover .editView
{
    color: #FFF;
}
.viewRank
{
    position:absolute;
    font-weight:bold;
    top:0;
    right:0;
    visibility:hidden;
}
/*.viewBoxPlaceHolder .viewRank
{
    position:absolute;
    visibility:hidden;
}*/
.viewReference
{
    padding: 0 0 0 1.2em;
}
.viewBoxPlaceHolder .viewReference
{
    padding: 0 0 0 0;
}
.viewBox h4, .viewBoxPlaceHolder h4
{
    margin: 0;
    padding: 0;
}
.viewBox a
{
    cursor: pointer;
}
.viewBox .editView
{
    position:absolute;
    background: transparent url(images/form-button-edit.png) no-repeat 1px 3px;
    height: 19px;
    width: 20px;
    bottom:0;
    right:0;
}
.viewBox .removeView
{
    position:absolute;
    background: transparent url(images/form-button-remove.png) no-repeat 1px 3px;
    height: 18px;
    width: 20px;
    top:0;
    right:0;
}
#cphBody_-1_List .viewBox .removeView
{
    visibility:hidden;
    /*opacity: 0.5;
    cursor: default;*/
}
.viewBoxPlaceHolder a
{
    position:absolute;
    visibility: hidden;
}
.viewBoxPlaceHolder
{
    border: 2px dashed #AAA;
    padding: 10px 10px 10px 10px;
    background-color: #EEE;
    width: 150px;
    position:relative;
}
/*.viewBoxPlaceHolder:hover
{
    background-color: #DDD;
}*/

.sortableList, .sortableClassList
{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 175px;
    position:relative;
    border: 10px double transparent;
    /*border: 5px solid #0F0;*/
}
.selectedListToAdd
{
    border-color: #9AC;
}
.selectedListToAdd .placeHolderListItem + .ui-state-highlight
{
  
    position: absolute;
    top:0;
    left:0;
    height: 20px;
    width: 175px;
	background: transparent url(images/form-sprites.png) no-repeat 155px -60px;
}
.sortableList .ui-state-highlight, .sortableClassList .ui-state-highlight
{ 
    height: 20px; 
	background: #DDD url(images/form-sprites.png) no-repeat 155px -361px;
    border:none;
    
}
.deleteSortableListItem
{
    position:fixed;
    bottom:10px;
    right:10px;
    clear:left;
    /*background: rgba(187,187,187,0.5) url(images/trash.png) no-repeat scroll;    
    border: 3px solid rgba(136,136,136,0.5);*/
    background: #BBB url(images/trash.png) no-repeat scroll;
    border: 3px solid #888;
    opacity:0.5;
    height:93px;
    width:100px;
}
.deleteSortableListItem:hover
{
    background: #DDD url(images/trash-open.png) no-repeat scroll;
    opacity: 1;
}
.deleteSortableListItem .ui-state-highlight
{ 
    background: #DDD url(images/trash-open.png) no-repeat scroll;
    height:93px;
    width:100px;
}
.draggingItem
{
    border: 3px solid #3E5C8D;
    overflow:hidden;
    width: 100px !important;
}
/* End Sortable Styles */