/* normal: most regular body text */
.normal {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

p.footer {
  margin: 0px;
}

/* smfieldname: small text used in conjunction with .fieldname style text */
.smfieldname {
  font-size: 10px;
  color: white;
}

/* fieldname: regular text within column or row title sections */
.fieldname {
  color: white;
}

/* header: heading text */
.header {
  /*next line added in 6.1.0*/
  margin-top: 0px;
  padding: 0px;
  font-size: 22px;
  font-weight: bold;
  color: #333366;
  line-height: 22px;
}

.plainheader {
  margin-top: 0px;
  font-size: 22px;
  font-weight: bold;
}

/* whiteheader: heading text used on dark backgrounds (usually fieldnameback) */
.whiteheader {
  color: #ffffff;
  margin-top: 0px;
  font-size: 16px;
}

.whitetext {
  color: #ffffff;
}

/* subhead: subheading text */
.subhead {
  margin-top: 0px;
  font-size: 16px;
}

/* body: describes page background color and all non-table text not governed by any other style */

/* link: normal links, active: links in use */
a:link,
a:active,
div.icons a {
  color: #ffff00;
}

/* visited: previously visited links */
a:visited {
  color: #666666;
}

/* fieldnameback: background color for column and row title sections */
.fieldnameback,
.tablesaw-cell-label {
  background-color: #39332a;
  /*these 2 lines added in 5.0*/
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
}

/* databack: background color for data areas */
.databack {
  background-color: #e0e0f7;
  /*these 2 lines added in 5.0*/
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

/* added in TNG 10.1 for alternate row striping to databack */
.databackalt {
  background-color: #cacaf1;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

/* pedigree box: dates font */
/* font-size should be in points */
/* pedigree box information popups */
/* font-size should be in points */
.pboxpopup {
  margin-top: 0;
  margin-bottom: 0;
}

/*background for pedigree popups*/
.pboxpopupdiv {
  border-top: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  background-color: #f9f9f9;
  padding: 7px;
}

/*area between sections of pedigree popups*/
.popdivider {
  height: 3px;
  overflow: hidden;
}

/*inner div for pedigree popups, to allow sliding*/
.popinner {
  padding: 3px;
  width: 280px;
}

.popup,
.slidedown {
  -moz-box-shadow: 1px 1px 3px 0px #666;
  -webkit-box-shadow: 1px 1px 3px 0px #666;
  box-shadow: 1px 1px 3px 0px #666;
}

.popup,
.popinner,
.pboxpopupdiv,
.slidedown {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

/*boxes on pedigree chart*/
.pedbox {
  position: absolute;
  z-index: 5;
  overflow: hidden;
}

.pedborderleft {
  border-left: solid 1.2px black;
}

.pedboxtable {
  height: 100%;
  width: 100%;
  float: left;
}

.rounded10 {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.rounded4,
div.pad5 img {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

div.pad5 img,
.adminicon {
  -moz-box-shadow: 1px 1px 2px 0px #333;
  -webkit-box-shadow: 1px 1px 2px 0px #333;
  box-shadow: 1px 1px 2px 0px #333;
}

.trackerbox {
  border: 1px solid black;
  overflow: hidden;
}

ul {
  margin-left: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 1em;
}

ul.nopad {
  margin-left: 0px;
  padding-left: 0px;
}

/* Added in 4.0.0 */
/* For links on dark background */
.lightlink:link,
.lightlink:visited {
  color: #ffffff;
  text-decoration: none;
}

.lightlink:hover,
.lightlink:active {
  color: #ffcc33;
  text-decoration: none;
}

/* For white-only links on dark background */
.lightlink2:link,
.lightlink2:visited {
  color: #ffffff;
  text-decoration: none;
}

.lightlink2:hover,
.lightlink2:active {
  color: #ffffff;
  text-decoration: none;
}

.lightback {
  background-color: #ffffff;
  /*these 2 lines added in 6.0.0*/
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

/* sideback: background color for side and top frames */
.sideback {
  background-color: #333366;
  margin: 6px;
}

/* mainback: background for main admin area */
.mainback {
  margin: 4px;
}

.mainbox {
  border: 1px solid silver;
  background-color: #ffffff;
  padding: 1px;
}

/* mouseoverback: background color for admin menu items while active*/
.mouseoverback {
  background-color: #336399;
}

.adminsubhead,
.whitesubhead {
  font-size: 16px;
  margin-bottom: 2px;
}

.whitesubhead {
  color: #ffffff;
}

.adminsubmsg,
.admintotal {
  color: #dddddd;
}

.admintotal {
  float: right;
}

.adminsubmsg {
  font-size: 11px;
}

/* smaller: small body text */
.smaller {
  font-size: 17px;
}

.verysmall {
  font-size: 9px;
}

/*added in 5.0.0*/
/*for active secondary tab link*/
a.lightlink3:link,
a.lightlink3:visited,
a.lightlink3:hover,
a.lightlink3:active {
  color: #ffcc33;
  text-decoration: none;
}

/*for alignment on menu icons*/
.tngmenuicon {
  vertical-align: -4px;
  padding: 1px;
  margin: 0px 1px 0px 1px;
  border: 0px;
  width: 16px;
  height: 15px;
}

.tngsmallicon {
  height: 15px;
  background: url("../img/tng_small_icon_sprites.gif") no-repeat;
  padding: 0.1em 0px 0px 18px;
  margin-right: 10px;
  text-decoration: none;
  display: block;
  float: left;
  line-height: 1.2;
}

.tngsmallicon2 {
  height: 15px;
  position: relative;
  top: -1px;
  width: 16px;
  background: url("../img/tng_small_icon_sprites.gif") no-repeat;
  margin: 0px 2px 0px 1px;
  vertical-align: -4px;
  text-decoration: none;
  float: left;
}

.tngsmallicon3 {
  height: 15px;
  padding: 0.1em 0px 0px;
  text-decoration: none;
  display: block;
  float: left;
  line-height: 1.2;
}

#fam-smicon {
  background-position: 0px -196px;
}
#share-smicon {
  background-position: 0px -181px;
}
#print-smicon {
  background-position: 0px -121px;
}
#bmk-smicon {
  background-position: 0px -1px;
}
#home-smicon,
#place-smicon {
  background-position: 0px -61px;
}
#search-smicon {
  background-position: 0px -151px;
}
#log-smicon {
  background-position: 0px -91px;
}
#ind-smicon {
  background-position: 0px -76px;
}
#ped-smicon {
  background-position: 0px -106px;
}
#desc-smicon {
  background-position: 0px -16px;
}
#rel-smicon {
  background-position: 0px -136px;
}
#time-smicon {
  background-position: 0px -166px;
}
#ged-smicon {
  background-position: 0px -46px;
}
#sugg-smicon {
  background-position: 0px -31px;
}

