* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, sans-serif;
}

/* basic structure of page, etc. */
span.notranslate {
	display:inline !important;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


#disclaimer {
	font-size:85%;
	padding-top:15px;
	padding-bottom:15px;
	margin-left:5%;
	margin-right:5%;
}

#isSimulation {
	padding-left:-10px;
	margin-left:-20px;
	font-weight:bold;
	font-size:125%;
}

   #IGNORElnkShowAbout {
      color: -webkit-link;
      text-decoration: underline;
      cursor: pointer;
      margin-top:14px;
      padding-bottom:3px;
   }
   #lnkShowAbout:hover, .weblink:hover, #sendFeedback:hover {
      color: -webkit-link !important;;
      text-decoration: underline  !important;
      cursor: pointer;
      color:#F05555 !important;
   }
   .signupDiv {
    font-size:90%;
   }


      #header {
        padding: 1px;
        background-color: #86a6d9;
        font-style:italic;
        text-align: center;
      }
      .heading1 {
        font-size: 20px;
        color: #000;
      }
      .heading2 {
        font-size: 15px;
        font-weight: normal;
        color: #333;
      }


			.questions_comments {
				padding-top: 20px;
				padding-left: -10px;
				margin-left: -20px;
				font-style: italic;
			}
			#headerInfo {
				padding-top: 20px;
				padding-left: -10px;
				margin-left: -20px;
			}

			.aboutHeader {
				text-size: 18px;
				padding-top: 15px;
				padding-bottom: 10px;
				font-weight: bold;
				font-style: italic;
				padding-left: -10px;
				margin-left: -20px;
			}

			.formula {
				margin: 15px;
				font-style: italic;
			}

			#sigfooter {
				padding-top: 20px;
				font-style: italic;
				font-weight: bold;
				padding-left: -10px;
				margin-left: -20px;
			}

			#mainContent {
				position: absolute;
				width: 100%;
				idisplay:none;
				bottom: 0;
				opacity:0.001;
			}
			#middleContent {
                position:relative;
				height:100%;
				padding-left:0;
				imargin-right:20px;
			}

			#currentModelTime {
				itext-align: center;
				font-style: italic;
				font-size: 12px;
				padding-top: 5px;
			}
			#bestOnDesktop {
				font-size: 80%;
				font-weight: bold;
				font-style: italic;
				display: none;
			}

			#treeArea {
                position: relative;
        overflow: hidden; /* added when I started showing all labels */
				iposition: absolute;
				iheight: 80%;
				width: 100%;
				ipadding-top: 10px;
				ipadding-bottom:30px;
				ipadding-left:5%;
				iborder: 1px solid green;
                /*cursor: grab;*/
                /*cursor: -moz-grab;*/
                /*cursor: -webkit-grab;			*/
            }
			#youAreHere {
			   text-align:center;
			}
			#titleOnTreeArea, #subtitleOnTreeArea, #disclaimerOnTreeArea {
			 text-align:center;
			}
			#subtitleOnTreeArea {
			 font-size:80%;
			}
			#disclaimerOnTreeArea {
       font-size:80%;
       font-style:italic;
			}

			#loadingDiv {

			  border-radius:5px;
			  text-align:center;
			  font-size:16px;
			  position:absolute;
			  top:350px;
                padding:10px;
			  margin-left:30%;
              margin-right:30%;
			  background:#FFD600;
			  opacity:0.9;
			  display:none;


				background-clip: padding-box; /* prevents bg color from leaking outside the border */
			}

			.loadingItem {
				text-align: center;
			}

			.mailChimpSignup {
				idisplay: none;
				ifloat: right;
				padding-right: 10px;
				position: absolute;
				right: 0;
			}
			#modelTimeDiv {
				position: absolute;
				idisplay: none;
				ifloat: left;
				padding-left: 10px;
			}

			#closeAbout {
				float: right;
				color: red;
				text-size: 12px;
				border: 3px solid red;
				border-radius: 5px;
				margin: 4px;
				padding: 4px;
			}
      #closeAbout:hover {
        background:pink;
      }

			#aboutDetails {
				overflow: scroll;
				padding-left: 30px;
				margin-left: 30px;
				padding-right: 30px;
				margin-right: 30px;
				display: none;
				position: absolute;
				border: 6px solid #86a6d9;
				iborder-radius: 5px;
				background: #FFFFFF;
				opacity: 0.92;
				ileft: 5%;
				top: 20%;
				color: #000000;
				z-index: 5000;
				border-radius: 4px;
				ipadding: 5px;
				font-size: 14px;
				itext-shadow: 0px 1px 1px white;
				ibackground-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q4NmM2YyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYmZiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+"); /* layer fill content */
				ibackground-image: -moz-linear-gradient(bottom, #86a6d9 0%, #eeeeee 100%); /* layer fill content */
				ibackground-image: -o-linear-gradient(bottom, #86a6d9 0%, #eeeeee 100%); /* layer fill content */
				ibackground-image: -webkit-linear-gradient(bottom, #86a6d9 0%, #eeeeee 100%); /* layer fill content */
				ibackground-image: linear-gradient(bottom, #86a6d9 0%, #eeeeee 100%); /* layer fill content */
				ipadding: 4px 10px;
				-moz-border-radius: 9px 9px 9px 9px;
				-webkit-border-radius: 9px 9px 9px 9px;
				border-radius: 9px 9px 9px 9px; /* border radius */
				-moz-background-clip: padding;
				-webkit-background-clip: padding-box;
				background-clip: padding-box; /* prevents bg color from leaking outside the border */
			}

			#theButtons {
				iposition: absolute;
				display: none;
				margin: 0 auto;
				iborder: 1px solid yellow;
				width: 100%;
			}

			/* d3 stuff */
			.link {
				fill: none;
				stroke: #000;
				stroke-width: 1px;

				-webkit-transition:stroke-width 0.5s;
				transition:stroke-width 0.5s;

			}

			.linkMouseOver {
                stroke-width: 4px;
			}

		  .linkMouseOver {
			stroke-width: 4px;
		  }

          .link.is-highlighting-straight-path {
              stroke-width: 2px;
          }

		  .path-selected {
			stroke-width:3px;
		  }


			.border {
				fill: none;
				shape-rendering: crispEdges;
				stroke: #aaa;
			}

			path.domain {
				stroke-width: 2px;
				shape-rendering: crispEdges;
			}

			/* Style the X and Y axes. */
			.axis path, .axis line {
				fill: none;
				stroke: black;
				stroke-width: 1px;
				/*
				 shape-rendering: crispedges;
				 This causes the axis line to sometimes be 2 pixels, and
				 sometimes be 1 pixel, which is unacceptable.
				 */
			}

			.axis .tick text {
				font-size: 14px;
			}

			.hover-line line {
				stroke: #777;
				fill: none;
				stroke-width: 1px;
				opacity:0;
			}




      .topLine {
          fill: none;
          stroke: #555;
          stroke-width: 0.15px;
      }

     .highlightedGenderGeneration {
        fill:red;
        stroke:#FFD600;
        stroke-width:5px;
     }

     #options {
        /*position:absolute;*/
        font-size:80%;
        /*left:10px;*/
        /*top:0;*/
     }

			/*@media (max-width: 720px) {*/

				/*#options {*/
					/*position:relative;*/
					/*float:left;*/
				/*}*/
				/*.no-small-screen {*/
					/*display:none;*/
				/*}*/

				/*#title-wrapper {*/
					/*iifont-size:95%;*/
					/*clear:both;*/
				/*}*/

				/*#treeArea {*/
					/*width: 99%;*/
					/*padding-left: 0;*/
					/*margin-left:-2%;*/
				/*}*/

				/*.axis .tick text {*/
					/*font-size:10px;*/
				/*}*/


			/*}*/

     .gender {
      padding-top:5px;
      ipadding-bottom:5px;
     }
     .genderFemale {
      padding-top:5px;
      padding-bottom:5px;
     }
     #update {
      ipadding-top:5px;
     }

			.btn-file {
				position: relative;
				overflow: hidden;
			}
			.btn-file input[type=file] {
				position: absolute;
				top: 0;
				right: 0;
				min-width: 100%;
				min-height: 100%;
				font-size: 20px;
				text-align: right;
				filter: alpha(opacity=0);
				opacity: 0;
				outline: none;
				background: white;
				cursor: inherit;
				display: block;
			}

		.hover-line {
			pointer-events: none;
		}

		.node:hover {
			stroke:#333;
			/* don't do this because zooming messes with it .... stroke-width: 1px;*/
		}

		/*#samples-dropdown {*/
			/*position:absolute;*/
			/*right:10px;*/
		/*}*/

		.root-person-label {
			font-style:normal;
		}
		.root-person {
			font-weight:bold;
		}
		.tree-source {
			font-style:italic;
		}

		.link-full {
			stroke: #000;
			stroke-width: 1.5px;
		}
		.link-full.marriage {
			stroke-dasharray: 5,5;
			stroke-width: 0.5px;
		}

		.node-full {
			ignorecursor: move;
			fill: #ccc;
			stroke: #000;
			stroke-width: 1.5px;
		}


			#isLoadingDiv, #isLoadingAllPeopleDiv {
				font-size: 14px !important;
				z-index: 10000000;
				position: absolute;
				left: 40%;
				right:40%;
				top: 150px;
				min-width: 250px;
                pointer-events: none;

				border-radius:4px;
				padding:5px;
				font-size: 18px;
				text-shadow: 0px 1px 1px white;

				background-image: -moz-linear-gradient(bottom, #86a6d9 0%, #eeeeee 100%); /* layer fill content */
				background-image: -o-linear-gradient(bottom, #86a6d9 0%, #eeeeee 100%); /* layer fill content */
				background-image: -webkit-linear-gradient(bottom, #86a6d9 0%, #eeeeee 100%); /* layer fill content */
				background-image: linear-gradient(bottom, #86a6d9 0%, #eeeeee 100%); /* layer fill content */

				padding: 4px 10px;
				-moz-border-radius: 9px 9px 9px 9px;
				-webkit-border-radius: 9px 9px 9px 9px;
				border-radius: 9px 9px 9px 9px; /* border radius */
				-moz-background-clip: padding-box;
				-webkit-background-clip: padding-box;
				background-clip: padding-box; /* prevents bg color from leaking outside the border */


			}

            #isLoadingAllPeopleDiv {
                display: none;
            }

            #loadingHeaderInfo {
				text-align:center;
				font-weight:bold;
			}
			.loadingImage {
				float:right;
				text-align:center;
			}
			#loadingMessages {
				text-align: center;
				padding-left:25px;
			}

			.my-viz-wrapper {
				margin-right:20px;
			}

			.app-title {
				margin-left:20px;
			}

			.header {
				padding-bottom:8px;
				margin-bottom:2px;
			}

			.app-title {
				font-weight:bold;
				font-size:16px;
				font-style: italic;
			}

			.header h3 {
				padding-bottom: 0;
			}

		.the-main-title {
			margin-left:0px;
		}

		#mainWrapper {
			/*position:absolute;*/
			width: 100%;
			opacity:0;
		}

		#mainWrapperContents {
			height:100%;
		}

		.navbar {
			margin-bottom:0 !important;
			min-height: 20px !important;
		}
		.navbar-brand {
			/*padding-top:5px;*/
			padding-bottom:0px !important;
			height:auto;
		}
		.navbar-right {
			float:right !important;
		}
		.navbar-header {
			float:left !important;
		}
		.navbar-nav>li {
			float: left !important;
		}

		.float-left {
			float:left;
			margin-right:10px;
		}

		@media (max-width: 575px) {
			#lnkShowAbout {
				display:none;
			}
		}
		@media (max-width:500px) {
			.the-main-title {
				font-size:14px;
			}
			.my-viz-other {
				display:none;
			}
			#my-viz-link {
				font-size:12px;
			}
		}


			.mousePopup {
				position:absolute;
				opacity:0;
				color:#222;
				border-radius:5px;
				border:1px solid #444;
				padding:5px;
                padding-top:2px;
				whywasidoingthis-pointer-events:none; /* no ie for this */
				max-width:400px;
				background:#FFD600;
				z-index:1000000;

                /* this was interfering with dragging */
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;


				/*transition: opacity 0.4s;*/
			}

			.event-mouse-popup {
				position:absolute;
				opacity:0;
				color:#222;
				border-radius:5px;
				border:1px solid #444;
				padding:5px;
				padding-top:2px;
				width:300px;
				background: #88ff8d;
				z-index:1000000;

				transition: opacity 0.4s;

				/* this was interfering with dragging */
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				pointer-events: none;
			}

			.event-mouse-popup .theYear {
				text-align:left; /*center;*/
				font-size:90%;
				font-weight:bold;
			}

			.event {
				padding-left: 22px ;
				text-indent: -22px ;
			}
			.event-marriage {
				color:#FF4444;
				font-size:125%
				display:inline-block;
				ipadding-right:4px;
			}
			.event-death {
				display:inline-block;
				font-size:125%
				ipadding-right:4px;
				color:#333;
			}

			ul.displayEventsForYear  {
				list-style: none;
				padding: 0px;
			}

			ul.displayEventsForYear li:before {
				content: " \0000a0 -";
				font-size:105%;
				padding-right: 5px;
			}

			ul.displayEventsForYear li.death:before {
				content: " \0000a0 \271D";
				font-size:125%;
				padding-right: 5px;
			}
			ul.displayEventsForYear li.marriage:before {
				content: " \0000a0\2665";
				font-size:125%;
				color:#FF4444;
				padding-right: 5px;
			}
			ul.displayEventsForYear li.birth:before {
				/*content: "»";*/
				content:"\1F382";
				font-size:125%;
				padding-right: 5px;
			}

			.event-tick {
				fill:#44FF44;
				opacity:0.45;
				transition: opacity 0.4s;
			}
			.color_0 {
				fill:#FF0000;
			}
			.color_1 {
				fill:#00FF00;
			}
			.color_2 {
				fill:#0000FF;
			}
			.color_3 {
				fill:#000;
			}
			.event-tick:hover {
				opacity:1;
			}


			.personal-event {
				/* somehow highlight this */
			}

			.displayEventsForYear {
				font-size:85%;
			}
			.single-event {
				font-size:85%;
				max-width:350px;
			}

			.no-select {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                pointer-events: none;
            }

            .tick text {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            .popup-highlight {
                border:2px solid #444;
                margin-left:-1px;
                margin-top:-1px;
            }

			.mousePopup .theYear {
				text-align:left; /*center;*/
				font-size:90%;
				font-weight:bold;
			}

			.mousePopup .howMany {
				text-align:center;
				font-size:70%;
			}

			.mousePopup .info {
				text-align:center;
				font-size:70%;
				/*font-weight:bold;*/
			}


			.mousePopup  .infoExtra {
				text-align:center;
				font-size:70%;
			}

            .mousePopup .popup-close {
                float:right;
                font-weight:bold;
                font-size:120%;
                display:none;
                border-radius:12px;
            }
            .popup-close:hover {
                color:#ff3333;
            }


		.great-sup {
			vertical-align:super;
			font-size:100%;
		}


			.display-mouse-over-name {
				text-align: left;
				padding-left: 14px;
				text-indent: -14px;
			}

		table.table-display-mouseover-person-info {
			border-collapse: collapse !important;
			border-radius:5px !important;
			padding:2px;
			/*border:1px solid #ddd;*/
		}
		table.table-display-mouseover-person-info th {
			border-bottom:1px solid black !important;
			padding:2px !important;
			border-top:none !important;

		}

		table.table-display-mouseover-person-info th.no-border {
				border-bottom: none !important;
			}

		table.table-display-mouseover-person-info td.relationship-name {
			text-align:left;
			padding-left: 12px;
			text-indent: -10px;
		}
		.table-display-mouseover-person-info {
			/*background:#ddd;*/
		}

		.table {
			margin-bottom: 2px !important;
		}

		.table-display-mouseover-person-info sup {
				font-size: 100%;
		}

		.table-display-mouseover-person-info tr {
			border-radius:3px;
		}

		.pedigree-collapse-disclaimer {
			font-size:95%;
			font-style: italic;
			text-align: center;
		}

		.table-striped>tbody>tr:nth-child(even)>td {
			background:#ffed89;
		}

        .click-to-pin-this {
			font-weight:normal;
			font-style: italic;
		}

        .click-to-google-this {
            display:none;
            font-weight:normal;
            font-style: normal;
        }

		.pachinko-node {
			opacity: 0.8;
		}
		.pachinko-birth {
			/* see about some kind of highlighting */
			fill: #FFD600 !important;
			stroke: #FFD600 3px;
			transition: fill 0.5s, stroke 0.05s;
		}
		.pachinko-hidden {
			display:none;
		}

		.node {
		    stroke: #fff;
            stroke-width:0.1;
			transition: fill 1s;
            cursor:pointer;
		}

		.btn {
			margin-top:4px;
		}

				/*
        .pachinko-display-person {
            border-radius:3px;
            background:#fff;
            opacity:0.9;
            position:absolute;
            font-size:10px;
            margin-top:-2px;
            border:1px solid #ffd600;
            padding-left: 2px;
            padding-right: 2px;
            max-width:100px;
            white-space: nowrap;
            text-overflow:  ellipsis;
            overflow:hidden;
        }
        */


        .pachinko-display-person {
            border-radius:3px;

            background:rgba(255,255,255,.75);


            /*
            opacity:1;
            border:1px solid #ffd600;
            overflow:hidden;
            white-space: nowrap;
            */

            text-align:center;
            vertical-align:middle;

            position:absolute;
            font-size:12px;
            margin-top:-2px;

            padding-left: 2px;
            padding-right: 2px;

            max-width:100px;
            text-overflow:  ellipsis;

        }


        .pachinko-display-person-fullname {

            overflow: visible !important;
            max-width:800px !important;

        }

        .hover-name-person {
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .highlighted-name-div {
            iborder-width: 3px;
            font-weight:bold;
            overflow:auto;
            max-width:inherit;
        }

        .highlighted-gender-generation {
            stroke-width: 0.5px;
        }

        .is-showing-hover {
            stroke-width:5px;
        }
			/*table.table-display-mouseover-person-info tr.relationship-row td {*/
			/*border-bottom:1px solid #555;*/
		/*}*/

            .pinned-mouse-popup {
            opacity:0.96; /* I'm "cheating" for the moment and not figuring out where on the
                                side of the div to hit the line, using the center-ish instead  */
            }
        .connector-line {
            stroke-width: 1px;
            stroke: black;
            stroke-linecap: round;
        }

        #detailTableDiv, #allPeopleTableDiv {
            background:#fff;
            position:absolute;
            display:none;
            z-index:9000000;
            padding:2px;
            border:1px solid #aaa;
            border-radius:6px;
            opacity:0.96;
        }
        #detailTableDiv .detailTable, #allPeopleTableDiv .detailTable {
            border-collapse: collapse;
            font-size:10px;
        }
        .pin-person {
            font-size:11px;
        }
        .full-width {
            width: 100%;
        }

        .detailTable tfoot {
            display: table-header-group;
        }

            #detailTableDiv .detailTable td, #allPeopleTableDiv .detailTable td,  #ignoredetailTableDiv .detailTable th {
                padding:1px;
                vertical-align: text-top;
            }

            #detailTableDiv .detailTable td .btn, #allPeopleTableDiv .detailTable td .btn {
                margin:1px;
                padding: 1px 3px;
            }

            #detailTableDiv .detailTable th, #allPeopleTableDiv .detailTable th {
                padding-bottom:1px;
                vertical-align:top;
            }

            #detailTableDiv .popup-close, #allPeopleTableDiv .popup-close {
                float:right;
                font-weight:bold;
                font-size:120%;
                border-radius:6px;
            }
            #detailTableDiv .popup-close div:hover, #allPeopleTableDiv .popup-close div:hover  {
                color:#ff3333;
            }

            .dataTables_wrapper.no-footer .dataTables_scrollBody,
                table.dataTable thead td, table.dataTable thead th
            {
                border-bottom:none;
            }

            table.dataTable thead td, table.dataTable thead th {
                ipadding:10px 10px !important;
            }

        .dataTables_filter {
            display:none;
        }

        td.detail-person-name, th.detail-person-name  {
            iimin-width: 100px;
            width: 125px !important;
        }

        .btn.show-straight {
            display:none;
            font-size:inherit;
        }

        .btn.toggle-relationship-person {
            display:none;
            font-size:inherit;
            margin-bottom:4px !important;
        }
        .table-title {
            font-weight:bold;
            display:inline-block;
            padding-left:5px;
            font-size:80%;
        }

        #mainMousePopup {
            pointer-events:none; /*this is not used with click stuff in it... Mar 1 */
        }


        /*.opts-button {*/
            /*display:none;*/
        /*}*/

        #main-full_wrapper {
            display:none;
        }

        #parentInfo, #parentLifeInfo {
            display:block;
        }

        #IGNOREdoPachinko, #doLoopPachinko, #update {
            display:none;
        }

        .number-anc-or-desc {
            display:inline-block;
            margin-right:4px;
        }

        .make-person-root, .descendant-make-person-root {
            margin-right:4px !important;
            display: inline-block;
        }

        .popup-button {
            display:none;
        }


        #background-zoom-rect {
            fill:#fff;
        }

        #resetZoom, #btn-show-threed {
            display:none;
        }

        .birth-approximated {
            stroke: #ff0000;
            /*fill:#ff0000 !important;*/
        }
        .birth-approx-value {
            color: #ff0000;
        }
        .cloned-enlarged-node {
            pointer-events:none;
        }

        .tooltip.bottom .tooltip-arrow {
            border-bottom-color: #FFD600;
            opacity:0.9;
        }

        .tooltip.bottom {
            margin-top: 1px;
        }

        .tooltip-inner {
            background-color:#FFD600;
            opacity:0.98;
            color:#111;
            font-size:16px;
            margin-left:10px;
            border: 1px solid #444;
            border-top:none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

		/* by default, don't show it */
		#fileDivNeo, #fileDivMRCA {
			display:none;
		}

        #fileDivNeoLightbox {
            display:none;
        }

            #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
            #cboxWrapper {max-width:none;}
            #cboxOverlay{position:fixed; width:100%; height:100%;}
            #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
            #cboxContent{position:relative;}
            #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
            #cboxTitle{margin:0;}
            #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
            #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
            .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
            .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
            #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

			#lightbox-wrapper {
				opacity: 0.95;;
			}
			#lightbox-title {
				width:100%;
				text-align: center;
				background: #fff;
			}


        .candle-canvas {
            /* background-color:rgba(200,200,255,0.2); */
            position:absolute;
            pointer-events:none;
        }

        .dummyRectForLifespan.past{
            stroke:#222;
            stroke-opacity: 0.8;
            fill:none;
        }

        rect.lifespan.past {
            fill:#aaa;
            fill-opacity:0.3;
        }

        .lifespan.past{
            stroke:#aaa;
            stroke-opacity: 0.6;
            /*atroke-linejoin: round;*/
            stroke-linecap: square;
        }

        .lifespan.death {
            stroke:#000;
            /*stroke-width: 2px;*/
            stroke-opacity: 1;
            fill:none;
            stroke-linecap: square;
        }

        .lifespan-active {
            stroke-width:3; /* see if just enough to notice */
        }

        .dummyRectForLifespan.future {
            /*stroke:#111;*/
            /*stroke-opacity: 0.0; *//* no stroke */
            /*fill:#ffdddd;*/
            /*fill-opacity: 1;*/
        }

        .lifespan {
            transition: opacity 0.5s;
        }
        .lifespans-hide {
            opacity:0;
        }

        line.lifespan.death {
            pointer-events:none;
        }

        .lifespan-line {
            stroke:#000;
            stroke-width:0.5;
            stroke-linecap: square;
            pointer-events:none;
        }

      .life-expectancy .life-title {
        font-weight: bold;
        margin-right:5px;
      }
      .life-expectancy-table {
/*       	width:100%; */
      	iborder-collapse:collapse;
      }
      .life-expectancy-table td.title {
		text-align:right;
		vertical-align: top;
      }
      .life-expectancy-table td.life-info {
		text-align:left;
      }
      .life-probability-info {
        font-style: italic;
      }

      .no-weird-pad {
      	padding:0;
      	text-indent:0;
      }

	#threed-region {
		position:absolute;
		left:0;
		top:0;
