/* --------------- Banner --------------- */
/* There is a separate class for the banner on breakout pages - .breakoutbanner. Be sure that it gets updated when necessary. It applies to pages that call the breakoutbanner.html include instead of banner.html */
.banner {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d7eae1+0,94d0b4+20,00a664+40 */
	background: #e52027; /* Old browsers */
	background-image: url('/heat/images/sun.png'), url('/heat/images/worker.jpg');
	background-size: 128px, 300px;
	background-position: 236px, 0px -20px;
	background-repeat: no-repeat;
	width:auto;
	height:auto;
	display:block;
	padding:25px 0;
	box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.1) inset;
}

.breakoutbanner	{
	background-image: url('/heat/images/sun.png');
	background-size: 128px;
	background-position: 125px;
	background-repeat: no-repeat;
	width:auto;
	height:auto;
	display:block;
	padding:25px 0;
	box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.1) inset;
}

.banner .row-fluid {
	margin-bottom:0;
}

.banner h3 {
	font-size:3em;
	margin:0.25em 0 0 60px;
	line-height:1em;
	color:#fff;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.banner h3 a, .banner h3 a:visited { text-decoration: none; color: #fff; }
.banner h3 a:hover { text-decoration: underline; color: #fff; }


@media (max-width:1199px) and (min-width:980px) {
	.banner h3 {
		font-size:2.5em;
		margin:0.4em 0 5px 125px;
		color:#fff;
	}
	.banner.breakoutbanner h3 {
		font-size:2.5em;
		margin:0.4em 0 5px 100px;
		color:#fff;
	}

	.banner h3 .smaller {
		color:#fff;
		font-size:0.6em;
		font-weight:100;
	}
}
@media (max-width:979px) and (min-width:768px) {
	.banner h3 {
		font-size:2em;
		margin:10px 0 5px 270px;
		color:#fff;
	}
	.banner.breakoutbanner h3 {
		font-size:2em;
		margin:10px 0 5px 100px;
		color:#fff;
	}
	.banner	{
		background-size: 100px, 250px;
		background-position: 200px, 0px -20px;
	}
	.banner.breakoutbanner	{
		background-size: 100px;
		background-position: 100px;
	}
}

@media (min-width:405px) and (max-width:767px) {
	.banner h3 {
		font-size:1.5em;
		margin:5px 0 5px 200px;
		color:#fff;
	}
	.banner	{
		background-image: url('/heat/images/worker.jpg');
		background-size: 200px;
		background-position: -10px 0px;
		min-height: 120px;
		max-height: 200px;
		padding: 10px;
	}
}
@media (min-width:600px) and (max-width:767px) {
	.banner h3 {
		margin-top: 30px;
		font-size:2em;
	}
}

@media (min-width:331px) and (max-width:404px) {
	.banner h3 {
		font-size:1.5em;
		margin:5px 0 5px 180px;
		color:#fff;
	}
	.banner	{
		background-image: url('/heat/images/worker.jpg');
		background-size: 210px;
		background-position: -40px 0px;
		max-height: 200px;
		padding: 2px;
	}
}

@media (max-width:330px) {
	.banner h3 {
		font-size:1.5em;
		margin:0;
		color:#fff;
	}
	.banner	{
		background-image: none;
		padding: 5px;
	}
}

@media (max-width:767px) {
	.banner.breakoutbanner h3 {
		font-size:1.75em;
		margin:10px 0 0 100px;
		color:#fff;
	}
	.banner.breakoutbanner	{
		background-image: url('/heat/images/sun.png');
		background-size: 80px;
		background-position: 25px;
		background-repeat: no-repeat;
		padding: 5px;
		max-height: 200px;
	}
}

.banner h3 .smaller {
	color:#fff;
	font-size:0.6em;
	font-weight:100;
}

/* --------------- Nav Bar --------------- */

.bs-docs-sidenav {
  width: 100%;
  max-width: 280px;
  margin: 10px 0 0;
  padding: 0;
  background-color: #fff;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}

.bs-docs-sidenav > li {
  display: block;	
  padding: 12px 8px;
  border: 1px solid #ccc;
  font-weight: bold;
  margin: 0 0 -1px;
  *width: 190px;
}

.bs-docs-sidenav img {
  max-height: 75px;
}

.bs-docs-sidenav > li > a {
  text-decoration:none;
  color:#000;
}

.bs-docs-sidenav > li > a > small {
  font-weight:normal;
}

.bs-docs-sidenav > li:first-child {
  -webkit-border-radius: 6px 6px 0 0;
     -moz-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child {
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
  position: relative;
  z-index: 2;
	background-color:#dadada;
	font-weight:bold;
	text-decoration:none;
	padding-left:12px;
	padding-right:12px;
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
  float: right;
  margin-top: 2px;
  margin-right: -6px;
  opacity: .25;
}
.bs-docs-sidenav > li:hover {
  background-color: #eee;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
  opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
  
  opacity: 1;
}
.bs-docs-sidenav.affix {
  top: 25px;
}
.bs-docs-sidenav.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 350px;
}
.nav-pills > li > a {
	background-color:#eee !important;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover {
	background-color:#ddd !important;
	color:#000;
	font-weight:bold;
}

@media (min-width: 980px) and (max-width: 1199px) {
.bs-docs-sidenav { max-width: 200px; }
}

@media (min-width: 768px) and (max-width: 979px) {
.bs-docs-sidenav { max-width: 170px; height: auto; }
}

@media (max-width: 767px) {
.bs-docs-sidenav { width: auto; }
}

/* --------------- Sidebar --------------- */

.graybox {
	background-color:#6d6e71;
	padding:10px;
}
.graybox:hover {
	background-color:#8F9093;
}
.graybox a {
	color:#fff;
	font-weight:bold;
	text-decoration:none;
}
.graybox p {
	margin-top:10px;
	margin-bottom:0;
	line-height:normal;
}

@media (min-width: 1200px) {
.iehack	{
	height: 60px;
}
}

@media (min-width: 980px) and (max-width: 1199px) {
.iehack	{
	height: 70px;
}
}

@media (min-width: 768px) and (max-width: 979px) {
.iehack	{
	height: 110px;
}
}

#heatbody h4:not(:first-child)	{
	margin-top: 1em;
}

@media (min-width: 1200px) {
.youtube	{
	height: 150px;
}
.youtube .play	{
	margin-top: -18px !important;
	opacity: 1 !important;
}
}

@media (min-width: 980px) and (max-width: 1199px) {
.youtube	{
	height: 125px;
}
}

@media (min-width: 768px) and (max-width: 979px) {
.youtube	{
	height: 90px;
}
}


@media (max-width: 767px) {
.youtube	{
	height: 375px;
	background-color: rgba(0,0,0,0) !important;
}

.youtube .thumb	{
	position: static !important;
}
.youtube .thumb	{
	margin-top: 0 !important;
	top: 30% !important;
}
}