/* ================================
HTML elements 
================================ */
*,
html	{ margin:0; padding:0; border:none; }
body	{ background:#F8FCFF; color:#000; height:100%; width:100%; }
a			{ color:#036; }
th		{ font-weight:bold; }

/* ================================
CONTENT ELEMENTS
================================ */
.city					{ font-size:110%; line-height:100%; font-weight:bold; padding-right:2px; }
.city a				{ text-decoration:none; font-weight:normal; }
.city a:hover { text-decoration:underline; color:#468; }

header,
footer				{ position:fixed; left:0; width:100%; line-height:2em; background:#363; color:#FFF; padding:4px; z-index:999; }

header				{ top:0; height:22px; }

nav						{ width:100%; height:2em; margin:0; padding:0; overflow:auto; }
nav ul				{ }
nav ul li			{ list-style:none; float:left; margin:0 1.5em 0 0; font-size:16px; font-weight:bold; text-shadow:2px 2px 2px #030; }
nav ul li a		{ font-weight:normal; text-shadow:none; text-decoration:none; background:#363; color:#FFF; }
nav ul li a:hover	{ background:#FFF; color:#030; }

article				{ position:absolute; left:0; top:38px; width:98%; padding:4px 4px 42px 4px; font-size:13px; }

#title				{ font-size:133%; font-weight:bold; text-align:left; }
#time					{ text-align:right; }

.legend				{ text-align:center; }
.legend th		{ height:14px; }
.legend td		{ height:24px; line-height:15px; }

footer				{ bottom:0; height:30px; font-size:88%; text-align:center; }
footer a			{ color:#FFF; text-decoration:none; display:inline-block; }

#json					{ display: none; }
/* ================================
MISCELLANEOUS
================================ */
.asof								{ text-align:left; }

.coolest						{ background:#DEF; border:1px solid #678; }
.condition					{ width:6em; line-height:1em; }
.condition div			{ width:100%; }
.condition .graphic	{ line-height:0; }

.graphic img				{ height:5px; margin-top:2px; }
.icon								{ width:52px; background:#BDF; } /* bg color matches WU icon bg color */
.left								{ text-align:left; }
.reading						{ height:3em; text-align:center; display:flex; justify-content:center; align-items:center; }
.times							{ vertical-align:text-top; text-align:left; }
.times span					{ display:inline-block; width:1rem; text-align:center; font-weight:600; }
.top								{ vertical-align:text-top; }
.warmest						{ background:#FDD; border:1px solid #966; }
.note								{ max-width:8rem; white-space:normal; }