/* templatestyle.css for template 1 overrides to TNG genstyle.css   */


@import url("mydefs.css");

:root {

  /* Farben */
  --dark-color:          var(--main-color-1); /* backgrounds */
  --medium-color:        var(--main-color-1); /* Text, etc */
  --lighter-color:       var(--main-color-3); /*#1974D2; /*#005cb9; */
  --light-color:         #CACACA;
  --lightest-color:      #F0F0F0;  /*lightgrey,lightblue,#f9d1d2*/
 
  --white-color:         #FFFFFF;

  /* Rundungen */
  --border-radius-s:     3px;
  --border-radius-m:     5px;

  /* Gradienten - werden nicht wirklich genutzt */
  --gradient-color-dark:    var(--dark-color);
  --gradient-color-medium:  var(--dark-color);
  --gradient-color-lighter: var(--dark-color);
  --gradient-colors-light:  #F0F0F0, #F0F0F0, #F0F0F0;  
  --gradient-colors-dark:   var(--gradient-color-dark), var(--gradient-color-lighter), var(--gradient-color-dark);  
  --background-image-dark:  linear-gradient(var(--gradient-color-dark));
  --header-background-image: linear-gradient(var(--header-background-color));
  --menu-background-image:   linear-gradient(var(--menu-background-color));
}

/* ========== Site and Homepage ============== */
html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100%; font-family: var(--body-font-family); font-size: var(--body-font-size); line-height: var(--body-font-line-height); background: var(--body-background-color); color: var(--body-font-color); text-align: left; margin: 0 auto; padding: 0; }
body > .container { flex-grow: 1; } /* push footer down on short pages */

.dg-customimage {
    height: 340px;
    background-image: url('../../../vgss/img/Galizien-Ungarn-Siebenbuergen-etc-1822-Auflage-1835-3.jpg'); /* relative to template css */
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center 50%;
    text-align: right;
    border: 1px solid silver;
  }

.dg-customimage a {
  text-decoration: none;
}

.dg-customimage-frame {
  padding: 3px;
  border: 1px solid var(--main-color-1);
}

.dg-customimage-button {
  float: right;
  margin: 5px;
  padding:5px;
  width: 30px;
  font-size:larger;
  text-align:center;
  background:rgba(255,255,255,0.6);
  border: 1px solid silver;
  border-radius: 3px;
}

.dg-flexrow {
  display: flex;
  flex-direction: row;
}
.dg-quicklinks {
  display: flex;
  flex-direction: column;
  padding-right: 3em;
  line-height: 22px;
  min-width: 100px;
}
.dg-quicklinks a, .dg-quicklinks a:visited {
  text-decoration: none;
  color: var(--body-font-color);
}
.dg-quicklinks a:hover {
  color: var(--main-color-2);
}

/* waste some space left and right... */
.container { width: calc(100% - 30px); margin: 0 auto; text-align: left; }
header > .container { width: calc(100% - 20px); }  /* considers image padding */
.nav-menu > .container { width: calc(100% - 20px); padding: 5px 10px 5px 10px; }  /* considers image padding */

/* === DEBUG === */
header { border: 0px solid red; }
.logo { border: 0px solid blue; }
.brand img, .brand a, .slogan span { border: 0px solid blue; }
.brand .img-left, .brand .img-right { margin-bottom: 5px!important; }
.innercontainer { border: 0px solid blue; }

/* ========== Header and Site Name ============== */
header { background: var(--header-background-color); }
.logo  { float: left; width: calc(100% - 2px); text-align: left; margin: 0; padding: 0;}
.brand { font-family: var(--title-font-family); font-size: var(--title-font-size); font-weight: var(--title-font-weight); line-height: var(--title-font-line-height); letter-spacing: var(--title-font-letter-spacing); margin: 5px 0 0 0; padding: 0; -webkit-font-smoothing: antialiased; }
.brand a, .brand a:hover { text-decoration: none; color: var(--title-font-color); }
.brand img { margin-top: -2px; }
.slogan { font-family: var(--slogan-font-family); font-size: var(--slogan-font-size); font-weight: var(--slogan-font-weight); font-style: var(--slogan-font-style); color: var(--slogan-font-color); letter-spacing: +0.3px; line-height:  calc(80px - var(--title-font-line-height)); padding-left: 0px; margin: 8px 0 0 0; }

