/*header {
    position: sticky;
    top: 0;
}
*/

html {
    color: #000000;
    background: #333;
    background: linear-gradient(to bottom,#111,#336033);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

body {
    margin: 0;
    padding: 0;
    display: block;
/*    background: #333;
    background: linear-gradient(to right,#333,#f44);*/
    background: transparent;
    font-family: sans-serif;
    width: 100%;
    min-height: 100%;
    position: relative;
}

h1 {
    font-size: 24px;
    font-weight: normal;
    font-family: Helvetica, Arial, sans-serif;
/*    text-align: right; */
    margin: 0;
    padding: 0;
}

h1.huge {
    font-size:200%;
}

h2 {
    font-size: 18px;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: 5px;
    margin-bottom: 5px;
}

h3 {
    font-size: 17px;
    font-style: italic;
    font-weight: 550;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 3px;
}

h4 {
    font-size: 17px;
    font-style: italic;
    font-weight: 550;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 3px;
}

h5 {
    margin-bottom: 5px; margin-top: 5px;
    font-size: 15px;
    font-style: italic; 
    font-weight: normal;
    font-family: Helvetica, Arial, sans-serif;
}

hr {
    border: 1px solid #999;
    background-color: #999;
/*    border: 0 none;
    background-color: #aaa;
    height: 2px;
*/
    margin: 1ex 0;
}

a:link {
    color: #003399;
    background: none;
    text-decoration: none;
}

a:visited {
    color: #003399;
}

a:active {
    color: #ff0000;
    background: none;
    text-decoration: none;
}

a:hover {
    color: #3366CC;
    background: none;
    text-decoration: underline;
}


.yearsty:hover, .yearsty:hover * {
/*   text-decoration: underline; */
   text-decoration: none;
}


dt {
    font-family: Arial, Helvetica, sans-serif;
}

p {
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0;
}

p.ppopup {
    font-size: 14px;
    text-align: left;
    margin: 3px;
}
  

p.indented {
    text-indent: 0; /* indent was used in old version */
    line-height: 132%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1em;
    margin-top: 1em;
}

tr.top {
    vertical-align: top;
}

td {
    font-family: Arial, Helvetica, sans-serif;
}

th {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

td.left {
    text-align: left;
    vertical-align: top;
}

.text { font-size: 12px; }
.legaltext { font-size: 14px; margin: 0;}
/*.textm { font-size: 12px; margin: 0;}*/
.datatextm { font-size: 14px; margin: 0;}
.datum { font-size: 12.5px; }
.link { font-weight: bold; font-size: 17px; }

.pubtopbar  {
    display: table;
    width: 100%;
    border-spacing: 0;
    border-width:0;
}

.pubtopbar div {
    padding: 0;
    vertical-align: bottom;
}

.pubtopbar > div {
    display: table-row;
}

.pubtopbar > div > div {
    display: table-cell;
}

a.yearsty {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    background-color: rgb(200, 220, 255);
    border-color: rgb(130,140,180);
    border-top-width: 1px; border-top-style: solid;
    border-left-width: 1px; border-left-style: solid;
    border-right-width: 1px; border-right-style: solid;
    border-bottom-width: 0; border-bottom-style: solid;
    display: inline-block;
/* no outline looks better but is no good for accessibility */
/*    outline: 0; */ 
    height: 1.32em;
    padding-top: 0.08em;
    padding-right: 0.1em;
    padding-left: 0.1em;
    padding-bottom: 0.1em;
/*    vertical-align: -0.5em; */
   -webkit-border-radius: 5px; border-radius: 5px;
   -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; 
   -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0;
   margin-top: 0.2em;
}

a.yearstyinactive {
   pointer-events: none;
   outline: none;
   background-color: rgb(235, 240, 255);
   border-color: #c8c8c8;
   color: #6a6a6a;
   user-select: none;
}


@media only screen and (hover:hover) {
    a.yearsty:hover {
        background-color: #E0F0FF;
    }
}

span.pubarrow {
    width: 1em;
    width: calc(0.75*1em);
    height: 1.32em;
/*    vertical-align: baseline; */ 
    padding: 0;
    border: 0;
    margin: 0;
    font-size: 13.5px;
}

ul.nomarg {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

ul.intext {
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

div.div8 {
    font-size: 0;
    height: 8px;
}

div.div12 {
    font-size: 0;
    height: 12px;
}

div.div20 {
    font-size: 0;
    height: 20px;
}

div.div28 {
    font-size: 0;
    height: 28px;
}

div.div36 {
    font-size: 0;
    height: 36px;
}

div.div5 {
    font-size: 0;
    height: 4px;
    clear: both;
}

div.div6 {
    font-size: 0;
    height: 6px;
    clear: both;
}

#ioniztimefig, #ioniztimeimg {
       width: 380px;
}

#gouyfig, #gouyimg {
    width: 260px;
}

#trabertfig, #trabertimg {
    width: 360px;
}


@media only screen and (max-width: 360px)  {
   #mob_nav ul {
       width: 100%;
   }
}

@media only screen and (max-width: 479px) and (min-width:361px)  {
   #mob_nav ul {
       width: 48.9%;
   }
}

