/*--------------------------------------------------------------
## Responsive Resets
-------------------------------------------------------------- */
@-webkit-viewport {width: device-width;}
@-moz-viewport {width: device-width;}
@-ms-viewport {width: device-width;}
@-o-viewport {width: device-width;}
@viewport {width: device-width;}
html { overflow-y: auto; }
img, audio, video, canvas { max-width: 100%; }

/*--------------------------------------------------------------
##  breakpoints
  line  25 -- mobile fist base style
  line 222 -- 464px to set max side panels width
  line 243 -- 648px to show one side panel
  line 295 -- 900px to show both side panels
  line 398 -- 1026px as tab bar is 930px wide; set max width
  line 616 -- print to remove menu
--------------------------------------------------------------*/

/*--------------------------------------------------------------
##  Mobile Devices ( < 599px )
--------------------------------------------------------------*/
  /* ------------------------------- */
  /* Mobile First Base Style         */
  /* ------------------------------- */
  /* Elements                        */
  /* ------------------------------- */
  html {
    font-size: 9pt; /* same as 12px */
  }
  body {
    /*margin: 9px 40px;*/
    /*margin: 0 3em;*/
    font: 100%/1.5 sans-serif;
    background-color: #ffffff;
  }
  section {
    margin-bottom: 2em;
  }

  header,
  footer {
    font-size: 0.9em;
    border-top: initial;
    padding: 0 20px;
  }

  /* ------------------------------- */
  /* Layout                          */
  /* ------------------------------- */
  .container {
    width: 98%;
    margin: 0px auto;
  }
  .grid-1left,
  .grid-4middle,
  .grid-1right,
  .grid-full {
    float: left;
    width:96.969696969697%;
    margin:0 1.515151515152% 1em;
  }

  /* ------------------------------- */
  /* Menu Icon                       */
  /* ------------------------------- */
  #mobile-menu-icon {
    justify-content: center;
    transition: .3s;
    cursor: pointer;
    user-select: none;
    z-index: 10;
  }
  .mobile-navigation #mobile-menu-icon {
    display: inline-flex;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    background-color: rgba(0,0,0,.2);
    /*-webkit-backface-visibility: hidden;*/
  }
  .lines,
  .lines::after,
  .lines::before {
    display: inline-block;
    position: relative;
    top: 21px;
    width: 22px;
    height: 2px;
  }
  .lines::after,
  .lines::before {
    position: absolute;
    left: 0;
    content: '';
    -webkit-transform-origin: 1.5px center;
    transform-origin: 1.5px center;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  .lines::after {
    top: 7px;
  }
  .lines::before {
    top: -7px;
  }
  #mobile-menu-icon .lines,
  #mobile-menu-icon .lines::after,
  #mobile-menu-icon .lines::before,
  #mobile-menu-icon .lines:not(.active) {
    background-color: #ffffff;
  }

  /* ------------------------------- */
  /* Menu                            */
  /* ------------------------------- */
  #tabcontainer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    /*background-color: #ffffff;*/
    clear:both;
    z-index: 5;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
  }
  #tabcontainer.active {
    height: 100%;
    background-color: rgba(204, 204, 204, 0.6);
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
  ol#tabs {
    max-width: 225px;
    margin: 0;
    padding: 2em;
    list-style-type: none;
    text-align: center; /* center the li in the ol */
    background-color: #e1e1e1;
  }
  ol#tabs li {
    position: relative;
    display: block;
    margin-bottom: 3px;
    padding: 0 1.75em;
    border: 1px solid #b4a89a;
    border-radius: 0.5em;
    font-size: 10pt;
    font-weight: bold;
    background-color: #cccccc; /*background-color:#e5e3e1;*/
  }
  ol#tabs li a {
    width: 100%;
    display: inline-flex;
    line-height: 2em;
    color: #655A46;
  }
  ol#tabs li.current {
    background-color: #655A46;
  }
  ol#tabs li.current a { color:#f5f3f1; }

  /* ------------------------------- */
  /* Side Panels  (css_slideout)     */
  /* ------------------------------- */
  #left-panel,
  #right-panel {
    position: fixed;
    bottom: 0;
    width: calc(100% - 7em);
    height: 100%;
    background-color: #cccccc;
    z-index: 15;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
  }
  #left-panel {
    left: calc(-100% + 7em);
  }
  #right-panel {
    right: calc(-100% + 7em);
  }
  #left-panel h4,
  #right-panel h4 {
    position: absolute;
    bottom: 0;
    height: 3em;
    width: 100px;
    text-align: center;
    line-height: 3em;
    background-color: rgba(0,0,0,.2);
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
  }
  #left-panel h4 {
    left: 100%;
    border-radius: 0 0 1em 1em;
  }
  #right-panel h4 {
    right: calc(100% - 100px + 3em);
    border-radius: 1em 1em 0 0;
  }
  #left-panel .content,
  #right-panel .content {
    height: 100%;
    margin: 0 2em;
    overflow-y: auto;
  }
  #left-panel.active {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
  #right-panel.active {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
  #left-panel.active h4,
  #right-panel.active h4 {
    background-color: #cccccc;
  }

  /* ------------------------------- */
  /* Side Panel Content              */
  /* ------------------------------- */
  .note {
    font-family: arial;
    color: green;
    font-style: italic;
  }
  .thumb { position: relative; }
  .thumb img {
    height: auto;
    margin: 0 1em 2em 0;
    border: 1px solid black;
  }
  a.thumb::after {                /* auto caption */
    content: attr(title);
    position: absolute;
    left: 1px;                    /* left border */
    bottom: calc(0em + 4px);      /* below image:   top/bottom padding + top border */
    bottom: calc(2em + 4px);      /* overlay image: bottom margin + top/bottom padding */
    /*display: block;*/
    width: 150px;                 /* calc(100% - 1em - 2px); */
    /*border: 1px solid rgba(204, 204, 204, 0.7);*/
    /*border-top: none;*/
    border-top: 1px dashed black;
    padding: 2px 0;
    color: #000000;
    background-color: #cccccc;
    background-color: rgba(204, 204, 204, 0.7);
    text-align: center;
  }