h1 {font-family: var(--heading-font-family); font-size: var(--heading-font-size-1)!important; font-weight: var(--heading-font-weight-1)!important; color: var(--h1-font-color)!important; margin: 9px 0 9px 0; /*letter-spacing: 1px;*/ -webkit-font-smoothing: antialiased; }
h2 {font-family: var(--heading-font-family); font-size: var(--heading-font-size-2)!important; font-weight: var(--heading-font-weight-2)!important; color: var(--h2-font-color)!important; margin: 8px 0 7px 0; /*letter-spacing: 1px; text-align: center; border-bottom: 1px solid var(--medium-color);*/ -webkit-font-smoothing: antialiased; }
h3 {font-family: var(--heading-font-family); font-size: var(--heading-font-size-3)!important; font-weight: var(--heading-font-weight-3)!important; color: var(--h3-font-color)!important; margin: 7px 0 5px 0; -webkit-font-smoothing: antialiased; }

a.textlink, a.textlink:hover { text-decoration: underline dotted 1px; }
a.textlink:link, a.textlink:visited { color: var(--dark-color); }

/* ========== Navigation Menu ========== */
.nav-menu { width: 100%; height: 50px; margin: 0; padding: 0; }
.nav-menu > .container { display: flex; flex-direction: row; background-color: var(--menu-background-color); color: var(--menu-font-color); height: 23px; margin: 0; }

div.menucontainer {/*display: inline-block;*/ flex-grow: 1; margin: 0 0 0px 0; }
div.menucontainer div.innercontainer, div.icons, ul.tngdd, ul.tngdd .stubmenu, ul.tngdd .menulink { background-color: transparent; border: 0; }
/* div.icons and ul.tngdd */
div.icons { padding: 0 0 1px 0; margin: 0; }
div.icons a { background: transparent; color: var(--menu-font-color); padding: 3px 10px 5px 10px; margin: 0 10px 0 0; } /*setting background also eliminates the strange icon symbols array... */
div.icons a:hover, div.menucontainer ul.tngdd a.menulink:hover { background-color: var(--main-color-3); /*var(--main-color-3);*/ border-radius: var(--border-radius-s); }
ul.tngdd a.menulink { background: var(--menu-background-color) url(../img/arrowdown2.gif) 2px 8px no-repeat; color: var(--menu-font-color);  width: unset; margin: 0 0 0 10px; padding: 0 10px 7px 30px; border: 0; }
ul.tngdd .langmenu, ul.tngdd .stubmenu { background-color: var(--menu-background-color); border: 0; }
/*ul.tngdd > li:last-child { margin-right: 15px; }*/
div.icons a, ul.tngdd a.menulink { font-family: var(--menu-font-family); font-weight: normal; font-size: var(--menu-font-size); border: 0px solid grey; border-radius: var(--border-radius-s); }
ul.tngdd ul { top:25px; left: 8px; }
ul.tngdd ul.last { left: -50px; } /* was 55 shifting the shadow 5px too far away... */
/* icons-rt */
div.nav-menu div.icons-rt { float: right; margin: -3px 5px -3px 15px; /*5px 30px; padding: 2px;*/ }
/* language selection menu */
div.nav-menu div.icons-rt form select { float: right; font-family: var(--menu-font-family); font-size: var(--menu-font-size)!important; background-color: var(--menu-background-color); color: var(--menu-font-color); padding: 3px 2px 3px 10px; margin: 0; border: 0; border-radius: var(--border-radius-s); }
div.nav-menu div.icons-rt form select:hover { background-color: var(--main-color-3); }
/* display language selection menu only on start page */
body:not(.index) div.nav-menu div.icons-rt form select { display: none; }
.index div.nav-menu div.icons-rt > form:first-child select { display: inline-block; }
.index div.nav-menu div.icons-rt .tngsmallicon { display: none; }
/* push other icons-rt below the menu bar */
body:not(.index) div.nav-menu div.icons-rt { margin-top: 32px; width: 0px; direction:rtl; white-space: nowrap; overflow: visible; }
div.nav-menu div.icons-rt .tngsmallicon { color: var(--menu-background-color); font-size: 12px; font-weight: normal; }

/* ========== Other ============== */
.databack, .LB_window { background-color: var(--header-background-color); }
.snlink, .snlink:link, .snlink:visited { background-color: var(--menu-background-color); color: var(--menu-font-color); }

table.thfixed thead { background-color: var(--menu-background-color); }
input.longfield { width: 400px; }

