---
---


$font-family: 		Trebuchet MS, Verdana, sans;
$font-size:			9pt;
$line-height:		1.4em;
$max-width:			960px;
$min-column-width:	2.5em;
$color:				black;
$background:		white;
$secondary-color:	#720F10;
$icon-size:			2em;
$text-mono: 		Courier New;
$text-body: 		$font-family;
$text-head: 		$font-family;
$block-separation: 	1em;
$text-separation: 	0.5em;
$gutter:			1em;
$rounded:			4px;
$color-normal:		transparent;
$color-ok:			#F0F0F0;
$color-error:		rgb(201, 19, 11);
$color-warning:		rgb(247, 237, 184);

$staging-color:		#A6DC7C;
$staging-background: white;
$master-color:		white;
$master-background:	#A6DC7C;

$small-device:		40em;
$medium-device:		65em;

$reservation:		2em;
$color-vignette:	#F0F0F0;

@import "functions.scss";
@import "layout.scss";
@import "base.scss";


/*
	Styling of the main menu
*/
.menu-bar {
	margin-top: 10px;
	padding-top: $text-separation;
	padding-bottom: $text-separation;
	@include gradient( lightgrey, rgb(179,179,181), rgb(130,132,135));
	@include drop-shadow(2px,2px,2px,0.1);
	@include rounded(3px);
	margin-bottom: $block-separation;
	> [span] {
		vertical-align:middle;
		margin: 0px;
		> * {
			color: white;
		}
		> a {
			font-size: $font-size * 1.4;
			padding-top:3px;
			margin-right: $gutter;
		}
		.menu-logo {
			height: $line-height;
			position: relative;
			top: 5px;
		}
		> img {
		  padding-right: $gutter;
		}
	}

	.menu-button {
		float: right;
	}

	@media screen and (max-width: $medium-device) {
		[span] {
			min-width: 4em;
		}
	}

	@media screen and (max-width: $small-device) {
		[span] {
			width: 100%;
			min-width: 1em;
		}
	}
	
	.search-container {
        width: 100%;
        input[type=text] {
          width: calc(100% - 65px);
          padding: 6px;
          margin-top: 8px;
          border: none;
          float: left;
        }
        button {
              float: right;
              width: 32px;
              padding: 6px 10px;
              margin-top: 8px;
              margin-right: 28px;
              background: #ddd;
              border: none;
              border-radius: 4px;
              cursor: pointer;
        }
    }
}


/*
 * Styling of the side bar
 */

.side-nav {
	@include vignette();
}

.selected {
	&:before { content: "\25B7\00A0"; }
	color: $secondary-color;
}

embed.illustration {
	display:block;
	margin-left: auto;
	margin-right: auto;
}

.dropbtn {
  background-color:inherit;
  border-radius:4px;
  color: white;
  padding: 6px;
  font-size: 12.6pt;
  border: none;
  min-width: 100px;
  cursor: pointer;
}

.releases {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 6px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.releases:hover .dropdown-content {
  display: block;
}

.releases:hover .dropbtn {
  background-color: #99594b;
}

.pageclass {
    background-color: #99594b;
    color: white;
    width: 80px;
    text-align: center;
    border-radius: 5px;
    padding:2px;
    font-size: $font-size;
    font-weight: normal;
 }
 
ul.side-nav{
  list-style-type: none;
}

ul .side-nav-section{
  color: #720F10;
  font-weight: bold;
  font-size: 1.05em;
}

.side-nav{
  padding-top: 1px !important;
}

pre.highlight {
  overflow: auto;
}

.header-link-wrapper{
  visibility: hidden;
  margin-left: 2px;
  padding-left: 2px;
}
/* Show the icon link on hover */
h1:hover .header-link-wrapper,
h2:hover .header-link-wrapper,
h3:hover .header-link-wrapper,
h4:hover .header-link-wrapper {
  visibility: visible;
}
.header-link{
  color:#ccc !important
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h1 {
  margin: 0;
}

.container-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* aligns children to the right */
}

.next-prev a {
  color: #555;
  text-decoration: none;
}

.next-prev a:hover,
.next-prev a:focus {
  text-decoration: underline;
  color: #333;
}


.highlight{
  padding: 5px;
}

pre.highlight{
  border: none;
}

code {
  all: revert !important;
}

div[class*="language-"] {
  position: relative;
  margin: 5px 0 ;
  padding: 1.75rem 0 1.75rem 1rem;
}

div[class*="language-"] button{
  position: absolute;
  top: 35px;
  right: 5px;
}