#tngmenu {
  width: 100%;
  overflow: hidden;
}

/*for descendancy chart*/
#descendantchart {
  text-align: left;
}

#descendantchart li {
  list-style-type: none;
  white-space: nowrap;
}

#descendantchart ul {
  margin-left: 0px;
}

#descendantchart ul.first {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/*image previews*/
.media-prev {
  top: -180px;
  right: -426px;
  height: 400px;
  padding: 20px 7px 12px;
  position: absolute;
  text-align: center;
  width: 410px;
  z-index: 98;
  display: table-cell;
  line-height: 50px;
  vertical-align: middle;
  background: transparent url(../img/media-prevbg.png) no-repeat 0 0;
}

/* media query default for smart phones and tablets  */
@media screen and (max-width: 1200px) {
  .media-prev {
    height: 100%;
    top: 50px;
    background: none;
  }
}
@media screen and (max-width: 640px) {
  .media-prev {
    padding: 10px 4px 6px 0;
  }
}
@media screen and (min-width: 300px) and (max-width: 360px) {
  .media-prev {
    left: -20px;
    width: 180px;
  }
}
@media screen and (min-width: 361px) and (max-width: 480px) {
  .media-prev {
    left: 10px;
    width: 180px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 640px) {
  .media-prev {
    left: 50px;
    width: 230px;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1100px) {
  .media-prev {
    left: 50px;
  }
}

/* width and heigth definitions added in TNG 10.1.1+ to keep image within container */
.media-prev img {
  max-width: 100%; /* added in TNG 10.1.1+  */
  height: auto; /* added in TNG 10.1.1+  */
  border: 1px solid #b3b3b3;
  display: block;
  margin: 0 auto;
}

.media-img {
  height: 1px;
  margin: 0 0 0;
  position: relative;
}

* html .media-prev {
  background: url(../img/media-prevbg.gif) no-repeat 0 0;
  /*width:420px;*/
  /*height:420px;*/
}

/*moved here from showmedia.php in 7.0.0*/
#slideshow {
  position: relative;
}

#slideshow div.slide,
#slideshow div.loadingdiv {
  position: absolute;
  top: 0;
  left: 0;
}

.livingbox {
  width: 870px;
  height: 550px;
  border: 1px solid black;
  padding: 5px;
}

#loadingdiv,
#loadingdiv2 {
  position: absolute;
  background-color: white;
  padding: 20px;
  font-size: 21pt;
  border: solid 1px black;
  z-index: 5;
}

#loadingdiv2 {
  width: 200px;
}

#sscontrols {
  font-size: 8pt;
  padding-bottom: 8px;
  margin: 0px;
}

#slidemsg {
  padding: 0px 5px 0px 15px;
}

.slidepane {
  width: 860px;
  height: 550px;
  padding: 10px;
  overflow: hidden;
}

#slidearea img {
  max-width: 100%;
  max-height: 550px;
  height: auto;
}

.person-prev {
  top: -120px;
  height: 500px;
  position: absolute;
  width: 500px;
  padding: 0px 20px 20px 0px;
  z-index: 98;
  display: table-cell;
  font-size: 11px;
  overflow: hidden;
  background: transparent url(../img/person-prevbg.png) no-repeat 0 0;
  visibility: hidden;
}

.person-img {
  height: 1px;
  margin: 0 0 0;
  position: relative;
  float: right;
}

