244 lines
3.5 KiB
CSS
244 lines
3.5 KiB
CSS
|
body {
|
||
|
font-size: 10.5pt;
|
||
|
line-height: 1.75em;
|
||
|
font-family: Verdana, sans-serif, Arial;
|
||
|
color: #000000;
|
||
|
margin:0 auto;
|
||
|
padding:0;
|
||
|
}
|
||
|
html {
|
||
|
overflow-y: scroll;
|
||
|
}
|
||
|
.container {
|
||
|
width: 100%;
|
||
|
margin-top: 69px;
|
||
|
margin-bottom: 55px;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
header {
|
||
|
color: black;
|
||
|
border-bottom: 1px solid #ccc!important;
|
||
|
margin-bottom: 40px;
|
||
|
overflow: hidden;
|
||
|
display: block;
|
||
|
margin:auto;
|
||
|
}
|
||
|
|
||
|
header img {
|
||
|
max-width: 100%;
|
||
|
width:100%;
|
||
|
height: auto;
|
||
|
animation: animations linear 50s infinite;
|
||
|
}
|
||
|
#content {
|
||
|
display: inline-block;
|
||
|
width:100%;
|
||
|
}
|
||
|
.section {
|
||
|
padding: 0 6px;
|
||
|
margin: 6px 0;
|
||
|
float: left;
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
overflow: auto;
|
||
|
}
|
||
|
.box_full {
|
||
|
padding: 0 6px;
|
||
|
margin: 6px 0;
|
||
|
float: left;
|
||
|
width: 100%;
|
||
|
#height:400px;
|
||
|
}
|
||
|
|
||
|
.box {
|
||
|
padding: 0 6px;
|
||
|
margin: 6px 0;
|
||
|
float: left;
|
||
|
width: 49.99999%;
|
||
|
}
|
||
|
.box img {
|
||
|
width: 100%;
|
||
|
max-width: 400px;
|
||
|
}
|
||
|
.box_tree {
|
||
|
padding: 0 6px;
|
||
|
margin: 6px 0;
|
||
|
float: left;
|
||
|
width: 33.33333%;
|
||
|
}
|
||
|
.box_tree img {
|
||
|
width: 100%;
|
||
|
max-width: 400px;
|
||
|
}
|
||
|
chart {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
.desc {
|
||
|
padding: 15px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
text.highcharts-credits {
|
||
|
display: none;
|
||
|
}
|
||
|
* {
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
table {
|
||
|
border-collapse: collapse;
|
||
|
width: 100%;
|
||
|
empty-cells: hide;
|
||
|
}
|
||
|
table, td, th {
|
||
|
border: 1px solid black;
|
||
|
}
|
||
|
th {
|
||
|
height: 50px;
|
||
|
}
|
||
|
tr.color td{
|
||
|
background-color: lightgray;
|
||
|
}
|
||
|
|
||
|
footer {
|
||
|
padding: 1em;
|
||
|
color: white;
|
||
|
background-color: #333;
|
||
|
clear: left;
|
||
|
text-align: center;
|
||
|
position: fixed;
|
||
|
z-index:1;
|
||
|
left: 0;
|
||
|
bottom: 0;
|
||
|
width: 100%;
|
||
|
}
|
||
|
@keyframes animations {
|
||
|
0% {filter: hue-rotate(0deg);}
|
||
|
50% {filter: hue-rotate(180deg);}
|
||
|
100% {filter: hue-rotate(360deg);}
|
||
|
}
|
||
|
|
||
|
@media screen and (max-width: 1000px) {
|
||
|
.box_tree {
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
@media screen and (max-width: 800px) {
|
||
|
.box {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.box_tree {
|
||
|
width: 100%;
|
||
|
}
|
||
|
header img {
|
||
|
max-width: initial;
|
||
|
width:auto;
|
||
|
height:120px;
|
||
|
margin: 0 -250px;
|
||
|
}
|
||
|
footer {
|
||
|
left: auto;
|
||
|
bottom: auto;
|
||
|
position: static;
|
||
|
z-index:0;
|
||
|
}
|
||
|
.container {
|
||
|
margin-bottom: 0px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
smiley {
|
||
|
font-size: 30px;
|
||
|
line-height: 36px;
|
||
|
width: 150px;
|
||
|
display: inline-block;
|
||
|
text-align: right;
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
smiley::before {
|
||
|
content: '';
|
||
|
display: inline-block;
|
||
|
width: 36px;
|
||
|
height: 36px;
|
||
|
vertical-align: top;
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
}
|
||
|
|
||
|
.positive {
|
||
|
color: #5C5;
|
||
|
}
|
||
|
.positive::before {
|
||
|
background: url(/images/positive.png);
|
||
|
}
|
||
|
|
||
|
.neutral {
|
||
|
color: #555;
|
||
|
}
|
||
|
.neutral::before {
|
||
|
background: url(/images/neutral.png);
|
||
|
}
|
||
|
|
||
|
.negative {
|
||
|
color: #C55;
|
||
|
}
|
||
|
.negative::before {
|
||
|
background: url(/images/negative.png);
|
||
|
}
|
||
|
|
||
|
|
||
|
input[type="checkbox"] {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
input:checked + b {
|
||
|
background: #DDF;
|
||
|
}
|
||
|
|
||
|
input + b {
|
||
|
width: 70px;
|
||
|
display: inline-block;
|
||
|
color: #333;
|
||
|
background: #eee;
|
||
|
margin: 0 10px 10px 0;
|
||
|
line-height: 30px;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
header img, input + b {
|
||
|
animation: animations linear 50s infinite;
|
||
|
}
|
||
|
|
||
|
iframe {
|
||
|
display:block;
|
||
|
width:100%;
|
||
|
min-height:200px;
|
||
|
max-width:1000px;
|
||
|
float:none;
|
||
|
margin:auto;"
|
||
|
}
|
||
|
|
||
|
|
||
|
.tooltip {
|
||
|
display: inline-block;
|
||
|
border-bottom: 1px dotted black;
|
||
|
}
|
||
|
|
||
|
.tooltip .tooltiptext {
|
||
|
visibility: hidden;
|
||
|
width: 200px;
|
||
|
background-color: black;
|
||
|
color: #fff;
|
||
|
text-align: center;
|
||
|
border-radius: 6px;
|
||
|
padding: 5px 0;
|
||
|
|
||
|
/* Position the tooltip */
|
||
|
position: absolute;
|
||
|
z-index: 2;
|
||
|
}
|
||
|
|
||
|
.tooltip:hover .tooltiptext {
|
||
|
visibility: visible;
|
||
|
}
|