/*--------------------------------------------------------------
##  Tablet portrait ( 600px - 900px )
--------------------------------------------------------------*/
/* breakpoint of 464px as side panels have reached max desired width */
@media only screen and (min-width: 480px) {
  /* body { background-color: #cccccc; } */
  /* ------------------------------- */
  /* Side Panels                     */
  /* ------------------------------- */
  #left-panel,
  #right-panel {
    width: 380px;
  }
  #left-panel {
    left: -380px;
  }
  #right-panel {
    right: -380px;
  }
}

/*------------------------------------------------------------*/
/* breakpoint of 648px to show one side panel */
@media only screen and (min-width: 648px) {
  /* ------------------------------- */
  /* Layout                          */
  /* ------------------------------- */
  .grid-4middle { width: calc(100% - (1.515151515152% * 4) - 152px); }
  .grid-1right  { width: 152px; float: right; }
  .grid-full    { width: 96.969696969697%; }

  /* ------------------------------- */
  /* Side Panels                     */
  /* ------------------------------- */
  #right-panel {
    position: initial;
    bottom: initial;
    left: initial;
    width: initial;
    height: initial;
    background-color: initial;
    z-index: 5;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
  }
  #right-panel h4 {
    position: unset;
    right: unset;
    bottom: unset;
    height: unset;
    width: 100%;
    margin-top: 0;
    line-height: unset;
    background-color: unset;
    border-bottom: 1px solid black;
    border-radius: unset;
    transform: unset;
    transform-origin: unset;
  }
  #right-panel.active {
    transform: unset;
    -webkit-transform: unset;
  }
  #right-panel.active h4 {
    background-color: unset;
  }
  #right-panel .content {
    margin: 0;
  }

  /* ------------------------------- */
  /* Side Panel Content              */
  /* ------------------------------- */
  .thumb img {
    margin: 0 0 2em 0;
  }
}

/*--------------------------------------------------------------
##  Tablet landscape ( 900px - 1200px )
--------------------------------------------------------------*/
/* show both side panels                                      */
@media only screen and (min-width: 900px) {
  /* body { background-color: #aaaaaa; } */

  /* ------------------------------- */
  /* Layout                          */
  /* ------------------------------- */
  .grid-1left   { width: 13.636363636364%; }
  .grid-1left   { width: 152px; float: left; }
  .grid-4middle { width: 63.636363636364%; }
  .grid-4middle { width: calc(100% - (1.515151515152% * 6) - (152px * 2)); }
  .grid-1right  { width: 13.636363636364%; }
  .grid-1right  { width: 152px; float: right; }
  .grid-full    { width: 96.969696969697%; }

  /* ------------------------------- */
  /* Side Panels                     */
  /* ------------------------------- */
  #left-panel,
  #right-panel {
    position: initial;
    bottom: initial;
    left: initial;
    width: initial;
    height: initial;
    background-color: initial;
    z-index: 5;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
  }
  #left-panel h4,
  #right-panel h4 {
    position: unset;
    right: unset;
    bottom: unset;
    height: unset;
    width: 100%;
    margin-top: 0;
    line-height: unset;
    background-color: unset;
    border-bottom: 1px solid black;
    border-radius: unset;
    transform: unset;
    transform-origin: unset;
  }
  #left-panel.active,
  #right-panel.active {
    transform: unset;
    -webkit-transform: unset;
  }
  #left-panel.active h4,
  #right-panel.active h4 {
    background-color: unset;
  }
  #left-panel .content,
  #right-panel .content {
    margin: 0;
  }

  .note {
    font-size: 8pt;
  }
  a.highslide {
    margin: 5px 0;
  }
}

