/* Wrapper CSS */
div#detail {
  --tile-width: 100vw;
  --main-icon-width: calc( .6 * var( --tile-width ) );
  --icon-width: calc( .0725 * var( --tile-width ) );
  --font-size: calc( .04 * var(--tile-width) );
  --border-width: calc( .2 * var( --cubit ) );
  --border-style: solid;
  --border-color: var( --cg6 );
  --border: var( --border-width ) var(--border-style) var(--border-color);

  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
}

div#detail section.detail-wrapper {
  --astro-width: calc( 3.75 * var( --icon-width ) );
  --temp-width: calc( 2.3275 * var( --icon-width ) );
  --astro-temp-width: calc( calc( var( --astro-width ) + var(--temp-width) ) + var(--border-width) );
  --cloud-wind-width: calc( var(--tile-width ) - calc( var( --astro-temp-width) + var( --border-width ) ) );
  position: absolute;
  top: 50%;
  border-top: var( --border-width);
  border-bottom: var( --border-width);
  font-size: 0;
  transform: translateY(-50%);
}

div#detail h1.loc-title {
  padding: calc( 1.5 * --tile-width) 0;
  width: 100%;
  font-size: calc( .08 * var( --tile-width ) );
  background-color: rgba( var( --cgn6 ), .1);
  color: var( --cg6 );
  text-shadow: 2px 2px 5px var( --cg1 );
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  border-bottom: var( --border );
  font-style: italic;
}

/* Main icon and temperature CSS */
div#detail div.main-details {
  width: var( --tile-width );
  height: var( --main-icon-width );
  background-color: rgba( var(--cgn6 ), .4 );
  border-bottom: var( --border );
  overflow: hidden;
}

div#detail div.icon-wrapper {
  display: inline-block;
  width: var( --main-icon-width );
  height: var(--main-icon-width );
}

div#detail div.icon-wrapper > img {
  width: var( --main-icon-width );
}

div#detail aside.main-temp {
  --main-temp-width: calc( var( --tile-width ) - calc( var( --main-icon-width ) + var( --border-width  ) ) );
  display: inline-block;
  width: var( --main-temp-width );
  height: var( --main-icon-width );
  right: var( --border-width );
  border-left: var( --border );
  text-align: right;
  vertical-align: top;
  overflow: hidden;
}

div#detail h3.main-temp-name { font-size: calc( .07 * var( --tile-width ) ); }
div#detail h1.main-temp-value { font-size: calc( .12 * var( --tile-width ) ); }

div#detail h3.main-temp-name {
  display: inline-block;
  margin-top: calc( .03 * var(--tile-width) );
  width: 100%;
  text-align: center;
  vertical-align: text-top;
}

div#detail h1.main-temp-value {
  display: inline-block;
  width: 100%;
  color: var( --c4 );
  font-weight: 100;
  text-align: center;
}

div#detail h1.main-temp-value:first-of-type {
  border-bottom: var( --border );
}

/* Astrology and High / Low Temperature CSS */


div#detail dl.astro-temp {
  display: inline-block;
  list-style: none;
}

div#detail aside.astro {
display: inline-block;
width: var( --astro-width );
border-right: var(--border);
border-left: var( --border )
}

div#detail aside.temp {
display: inline-block;
width: var( --temp-width );
}

div#detail aside.temp svg.thermostat rect.cover,
div#detail aside.temp svg.thermostat g.measure {
    stroke: lightgray;
    stroke-width: 2px;
}

div#detail dl.astro-temp aside.temp img {
  width: calc( .7 * var( --icon-width ) );
  height: var(--icon-width );
}

div#detail dl.astro-temp aside.astro img,
div#detail .cloud-humidity img {
  width: var( --icon-width );
  height: var(--icon-width );
}

div#detail dl.astro-temp,
div#detail .cloud-wind-humidity {
  background-color: rgba( var(--cgn6 ), .4 );
}

div#detail dl.astro-temp dt.temp-icon,
div#detail dl.astro-temp dt.astro-icon {
  vertical-align: middle;
}

div#detail dl.astro-temp span.astro-wrap,
div#detail dl.astro-temp span.temp-wrap {
display: inline-block;
width: 100%;
border-bottom: var( --border );
}

div#detail dl.astro-temp dt {
  display: inline-block;
}

div#detail dl.astro-temp dt.astro-icon + dd {
  width: calc( calc( 2.7325 * var( --icon-width ) ) - var( --border-width ) );
  font-size: var( --font-size );
  vertical-align: middle;
  text-align: right;
}

div#detail dl.astro-temp dt.temp-icon + dd {
  width: calc( calc( 1.6 * var( --icon-width ) ) - var( --border-width ) );
  font-size: var( --font-size );
  vertical-align: middle;
  text-align: right;
}

div#detail dl.astro-temp dt.astro-icon > img {
  position: relative;
  bottom: calc( .1 * var( --icon-width ) );
  left: calc( .0775 * var( --icon-width ) );
  transform: scale( .825 );
}

div#detail dl.astro-temp dt.temp-icon > img {
  margin-left: calc( .025 * var( --icon-width) );
}

div#detail dl.astro-temp dd {
  display: inline-block;
}