@media only screen and (max-width: 300px)  {
   img.banneroffset {
       width: 55%;    
   }
   img#grouppic {
       width: 96%;    
   }   
}

@media only screen and (max-width: 479px) and (min-width:300px)  {
   img.banneroffset {
       width: 160px;    
   }
   img#grouppic {
       width: 270px;    
   }
}
  
@media only screen and (max-width: 768px)  {
   div#wp {
       display: none;
   }
   div#desktop_nav {
       display: none;
   }
   div#menubutton {
       display: table-cell;
   }
   #banner {
       height: 90px;
   }
   img.bannersize {
       width: 990px;
   }
   #fanodetailpic {
       width: 78%;
   }
   #mob_nav {
       display: block;
   }
   #subpagetitle {
       display:block;
   }

   /* private page */
   .groupname {
/*       max-width: 92%; 
       min-width: 85%; */
       width: 100%;
    text-align: left;
    background: linear-gradient(to right, rgba(0,30,0,.4),rgba(0,40,0,.55),rgba(0,30,0,.4), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0));
   }
   /* private page end */
}

@media only screen and (max-width: 479px)  {
   div#menubuttoninbanner {
       display: block;
       position: absolute;
/*       left: 1px; */
       right: 1px; 
       bottom: 4px;
   }
   span.bannerfont {
       font-size: 4.39vw;
       font-size: calc( 2.195vw + 10.5px );
       display: inline-block;   
   }
   h1.bannerfont {
       font-size: 4.39vw;
       font-size: calc( 2.195vw + 10.5px );
       display: inline-block;    
   }
   a.bannerfont {
       font-size: 4.39vw;
       font-size: calc( 2.195vw + 10.5px );
/*       display: inline-block;   */
   }
   img.banneroffset {
       left: 0;
       top: 0;
   }
   #ioniztimefig, #ioniztimeimg {
       width: 332px;
   }
   #gouyfig, #gouyimg {
       width: 208px;
   }
   #trabertfig, #trabertimg {
       width: 320px;
   }
   #photoslidercontainer {
       display: none;
   }
   #photoslidercontainer_2 {
       display: inline-block;
       margin-top: 6px;
       margin-bottom: 10px;
   }
}

@media only screen and (max-width: 768px) and (min-width: 479.01px) {
   div#menubuttoninbanner {
       display: block;
       position: absolute;
/*       left: 2px; */
       right: 2px;
       bottom: 4px;       
   }
   span.bannerfont {
       font-size: 21px;
       display: inline-block;   
   }
   h1.bannerfont {
       font-size: 21px;
       display: inline-block;   
   }
   a.bannerfont {
       font-size: 21px;
/*       display: inline-block;   */
 }
   img.banneroffset {
       left: 3%;
       top: 1px;
       width: 160px;
   }
   img#grouppic {
       width: 320px;    
   }
   .photosliderclass {
       width: 320px;
   }
   #mob_nav ul {
       width: 49.25%;
   }
   #photoslidercontainer {
       display: inline-block;
   }
   #photoslidercontainer_2 {
       display: none;
   }
}


@media (orientation: portrait) and (max-width: 768px) {
    #fanodetailpic {
	width: 90%;
    }
}

@media only print, (min-width: 768.01px)  {
   div#wp {
       display: table-cell;
   }
   div#desktop_nav {
       display: table-cell;
  }
   div#menubutton {
       display: none;
   }
   div#menubuttoninbanner {
       display: none;
   }
   #banner {
       height: 90px;
   }
   img.bannersize {
       width: 990px;
   }
   a.bannerfont {
       font-size: 23px;
/*       display: inline-block;   */
   }
   span.bannerfont {
       font-size: 23px;
       display: inline-block;   
   }
   h1.bannerfont {
       font-size: 23px;
       display: inline-block;   
   }
   img.banneroffset {
       left: 3.5%;
       top: 1px;
       width: 225px;
   }
   img#grouppic {
       width: 320px;    
   }
   .photosliderclass {
       width: 320px;
   }
   #fanodetailpic {
       width: 90%;
   }
   #mob_nav {
       display: none;
   }
   #mob_nav ul {
       width: 49.25%;
   }
   #subpagetitle {
       display:none;
   }
   #photoslidercontainer {
       display: inline-block;
   }
   #photoslidercontainer_2 {
       display: none;
   }
   div.fanodialogue {
       width: 640px;
       left: 50%;
       margin-left: -320px;;
   }
   div#memberlein > div, div#membershvetsov > div{
       width: 500px;
       left: 50%;
       margin-left: -250px;
   }
   /* private page */
   .groupname {
       width: 100%;
       text-align: center;
       background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,30,0,.4),rgba(0,40,0,.55),rgba(0,30,0,.4), rgba(0,0,0,0), rgba(0,0,0,0));    }
   /* private page end */

}

#container {
   margin: 0 auto;
   width: 100%;
   max-width: 1400px;
   min-width: 100px;
   position: relative; 
   min-height: 100%;
}

#banner {
    position: relative;
    top: 0;
    left :0;
}

img.bannersize {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    float: right;
    border: 0;
    cursor: pointer;
}