.searchformbox .fieldname { display: inline-block; min-width: 160px; }
.fieldnameback, .tablesaw-cell-label { color: var(--menu-font-color); background-color: var(--menu-background-color); border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 5px; }
.fieldnameback .fieldname { color: var(--menu-font-color); }
.scroll-to-top, .scroll-to-top img { background-color: var(--main-color-3); width: 26px; height: 26px; right: 18px; }
.bar { background-color: var(--main-color-3); }
.media-title { font-size: 10pt; }

.admin-block .fieldnameback, .admin-block .tablesaw-cell-label, .admincol .fieldnameback, .admincol .tablesaw-cell-label, .admin-header .fieldnameback, .admin-header .tablesaw-cell-label, .admin-header #tngnav a.here { background-color: var(--admin-background-color); }
.admintop .lightlink:link, .admintop .lightlink:visited { color: var(--menu-font-color); }
.admin-banner, .admin-banner-img { border-radius: var(--border-radius-m); }
.admin-banner h1 { color: var(--menu-font-color)!important; }
a.lightlink3:link, a.lightlink3:visited, a.lightlink3:hover, a.lightlink3:active { color: var(--slogan-font-color); }
.lightback { padding: 3px; }
.admin-block td.lightback:last-child { white-space: nowrap; }
.admin-block, #adm-innermenu { border-radius: var(--border-radius-m); color: var(--body-font-color); }
div.tngmsgarea, a.admincell  { border-radius: var(--border-radius-m); color: #FFFFFF; }
.adm-rounded-table > tbody > tr, .adm-rounded-table > tbody > tr > td, .tblback > tbody > tr, .tblback > tbody > tr > td { border-radius: var(--border-radius-m); }

.databack { padding: 3px; }

.rounded-table tr:first-child td:first-child, .rounded-table tr:first-child th:first-child { border-top-left-radius:     var(--border-radius-s); }
.rounded-table tr:first-child td:last-child,  .rounded-table tr:first-child th:last-child  { border-top-right-radius:    var(--border-radius-s); }
.rounded-table tr:last-child  td:last-child,  .rounded-table tr:last-child  td:last-child  { border-bottom-right-radius: var(--border-radius-s); }
.rounded-table tr:last-child  td:first-child, .rounded-table tr:last-child  td:first-child { border-bottom-left-radius:  var(--border-radius-s); }

.tfixed, .thfixed, .dna-tfixed { border-radius: var(--border-radius-s); box-shadow: 2px 2px 2px -1px #666; }
.tfixed tr:first-child td:first-child, .thfixed tr:first-child th:first-child, .rc-ul                                          { border-top-left-radius:     var(--border-radius-s); }
.tfixed tr:first-child td:last-child,  .thfixed tr:first-child th:last-child,  .dna-tfixed tr:first-child td:last-child        { border-top-right-radius:    var(--border-radius-s); }
.tfixed tr:last-child  td:first-child, .thfixed tr:last-child  td:first-child, .rc-ll                                          { border-bottom-left-radius:  var(--border-radius-s); }
.tfixed tr:last-child  td:last-child,  .thfixed tr:last-child  td:last-child,  .dna-tfixed tr:last-child td:last-child, .rc-lr { border-bottom-right-radius: var(--border-radius-s); }

.cust-event-block     { border-radius: var(--border-radius-s); }
input[type="button"], input[type="submit"], input[type="reset"], input[type="password"], input[type="number"], button, input[type="text"], textarea, select { border-radius: var(--border-radius-s); }

.slidedown, .titlebox { border-radius: var(--border-radius-m); }
.rounded4, div.pad5 img { border-radius: var(--border-radius-s); }
#tngnav a.here { background: var(--menu-background-color); }

.slidedown { margin-top: 21px; margin-left: 90px; color: var(--body-font-color); background-color: var(--lightest-color); }
#searchdrop .subhead a:last-child { color: silver; pointer-events: none; }

input.minifield  { padding: 3px 2px 1px 2px; }
input.minibutton { padding: 1px 2px 1px 2px; }
.smallimg { margin-bottom: 10px; }
.vertphoto { margin-bottom: 1px; border: 1px solid silver; }

.pedbox { border: 1px solid silver!important; background-color: var(--header-background-color)!important; box-shadow: 2px 2px 2px #999999!important; }
.fambox, .mfambox { border: 1px solid silver; background-color: var(--header-background-color); }
.fambox .smallpic, .mfambox .smallpic { padding-top: 2px; }
.fambackground { border: 1px solid silver; background-color: whitesmoke; }
#vcontainer div.box div.inner { border: 1px solid silver; }
div.pedbox.rounded4 { height: 18px!important; }

.sntable { font-size: 10pt; }

/* ========== Surname Cloud ==========  */
.surnames-cloud, .surnames-cloud a {font-family: Verdana, Tahoma, Arial; padding: 2px 2px 2px 2px; letter-spacing:  0.0em; word-spacing: 0.0em; text-decoration: none; font-weight: normal; text-align: center; font-size: 14px;}

a.size1  {color: #003281; font-size: 170%;} a.size1:link {color: #003281;} a.size1:visited {color: #003281;}
a.size2  {color: #004c9c; font-size: 160%;} a.size2:link {color: #004c9c;} a.size2:visited {color: #004c9c;}
a.size3  {color: #005fa6; font-size: 150%;} a.size3:link {color: #005fa6;} a.size3:visited {color: #005fa6;}
a.size4  {color: #CA0404; font-size: 140%;} a.size4:link {color: #CA0404;} a.size4:visited {color: #CA0404;}
a.size5  {color: #000000; font-size: 130%;} a.size5:link {color: #000000;} a.size5:visited {color: #000000;}
a.size6  {color: #666666; font-size: 120%;} a.size6:link {color: #666666;} a.size6:visited {color: #666666;}
a.size7  {color: #E67E22; font-size: 110%;} a.size7:link {color: #E67E22;} a.size7:visited {color: #E67E22;}
a.size8  {color: #239B56; font-size: 100%;} a.size8:link {color: #239B56;} a.size8:visited {color: #239B56;}
a.size9  {color: #000000; font-size: 90%;} a.size9:link {color: #000000;} a.size9:visited {color: #000000;}
a.size0  {color: #000000; font-size: 80%;} a.size0:link {color: #000000;} a.size0:visited {color: #000000;}

/* ========== Footer ============== */
footer {
  clear: both;
  width: 100%;
  padding: 6px 0 7px 0;
  font-size: var(--menu-font-size);
  background-color: var(--footer-background-color);
  color: var(--menu-font-color);
  text-align: center;
  margin-top: 20px;
}
footer p {
  padding: 0;
  margin: 0;
}
footer a, footer a:hover {
  color: var(--footer-font-color)!important;
  text-decoration: underline dotted 1px;
  font-weight: normal;
  outline: none;
}
.copyright {
  letter-spacing: 3px;
  text-align: center;
  font-size: 90%;
  color: var(--footer-font-color);
  margin: 0;
  padding:0;
}

/* Small Devices */

@media screen and (max-width: 689px) {
	.container { width: calc(100% - 10px); margin: 0 5px 0 5px; }
	.brand, .brand a, .brand a:hover { font-size: 20px; }
}
@media screen and (min-width: 690px) and (max-width: 849px) {
	.container { width: calc(100% - 10px); margin: 0 5px 0 5px; }
	.brand, .brand a, .brand a:hover { font-size: calc(var(--title-font-size) - 10px); }
	.img-right { width: 80px; height: 80px; }
}
/* Larger Devices */

@media screen and (min-width: 850px) and (max-width: 1022px) {
	.container { width: calc(100% - 10px); margin: 0 5px 0 5px; }
	.brand, .brand a, .brand a:hover {font-size: calc(var(--title-font-size) - 8px); }
	.slogan {font-size: calc(var(--slogan-font-size) - 2px); }
        /*
	ul.tngdd {float:left!important;}
	.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
	.postcard {max-width: 275px; margin: 0 auto; }
        */
}

@media screen and (min-width: 1023px) and (max-width: 1279px) {
	.container { width: calc(100% - 20px); margin: 0 10px 0 10px; }
	.brand, .brand a, .brand a:hover { font-size: calc(var(--title-font-size) - 4px); }
	.slogan {font-size: calc(var(--slogan-font-size) - 2px); }
}

/* Not large enough for something Devices */

@media screen and (max-width: 500px) {
	.brand a { display: none; }
}

@media screen and (max-width: 690px) {
	.img-left, .img-right { display: none; }
}

@media screen and (max-width: 767px) {
	div.icons-rt {display: none;}
	#profile-smicon {display: none;}
}

@media screen and (max-width: 849px) {
	#home-smicon {display: none;}
}

@media screen and (max-width: 1022px) {
	.slogan { display: none; }
}

/* Very large devices
@media screen and (min-width: 1280px) {
	.brand, .brand a, .brand a:hover { font-size:  var(--title-font-size); }
	.slogan { font-size: var(--slogan-font-size); }
} */