.person-inner {
  overflow: hidden;
  padding: 20px 0px 0px 20px;
  height: 480px;
}

* html .person-prev {
  background: url(../img/media-prevbg.gif) no-repeat 0 0;
  width: 520px;
  height: 520px;
}

.smallbreak {
  font-size: 3px;
  height: 3px;
}

.medbreak {
  height: 15px;
}

.tngshadow {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

.tngbotshadow {
  border-bottom: 1px solid #bbb;
}

.togglehead {
  text-decoration: none;
  color: #000000;
}

.togglehead img {
  position: relative;
  top: 2px;
}

.th-indent {
  margin-left: 5px;
}

.tsh-indent {
  margin-left: 18px;
}

.msearch-indent {
  margin-left: 15px;
}

.red {
  color: #ff0000;
}

.green {
  color: green;
}

input:hover,
textarea:hover,
select:hover {
  border-color: #ffcc33;
}

textarea {
  margin-left: 0px;
}

select {
  padding: 1px 4px;
}

.langmenu select option {
  padding: 0px 5px 1px 5px;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="password"],
button,
input[type="text"],
textarea,
select {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 3px 6px;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  cursor: pointer;
}

input[type="text"],
textarea {
  padding: 3px 6px;
}

select {
  padding: 2px 4px;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  color: white;
  border: 1px solid #ffcc00;
  background-color: #cccccc;
}

.btn,
.disablled,
input[type="button"].btn,
input[type="submit"].btn,
input[type="submit"].disabled,
input[type="reset"].btn {
  border: 1px solid gray;
  padding: 5px 12px;
}

input.veryshortfield {
  width: 100px;
}

input.shortfield {
  width: 140px;
}

input.medfield {
  width: 268px;
}

input.longfield {
  width: 350px;
}

input.verylongfield {
  width: 550px;
}

select.mediumfield {
  width: 170px;
}

input.minifield {
  width: 50px;
  border: none;
  background-color: #eee;
  font-size: 8pt;
  padding: 0px 1px 0px 1px;
}

input.minibutton {
  border: none;
  background-color: #eee;
  font-size: 9pt;
  padding: 1px;
}

.smallest {
  font-size: 8pt;
}

.dragarea {
  width: 50px;
  cursor: move;
  text-align: center;
  background-color: #ddd;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

.oldicon {
  margin: 0px 2px 0px 2px;
  border: 0px;
  vertical-align: middle;
}

.smallicon {
  margin: 0px 2px 0px 2px;
  border: 0px;
  width: 20px;
  height: 20px;
  display: block;
  float: left;
  background: url("../img/admin_icon_sprites.png") no-repeat;
  padding: 0px;
}

.si-plus {
  padding: 2px 0px 0px 25px;
  width: auto;
  margin: 0px 18px 0px 0px;
}

.admin-note-off-icon {
  background-position: 0px -1px;
}
.admin-note-on-icon {
  background-position: 0px -23px;
}
.admin-asso-off-icon {
  background-position: 0px -44px;
}
.admin-asso-on-icon {
  background-position: 0px -66px;
}
.admin-cite-off-icon {
  background-position: 0px -87px;
}
.admin-cite-on-icon {
  background-position: 0px -109px;
}
.admin-more-off-icon {
  background-position: 0px -130px;
}
.admin-more-on-icon {
  background-position: 0px -152px;
}
.admin-find-icon {
  background-position: 0px -173px;
}
.admin-temp-icon {
  background-position: 0px -194px;
}
.admin-edit-icon {
  background-position: 0px -215px;
}
.admin-delete-icon {
  background-position: 0px -236px;
}
.admin-test-icon {
  background-position: 0px -257px;
}
.admin-save-icon {
  background-position: 0px -278px;
}
.admin-clear-icon {
  background-position: 0px -299px;
}
.admin-bran-icon {
  background-position: 0px -320px;
}
.admin-rest-icon {
  background-position: 0px -341px;
}
.admin-opt-icon {
  background-position: 0px -362px;
}

.action-btns {
  width: 73px;
}

.action-btns2 {
  width: 52px;
}

.smallimg {
  border-color: #000000;
  margin-right: 6px;
}

.thumb,
.smallimg {
  -moz-box-shadow: 1px 1px 1px 0px #777;
  -webkit-box-shadow: 1px 1px 1px 0px #777;
  box-shadow: 1px 1px 1px 0px #777;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.dn2px {
  margin-top: 2px;
}

.closelink {
  padding-right: 25px;
  padding-bottom: 5px;
}

.nw {
  white-space: nowrap;
}

.coreicon,
.descindicator,
.nounderline {
  text-decoration: none;
}

/*small boxes for letters on the surnames page, also for pagination on other pages*/
.snlink {
  padding: 5px;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  background-color: #e0e0f7; /*same as "databack" background color */
  color: black;
  font-weight: bold;
  text-decoration: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  text-align: right;
}

p a.snlink {
  line-height: 2.5em;
}

/* columns on surnames page */
.aligntop {
  vertical-align: top;
}

.alignmiddle {
  vertical-align: middle;
}

.adminnav .snlink {
  background-color: white;
}

a.snlink:hover,
.snlinkact,
.adminnav .snlinkact {
  background-color: #333366; /*same as "fieldnameback" background color */
  color: #fff;
}

.LB_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  filter: alpha(opacity=70);
  opacity: 0.7;
  z-index: 101;
}

.LB_window {
  position: absolute;
  background: #e0e0f7; /*same as "databack" background color */
  border: 2px solid #333366; /*same as "fieldnameback" background color */
  color: #000000;
  display: none;
  z-index: 500;
  padding-top: 28px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
/*
* html .LB_window {position:absolute;}
*/

#LB_closeWindow {
  padding: 10px 25px 10px 0;
}

.LB_content,
#outer,
#mapevents {
  overflow: auto;
}