@media only print, (min-width: 990px)  {
    img.bannersize{
	width: 100%;
	height: 90px; 
/*	object-fit: fill;*/
    }
}

@media (pointer: coarse ) {
    img.bannersize{
	pointer-events: none;
    }
}

/*
@media only print, (min-width: 990px)  {
    img.bannersize{
	right: calc(-0.4*100vw + 0.4*100%);
	width: calc(0.8*100vw + 0.2*100%);
	height: calc(100px + 1vw); 
	width: 90vw;
	right: calc(-0.45*100vw + 0.5*100%);
	height: 100px;
	object-fit: cover;
	object-position: 50% 0;
	background: transparent;
    }
    div.bannersize{
	position: absolute;
	right: 0;
	top: 0;
	float: right;
	border: 0;
	right: calc(-0.4*100vw + 0.4*100%);
	z-index: 1; 
	width: calc(0.8*100vw + 0.2*100%);
	height: calc(100px + 1vw);	
	width: 90vw;
	right: calc(-0.45*100vw + 0.5*100%);
	height: 100px;
	background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,.5), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0),  rgba(0,0,0,0),  rgba(0,0,0,0),  rgba(0,0,0,0),  rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0));
	pointer-events: none;
    }
}
 */
 
.groupname {
    position: absolute;
/*    right: 1%;  */
    bottom: 13px;
    
/* center text in group name, and set padding, width on private page */
/*    text-align: right; */

    left: 0%; 
/*    text-align: center; */
    padding-top: 2px;
    padding-bottom: 2px;
    pointer-events: none;
/*    max-width: 92%; */
/*    min-width: 75%; */
/*    width: 100%; */
    
/* end change for privat page */
    
    display: block;
/* The following gradient background serves as a slightly dark background to increase contrast and readability. */
/*    background: radial-gradient(ellipse at center, rgba(0,0,0,0.3), rgba(0,0,0,.4),rgba(0,0,0,.4),rgba(0,0,0,0),rgba(0,0,0,0)); */
/*    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,30,0,.4),rgba(0,40,0,.55),rgba(0,30,0,.4), rgba(0,0,0,0), rgba(0,0,0,0)); */
}

/* change private page*/
.groupnamebox {
    pointer-events: none;
    display: inline-block;
    width: auto;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
}
.groupnameboxbg {
    pointer-events: auto;
    display: inline-block;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

/*
.groupnamebox:hover > h1 > a {
    text-decoration: underline;
}
*/
/* end change private page*/


a.bannerfont, span.bannerfont, h1.bannerfont {
    color: white;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
/* The following background color to increase contrast and readability. */
    background-color: rgba(0,0,0,0.018);
/*    background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,1),rgba(0,0,0,1));  */
/*    border: 3px solid;
    border-color: rgb(1,0,0,1); */
    border-radius: 7px;
    /* private page: pointer-events */
    pointer-events: auto;
    line-height: 1.26;
    /* end change for private page */

}


/*#wrappersearch {
    text-align: left;
    position: absolute;
    right: 1%;
    top: 10px;
    overflow: hidden; 
    margin: 0;
    padding: 0;
    width: 25%; 
    width: 15vmax; 
    height: 40px;
    -moz-box-shadow: 2px 4x 6px #1c1c1c;
    -webkit-box-shadow: 2px 4px 6px #1c1c1c;
    box-shadow: 2px 4px 6px -1px  #1c1c1c;
    z-index: 99990;
    transition: width 400ms ease-in-out;
}

#wrappersearch:hover {
    width: 44%;
}

#searchbox  {
    border: 0;
    display: inline-block;
    outline: none;
    overflow: hidden; 
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px;
}
*/

#searchbox {
    display: inline-block; 
    position: absolute;
    right: 6px;
    top: 10px;
    overflow: hidden;  
    padding: 0;
    width: 200px; 
    height: 40px;
    -moz-box-shadow: 2px 6x 8px #1c1c1c;
    -webkit-box-shadow: 2px 6px 8px #1c1c1c;
    box-shadow: 2px 6px 8px -1px  #1c1c1c;
    z-index: 99990;
    transition: none;
    border: 0;
/*    outline: none; */
    opacity: 0.9;
}

#searchbox:hover {
    width: 75%;
    top: 6px;
    transform: scale(0.86);
    opacity: 1;
    box-shadow: 4px 7px 9px -1px  #1c1c1c;
    transition: width 400ms ease;
}

/*#searchbox:focus {width: 100%}
 */

#searchbox {
    -moz-transform: scale(0.55);
    -moz-transform-origin: right 0;
    -o-transform: scale(0.55);
    -o-transform-origin: right 0;
    -webkit-transform: scale(0.55);
    -webkit-transform-origin: right 0;
    transform: scale(0.55);
    transform-origin: right 0;
}

.photosliderclass {
    display:flex;
    -ms-flex-direction: row;
    flex-direction: row;
    overflow-x: auto;
    position: relative; 
/*    width: 320px; */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none; 
    margin:4px 7px; 
/*    margin-left: 7px; */
    margin-bottom: -15px;
/*    text-align:center;*/
}