/* Clouds, Wind, and Humidity CSS */
div#detail .cloud-wind-humidity {
  --cloud-width: calc( 5.25 * var(--icon-width) );
  display: inline-block;
  width: var( --cloud-wind-width );
  vertical-align: top;
}

div#detail div.clouds {
  display: inline-block;
  width: var( --cloud-width );
  text-align: center;
  border-right: var(--border);
}

div#detail div.clouds span {
  display: inline-block;
}

/* Wind css */
div#detail div.wind-wrapper {
  display: inline-block;
  padding: calc( .0875 * var( --icon-width ) ) 0;
  width: var( --cloud-width );
  border-right: var( --border );
  text-align: center;
  overflow: hidden;
}

div#detail div.wind-wrapper img,
div#detail div.wind-wrapper svg,
div#detail div.cloud-scale-icon img,
div#detail div.table-view-icon img {
  display: inline-block;
  width: calc( .825 * var( --icon-width ) );
  height: calc( .825 * var( --icon-width ) );
}

div#detail span.subscript {
    font-size: .6em;
    vertical-align: sub;
}

div#detail .compass-needle {
  display: inline-block;
}

div#detail .compass {
  vertical-align: middle;
}

div#detail .wind-text {
  display: inline-block;
  width: calc( 3.5 * var( --icon-width ) );
  font-size: var( --font-size );
  text-align: center;
  vertical-align: middle;
}

div#detail .cloud-wind-humidity div.cloud-humidity {
  display: inline-block;
  width: 100%;
  border-bottom: var( --border );
}

div#detail div.humidity-wrapper {
  display: inline-block;
  width: calc( var( --cloud-wind-width ) - calc( var( --cloud-width) + var( --border-width ) ) );
  text-align: center;
}

div#detail div.cloud-scale-icon,
div#detail div.table-view-icon {
  --total-width: calc( var( --cloud-wind-width ) - calc( var( --cloud-width) + var( --border-width ) ) );
  display: inline-block;
  padding: calc( .0875 * var( --icon-width ) ) 0;
  width: calc( calc( var( --total-width ) / 2 ) - var( --border-width ) );
  text-align: center;
}

div#detail div.cloud-scale-icon {
  border-right: var( --border );
}

div#detail span.humidity-text {
  display: inline-block;
  font-size: var( --font-size );
  vertical-align: middle;
}

div#detail span.humidity-text + img {
  transform: scale(.8);
}

div#detail span.humidity-text,
div#detail span.humidity-text + img {
  position: relative;
  left: calc( .1 * var( --icon-width ) );
}

/* cloud wind humidity vertical alignment */
div#detail div.clouds,
div#detail div.wind-wrapper,
div#detail div.humidity-wrapper,
div#detail span.humidity-text + img { vertical-align: middle; }

div#detail div.wind-wrapper img {
  vertical-align: middle;
}

div#detail div.wind-wrapper span.compass-needle {
  vertical-align: middle;
  transform: translateY( calc( .1 * var( --icon-width ) ) );
}

div#detail div.cloud-scale-icon img,
div#detail div.table-view-icon img {
  vertical-align: middle;
}

div#detail div.alert-headline {
	width: var( --tile-width );
	background-color: rgba( var(--cgn6 ), .4 );
	font-size: calc( .725 * var( --font-size ) );
	height: calc( .75 * var(--icon-width) );
	overflow: hidden;
	border-top: var(--border);
}

div#detail span.alert-icon {
  display: inline-block;
	width: var( --icon-width );
	height: 100%;
  text-align: center;
  border-right: var(--border);
  vertical-align: middle;
  cursor: pointer;
}

div#detail span.alert-icon img {
	width: calc( .75 * var(--icon-width));
	height: calc( .75 * var(--icon-width));
}

div#detail div.ticker-wrapper {
  display: inline-block;
  width: calc( var( --tile-width ) - calc( var( --icon-width ) + var( --border-width ) ) );
  height: 100%;
  color: var( --cg1 );
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

div#detail span.headline-text {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  /* text-indent: calc( .2 * var(--icon-width)); */
  animation: ticker 18s linear infinite;
  cursor: pointer;
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%) }
}

div#detail h4.date-time {
  padding: calc( .02 * var(--tile-width) ) 0;
  width: 100%;
  font-size: calc( .04 * var( --tile-width ) );
  background-color: rgba( var( --cgn0 ), .1);
  color: var( --cg6 );
  text-shadow: 2px 2px 5px var( --cg1 );
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  border-top: var( --border );
  font-style: italic;
}

@media screen and ( min-aspect-ratio: 576/650 ) {
  div#detail section.detail-wrapper {
    margin: 55 0 0 0;
    top: 0;
    transform: none;
    padding: 0 0 10% 0;
  }
}

@media screen and ( min-width: 576px ) {
  div#detail h4.date-time {
    padding: calc( .0075 * var(--tile-width) ) 0;
    font-size: calc( .0225 * var( --tile-width ) );
  }
}

@media screen and ( orientation: landscape ) and ( min-width: 992px ) {
  div#detail {
    --tile-width: calc( 100vw / 3 );
  }
  div#detail h4.date-time {
    padding: calc( .0125 * var(--tile-width) ) 0;
    font-size: calc( .0325 * var( --tile-width ) );
  }
}

