/*
Styles for HGR Lobby TV - Updated 2020-08-04
*/

html {
	width: 100%;
	height: 100%;
	background-color: #fff;
}

body {
	width: 100%;
	height: 100%;
	background-color: #fff;
	color: #000;
}

.logo {
	float: left;
	width: 15%;
	height: 15%;
	padding: .5%;
	background-color: #eee;
}

.tagline {
	float: left;
	width: 50%;
	height: 15%;
	background-color: #eee;
}

.tagline-inner {
	font-size: 40px;
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	color: #3a53a4;
	padding: 5% 4%;
}

.date-time {
	float: left;
	width: 15%;
	height: 15%;
	padding: .5%;
	background-color: #eee;	
	text-align: center;
	color: #000;
}

.date-time .clock {
	font-size: 69px;
}

.date-time #Date {
	font-size: 18px;
}

.date-time .ampm {
  font-size: 35px;
  margin-left: 10px;
}

.current-weather {
	float: left;
	width: 20%;
	height: 15%;
	padding: .5%;
	background-color: #eee;
	text-align: center;	
}

.wu-current-conditions .wu-wrapper {
	padding-top: 1% !important;
}

.wu-current-conditions .wu-forecast-wrapper div {
	margin-bottom: 0 !important;
}

.wu-current-conditions .wu-day-title {
	margin-top: 15px !important;
	font-size: 69px !important;
	font-family: inherit !important;
}

.wu-current-conditions .wu-forecast-body {
	margin-bottom: 0 !important;
}

.wu-current-conditions .wu-day-title small {
  margin-left: -40px !important;
}

.wu-current-conditions .wu-icon {
	
}

.wu-current-conditions .wu-cond-text {
	float: none !important;
	width: 100% !important;
	text-align: center !important;
	font-size: 18px !important;
}

.middle-wrapper-left {
	float: left;
	width: 70%;
	height: 70%;
}

.middle-wrapper-right {
	float: left;
	width: 30%;
	height: 70%;
}

.page-content {
	width: 100%;
	height: 100%;
	padding: 2%;
	overflow: hidden;
	background-color: #fff;
	font-size: 125%;
}

.promos {
	width: 100%;
	height: 50%;
	background-color: #747474;
	overflow: hidden;
}

#promo-gallery {
	height: 100%;
}

#promo-gallery .carousel-inner {
	height: 100%;
}

#promo-gallery .carousel-inner .item {
	height: 100%;
}

.carousel-inner>.item>a>img, 
.carousel-inner>.item>img {
	display: inherit !important;
	max-width: 100% !important;
	width: 100% !important;
	max-height: 100% !important;
	height: 100% !important;
}

.traffic {
	width: 100%;
	height: 50%;
	background-color: #3a53a4;
	color: #fff;
	position: relative;
	padding-top: 40px;
	padding-bottom: 20px;
}

.traffic-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #3a53a4;
	padding: 7px 0;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

.traffic-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 18px;
	padding: 7px 0;
	text-align: center;
}

.traffic-footer img {
	display: inline-block;
}

.traffic ul {
	width: 1000000000px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.traffic ul li {
	list-style: none;
	margin: 0;
	padding: 25px;
	float: left;
	width: 575px;
	font-size: 20px;
}

.traffic ul li strong {
	color: #fbe921;
}

.traffic ul li a {
	color: #fff;
}

#tweets {
	overflow: hidden;
}

.news {
	float: left;
	width: 100%;
	height: 15%;
	padding: 2% 0;
	background-color: #19317f;
	color: #fff;
}

#webTicker li {
	margin-right: 20px !important;
	padding-right: 20px !important;
	font-size: 42px;
	font-weight: bold;
}

#webTicker li:after {
	position: relative;
	top: 5px;
	left: 20px;
	content: url(bullet.png);
}

.weather {
	float: left;
	width: 30%;
	height: 15%;
	background-color: #fff;
	color: #fff;
}

.wu-copyright,
.wu-copyright a,
.wu-copyright img {
	display: none !important;
}

.wu-forecast-wrapper {
	height: 100% !important;
}

.wp_wunderground table {
	width: 100% !important;
	height: 100% !important;
	color: #000;
}

.wp_wunderground table td {
	text-align: center;
	align-content: center;
	border-right: 1px solid #ccc;
	height: 100% !important;
	padding: 12px 5px !important;
	width: 33% !important; 
}

.wp_wunderground table td:last-of-type {
	border-right: 0;
}

.wp_wunderground .wu-day-title {
	color: #000 !important;
}

.wp_wunderground .wu-cond-text {
	color: #000 !important;
}

.wp_wunderground .wu-cond-high {
	display: block !important;
	width: 100% !important;
	padding-right: 0 !important;
}

.wp_wunderground .wu-cond-split {
	display: none !important;
}

.wp_wunderground .wu-cond-low {
	display: block !important;
	width: 100% !important;
}






/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}