/*
@media only screen and (max-width: 300px)  {
   .photosliderclass {
       width: 96%;
       margin-left: auto;
       margin-right: auto;
   }
}

@media only screen and (max-width: 479px) and (min-width:300px)  {
   .photosliderclass {
       width: 94%;
       margin-left: auto;
       margin-right: auto;
   }
}
*/

#photoslider_2 {
       width: 94%;
       margin-left: auto;
       margin-right: auto;
}

@media only print, (min-width: 920px)  {
   img#grouppic {
       width: 330px;    
   }
   .photosliderclass {
       width: 330px;
       margin-top: -20px;
   }
}


@media only print, (min-width: 1100px)  {
   img#grouppic {
       width: 420px;    
   }
   .photosliderclass {
       width: 420px;
/*       margin-left: 40px;
       margin-right: 40px;
*/
       margin-top: -20px;
   }
}



.photosliderclass > div {
    scroll-snap-stop: always;
}

.photosliderclass::-webkit-scrollbar {
    width: 0px;
}

.photo {
    width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: start;
    height: auto;
}

/* -ms-flex set because of IE bug, need to check Edge */
/*
@media only screen and (max-width: 479px)  {
    .photo {
        -ms-flex: 0 1 100px;
    }
}
*/

.grouppicclass {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
/*    margin-top: -4px; */
}

#grouppic0 {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
/*    margin-top: -4px; */
}

#grouppic1 {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
/*    margin-top: -4px; */
}

#grouppic2 {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
/*    margin-top: -4px; */
}

#grouppic {
    display: block;
/*    width: 100%; */
    padding: 0;
    margin: 0;
    border: 0;
/*    margin-top: -4px; */
}

.fanodialoguebg {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px; 
    left: 0px;
    background: rgba(0,0,0,0.9);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
/*    -webkit-transition: visibility 0s linear 301s, opacity 300ms ease-in;
    -moz-transition: visibility 0s linear 301s, opacity 300ms ease-in;*/
    transition: opacity 300ms ease-in;
    pointer-events: none; 
}


.fanodialogue:target + div.fanodialoguebg {
    -webkit-transition: visibility 0s linear 0s, opacity 300ms ease-in;
    -moz-transition: visibility 0s linear 0s, opacity 300ms ease-in;
    transition: visibility 0s linear 0s, opacity 300ms ease-in;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fanodialogue:target {
    opacity: 1;
    visibility: visible;
    -webkit-transition: visibility 0s linear 0s, opacity 300ms ease-in;
    -moz-transition: visibility 0s linear 0s, opacity 300ms ease-in;
    transition: visibility 0s linear 0s, opacity 300ms ease-in;
}

.fanodialogue:target > div {
    pointer-events: auto;
}

/* (This is added  dynamically by javascript rather than here, to help old browsers. Don't want it in general because it hides background completely)

.fanodialogue:target ~ div#container {
    visibility: hidden;
}
*/


/*.fanodialogue:target {
    -webkit-transition: visibility 0s linear 0s, opacity 300ms ease-in;
    -moz-transition: visibility 0s linear 0s, opacity 300ms ease-in;
    transition: visibility 0s linear 0s, opacity 300ms ease-in;
}
*/

/*.fanodialoguebg:target ~ div#container {
    pointer-events: none;
}
 */
 

/*#openfanobg:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
*/    

/*
#openfanobg:target + div {
    opacity: 1;
    visibility: visible;
}
 */
 

/*#openfanobg:target + div > div {
    pointer-events: auto;
}
*/

.fanodialogue {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
/*    top: 0;
    right: 0;
    bottom: 0; 
    left: 0; */
    width: 86%;
    top: 0px;
    padding-top: 25px;
    left: 7%;
    overflow: visible;
    background: transparent;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
 /*   transition: opacity 300ms ease-in;*/
    pointer-events: none; 
}

.fanodialogue > div {
/*    width: 86%;
    top: 25px;
    left: 7%;*/
    top: 25px;
    left: 0;
    width: 100%;
    position: absolute;
    padding: 0;
    border-radius: 5px;
    background: #fff;
    background: linear-gradient(#fff,#ccc,#bbb,#cfcfcf);
}


#closeimprint, #closedata {
   bottom: -10px;
   top: auto;
}

a.closedialogue {
    background: #606061;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1.75em;
    position: absolute;
    right: -17px;
    text-align: center;
    top: -17px;
    width: 40px;
    text-decoration: none;
/*    outline: none; */
    font-weight: bold;
    -webkit-border-radius: 21x;
    border-radius: 21px;
    -moz-box-shadow: 1px 2px 3px #000;
    -webkit-box-shadow: 1px 2px 3px #000;
    box-shadow: 1px 2px 3px -1px #000;
    cursor: pointer;
}

a.closedialogue:hover {
    background: #a0c0a0;
    text-decoration: none;
    color: black;
}

a.closedialogue:active {
    outline: none;
}

/*#openfano:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-top: -1000px;
    padding-top: 1000px;
}

#openfano:target > div {
    bottom: auto; top: auto;
}
*/

/*#imprint:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-top: -1000px;
    padding-top: 1000px;
}
*/

#imprintdiv {
    bottom: 5px; top: auto;
}

/*
#imprint:target > div {
    bottom: auto; top: auto;
}
*/