.LB_closeAjaxWindow {
  cursor: move;
  margin: 0px;
  padding: 1px 0px 2px 0px;
  position: absolute;
  top: 0;
  background-color: #333366; /*same as "fieldnameback" background color */
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}

#LB_close {
  cursor: pointer;
  padding: 1px 4px 2px 2px;
  float: right;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}

#LB_titletext {
  margin: 0px 0px 0px 5px;
}

/* The following classes were added when converting the Help screens to php file for the template look and feel */
/* subheadbold: subheading text in Help screens */
.subheadbold {
  margin-top: 0px;
  font-size: 18pt;
  font-weight: bold;
}

/* largeheader: heading text used on dark backgrounds (usually fieldnameback) in Help screens */
.largeheader {
  font-size: 32px;
  color: #ffffff;
}

/* optionhead: added to replace <strong> on option heading */
.optionhead {
  font-weight: bold;
}

/* helpbody: describes page background on Help screens  */
.helpbody {
  background-image: url(../img/background.gif);
}

.tblback {
  background-color: #ffffff;
}

.tngmsgarea .adminsubhead,
.yellow {
  color: #ffcc33;
}

td.highlightedchild {
  padding: 2px;
  background-color: #f9f9f9;
}

td.unhighlightedchild {
  padding: 2px;
}

/*arrow underneath pedigree boxes*/
.downarrow {
  position: absolute;
  z-index: 7;
  cursor: pointer;
  visibility: hidden;
  text-align: center;
}

.famdownarrow {
  position: relative;
  top: 1px;
  border: 0;
  height: 8px;
  width: 25px;
  left: -4px;
  margin-right: -4px;
}

.famuparrow {
  position: relative;
  top: 1px;
  border: 0;
  padding-left: 4px;
  padding-right: 4px;
}

/*right-facing arrows indicating continuing pedigree charts*/
.offpagearrow {
  position: absolute;
  visibility: hidden;
  z-index: 5;
}

/*added in 7.1.0*/
/*popup for import progress bar*/
.impcontainer {
  margin: 20px;
}

/*header in progress bar popup*/
.impheader {
  height: 40px;
}

/*import counter labels, ie People, Families, Sources*/
.implabel {
  font-weight: bold;
}
.imp {
  margin-right: 10px;
  float: left;
}

/*white box around progress bar*/
.progcontainer {
  background-color: white;
  padding: 5px;
  width: 500px;
}

/*empty progress bar*/
.emptybar {
  width: 500px;
  height: 20px;
  border: 1px solid black;
}

/*colored part of progress bar*/
.colorbar {
  width: 0px;
  height: 20px;
  background-color: green;
}

/* for images in pull down menus */
.tnggif {
  width: 20px;
  height: 20px;
  border: 0px;
  vertical-align: -6px;
  margin: 0px;
  padding: -3px;
}

/* for ArrowDown.gif in genlib.php */
#mnav .arrow {
  float: left;
  margin-top: 4px;
  margin-bottom: 4px;
  width: 25px;
  height: 8px;
  border: 0px;
}

.indexphoto {
  border: 0;
}

/* big save button */
.bigsave {
  background: #ffffff;
  font-size: 21px;
}

/* search page */
.databacksave {
  font-size: 21px;
}

.fieldnamebacksave {
  font-size: 21px;
}

.othersearch {
  margin: 2px 0 0 -15px;
}

form {
  margin: 0px;
}

/*table cell for pedigree image*/
.lefttop {
  vertical-align: top;
  text-align: left;
  width: 10px;
  padding-right: 0px;
}

.floverlr {
  position: absolute;
  z-index: 10;
  text-align: right;
  width: 30px;
}

.titlebox {
  border: 1px solid silver;
  background-color: #f9f9f9;
  padding: 10px;
  margin: 1px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.whiteback {
  border: 1px solid silver;
  background-color: #ffffff;
  table-layout: fixed;
  width: 100%;
  overflow: auto;
}

.bar {
  height: 16px;
  background-color: #333366;
}

.rightround {
  -moz-border-radius: 0px 4px 4px 0px;
  -webkit-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}

/*load the map link*/
.loadmap {
  font-size: 18px;
  width: 150px;
  height: 150px;
  margin: 20px auto;
  text-align: center;
  cursor: pointer;
}

/*Searching button on Relationship chart*/
#searching {
  float: right;
  padding: 10px;
  font-size: 14pt;
  border: 1px solid black;
  margin-right: 15%;
}

