Module:Climate chart/styles.css

/* */ /* TODO: All font-size declarations need review or something */ .climate-chart { border: 1px solid #c0c0c0; background-color: #f8f9fa; color: black; padding: 0.5em 0.7em; font-size: 88%; line-height: 1.5em; box-sizing: border-box; }

@media (min-width: 720px) { .climate-chart { /* @noflip */ margin: 0.5em 1em 0.5em 0; width: 22em; }	.climate-chart-right { /* @noflip */ margin: 0.5em 0 0.5em 1em; /* @noflip */ float: right; }	.climate-chart-left { /* @noflip */ float: left; } }

.climate-chart-title { font-weight: bold; }

.climate-chart-secondary-title, .climate-chart-explainer { font-weight: bold; font-size: 90%; }

.climate-chart-internal { text-align: center; padding: 0.2em; font-size: 90%; width: 100%; border-spacing: 0; }

.climate-chart-internal th { width: 1.5em; vertical-align: top; font-weight: normal; }

.climate-chart-internal td { vertical-align: top; }

.climate-change-explain-bar-temp, .climate-change-explain-bar-precip { font-size: 90%; }

.climate-change-explain-bar-temp > span { color: red; }

.climate-change-explain-bar-precip > span { color: #ace; }

.climate-chart-column { width: 1.6em; height: 17em; position: relative; padding: 0; margin: 0; }

.climate-chart-column-spacer, .climate-chart-column-spacer2 { height: 0; width: 1.6em; position: absolute; left: 0; padding: 0; margin: 0; }

.climate-chart-column-spacer { bottom: 2em; border-bottom: dotted 1px #abc; }

.climate-chart-column-spacer2 { bottom: 8em; border-bottom: dotted 1px #cba; }

.climate-chart-column-precip-bar { background: #ace; position: absolute; bottom: 2em; left: .2em; width: 1.2em; overflow: hidden; }

.climate-chart-column-value { position: absolute; left: 0; width: 1.6em; height: 1.5em; }

.climate-chart-column-precip { color: blue; bottom: .5em; text-align: center; }

.climate-chart-column-precip > span { font-size: 70%; }

.climate-chart-column-temp-bar { background: #e44; position: absolute; left: .4em; width: 0.8em; overflow: hidden; }

.climate-chart-column-high-temp, .climate-chart-column-low-temp { color: red; }

.climate-chart-column-high-temp > span, .climate-chart-column-low-temp > span { font-size: 80%; }