/*--------------------------------------------------------------
##  Desktop ( 1200px - 1800px )
--------------------------------------------------------------*/
/* using breakpoint of 1026px as tab bar is 930px wide        */
@media only screen and (min-width: 1026px) {
  body {
    max-width: calc(1200px - 6em);
    margin: 0 auto;
    /* background-color: #888888; */
  }

  /* ------------------------------- */
  /* Menu Icon                       */
  /* ------------------------------- */
  .mobile-navigation #mobile-menu-icon {
    display: none;
  }

  /* ------------------------------- */
  /* Menu                            */
  /* ------------------------------- */
  #tabcontainer {
    position: fixed;
    left: calc((100% - 930px) / 2);
    width: initial;
    /*position: initial;
    left: initial;
    width: 100%;*/
    /*margin-top: -9px;*/
    margin-bottom: 20px;
    /*border-top:1px solid #b4a89a;*/
  }
  ol#tabs {
    max-width: initial;
    margin-top: -1px;
    padding: initial;
    background-color: #ffffff;
  }
  ol#tabs li {
    position: relative;
    display: inline-block;
    height: 1.25em;
    margin-bottom:3px;
    padding: 0 0.75em;
    border: 1px solid #b4a89a;
    border-radius: 0 0 8px 8px;
    text-align: center;
    font-size: 10pt;
    font-weight: bold;
    background-color: #e1e1e1; /*background-color:#e5e3e1;*/
  }
  ol#tabs li a {
    line-height: initial;
    color: #655A46;
  }
  ol#tabs li.current   { border-top:1px solid #f5f3f1; background-color:#655A46; }
  ol#tabs li.current a { color:#f5f3f1; }

}

/*--------------------------------------------------------------
##  Static Layout
-------------------------------------------------------------- */
p, td, dl,
ol, ul, li  { font-size: 9pt; font-family: arial, verdana, sans-serif; color: black; }
pre         { margin-top: 0; }
i           { font-style: italic; }
sup         { position: relative; top: -0.3em; font-size: 0.83em; vertical-align: top; }
li ul       { margin-bottom: 12px; }
ul.tight    { position: relative; top: -12px; list-style-type: square; }
dt          { font-weight: bold; column-span: all; }
dd          { margin-bottom: 1em; }
dd ul       { padding-left: 0; }