#loading {
  position: relative;
  width: 200px;
  visibility: visible;
  z-index: 9;
  margin: 0px;
  padding: 10px;
  font-size: 14pt;
  border: 1px solid black;
  background-color: white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

/* white buttons with rounded corners (FF only) */
.whitebuttonlink {
  background-color: white;
  padding: 3px 7px 3px 7px;
  text-decoration: none;
}

/* help pages */
p.menu {
  margin-top: 8px;
  margin-bottom: 0px;
  color: #ffffff;
}

.blocknote {
  margin: 0px 15px 0px 15px;
}

.ajaxwindow {
  margin: 10px;
  border: 0px;
}

.exp-cont {
  padding-right: 5px;
  vertical-align: middle;
}

.expandicon {
  cursor: pointer;
  float: left;
  width: 15px;
  height: 15px;
  margin: 0px 4px 0px 4px;
  border-width: 0px;
}

.spaceonleft {
  padding-left: 20px;
  padding-top: 5px;
}

.reportcol {
  width: 220px;
}

.bottombuffer {
  margin-bottom: 12px;
}

.topbuffer {
  margin-top: 12px;
}

.topbuffersmall {
  margin-top: 8px;
}

.indent {
  padding-left: 24px;
}

.hide-right {
  float: right;
  visibility: hidden;
}

.childblock {
  line-height: 1.6em;
}

.adminicon {
  float: left;
  width: 40px;
  height: 40px;
  margin: 1px 9px 0px 3px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.admincol {
  vertical-align: top;
  width: 50%;
  min-width: 440px;
}

div.tngmsgarea,
a.admincell {
  color: #ffffff;
  padding: 8px;
  margin: 2px 3px 4px 3px;
  display: block;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

/* commenting this out will allow the admin cells to grow if necessary
a.admincell {
	height:45px;
}
*/

.tngmsgarea {
  background-color: #999999;
  color: #ffffff;
  border-right: 1px solid #444;
  border-bottom: 1px solid #444;
}

.tngmsgarea a,
.tngmsgarea a:active,
.tngmsgarea a:link,
.tngmsgarea a:visited {
  color: #ffffff;
  text-decoration: none;
}

.tngmsgarea a:hover {
  color: #ffcc33;
}

.leftlink {
  padding: 4px 4px 4px 6px;
  display: block;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

.tngmsgarea,
a.admincell,
.leftlink,
.whiteheader,
.whitetext {
  text-shadow: 1px 1px 1px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}

a.admincell:hover,
a.leftlink:hover {
  background-color: #336399;
}

#adm-innermenu {
  margin: 0px 2px 2px 2px;
  clear: both;
  padding: 0.2em 0px 0.3em 0.7em;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
}

#pub-innermenu {
  margin: 0px 1px 0px 1px;
  clear: both;
  padding: 0.3em 0em 0.3em 0.7em;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
}

.miscmenu {
  margin: 3px 0px 20px 18px;
}

.fakelink {
  cursor: pointer;
}

.toggleicon {
  cursor: pointer;
  float: right;
  padding-top: 4px;
}

.boxborder {
  position: absolute;
  z-index: 3;
  overflow: hidden;
}

.citeblock {
  margin-left: 16px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 1.2em;
}

.fgcite {
  position: relative;
  left: -4px;
}

.ahnblock {
  margin: 0px;
  padding: 10px 0px 10px 30px;
}

.pdfblock {
  padding: 4px 0px;
}

.pdftoggle {
  text-decoration: none;
  color: black;
}

.langblock {
  padding-top: 2px;
  padding-right: 4px;
  clear: both;
}

#mapcontainer {
  border: solid 1px black;
  margin-bottom: 8px;
  margin-right: 10px;
  margin-top: 8px;
}

.mapballoon {
  width: 240px;
}

.pad5,
.mappad5 {
  padding: 5px;
}

.pad2 {
  padding: 2px;
}

/*most wanted*/
.mwperson {
  margin-top: 10px;
  color: gray;
}

.mwimage {
  float: left;
  margin-right: 15px;
  margin-bottom: 5px;
}

.mwblock {
  max-width: 800px;
}

.mediaalign,
.center {
  text-align: center;
}

.tfixed {
  table-layout: fixed;
  width: 100%;
  overflow: auto;
}

.labelcol {
  width: 130px;
}

.mapcol {
  width: 65%;
}

.chartimg {
  border: none;
  width: 11px;
  height: 10px;
}

.placeimg {
  border: none;
  width: 9px;
  height: 9px;
}

/*tabs, core stuff, common to both methods*/
ul#tngnav {
  padding: 0 0 0 0px;
  list-style: none;
  border: none;
}

#tngnav li {
  display: block;
  padding: 0;
  float: left;
}

/*inactive tab*/
#tngnav a {
  display: block;
  text-decoration: none;
  margin: 0;
  position: relative;
  font-size: 11px;
  min-height: 15px;
}

/*active tab*/
#tngnav a.here {
  position: relative;
  z-index: 10;
}

