/* S&K Suppliment styles */

/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #0076c0;
  text-align:center;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: #0076c0;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 8px 8px;
	transition: 0.3s;
	font-size: 14px;
	width: 33%;
	color: white;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #0086D7;
}

.tab button:focus {
	background-color: #1AA9FF;
}

/* Create an active/current tablink class */
.tab button.activeN {
	background-color: #303a52;
    color: white;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px;
	background-repeat: no-repeat;
	background-color: #303a52;
	color: white;
}

/* Floats Cycle, Theme, Threat Icon Images and defines accident ID div */
.imgFRight {
	float: right;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
	width: 134px;
	font-size: 11px;
	padding: 5px 0px 5px 5px;
	background-color: #9A9A9A;
	color: #FFF;
}

.imgFLeft {
	float: left;
	padding-right: 8px;
}

.imgDes {
	width: 111%;
	margin-left: -18px;
	font-size: 11px;
	padding: 10px;
	background-color: #9A9A9A;
	color: #FFF;
}

/* Collapsible Categories */
.collapsible {
	background-color: #0076c0;
	color: white;
	cursor: pointer;
	padding: 10px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 12px;
}

.notcollapsible {
	background-color: #0076c0;
	color: white;
	padding: 10px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 12px;
}

.active, .collapsible:hover {
	background-color: #0086D7;
}

.collapsible:focus {
	background-color: #1AA9FF;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.catcontent {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: 0.4s ease-in-out;
	background-color: #D5D7DB;
	color: black;
	opacity: 0;
}

.catcontent.show {
	opacity: 1;
	max-height: 800px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
</style>

.opencatcontent {
	padding: 6px 18px 18px 18px;
	max-height: inherit;
	overflow: visible;
	transition: max-height 0.4s ease-out;
	background-color: #D5D7DB;
}


/* Boeing Stats box */
.statcontent {
	padding: 18px;
	float:right;
	background-color: #545965;
	margin-right: 10px;
	margin-left: 20px;
}

/* Buttons */

.btn {
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  padding: 8px 10px; /* Add some padding */
  cursor: pointer; /* Add a pointer cursor on mouse-over */
}

.default {
	background-color: #F7F7F7;
	color: black;
} /* Gray */
.default:hover {background: #FFF;}
.default:focus {
	background: #FFF;
	outline: solid;
	outline-color: #0086D7;
}

/* Home Page perspective main container with cloud background */
#Library_Select {
	background-image: url(../images/HP_Clouds.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: 340px;
	padding-left: 70px;
}

/* Home Page overlay containers */
#Select_Container {
	border-radius: 10px 30px;
	background-repeat: repeat;
	padding: 20px;
	width: 204px;
	height: 250px;
	background-image: url(../images/HP_Container_Bg.png);
}

/* Cycle, theme, threats pages overlay containers */
#Select_Container_Grey {
	border-radius: 10px 30px;
	background-repeat: repeat;
	padding: 20px;
	width: 204px;
	height: 250px;
	background-image: url(../images/HP_Container_Bg_Grey.png);
}

/* 3Column layout for home pages */
.HPthreeColumn {width:100%; overflow:hidden;}
.HPthreeColumn .HPleftColumn, .HPthreeColumn .HPmiddleColumn, .HPthreeColumn .HPrightColumn {width:32%; overflow:hidden;}
.HPthreeColumn .HPleftColumn {
	float:left;
	padding-right:1px;
}
.HPthreeColumn .HPmiddleColumn {float:left; padding-right:1px;}
.HPthreeColumn .HPrightColumn {float:left;}
.HPthreeColumn .H3 {
	color: #FFF;
}

/* 5Column layout support */
.fiveColumn {width:100%; overflow:hidden;}
.fiveColumn .leftColumn, .fiveColumn .middleColumn, .fiveColumn .rightColumn {width:19.5%; overflow:hidden;}
.fiveColumn .leftColumn {
	float:left;
	padding-right:5px;
}
.fiveColumn .middleColumn {float:left; padding-right:5px;}
.fiveColumn .rightColumn {float:left;}
.fiveColumn .H3 {
	color: #FFF;
}

/* Container layout for home page media */
.HPMedia {
	background-color: #FFFFFF;
	padding: 5px;
	font-size: 11px;
	text-align: center;
	margin-top: 20px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}