/* Vars */
/* 	Width of tabs when showing just the letter, and the full word.

	TODO(?): It would be better if the width wasn't set to a hard pixel value. But I can't think
	of a quick way to animate that -- since width:auto will instantly resize the tab to
	the width of its content. I mean, not without some messy combination of jQuery and a
	duplicate DOM node with visibility:hidden. Yuck.
*/
/* Acronym animations (in the top tabs) */
.nav-tabs {
  background-color: #ededed;
}

.nav-tabs li {
  margin-bottom: -2px;
  margin-left: -2px;
}

.nav-tabs li a {
  border-right: 1px solid #bababa;
}

.nav-tabs li.acronym {
  transition: width .3s;
  overflow-x: hidden;
  width: 40px;
}

.nav-tabs li.acronym a {
  color: #005f7a;
  border: none;
}

.nav-tabs li.acronym a .acronym__letter {
  display: block;
}

.nav-tabs li.acronym a .acronym__full-word {
  display: none;
}

.nav-tabs li.acronym a:focus, .nav-tabs li.acronym a:hover {
  border: none;
  background-color: #ffdc92;
  color: #922642;
}

.nav-tabs li.acronym.active {
  width: 120px;
}

.nav-tabs li.acronym.active a {
  background-color: #007FA3;
  color: #F5F5F5;
}

.nav-tabs li.acronym.active a .acronym__letter {
  display: none;
}

.nav-tabs li.acronym.active a .acronym__full-word {
  display: block;
}

/* Tab contents, generic */
.tab-content {
  background-color: #F5F5F5;
  padding: 0;
}

.tab-pane {
  padding: 0 25px;
  width: 100%;
  height: 100%;
}

.img-thumbnail.pull-right {
  margin-left: 25px;
}

/* intro slide */
#survival-strategies {
  padding: 0;
  background: #fff url(../images/bk_colourMap.jpg) right no-repeat;
  /* text links to tab contents */
}

#survival-strategies .text-content {
  width: 100%;
  height: 100%;
  max-width: 425px;
  padding: 20px;
  border: 1px solid #f3f1f1;
  background-color: #F5F5F5;
}

#survival-strategies .text-content ul {
  list-style: none;
}

#survival-strategies .link-to-tab {
  color: #007394;
  font-size: 1.8rem;
}

/* Generic stuff */
.hidden {
  display: none;
}