/*everything below this point is to keep older browsers happy*/
#tabs div {
  position: relative;
  float: left;
}

#tabs .divhere {
  z-index: 10;
}

/*inactive tab*/
#tabs a {
  font-size: 11px;
  text-decoration: none;
}

.notearea {
  max-height: 200px;
  overflow: auto;
}

div.menucontainer {
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 0px;
}

div.innercontainer {
  height: 22px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

div.icons {
  padding: 0.3em 0px 0.2em 3px;
  font-size: 11px;
  float: left;
  margin: 0px 0px 0px 2px;
  font-weight: bold;
}

div.icons-rt {
  font-size: 11px;
  float: right;
  margin: 1px 0 0 2px;
  padding: 2px 0 0 3px;
  font-weight: bold;
}

.in-bar {
  margin-top: 2px;
  padding-top: 2px;
}

.shift100left {
  margin-right: 100px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

ul.tngdd {
  list-style: none;
  /*margin:0 6px 0 0;*/
  padding: 0;
  margin-left: 0px;
  font-size: 11px;
  background-color: #ffffff;
}

ul.tngdd * {
  padding: 0;
  margin: 0;
}

ul.tngdd a {
  display: block;
  text-decoration: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

ul.tngdd li {
  position: relative;
  float: left;
  margin-right: 1px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

ul.tngdd ul {
  position: absolute;
  /* top:26px; */
  left: 0px;
  display: none;
  opacity: 0;
  list-style: none;
  -moz-box-shadow: 1px 1px 3px 0px #666;
  -webkit-box-shadow: 1px 1px 3px 0px #666;
  box-shadow: 1px 1px 3px 0px #666;
  background-color: #666;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

ul.tngdd ul.last {
  left: -55px;
}

ul.tngdd ul li {
  position: relative;
  border: 1px solid #aaa;
  border-top: none;
  width: 158px;
  margin: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

ul.tngdd ul li a {
  display: block;
  padding: 6px 4px 6px;
  background-color: #eeeeee;
  font-size: 12px;
  border-top: 1px solid #ffffff;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

ul.tngdd ul li:first-child,
ul.tngdd ul li:first-child a {
  -moz-border-radius: 6px 6px 0px 0px;
  -webkit-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
}

ul.tngdd ul li:last-child,
ul.tngdd ul li:last-child a {
  -moz-border-radius: 0px 0px 6px 6px;
  -webkit-border-radius: 0px 0px 6px 6px;
  border-radius: 0px 0px 6px 6px;
}

ul.tngdd ul li a:hover {
  background-color: #ffffff;
}

ul.tngdd ul ul {
  left: 158px;
  top: -1px;
}

ul.tngdd .menulink {
  padding: 3px 2px 3px 30px;
  font-weight: bold;
  height: 16px;
  background: #e0e0f7 url(../img/ArrowDown.gif) 2px 8px no-repeat;
  width: 70px;
  line-height: 1.5;
}

ul.tngdd .menulink,
ul.tngdd .langmenu {
  border-bottom: 1px solid #aaa; /*same as "databack" background color */
  border-right: 1px solid #aaa; /*same as "databack" background color */
}

ul.tngdd .menulink:hover,
ul.tngdd .menuhover {
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
  color: #ffffff;
  background: #333366 url(../img/arrowdown2.gif) 2px 8px no-repeat;
}

ul.tngdd .langmenu {
  padding: 1px;
  height: 20px;
}

ul.tngdd .stubmenu {
  border-left: 0;
  width: 8px;
  -moz-border-radius: 0px 6px 6px 0px;
  -webkit-border-radius: 0px 6px 6px 0px;
  border-radius: 0px 6px 6px 0px;
}

ul.tngdd .stubmenu-rt {
  border-right: 0;
  margin-right: 0;
  width: 8px;
  -moz-border-radius: 6px 0px 0px 6px;
  -webkit-border-radius: 6px 0px 0px 6px;
  border-radius: 6px 0px 0px 6px;
}

div.innercontainer,
ul.tngdd .langmenu,
ul.tngdd .stubmenu {
  border-bottom: 1px solid #aaa;
  background-color: #e0e0f7;
}

ul.tngdd .sub {
  background: #d1d1d1 url(../img/arrow.gif) 146px 7px no-repeat;
}

.headericon,
.menu-icon {
  width: 20px;
  height: 20px;
  background: url("../img/tng_icon_sprites.png") no-repeat;
  float: left;
  padding: 0px;
  border: 0px;
}

.menu-label {
  padding-top: 1px;
}

.headericon {
  margin: 1px 8px 0px 2px;
}

ul.tngdd ul li a .menu-icon {
  margin: -2px 5px 0px 0px;
}

#admin-icon {
  background-position: -19px 0px;
}
#albums-hdr-icon,
#albums-icon {
  background-position: -38px 0px;
}
#bookmarks-hdr-icon,
#bookmarks-icon {
  background-position: -57px 0px;
}
#contact-hdr-icon,
#contact-icon {
  background-position: -76px 0px;
}
#dates-hdr-icon,
#dates-icon {
  background-position: -95px 0px;
}
#documents-hdr-icon,
#documents-icon {
  background-position: -114px 0px;
}
#fsearch-hdr-icon,
#fsearch-icon {
  background-position: -133px 0px;
}
#help-icon {
  background-position: -152px 0px;
}
#histories-hdr-icon,
#histories-icon {
  background-position: -171px 0px;
}
#home-icon {
  background-position: -190px 0px;
}
#headstones-hdr-icon,
#headstones-icon,
#cemeteries-hdr-icon,
#cemeteries-icon {
  background-position: -209px 0px;
}
#unlock-icon,
#unlock-hdr-icon {
  background-position: -228px 0px;
}
#lock-icon {
  background-position: -247px 0px;
}
#media-hdr-icon,
#media-icon {
  background-position: -266px 0px;
}
#surnames-hdr-icon,
#surnames-icon {
  background-position: -285px 0px;
}
#whatsnew-hdr-icon,
#whatsnew-icon {
  background-position: -304px 0px;
}
#notes-hdr-icon,
#notes-icon {
  background-position: -323px 0px;
}
#photos-hdr-icon,
#photos-icon {
  background-position: -342px 0px;
}
#places-hdr-icon,
#places-icon {
  background-position: -361px 0px;
}
#recordings-hdr-icon,
#recordings-icon {
  background-position: -380px 0px;
}
#repos-hdr-icon,
#repos-icon {
  background-position: -399px 0px;
}
#reports-hdr-icon,
#reports-icon {
  background-position: -418px 0px;
}
#searchsite-hdr-icon,
#searchsite-icon {
  background-position: -437px 0px;
}
#sources-hdr-icon,
#sources-icon {
  background-position: -456px 0px;
}
#stats-hdr-icon,
#stats-icon {
  background-position: -475px 0px;
}
#videos-hdr-icon,
#videos-icon {
  background-position: -494px 0px;
}
#mw-hdr-icon,
#mw-icon {
  background-position: -513px 0px;
}
#trees-hdr-icon,
#trees-icon {
  background-position: -532px 0px;
}
#calendar-hdr-icon,
#calendar-icon {
  background-position: -551px 0px;
}
#branches-hdr-icon,
#branches-icon {
  background-position: -570px 0px;
}
#dna-hdr-icon,
#dna-icon {
  background-position: -589px 0px;
}
#search-hdr-icon,
#search-icon {
  background-position: -608px 0px;
}

