/* Style the recipe to guides links with FA icons etc. */

ul.recipe-guidelink:before {
content: "Recipes using this guide:";
	margin-left: -20px;
	font-weight: bold;
}

ul.recipe-guidelink:empty {
display: none;
}



ul.recipe-guidelink {
border: solid 1px #ddd;
	background-color: #f5f5f5;
}


.recipelink::after {
content: "\f6b8"; font-family: 'Font Awesome 5 Pro'; font-weight: 900; vertical-align: super; font-size: smaller; padding-left: 0.2em;
}

/* Back to top button for LONG guides */

.backtotop {
    position: fixed;
    right: 16vw;
    bottom: 4vw;
    border: 2px solid #267788;
    background: white;
    padding: 2px;
} 



/* Style page elements on the guides */

.version {
font-size: smaller!important;
    padding: 2px;
    position: relative;
    bottom: -20px;
}

.nav.intnav-guides > li > a {
    padding: 5px;
}


.sharing {

position: absolute;
    right: 1vw;
    bottom: 0.1vw;
}


/***
 ECS Guides ID7 - Last modified 29/04/20 PT
 
***/

/*** CENTRE CONTENT ***/

	#searchTypeDiv, #tagList{
				display: none;
			}

/* Make the borders on img consistent - no need to add border: 1px anymore 

.column-1 img[style*="border: 1px solid black"] {
    border: 1px solid #5b91b4 !important;
} 

.column-1 img {
    border: 1px solid #5b91b4;
}

/* There are always exceptions, and there is probably a better way to do this! */
/* Hide the borders for img in a specific div 

.column-1 div.noborderimg img {
    border: 0px !important;
}

.column-1 div:not(.noborderimg) img {
    border: 1px solid #5b91b4 !important;
}

*/
/* TagButton */

.tagButton {
			padding: 0 0 1px 5px;
			width: 144px;   
			margin-right: 5px; 
			color: white; 
			float: left; 
			margin-bottom: 6px; 
			font-size: 0.85em;
			border: 0px;
	transition: width height 2s
			}

.tagButton.selected {
box-shadow: 5px 5px 10px black;
	transition: box-shadow 0.2s ease-in-out;
}


button.tagButton:focus {
outline: 3px solid #FBBF48 !important;

}


@media only screen and (max-device-width: 480px)  {
	
/* Make the right column and ToC wrap to the top on very small screens */
.layout-66-33 {    
   	display: flex;
   	flex-wrap: wrap-reverse;
	}

.column-2 {	
	margin-top: 20px;
	column-width: unset;
    width: 100%;
}

/* Make the tag buttons smaller on small screens so there are 2 in a column */
	.tagButton {
	width: 48%; !important;
	}
	
	.backtotop {
    position: fixed;
    right: 20vw;
    bottom: 3vw;
    border: 2px solid #267788;
    background: white;
    padding: 2px;
} 
	
	
	
}




/* Moodle TagButton */

			#moodle .tagButton{
				background-color: #24656b; 
			}

			#moodle .tagButton:hover{
				background-color: #1c4f54; 
			}

			#moodle .tagButton.selected{
				background-color: #153c3f; 
			}


/* Mahara TagButton */

			#mahara .tagButton{
							background-color: #619302; 
			}

			#mahara .tagButton:hover{
				background-color: #4B7200; 
			}

			#mahara .tagButton.selected{
				background-color: #304A00; 
			}

/* eStream TagButton */

	#estream .tagButton{
				background-color: #0F528F; 
			}

			#estream .tagButton:hover{
				background-color: #084073; 
			}

			#estream .tagButton.selected{
				background-color: #043159; 
			}

/* Teams TagButton */

	#teams .tagButton {
				background-color: #1e3972; 
			}

			#teams .tagButton:hover{
				background-color: #234282; 
			}

			#teams .tagButton.selected{
				background-color: #143551; 
			}



/* Vevox TagButton */

	#vevox .tagButton{
				background-color: #E08700; 
			}

			#vevox .tagButton:hover{
				background-color: #B56E00; 
			}

			#vevox .tagButton.selected{
				background-color: #8C5500; 
			}



/* H5P TagButton */

	#h5p .tagButton{
				background-color: #1981B6; 
			}

			#h5p .tagButton:hover{
				background-color: #066998; 
			}

			#h5p .tagButton.selected{
				background-color: #045175; 
			}

/* Echo360 TagButton */

	#echo360 .tagButton{
				background-color: #0b4e75; 
			}

			#echo360 .tagButton:hover{
				background-color: #32b598; 
			}

			#echo360 .tagButton.selected{
				background-color: #2c9e83; 
			}


