div.wrapper {margin-left: 15%; margin-right : 15%;border: 1px; overflow:hidden;} /*-moz-border-radius: 20px 20px 20px 20px;}*/
body {margin:0; padding:0.25px;font-family: Helvetica}
.rightcolumn {
  width:75%;
  float: left;
  padding-left:1%;
  font-size:18px;
  border-right: 1px black solid;
  border-left: 1px black solid;
}

.leftcolumn {
  width: 20%;
  float: right;
}
#Picture_Details {float: center;font-family:Helvetica; background:lightgrey;  text-align: center; padding-bottom: 5px; padding-top: 5px}
#Footer {float: center; width: 100%; font-color:white;}

p.normal {
  font-weight: normal;
  font-family: Helvetica;
  font-size:16px;
}

p.light {
  font-weight: lighter;
  font-family: Helvetica;

}

p.thick {
  font-weight: bold;
  font-family: Helvetica;

}

p.thicker {
  font-weight: 900;
  font-family: Helvetica;
  font-size:20px;
}

/*Abstract*/
.abstract {
  padding:0px 5px 0px 5px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  font-size: 14px;
}

/*Collapsible*/
.collapsible {
/*   background-color: #777; */
  color: black;
  cursor: pointer;
  padding: 1px;
  width: 100%; */
  border: none;
  text-align: right;
  outline: none;
  font-size: 14px;
}

.active, .collapsible:hover {
  background-color: #lightgrey;
}

h1 {font-size:40px; font-family:Helvetica; font-color:silver; margin-bottom: 10px; margin-top: 20px;}
h2 {font-size:30px; font-family:garamond; font-color:grey; margin-bottom: 10px;}
h3 {font-size:20px; font-family:garamond; font-color:grey; margin-bottom: 10px;}
/*ul {height:40px; width:0%; list-style-type: none; text-align: center;}*/


 /* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color:lightgrey;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size:20px;
  font-family:Helvetica;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
} 
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
  .leftcolumn {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .leftcolumn, .rightcolumn{
    width: 100%;
  }
}
.button{
    background: #333;
    padding: 5px;
    border-radius: 10px;
    color: #fff;
    max-width: 5%;
    text-align: center;
    outline: none;
    
    /*remove text highlighting (easy to double click and highlight)*/
    -webkit-touch-callout: none; /* iOS Safari /*
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
    supported by Chrome and Opera */
}

details summary.button::-webkit-details-marker {
  display:none; /*remove the arrow of the details tag*/
}

details[open] summary{
  background: #666; /*change background when button is 'open'*/
}