#databg:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#databg:target + div#data {
    opacity: 1;
    visibility: visible;
/*    margin-top: -1000px;
    padding-top: 1000px;*/
}

#databg:target + div#data > div {
    bottom: auto; top: auto;
    pointer-events: auto;
}

#data:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-top: -1000px;
    padding-top: 1000px;
}


#datadiv {
    bottom: 5px; top: auto;
}

#data:target > div {
    bottom: auto; top: auto;
}


/*#memberleinbg:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
*/    

/*
#memberleinbg:target + div {
    opacity: 1;
    visibility: visible;
}
*/

/*
#memberleinbg:target + div > div {
    pointer-events: auto;
}
*/

#memberlein > div, #membershvetsov > div {
    position: fixed;
    overflow-x: auto;
    overflow-y: auto;
    top: 5vh;
    width: 85%;
    left: 7%;
    padding-left: 1%;
    padding-right: 1%;
    max-height: 86vh;
    text-align: center;
    font-size: 15px;
}

#memberlein .closedialogue, #membershvetsov .closedialogue {
   top: 3px;
   right: 4px;
   width: auto;
   padding: 3px;
   font-size: 17px;
   line-height: 1em;
   font-weight: normal;
}


#fanodetailpic {
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

span#stretch {
    display:inline-block;
    -webkit-transform:scale(1.7,1); 
    -moz-transform:scale(1.7,1); 
    -ms-transform:scale(1.7,1); 
    -o-transform:scale(1.7,1); 
    transform:scale(1.7,1); 
    padding: 2px;
    border: 0px;
    color: white;
/* The following background color serves to increase contrast and readability. */                                                      
    background-color: rgba(0,0,0,.018);
    -webkit-border-radius: 3px; border-radius: 3px;          
    font-size: 32px;
    font-family: Arial, Helvetica, sans-serif;
}


/* hover:hover was not supported at the time of programming*/
/* So we are presently not using stretch:hover because of the
/* sticky hover behaviour on touch screens */

/*
@media only screen and (hover:hover) {
    span#stretch:hover {
    color: #111111;
    background: #a0caa0;
    }
}
*/

#mob_nav > div {
    vertical-align: top;
    background: #2f2f2f; 
    display: block; 
    text-align: center;
}


#mob_nav  {
    height: auto;
    max-height: 0; 
    padding-top: 0;
}

#mob_nav.shown {
    opacity: 1;
    visibility: visible;
}

#mob_nav.notshown {
    opacity: 0;
    visibility: hidden;
/*    max-height: 0; conflict with :target -> do this setting explicitly in javascript*/
}

#mob_nav:target {
    transition: max-height 0s, visibility 0s linear, margin-top 0s;
    height: auto;
    max-height: none;
    opacity: 1;
    visibility: visible;
    margin-top: -200px;
    padding-top: 200px;
/* margin and padding necessary to scroll to top (this is relevant only for javascript disabled) */
}


#mob_nav ul {
    display: inline-block;
    text-align:left;
    vertical-align: top;
    list-style: none;
    background: #2f2f2f;
    padding: 0 0;
    border: 0; 
    border-collapse: collapse;
    margin: 1px 0.4%;
    margin-bottom: 0;
}


#mob_nav li {
    margin: 0;
    height: auto;
}

#mob_nav li a {
    display: block;
    vertical-align: middle;
    padding: 6px 5px 5px 5px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase; 
    letter-spacing: 0.0em; 
/*    line-height: 1.3em; */
    border-bottom: 1px solid #777777;
    margin: 0;
}

#mob_nav a#uli0 {
    background: #727272; 
    border-bottom: 1px solid #ff5544; 
    color: #fff;
    font-size: 12.5px; 
/*    line-height: 1.7em*/
}

#mob_nav a#uli1, #mob_nav a#uli2, #mob_nav a#uli3, #mob_nav a#uli4 {
    text-transform: none; 
/*    line-height: 1.95em */
}

/*#mob_nav li:last-child a {
    border-bottom: none;
}
*/

#mob_nav li a:hover {
    color: #111111;
    background: #b0d0b0;
/*    background: -moz-linear-gradient(right,#b0d0a0,#e0eee0);
    background: -webkit-linear-gradient(left,#b0d0a0,#e0eee0);
    background: -o-linear-gradient(right,#b0d0a0,#e0eee0);*/
    background: linear-gradient(to right,#b0d0a0,#e0eee0);    
}

/*
#mob_nav li a:focus {
    outline: none;
}
*/

ul#mobnavul1 {
    margin-right: -2px ;
    border-right: 2px solid #777777;    
}

ul#mobnavul2 {
    font-size: 14.5px; 
    border-left: 2px solid #777777; 
    margin-left: 0;
}

#mobnavul2:first-child li {
    margin-right: -0.9%;
}

@media only screen and (max-width: 360px)  {
    ul#mobnavul1 {
	margin: 0;
	border-right: 0;
    }
    ul#mobnavul2 {
	border-left: 0;
	margin: 0;
    }
/*    ul#mobnavul2:first-child li {
	margin: 0;
    }*/
}

