/* css/modules/banner_interactive.css for Priority Management
   styles for interactive header banners */

.interactive-banner {
	display: none;
	height: 459px;
	overflow: hidden;
	position: relative;
	width: 100%;
	}
h1 {
	display: none;
  }
.interactive-banner .slides {
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
	}
.interactive-banner .slide {
	position: relative;
  }
.interactive-banner .slide-image {
	margin: 0;
  }
.interactive-banner .description {
	color: #fff;
	font-size: 18px;
	height: 417px;
	left: 20px;
	line-height: 1.3em;
	padding: 30px 12px 12px;
	position: absolute;
	top: 0;
	width: 332px;
	z-index: 9;
	}
.interactive-banner .description p.question {
	font-family: 'prioritysanssemibold', sans-serif;
  }
.interactive-banner .description p.do-this {
	font-family: 'priorityseriflightmedium', serif;
	font-size: 24px;
  line-height: 1.3em;
	}
	
.interactive-banner .description a {
	color: #fff;
	}
.interactive-banner .navigation {
	bottom: 5px;
	left: 46px;
	position: absolute;
	z-index: 9;
	}
.interactive-banner .navigation ul {}
.interactive-banner .navigation li {
	margin: 0 3px;
  position: relative;
	}
.interactive-banner .navigation img {
	border: 3px #fff solid;
	height: 38px;
	width: 38px;
	}
.interactive-banner .navigation .indicator {
	background: url(/_/img/sprites.png) center -250px no-repeat;
	display: none;
  height: 7px;
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 9;
	}
.interactive-banner .navigation li.current .indicator {
	display: block;
	}
.interactive-banner .navigation .nav-arrow {
	background-image: url(/_/img/sprites.png);
	height: 37px;
	position: absolute;
	z-index: 9;
	top: 5px;
	width: 36px;
	}
.interactive-banner .navigation .back {
	background-position: 0 0;
	left: -23px;
	}
.interactive-banner .navigation .forward {
	background-position: 100% 0;
	right: -23px;
	}
.working-smart {
	background-image: url(/_/img/hdrs-bk.png);
	background-position: 0 0;
	height: 37px;
	width: 214px;
	}

.working-smart .img-replacement {
	background-repeat: no-repeat;
	display: block;
	overflow: hidden;
	text-indent: -999em;
	}
span.banner-bold {
	font-family: 'priorityserifmedium', serif;
	}
.working-smart-lrg {
	background-image: url(/_/img/hdrs-lrg.png);
	background-position: 0 0;
	height: 55px;
	width: 310px;
	}
.statement-lrg {
	font-size: 130%;
	}
.interactive-banner .description p.do-this-lrg {
	font-family: 'priorityseriflightmedium', serif;
	font-size: 30px;
  line-height: 1.3em;
	}

/* 786px < width < 1024px */
@media screen and (min-width : 768px) and (max-width : 1043px) {
	.interactive-banner {
		height: 353px;
	  }
	.interactive-banner .description {
		font-size: 14px;
		height: 329px;
		left: 15px;
		width: 250px;
		}
	.interactive-banner .description p.do-this {
		font-size: 20px;
	  }
  .interactive-banner .navigation {
		left: 37px;
		}
	.interactive-banner .navigation img {
		height: 29px;
		width: 29px;
		}
	.interactive-banner .navigation .nav-arrow {
		height: 31px;
		top: 5px;
		width: 32px;
		}
	.interactive-banner .navigation .back {
		background-position: 0 -50px;
		left: -18px;
		}
	.interactive-banner .navigation .forward {
		background-position: 100% -50px;
		right: -18px;
		}
	.working-smart-lrg {
		background-image: url(/_/img/hdrs-lrg.png);
		background-position: 0 0;
		height: 55px;
		width: 310px;
		}
	.statement-lrg {
		font-size: 130%;
		}
	.interactive-banner .description p.do-this-lrg {
		font-family: 'priorityseriflightmedium', serif;
		font-size: 30px;
	  	line-height: 1.3em;
		}
	.interactive-banner .navigation li {
		margin: 0 2px;
  		position: relative;
		}
	.working-smart-lrg {
		background-image: url(/_/img/hdrs.png);
		background-position: 0 0;
		height: 37px;
		width: 214px;
		}
}

/* width < 786px */
@media screen and (max-width : 767px) {
	.interactive-banner {
		height: 585px;
	  }
	.interactive-banner .slide {
		width: 447px;
  	}
	.interactive-banner .description {
		background: #fff !important;
		color: #90847d;
		height: auto;
		left: auto;
		margin-top: 2px;
		padding: 12px 20px;
		position: static;
		width: auto;
		}
	.interactive-banner .description p.do-this {
		background-color: #90847d;
		color: #fff;
		padding: 12px 15px;
	  }
	.interactive-banner .description a {
		color: #90847d;
		}
	.interactive-banner .navigation {
		bottom: auto;
		display: table;
		left: auto;
		margin: 520px auto 0;
		position: relative;
		}
	.interactive-banner .navigation ul {
		display: inline-block;
		margin: 0 auto;
	  }
	.interactive-banner .navigation li {
		margin: 0 5px;
		}
	.interactive-banner .navigation img {
		height: 54px;
		width: 54px;
		}
	.interactive-banner .navigation .nav-arrow {
		height: 44px;
		top: 8px;
		width: 43px;
		}
	.interactive-banner .navigation .back {
		background-position: 0 -100px;
		left: -26px;
		}
	.interactive-banner .navigation .forward {
		background-position: 100% -100px;
		right: -26px;
		}
}