/* 		background:rgba(20,20,20,0.1); */
		display:none;
		border:1px solid #ddddff;
		border-radius:1px;
/* 		background:rgba(0,0,255,0.25); */
/* 		border:1px solid #333;
		border-radius:5px; */
	}

	.css3d-div {
		position:absolute;
		left:0;
		top:0;
/* 		border: 1px solid #0000ff;
		border-radius:5px; */
		display:none;
	}

	.dg.ac {
		top:60px !important;
	}

	#css3d-div {
		background:#000000;
	}
	.css3d-name-div {
            border-radius:3px;
            background:rgba(255,255,255,1);
            opacity:1;
            position:absolute;
            font-size:14px;
            font-weight: bold;
            text-align:center;
/*  this is what messed up things lining up in 3d margin-top:-2px; */
            border:1px solid #ffd600;
            padding-left: 2px;
            padding-right: 2px;
/*   didn't seem to matter for lining up the plane with it  box-sizing: border-box; */
/*             max-width:100px;
            white-space: nowrap; */
/*             text-overflow:  ellipsis; */
            overflow-y:auto;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;

	}
	.css3d-name-div:hover {
	  box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
	  border: 1px solid rgba(33,33,33,0.75);
/* 	  border: 1px solid rgba(127,255,255,0.75); */
	}

	.test-3d-div {
		position: absolute;

/* 		border-radius:5px;
		border: 1px solid black; */
	}

	.popup-gedcom-note {
		margin:5px;
		font-weight:normal;
		font-style:normal;
		max-width:200px;
	}

	.opts-checkbox {
		margin-top:2px;
/*		border-radius:3px;
		border: 1px solid #999;*/
	}

	.labels-warning {
		display:block;
		font-size:75%;
		font-weight:normal;
		font-style:italic;
		margin-left:6px;
	}