193 lines
2.9 KiB
CSS
193 lines
2.9 KiB
CSS
.row {
|
|
display: -ms-flexbox;
|
|
/* IE10 */
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
/* IE10 */
|
|
flex-wrap: wrap;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* Create four equal columns that sits next to each other */
|
|
.column {
|
|
-ms-flex: 25%;
|
|
/* IE10 */
|
|
flex: 25%;
|
|
max-width: 25%;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.column img {
|
|
margin-top: 8px;
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
}
|
|
|
|
#clockwise {
|
|
display: none;
|
|
}
|
|
|
|
#topbottom {
|
|
display: none;
|
|
}
|
|
|
|
#leftright {
|
|
display: inline;
|
|
}
|
|
|
|
/* Responsive layout - makes a two column-layout instead of four columns */
|
|
@media screen and (max-width: 800px) {
|
|
.column {
|
|
-ms-flex: 50%;
|
|
flex: 50%;
|
|
max-width: 50%;
|
|
}
|
|
|
|
#clockwise {
|
|
display: inline;
|
|
}
|
|
|
|
#topbottom {
|
|
display: none;
|
|
}
|
|
|
|
#leftright {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
|
|
@media screen and (max-width: 600px) {
|
|
.column {
|
|
-ms-flex: 100%;
|
|
flex: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#clockwise {
|
|
display: none;
|
|
}
|
|
|
|
#topbottom {
|
|
display: inline;
|
|
}
|
|
|
|
#leftright {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
table {
|
|
font-size: 30px;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.abstractTitle {
|
|
font-size: 30px !important;
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
body {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.footnotes {
|
|
margin-top: 50px;
|
|
font-size: 30px;
|
|
}
|
|
|
|
|
|
.bodyEuDay {
|
|
background-color: #003399;
|
|
color: gold;
|
|
|
|
}
|
|
|
|
.bodyEuDay a {
|
|
color: #b8860b;
|
|
|
|
}
|
|
|
|
.bodyNATODay a {
|
|
color: #004990;
|
|
}
|
|
|
|
|
|
.bodyEuDay table {
|
|
border-color: gold;
|
|
|
|
}
|
|
|
|
/*
|
|
.bodyRepublicDay table {
|
|
border-image: linear-gradient(166deg, rgba(0, 147, 68, 1) 0%, rgba(0, 147, 68, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 67%, rgba(207, 39, 52, 1) 67%, rgba(207, 39, 52, 1) 100%);
|
|
|
|
}*/
|
|
|
|
.bodyRepublicDay a {
|
|
color: #008c45;
|
|
}
|
|
|
|
.greyFilter {
|
|
filter: grayscale(100);
|
|
}
|
|
|
|
|
|
#pronounce>img {
|
|
width: 20px;
|
|
display: inline;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#pronouceBox {
|
|
opacity: 0;
|
|
animation: 3s fadein forwards;
|
|
}
|
|
|
|
header {
|
|
max-width: 85vw;
|
|
}
|
|
|
|
.blueColor {
|
|
filter: invert(16%) sepia(43%) saturate(5106%) hue-rotate(196deg) brightness(98%) contrast(102%);
|
|
}
|
|
|
|
.redColor {
|
|
filter: invert(15%) sepia(50%) saturate(5408%) hue-rotate(352deg) brightness(85%) contrast(122%);
|
|
}
|
|
|
|
.greenColor {
|
|
filter: invert(41%) sepia(83%) saturate(6654%) hue-rotate(146deg) brightness(94%) contrast(102%);
|
|
}
|
|
|
|
.goldColor {
|
|
color: black;
|
|
filter: invert(69%) sepia(71%) saturate(860%) hue-rotate(2deg) brightness(110%) contrast(105%);
|
|
}
|
|
|
|
.darkGoldColor {
|
|
color: black;
|
|
filter: invert(44%) sepia(96%) saturate(655%) hue-rotate(14deg) brightness(96%) contrast(91%);
|
|
}
|
|
|
|
.baseColor {
|
|
filter: none;
|
|
} |