main {
background-color: var(--light-background-color); color: var(--dark-text-color); font-family: var(--cate-sf-font); font-size: var(--text-font-size); margin: 0 auto; max-width: 1280px; /* HD standard */ padding: 20px 0; width: 100%;
}
main address {
font-size: var(--address-font-size); font-style: normal; margin: 10px auto; padding: 0 20px;
}
main figure {
/* Refer to: https://codepen.io/sdthornton/pen/wBZdXq */ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin: auto; max-width: 100%;
}
main dl {
border: 5px double var(--medium-background-color); clear: both; display: block; margin: 20px auto; overflow: auto; padding: 0 15px;
}
main dd, dt {
display: block; float: left; margin: 5px auto; padding: 0; line-height: var(--large-line-height);
}
main dt {
clear: left; font-weight: bold; text-align: center; padding: 0 10px 0 0;
}
main dt::after {
content: ":";
}
main section {
clear: both; margin: 20px 0; padding-bottom: 20px;
}
main section > h1 { /*
background: linear-gradient(to right, var(--light-background-color), var(--blueish) 100%);
- /
border-left: 10px solid var(--yellow); color: var(--h1-color); font-family: var(--h1-font); font-weight: bold; margin-left: -20px; padding: 5px 10px; text-transform: uppercase;
}
main h1 {
color: var(--h1-color); font-family: var(--header-font); font-size: var(--h1-font-size); font-weight: normal; padding: 10px;
}
main h2 {
color: var(--h2-color); font-family: var(--header-font); font-size: var(--h2-font-size); font-weight: normal; padding: 10px 20px 0 20px;
}
main p {
-ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; line-height: var(--text-line-height); margin: 10px 0; padding: 0 20px; text-align: justify;
}
main summary {
cursor: pointer;
}
main img {
display: block; height: auto; margin: 0 auto; padding: 10px 20px; width: calc(100% - 40px);
}
main ul, main ol {
line-height: var(--text-line-height); list-style-image: none; list-style-position: outside; margin: 10px auto; padding: 0 0 0 40px;
}
main ol {
list-style-type: decimal;
}
main ul {
list-style-type: disc;
}
main li > p {
padding-left: 0;
}
.bacterium, .gene {
font-style: italic;
}
.headline {
color: var(--headline-color); font-size: var(--headline-font-size); margin: 0; padding: 0; text-align: center;
}
.fig-generic {
margin: 0 auto; padding: 10px 20px; max-width: 400px;
}
.fig-float { /* DEPRECATED */
float: right; margin: 0 auto; padding: 10px 20px; max-width: 400px;
}
.fig-float-right {
float: right; margin: 0 auto; padding: 10px 20px; max-width: 400px;
}
.fig-float-left {
float: left; margin: 0 auto; padding: 10px 20px; max-width: 400px;
}
main figcaption {
font-size: var(--caption-font-size); margin: 10px auto;
}
.fig-nonfloat {
margin: 10px auto; max-width: 800px;
}
.fig-nonfloat > figcaption {
padding: 0 20px;
}
.top-fig-single {
margin: 40px auto; max-width: 400px;
}
.top-fig-multi {
margin: 40px auto; max-width: 800px;
}
.first {
margin-top: 0;
}
.multi-summary {
display: flex; flex-flow: column nowrap; justify-content: space-between; margin: 0; padding: 0;
}
.multi-summary > details {
display: block; flex: 1 1 0; margin: 10px 0; padding: 0 20px;
}
.multi-summary > details:first-child {
margin-top: 0;
}
.multi-summary > details:last-child {
margin-bottom: 0;
}
.multi-summary > details > summary {
background-color: var(--blue); color: var(--light-text-color); padding: 10px;
}
.multi-summary > details[open] > summary {
background-color: var(--very-dark-blue);
}
.references {
font-size: var(--references-font-size);
}
.pro-contra {
display: flex; flex-flow: row wrap;
}
.pro-contra > div {
flex: 1 1 0; min-width: 250px;
}
.pro > p, .contra > p {
font-weight: bold;
}
.pro > p {
color: var(--green);
}
.contra > p {
color: var(--reddish);
}