div#middlepartfullwidth {
    display: table; 
    background:#ffffff; 
    padding: 0px; 
    border-spacing: 0px; 
    border-collapse: collapse; 
    width: 100%;
}


#subpagetitle {
/*    display:block; */
    font-size: 20px;
    font-variant: small-caps;
    font-family: sans-serif;
    font-weight: normal;
    margin: 0; 
    border: 0;
    padding: 4px 6px 4px 6px;
    text-align: left;
    background: #eee;
/*    background: -moz-linear-gradient(right,#fff,#ccc);
    background: -webkit-linear-gradient(left,#ffffff,#ccc);
    background: -o-linear-gradient(right,#fff,#ccc);*/
    background: linear-gradient(to right,#fff,#ddd);
}


.subpagediv {
/*    overflow: visible;*/
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    padding-left: 2%;
    padding-right: 2%;
}

/*#peoplediv {
    overflow: auto;
    display: block;
    padding: 0;
    border: 0;
    text-align: justify;
    padding-left: 2%;
    padding-right: 2%;
}*/

#peoplediv > div {
/*    min-height: 120px; */
    display: inline-block;
    vertical-align: top;
    padding-left: 0;
    margin-top: 10px;
}

#contactdiv > div {
/*    min-height: 120px; */
    display: inline-block;
    vertical-align: top;
    padding-left: 0;
    margin-top: 5px;
    padding-right: 50px;
}

#contactdiv p {
    margin-top: 0;
    padding-top: 0;
}

#peoplediv {
    background: linear-gradient(to right,#fff,#dfdfdf);
    text-align: justify;
}

@media only print, (min-width: 768.01px)  {
    #peoplediv:after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 0;
    }
}


@media only screen and (max-width: 768px)  {
    #peoplediv {
	text-align: center;
    }
}

@media only screen and (min-width: 479.01px) and (max-width: 768px)  {
    #peoplediv {
	padding-bottom: 14px; 
    }
}

.bfcaption {
    height: 22px;
    position: relative;
}


.backwardforwardwithslider {
    width: 100%;
    display: inline-block;
    height: 24px;
    font-size: 24px;
    text-align: center;
    vertical-align: text-top;
    user-select: none;
}

@media (hover: none) {
/*    .bfcaption {display: none;} */
/*    .backwardforwardwithslider {display: none;} */
/*    .backwardforwardwithslider a:hover {color: black;}*/
/*    .backwardforwardwithslider a:focus {color: black;} */
}

.backwardforwardwithslider a:focus {color: black;}


.backwardforward {
    width: 58%;
    display: inline-block;
    height: 22px;
    font-size: 22px;
    text-align: right;
    vertical-align: text-top;
    user-select: none;
}

.backwardforward a, .backwardforwardwithslider a {
    text-decoration: none;
    color: #000;
}

/*.backwardforward a:focus, .backwardforwardwithslider a:focus {
    outline: 3px solid #aaa;
}
*/

.arrowgray {
    pointer-events: none;
    outline: none;
}

.arrowgray {
    opacity: 0.4;
}

.arrowblack {
    color: #000;
}



@media (hover: hover ) {
    .backwardforward a:hover {
        color: #3366cc;
    }
    .backwardforwardwithslider a:hover {
        color: #3366cc;   
    }
}


@media (pointer: coarse ) {
    .backwardforward a:hover {
        color: #000;
    }
    .backwardforwardwithslider a:hover {
        color: #000;   
    }
}



.backwardforward a:active, .backwardforwardwithslider a:active {
    color: #77bbff;
}

.slidecaption {
    width: 100%;
    display: inline-block;
    height: 12px;
    font-size: 11px;
    text-align: right;
    vertical-align: baseline;
}

.caption {
    width: 42%;
    display: inline-block;
    height: 22px;
    font-size: 10px;
    text-align: right;
    vertical-align: baseline;
}

#publist {
    display: table-cell;
    width: auto;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 15px;
}
 
#profileblock {
    display: block;
    text-align: right;
    margin-top: 7px;
    font-size: 11px;
}

#googleg {
    display: inline-block;
    vertical-align: bottom;
    background: #33f;
    color: white;
    padding: 0px 3px;
    font-size: 14px;
    border: 0;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 2px;
}
 