.spinner {
  vertical-align: -3px;
}

#shareicons {
  float: left;
  margin-right: 15px;
}

#shareicons ul {
  list-style: none;
}

#shareicons ul li {
  float: left;
}

.nicEdit-main {
  background-color: #fff !important;
}

.firstchars {
  line-height: 220%;
}

.temppreview {
  border: 1px solid black;
  -moz-box-shadow: 1px 1px 3px 0px #666;
  -webkit-box-shadow: 1px 1px 3px 0px #666;
  box-shadow: 1px 1px 3px 0px #666;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#imgdiv img {
  max-width: 100%;
  height: auto;
}

#uploadarea {
  border: 1px solid black;
  background-color: white;
  min-height: 150px;
  width: 95%;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 1px 1px 3px 0px #666;
  -webkit-box-shadow: 1px 1px 3px 0px #666;
  box-shadow: 1px 1px 3px 0px #666;
  padding: 10px;
  margin-right: 20px;
}

.uploadfield {
  width: 100%;
  min-width: 300px;
}

.table-full {
  border-spacing: 0px;
  padding: 0px;
  border: 0px;
  width: 100%;
}

.table-top30 {
  border-spacing: 0px;
  padding: 0px;
}

.table-histogram {
  border-spacing: 5px 4px;
  padding: 0px;
  margin-left: -3px;
}

.bar-holder {
  width: 400px;
}

.table-gutter {
  width: 10px;
}

.table-dblgutter {
  width: 20px;
}

.sntable {
  width: 100%;
  max-width: 1024px;
}

.sncol {
  vertical-align: top;
  width: 20%;
}

.plcol {
  vertical-align: top;
  width: 33%;
}

.clearleft {
  clear: left;
}