h1          {text-align:center; font-size:24pt; font-family:arial, verdana, sans-serif; color:#d42020;}
h2          {margin-top:2em; margin-left:20px; font-size:16pt; font-family:arial, verdana, sans-serif; color:#d42020; font-weight:normal;}
h3          {font-size:12pt; font-family:arial, verdana, sans-serif; color:#d42020;}
h4          {margin-bottom:0; font-size:9pt; font-family:arial, verdana, sans-serif; color:#d42020;}
hr          { height:2px; border:0; color:#888; background-color:#888; clear: both; }
img         { border:0; }
img.expand  {margin:0 5px 3px; }
img.expand-sml  {margin:0 5px 1px; }
div.section {margin-left:40px;}

a           {font-family:arial, verdana, sans-serif; color:black;}
a:link      {color:#336699; text-decoration:none;}
a:hover     {color:#0066cc; text-decoration:underline;}
a:active    {color:#336633; text-decoration:none;}
a:visited   {color:#77a2c7; text-decoration:none;}

a.expandable:hover { text-decoration:none; }

  a.tooltip       { border-bottom: dotted;
                    color: red; text-decoration: none; }
  a.tooltip:hover { color: red; text-decoration: none; }
  #tooltip {
    display: none;
    position: absolute;
    max-width: 240px;
    border: 1px solid #cccccc;
    padding: 5px;
    background: #333;
    color: #ffffff;
  }

.pagetitle  { margin-top: 2em; }
.placehold  { display: inline-block; width: 16px; height: 11px;
              margin-left: 6px; background: inherit; }
.hasPhotos  { display: inline-block; width: 16px; height: 11px;
              margin-left: 6px; background: url("../images/camera.gif") 0 0 no-repeat; }
.hasScans   { float: right; display: inline-block; width: 8px; height: 10px;
              margin-left: 6px; background: url("../images/icon_document.png") 0 0 no-repeat; }
.stone      { padding-right: 13px;
              background: url("../images/icon_headstone.gif") center right no-repeat;
              background-size: 10px 12px; }
.isMobile   { display: inline-block; width: 8px; height: 13px;
              transform-origin: 0 100%; transform: scale(0.75);
              margin-right: 4px; filter: invert(100%);
              background: url("../images/icon_phone-pink.png") 0 0 / auto 13px no-repeat; }
.isMobileB  { float: right; display: inline-block; width: 8px; height: 13px;
              transform-origin: 0 100%; transform: scale(0.75);
              margin-left: 6px; filter: invert(100%);
              background: url("../images/icon_mobile-black.png") center right / auto 14px no-repeat;
              background: url("../images/icon_phone-pink.png") 0 0 / auto 13px no-repeat; }
.blkquote   { margin: 16px 40px; }
.center     { text-align: center; }
.small      { font-size: 8pt; font-style: italic; }
.indent     { margin-left: 40px; line-height: 11px; }
.indentred  { margin-left: 40px; line-height: 11px; color: #ff0000; }
.lastmod    { margin-top: -21px; text-align: center; font-size: 7pt; }
.olddropcap { float: left; margin-right: 3px; font-size: 60px; font-size: 400%; line-height: 48px; font-family: times; }
.dropcap    { float: left; margin-right: 3px; padding-top: 2px; font-size: 5em; line-height: 0.7em; font-family: times; }
.name       { font-weight: bold; color: #d42020; }
.vdash      { float: left; width: 8em;
              margin: 0.5em 1em 0 3em; border-right: 2px dashed black; padding-right: 1em; }

.census        { height: 17px; overflow: hidden; }
.census img    { vertical-align: middle; }
/*tbody tr.census:nth-child(odd) { background:#dddddd; }*/
tr.census td:nth-child(n+3)    { text-align: center; }
tbody tr.census:hover          { background: #cccccc; }


.ad_banner     { float:right; width:468px; height:60px; margin-top:1em; /*background-color:grey; opacity:0.7;*/ }
.ad_skyscraper { width:120px; height:600px; margin-top:1em; margin-right:10px; margin-left:10px; /*background-color:grey; opacity:0.7;*/ }


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail       {position:relative; z-index:0;}
.thumbnail:hover {background-color:transparent; z-index:50;}
/*CSS for enlarged image*/
.thumbnail span  {position:absolute;
            background-color:#FFFFE0; /*lightyellow*/
            padding:5px;
            left:-1200px;
            border:1px dashed gray;
            display:inline; /*visibility:hidden;*/
            color:black;
            text-decoration:none;}
/*CSS for enlarged image*/
.thumbnail span img {border-width:0; padding:2px; width:480px; max-width: initial;}
/*CSS for enlarged image on hover*/
/* left is position where enlarged image should offset horizontally (was top:0; left:60px;)*/
.thumbnail:hover span {visibility:visible; top:15px; left:24px;}


/*
** keep the whitespace in front of the ^=, hides rule from konqueror
** this is css3, the validator doesn't like it when validating as css2
** ^= specifies a match that begin with the string
** $= specifies a match that end with the string
** *= specifies a match that contains a string
*/
#bodyContent a[href ^="http://"],
#bodyContent a[href ^="gopher://"],
.external {
  background: url("../images/icon_red-external.png") center right no-repeat;
  padding-right: 13px;
}
.internal {
  background: url("../images/icon_external.png") center right no-repeat;
  padding-right: 13px;
}
#bodyContent a[href ^="https://"] {
  /* background: url("../images/icon_lock.gif") center right no-repeat;
  padding-right: 16px; */
  background: url("../images/icon_red-external.png") center right no-repeat;
  padding-right: 13px;
}
#bodyContent a[href ^="mailto:"] {
  background: url("../images/icon_mail.gif") center right no-repeat;
  padding-right: 18px;
}
#bodyContent a[href ^="news://"] {
  background: url("../images/icon_news.png") center right no-repeat;
  padding-right: 18px;
}
#bodyContent a[href ^="ftp://"],
.file {
  background: url("../images/icon_file.gif") center right no-repeat;
  padding-right: 18px;
}
#bodyContent a[href ^="irc://"] {
  background: url("../images/icon_discussionitem.gif") center right no-repeat;
  padding-right: 18px;
}
#bodyContent a[href $=".mp3"], #bodyContent a[href $=".MP3"],
#bodyContent a[href $=".wav"], #bodyContent a[href $=".WAV"],
#bodyContent a[href $=".wma"], #bodyContent a[href $=".WMA"],
.audio {
  background: url("../images/icon_audio.png") center right no-repeat;
  padding-right: 13px;
}
#bodyContent a[href $=".avi"], #bodyContent a[href $=".AVI"],
#bodyContent a[href $=".mpg"], #bodyContent a[href $=".MPG"],
#bodyContent a[href $=".mpeg"], #bodyContent a[href $=".MPEG"],
.video {
  background: url("../images/icon_video.png") center right no-repeat;
  padding-right: 13px;
}
#bodyContent a[href $=".pdf"], #bodyContent a[href $=".PDF"],
#bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
#bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
.document {
  background: url("../images/icon_document.png") center right no-repeat;
  padding-right: 12px;
}

#bodyContent a[href *=".jpg"], #bodyContent a[href *=".JPG"],
.image {
  background: url("../images/camera.gif") center right no-repeat;
  padding-right: 19px;
}

#bodyContent a.highslide[href *=".jpg"], #bodyContent a[href *=".JPG"] {
  background: transparent none;
  padding-right: 0px;
}

  /* ------------------------------- */
  /* Cemetery Pages                  */
  /* ------------------------------- */
  .cemetery pre {
    float: left;
    width: calc(100% - 17px);
    overflow-x: auto;
  }
  .cemetery div.morePRE {
    content: ' ';
    position: relative;
    display: block;
    width: 17px;
    height: 216px;
    overflow-x: hidden;
    margin-left: calc(100% - 17px);
    background-color: #cccccc;
  }
  .cemetery div.morePRE:after {
    content: '';
    position: relative;
    left: 3px;
    top: 50%;
    display: inline-block;
    margin-top: -10px;
    border: transparent 10px solid;
    border-left: red 10px solid;
  }

/*
** ^= specifies a match that begin with the string
** $= specifies a match that end with the string
** *= specifies a match that contains a string
*/
  /* ------------------------------- */
  /* Census Pages                    */
  /* ------------------------------- */
  .preCensus a { font-size:10pt; }
  .preCensus a[href $=".gif"] {
    display:       block;
    margin-bottom: -4ex;                    /* shift pre up else comment line shows */
    border-bottom: medium double blue;
    padding:       5px 5px 5px 35px;        /* top right bottom left */
    background:    #EEEEEE url("../images/gif.png") center left no-repeat;
  }
  .preCensus a[href $=".jpg"] {
    display:       block;
    margin-bottom: -4ex;
    border-bottom: medium double blue;
    padding:       5px 5px 5px 35px;        /* top right bottom left */
    background:    #EEEEEE url("../images/jpg.png") center left no-repeat;
  }
  .preCensus a[href $=".tif"] {
    display:       block;
    margin-bottom: -4ex;
    border-bottom: medium double blue;
    padding:       5px 5px 5px 35px;        /* top right bottom left */
    background:    #EEEEEE url("../images/tif.png") center left no-repeat;
  }
  .preCensus a[href $=".sid"] {
    /*float:         left;*/
    display:       block;
    margin-bottom: -4ex;
    border-bottom: medium double blue;
    padding:       5px 5px 5px 35px;        /* top right bottom left */
    background:    #EEEEEE url("../images/MrSid.png") center left no-repeat;
  }
  .preCensus a.right[href $=".sid"] {
    float:         right;
    display:       block;
    border-bottom: none;
    padding:       21px 5px 5px 35px;        /* top right bottom left */
    background:    #EEEEEE url("../images/MrSid.png") center right no-repeat;
    z-index:       50;
  }
  .preCensus a.noIcon {
    position:      relative;
    top:           4px;
    display:       inline;
    border-bottom: none;
    padding-left:  160px;
    background:    transparent none;
  }
  .preCensus .noLink { /* remove link anchor when not localhost */
    display:       block;
    margin-bottom: -4ex;
    border-bottom: medium double blue;
    padding:       5px;
    font-size:     10pt;
    font-family:   arial, verdana, sans-serif;
    color:         blue;
    background:    #eeeeee;
  }

@media print {
  blockquote, .blkquote   {margin:16px 0;}
  #tabcontainer           {display:none;}
}