.gradientsep {
    display: block;
    width: 100%;
    height: 2px;
    margin: 0;
    background: #ccc;
    background: linear-gradient(to right,#fff,#bbb,#fff);
}

#gradientbar {
    display: block;
    width: 100%;
    height: 2px;
    margin: 0;
    background: #ccc;
    background: linear-gradient(to right,#fff,#bbb);
}

footer, footer > table, footer > div {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: #eee;
    background: linear-gradient(to right,#fff,#ddd);
}

footer td {
    text-align: left;
    vertical-align: middle;
    padding: 0;
    line-height: 1.5em;
}

footer div.tdlike {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%; 
    text-align: left;
    vertical-align: middle;
    padding: 0;
    line-height: 1.5em;
    display: table;
/*    float: left; */
    background: linear-gradient(to right,#fff,#ddd);
}


.banneroffset {
    position: absolute;
    border: 0;

/* do not show the logo on private page */    
    display: none;

}

.bannerfontoff {
/* do not show the institute on private page */    
    display: none;
}

/* not needed currently on private page
.bannerfonton {
    display: inline;
}
*/
 

#menubuttoninbanner {
    vertical-align: middle;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

#menubuttoninbanner > span {
    display: inline-block; 
    width: 45px; 
    text-align: center;
}

#menubuttona:focus {
/*    outline: none; */
}

.navtable {
    display: table;
    width: 150px;
    padding: 0px;
    border-collapse: separate;
    border: 0 solid #444;
    border-spacing: 0;
    background: #dadada;
    background: linear-gradient(to bottom,#d0d0d0,#e8e8e8);
    background: linear-gradient(to bottom,#d0d0d0,#e8e8e8);
    border-bottom-width: 1px;
    overflow: hidden;
    position: static;
}

.navtable:hover {
    background: #eaeaea; 
    background: linear-gradient(to bottom,#d8d8d8,#f0f0f0); 
}

.navtable td:not(.navtable_selected) > a:hover {
    background: #e0f0ff;
    background: linear-gradient(to right,#dee8ff,#fcfcff);    
    -moz-box-shadow: 1px 1px 6px #777;
    -webkit-box-shadow: 1px 1px 6px #777;
    box-shadow: 1px 1px 6px -2px  #777;
}

.navtable > div > div:not(.navtable_selected) > a:hover {
    background: #e0f0ff;
    background: linear-gradient(to right,#dee8ff,#fcfcff);    
    -moz-box-shadow: 1px 1px 6px #777;
    -webkit-box-shadow: 1px 1px 6px #777;
    box-shadow: 1px 1px 6px -2px  #777;
}

.navtable > div {
    display: table-row;
}

.navtable a:focus {
/*    outline: none; */
}

.navtable td {
    border: 0;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #777;
    text-align: right;
    margin: 0;
    padding: 0;
}

.navtable > div > div {
    display: table-cell;
    font-family: Arial, Helvetica, sans-serif;
    border: 0;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #777;
    text-align: right;
    margin: 0;
    padding: 0;
}

td.navtable_selected {
    border-right: 1px solid white;
}

div.navtable_selected {
    border-right: 1px solid white;
}


/*.navtable_selected span {
    border-right-width: 0px;
    border-right-style: solid;
    border-right-color: #777777;
    text-align: right;
}
*/

.navtable a {
    text-decoration: none;
    color: #222222;
    font-size: 18px;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 0;
    display: inline-block;
    min-width: 112px;
    text-align: center;
    -webkit-border-radius: 15px; border-radius: 15px;                               
/*    -webkit-border-top-left-radius: 0; border-top-left-radius: 0px;  */                        
    -webkit-border-top-right-radius: 0; border-top-right-radius: 0px;                          
    -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; 
    border-top-width: 0px; border-top-style: solid; border-top-color: #777777;  
    border-left-width: 1px; border-left-style: solid; border-left-color: #777777;
    border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #777777;                         
    border-right: 0px solid #edeff3; margin-right: -0.1px;
    background: #e4e4e4;
    background: linear-gradient(to right,#dee0e4,#edeff3);
    -moz-box-shadow: 1px 1px 6px #777;
    -webkit-box-shadow: 1px 1px 6px #777;
    box-shadow: 1px 1px 6px -0.5px #777;
}

/*.navtable_unselected a {                                                               
    border-top-width: 1px; border-top-style: solid; border-top-color: #777777;                                  
    border-left-width: 1px; border-left-style: solid; border-left-color: #777777;                               
    border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #777777;                         
    background: #dadada;
}
*/

.navtable_selected a {
    border-top-width: 0px; border-top-style: solid; border-top-color: #888888;                                                       
    border-left-width: 1px; border-left-style: solid; border-left-color: #888888;                                                    
    border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #666;                                             
    border-right: 1px solid white; margin-right: -2px;
    background: #ffffff;
    padding-right: 1px;
    -moz-box-shadow: 1px 1px 6px #777;
    -webkit-box-shadow: 1px 1px 6px #777;
    box-shadow: 1px 1px 6px 1px #777;
/*    font-weight: bold; */
}

/*.navtable_unselected {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #777777;
    text-align: right;
    padding: 0;
}
*/

/*.navtable_unselected_blank {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #777777;
}
*/

/*.desktopmouse:hover {
    background: #e0f0ff !important;
    background: -moz-linear-gradient(right,#caeaba,#f4fff0) !important;
    background: -webkit-linear-gradient(left,#caeaba,#f4fff0) !important;
    background: -o-linear-gradient(right,#caeaba,#f4fff0) !important;
    background: linear-gradient(to right,#caeaba,#f4fff0) !important;    
}
*/

#sticky_div {
    position: sticky;
    top: 0;
    width: 150px;
    padding: 0px;
    border: 0;
}

#desktop_nav {
    vertical-align: top; 
    padding: 0; 
    border-collapse: collapse; 
    border-spacing: 0; 
    width: 150px; 
    text-align: right;
    background: #dadada;
    background: linear-gradient(to bottom,#dadada,#f4f4f4);
}

.linkstablediv {
    padding-top: 0; padding-left: 6px; padding-right: 6px; padding-bottom: 4px;
}

.linkstable {
    border: 0;
    border-top-width: thin;
    width: 100%;
    padding: 0;
    border-spacing: 0;
    font-size: 13px;
    background: #eaeaea;
    background: linear-gradient(to top,#d0d0d0,#f0f0f0);
    display: table;
}

.linkstable td {
    padding: 3px;
    padding-top: 6px;
    text-align: left; 
}

.linkstable div.tdlike {
    padding: 3px;
    padding-top: 6px;
    text-align: left; 
    display: table-cell;
    font-family: Arial, Helvetica, sans-serif;
}

.linkstable div.trlike {
   display: table-row;
}

.linkstable a  {
    color: #333333;
}


.linkstable:hover {
    border-collapse: separate;
    background: #f3f3f3;
    background: linear-gradient(to bottom,#eaeaea,#ffffff);
    -moz-box-shadow: 1px 2px 3px #777;
    -webkit-box-shadow: 1px 2px 3px #777;
    -ms-box-shadow: 1px 2px 3px #777;
    box-shadow: 1px 2px 3px -1px #777;
}


.alternating {
    display: table;
    margin-bottom: 10px;
    font-size: 15px;
    border-spacing: 0px;
    padding-right: 0;
    margin-right: 14px;
    margin-left: 14px;
}

@media only screen and (max-width: 479px)  {
   .alternating {
       margin-right: 4px;
       margin-left: 4px;
   }
}

.alternating > div > div {
    display: table-cell;
    border-bottom: 1.5px solid #e3e4e5;
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
}

.alternating > div {
    display: table-row;
}

.alternating > div:first-child > div {
    border-top: 1.5px solid #e3e4e5;
}

.alternating > div:nth-child(odd) > div {
    background: #f8f8f8;
}
    
.alternating > div:nth-child(odd) .memb {
    background: #f2f2f2;
    background: linear-gradient(to right,#fff,#fff,#f8f8f8);
}

.alternating > div:nth-child(odd) .job {
    background: #f2f2f2;
    background: linear-gradient(to left,rgba(255,255,255,.05), #fdfdfd, #f8f8f8);
}

.alternating > div:nth-child(even) > div {
    background: #fff;
}
    
.alternating > div:nth-child(even) .memb {
    background: #fff;
    background: linear-gradient(to left,#fff,#f8f8f8);
}

.alternating > div:nth-child(even) .job {
    background: #fff;
    background: linear-gradient(to right,#fff,rgba(0,0,0,0));
}

.memb {
    display: table-cell;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: top;
    text-align: left;
    font-size: 16px; 
    padding: 0;
    padding-top: 5px; 
    padding-bottom: 5px; 
/*    line-height: 1.05em; */
}

.job {
    display: table-cell;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: top;
    text-align: left;
    font-style: italic;
    font-size: 16px; 
    padding: 0;
    padding-top: 5px; 
    padding-bottom: 5px; 
/*    line-height: 1.05em; */
}

figure.researchfig, img.researchfig {
    padding: 6px;
    padding-right: 18px;
    padding-top: 12px;
/*    margin-left: 0; */
    margin: 0;
/*    margin-right: 8px;
    margin-bottom: 8px; */
    float: left;
    width: 260px;
    background: #fff;
/*    border: 1px solid black;*/
}

@media only screen and (max-width: 360px)  {
   figure.researchfig, img.researchfig {
       width: 85%;
       padding-left: 2px;
       padding-right: 8px;
   }
}

figcaption {
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    padding: 2px; 
    margin-bottom: 6px;
/*    background: linear-gradient(to bottom, #eee, #f5f5f5, #eee);*/
    text-align: center;
}

h3.submenu {
    font-style: normal;
    margin-top: 6px;
    background: #cfcfcf;
    background: linear-gradient(to right,#dfdfdf,#c2cac2);
    padding: 3px 5px 4px 5px; 
    border-bottom: 1px solid black;
}

h3.submenu a, h3.submenu span {
    margin:0;
    color: black;
    padding: 3px 5px 4px 5px;    
}

h3.submenu a {
    border-left: 1px solid white;
}

h3.submenu a:last-child {
    border-right: 1px solid white;
}

h3.submenu span {
    padding: 3px 5px 5px 5px;    
    border-left: 1px solid #f4f4f4;
    background: #f4f4f4;
    background: linear-gradient(#f2f2f2,#fff);
/*    -moz-box-shadow: 1px 1px 2px #777;
    -webkit-box-shadow: 1px 1px 2px #777;
    box-shadow: 2px -1px 0px 0px #aaa;*/
}

h3.submenu span + a {
    border-left: 1px solid #f4f4f4;
}

p.researchnewsparagraph {
    line-height: 132%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1.5em;
    background: #fff;
}

p.fundingparagraph {
    line-height: 135%;
    margin-left: 1%;
    margin-right: 1%;
}

p.topicsparagraph {
    line-height: 132%;
    margin-left: 1%;
    margin-right: 1%;
}

.legal {
    display: table;
}

.legal > div {
    display: table-row;
}

div.top {
    vertical-align: top;
}

.legal > div > div {
    display: table-cell;
    font-family: Arial, Helvetica, sans-serif;
}