.slidedown {
  padding: 10px;
  border: 1px solid #777;
  position: absolute;
  margin-top: -10px;
  z-index: 20;
  background: #e0e0f7; /*same as "databack" background color */
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.login-options {
  margin: 8px 0px 8px 0px;
}

.loginbtn {
  width: 97%;
}

.loginprompt {
  margin-top: 6px;
  margin-bottom: 2px;
}

.loginfield {
  width: 93%;
}

.loginfont {
  font-size: 16pt;
}

.forgotfield {
  width: 220px;
}

.regevents {
  list-style-position: inside;
}

.mmaintitle {
  margin: 0px;
  opacity: 0.6;
}

.mtitlehr {
  border: 0;
  height: 1px;
  color: #999;
  background-color: #999;
}

@media (max-width: 650px) {
  .altab {
    display: inline-block;
  }
  .secondsearch {
    display: none;
  }
}

/* styles for home page surname cloud post */
.surnames-cloud,
.surnames-cloud a {
  font-family: Verdana, Tahoma, Arial;
  padding: 2px 2px 2px 2px;
  letter-spacing: 0em;
  word-spacing: 0em;
  text-decoration: none;
  font-weight: normal;
  text-align: left;
  font-size: 14px;
}

a.size1 {
  font-size: 200%;
}
a.size2 {
  font-size: 190%;
}
a.size3 {
  font-size: 180%;
}
a.size4 {
  font-size: 170%;
}
a.size5 {
  font-size: 160%;
}
a.size6 {
  font-size: 150%;
}
a.size7 {
  font-size: 140%;
}
a.size8 {
  font-size: 130%;
}
a.size9 {
  font-size: 120%;
}
a.size0 {
  font-size: 100%;
}

/* color for each surname */
a.size0:link {
  color: #cc9900;
}
a.size1:link {
  color: #b22222;
}
a.size4:link {
  color: #228b22;
}
a.size6:link {
  color: #ffd700;
}
a.size9:link {
  color: #ff1493;
}
a.size7:link {
  color: #40e0d0;
}
a.size8:link {
  color: #40e0d0;
}
a.size2:link {
  color: #40e0d0;
}
a.size3:link {
  color: #f4a460;
}
a.size5:link {
  color: #ffff00;
}

.surnames-cloud a {
  -webkit-text-size-adjust: none;
}

.msgbold {
  font-weight: bold;
}

.msgerror {
  font-weight: bold;
  color: #990000;
}

.msgapproved {
  font-weight: bold;
  color: #009900;
}

.bselected {
  border: 1px #ff0000 dashed;
}

.bunselected {
  border: 1px #ccc dashed;
}

.mlbox {
  position: absolute;
  z-index: 1;
}

.scroller {
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: 0 auto;
  position: relative;
  height: 140px;
}

.prevnum {
  vertical-align: top;
  font-size: 36pt;
}

.prevdiv {
  display: inline;
  cursor: pointer;
  vertical-align: top;
}

table.uploadmore td {
  padding: 2px;
  border: none;
}

#imgdiv img {
  max-width: 100%;
}

.annfield {
  float: left;
  padding-right: 5px;
}

/*
.pmatch {
	height: 20px;
	display: inline-block;
	margin: 1px;
	background-position: 6px 1px;
	background-image: url('../img/matches-sm-sprite.png');
	background-repeat: no-repeat;
	background-color: #e0e0e0;
	font-size: 12px;
	padding: 0px 9px 1px 23px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	vertical-align: top;
	font-weight: 100;
}

.pmatch:hover {
	margin: 0px;
	background-position: 6px -18px;
	border: 1px solid #aaa;
	color: #666;
}

a.pmatch, a.pmatch:link {
	color: #aaa;
}

a.pmatch:hover {
	color: #666;
}
*/

a.famlink,
a.famlink:link {
  color: #aaa;
}

a.famlink:hover {
  color: #000;
}

#myCanvas {
  cursor: pointer;
}

.fambackground {
  background-color: #aac;
}

.cgray {
  background-color: #cccccc;
}

/* Added for Responsive Tables mod to correct the header centering issues */
thead th {
  text-align: left; /* added to correct the header centering issues in some templates */
}

.align-right {
  text-align: right;
}

.thumbnails {
  vertical-align: text-top;
}

.gallery {
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: text-top;
}

/* Adjust Event Date column on Individual Person page based on thumbnail width */
.eventdatecol {
  width: 100px;
}

.nbrcol {
  width: 10px;
}

.idcol {
  width: 50px;
}

.cemeteryimg {
  max-width: 100%;
}

.cemmap {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

#fanWrapper {
  overflow-x: scroll;
}

/*bootstrap*/
.btnn,
.disablled {
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  /*border: 1px solid transparent;*/
  border-radius: 4px;
  border: 1px solid gray;
  background-color: #ddd;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.disabled,
input[type="submit"].disabled {
  cursor: not-allowed;
}

/*  reduce thumbnails and eventdatecol for tablets */
@media only screen and (min-width: 480px) and (max-width: 1136px) {
  .thumbnails,
  .eventdatecol,
  .gallery {
    width: 80px;
  }
}

/*  reduce thumbnails and eventdatecol for smart phones */
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .thumbnails,
  .gallery {
    width: 60px;
  }
  .eventdatecol {
    width: 80px;
  }
}

/*  portrait orientation on newer smart phones  */
@media screen and (max-width: 360px) and (orientation: portrait) {
  .cemmap {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
  }
}

/*  portrait orientation on smaller tablets  */
@media screen and (max-width: 480px) and (orientation: portrait) {
  .cemmap {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
  }
}

/*  landscape orientation on smaller smart phones  */
@media screen and (max-width: 640px) and (orientation: landscape) {
  .cemmap {
    width: 95%;
    height: 300px;
    margin-bottom: 20px;
  }
}

/*  landscape orientation on tablets  */
@media screen and (max-width: 1136px) and (orientation: landscape) {
  .cemmap {
    width: 95%;
    height: 400px;
    margin-bottom: 20px;
  }
}

/* Classes for TNG Mods to be added below */