/* Perception TagButton */

			#perception .tagButton{
				background-color: #7c1c18; 
			}

			#perception .tagButton:hover{
				background-color: #6d1815; 
			}

			#perception .tagButton.selected{
				background-color: #5e1512; 
			}

/* SMF TagButton */

			#smf .tagButton{
				background-color: #30186d; 
			}

			#smf .tagButton:hover{
				background-color: #29145e; 
			}

			#smf .tagButton.selected{
				background-color: #23114f; 
			}



/* Remove some underlines for the tools */

		.nav>li>a {
   			padding: 0px;
   			text-decoration-line: none;
			}


/* Make the pills different bg colours for each tool */	

.nav-pills>li {
background-color: #eee;
}

			
	.nav-pills>li.active>a#toolMoodle, .nav-pills>li.active>a#toolMoodle:focus, .nav-pills>li.active>a#toolMoodle:hover {
    background-color: #24656b;
}
			.nav-pills>li.active>a#toolMahara, .nav-pills>li.active>a#toolMahara:focus, .nav-pills>li.active>a#toolMahara:hover {
    background-color: #619302;
}

			.nav-pills>li.active>a#tooleStream, .nav-pills>li.active>a#tooleStream:focus, .nav-pills>li.active>a#tooleStream:hover {
    background-color: #0F528F;
}

			.nav-pills>li.active>a#toolVevox, .nav-pills>li.active>a#toolVevox:focus, .nav-pills>li.active>a#toolVevox:hover {
    background-color: #E08700;
			}


			.nav-pills>li.active>a#toolH5P, .nav-pills>li.active>a#toolH5P:focus, .nav-pills>li.active>a#toolH5P:hover {
    background-color: #1981B6;
}
		
	.nav-pills>li.active>a#toolecho360, .nav-pills>li.active>a#toolecho360:focus, .nav-pills>li.active>a#toolecho360:hover {
    background-color: #0b4e75;
}

	.nav-pills>li.active>a#toolTeams, .nav-pills>li.active>a#toolTeams:focus, .nav-pills>li.active>a#toolTeams:hover {
    background-color: #1e3972;
}


	.nav-pills>li.active>a#toolPerception, .nav-pills>li.active>a#toolPerception:focus, .nav-pills>li.active>a#toolPerception:hover {
    background-color: #5e1512;
}

	.nav-pills>li.active>a#toolSMF, .nav-pills>li.active>a#toolSMF:focus, .nav-pills>li.active>a#toolSMF:hover {
    background-color: #23114f;
}


			
/* and have no top and bottom padding */			

	.nav>li>a {
	padding: 0px;
}


/* Some other decorative stuff */


			#results {
				/* color: #707070; */
			}

			#results a {
				text-decoration: none;
			}

			#results a:hover{
				text-decoration: underline;
			}

.tagsGroup > .glossaryDefinition{
				color: black;
			}

.tagsGroup a.glossaryDefinition:link, .tagsGroup a.glossaryDefinition:visited {
 			    cursor: help;
    			text-decoration: none;
    			border-bottom: 1px dotted #fff;
    			color: #fff;
			}

			
.popover-content {
 			    color: #000;
			}





/* Add some open and close indicators to the TOC */
		
.panel-title > a {
  display: block;
  position: relative;
}
		


.panel-title > a:after {
  content: "\f105";
  font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
  position: absolute;
  right: 0;
}


.panel-title > a[aria-expanded="true"]:after {
  content: "\f107"; 
}



/* Live search */

.toc-wrapper .livesearch input {
  width: 100%;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .toc-wrapper .livesearch input {
    width: 265px
  }
}

@media (min-width: 1200px) {
  .toc-wrapper .livesearch input {
    width: 335px
  }
}

.toc-wrapper .lastmoddate {
  display: none;
}

/* End of live search */


/* Filter / Home button */

a.home-button {
  display: inline-block;
  margin: 5px 0 15px 0;
  padding: 6px 16px;
  color: white;
 background-color: #156294;
	font-size: 92%;
}


/*** PERSISTENT TABLE OF CONTENTS IN SIDEBAR ***/

.toc-wrapper {
  background-color: #deebed;
  margin: 0;
  padding: 10px 15px 5px 15px;
}

.toc-wrapper h4,
.toc-wrapper ul {
  font-size: 92%;
}
.toc-wrapper a,
.toc-wrapper a:visited {
  text-decoration: none;
}
.toc-wrapper a:hover {
  text-decoration: underline;
}
.toc-wrapper .panel-title {
  line-height: 1.35em;
}
#accordion ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#accordion ul > li.highlight {
  padding-left: 0.5em;
  border-left: 4px solid #24656B;
  font-weight: bold;
}

 .toc-wrapper .panel-body li {
  border-bottom: 1px dashed #f7f9ff;
  }