/*
Color Pallette

Text values:
Almost black: #333
Dark Grey: #777


Greyscale backgrounds:
Menu black bg: #191818

Really light grey, lighter than purecss buttons: #eee

Haiqu green: #7fc436
Pure-menu blue: #4484ce

old-school blue: #4484ce
Orange: #f19f4d
Dark Blue: #4484ce
Off-white: #F6F6E8
Off-black: #404040

*/


@font-face {
    font-family: 'dejavu serif book';
    src: url('/fonts/dejavu-serif-book.ttf');
}


body {
    font-family: 'Lato', sans-serif;
    color: #777;
}

h1 {
    font-family: 'dejavu serif book', serif;
}

h2 {
    font-family: dejavu serif book, serif;
}

h3 {
    font-family: dejavu serif book, serif;
}

h4{
    font-family: dejavu serif book, serif;
    margin-left: 0;
}

.header-title a {
    font-family: dejavu serif book, serif;
}

a {
     color: #ff8000;
}

a:hover {
    color: #4484ce;
}

a.definitionLink {
    color: #4484ce;
}

a.definitionLink:hover {
     color: #ff8000;
}

.highlight {
    background-color: yellow;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

pre {
    white-space: pre-wrap;
}

.loading-big {
    padding: 20px;
}

.loading-small {
}

.loading-icon {
    color: #ff8000;
    padding: 0;
    margin: 0;
    animation-name: rotate-icon;
    display: inline-block;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transform-origin: 50% 43%;
    animation-timing-function: linear;
}

@keyframes rotate-icon {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
    transition: all 0.1s ease-out;
}

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: absolute;
    left: 0;
    padding-left: 0;
    right: 0;
}

#layout.active #menu {
    left: 300px;
    width: 300px;
}

#layout.active .menu-link {
    left: 300px;
}

/*
The content `<div>` is where all your content goes.
*/
.content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6em;
}

.header {
     margin: 0;
     color: #333;
     text-align: center;
     padding: 2.5em 2em 0;
     border-bottom: 1px solid #eee;
 }
    .header h1 {
        margin: 0.2em 0;
        font-size: 3em;
        font-weight: 300;
    }
     .header h2 {
        font-weight: 300;
        color: #ccc;
        padding: 0;
        margin-top: 0;
    }

.content-subhead {
    margin: 50px 0 20px 0;
    font-weight: 300;
    color: #888;
}


/* Buttons */

/* Set a style for all buttons */
button {
  background-color: #4484ce;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 10px;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}


button.button-link {
    background-color: transparent;
    color: #ff8000;
    border: none;
    cursor: pointer;
}

#top-menu .button-link {
    margin: 0;
}

#top-menu .button-link:hover {
    background-color: #e0e0e0;
}

/* Add a hover effect for buttons */
button.button-link:hover {
    opacity: 0.8;
    color: #4484ce;
}


button.go-pro {
    border: #ff8000 dashed;
    background-color: #eee;
    color: #333;
    margin: auto;
}

.selection-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.pill-button {
    border-radius: 10px;
    border-color: #4484ce;
    border-width: 1px;
    border-style: none;
    width: 60px;
    padding: 0px;
    background-color: #4484ce;
    color: #eee;
}

.button-half-screen button {
    width: 50%;
    margin-left: 25%;
}



.icon-overlay-container{
}

.icon-overlay-text {
    position: absolute;
    font-size: 12px;
    padding: 10px 0 0 0;
    margin: 0;
}


/*
Footer, Header, etc.
*/

.footer {
    text-align: center;
    padding-bottom: 20px;
}


.footer a {
     color: #ff8000;
}

.footer a:hover {
    color: #4484ce;
}

.header {
    grid-area: menu;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 0px;
    background-color: #eee;
    color: #191818;
    padding: 0px;
    border-top: 5px solid #4484ce;    
}


.header .header-edition {
    color: #4484ce;
}

.header.header-edition em {
    color: #4484ce;
}

.header-title a {
    text-decoration: none;
    color: inherit;
}

.superscript {
    color: #4484ce;
    font-size: small;
}


/*
Side Menu
*/

/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

#menu {
    margin-left: -300px; /* "#menu" width */
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #191818;
    overflow-y: auto;
    box-shadow: 5px 5px 5px #ccc;
}
    /*
    All anchors inside the menu should be styled like this.
    */
    #menu a {
        color: #999;
        border: none;
        padding: 0.6em 0 0.6em 0.6em;
    }

    /*
    Remove all background/borders, since we are applying them to #menu.
    */
     #menu .pure-menu,
     #menu .pure-menu ul {
        border: none;
        background: transparent;
    }

    /*
    Add that light border to separate items into groups.
    */
    #menu .pure-menu ul,
    #menu .pure-menu .menu-item-divided {
        border-top: 1px solid #4484ce;
    }
        /*
        Change color of the anchor links on hover/focus.
        */
        #menu .pure-menu li a:hover,
        #menu .pure-menu li a:focus {
            background: #333;
        }

    /*
    This styles the selected menu item `<li>`.
    */
    #menu .pure-menu-selected,
    #menu .pure-menu-heading {
        background: #4484ce;
    }
        /*
        This styles a link within a selected menu item `<li>`.
        */
        #menu .pure-menu-selected a {
            color: #fff;
        }

    /*
    This styles the menu heading.
    */
    #menu .pure-menu-heading {
        font-size: 110%;
        color: #fff;
        margin: 0;
    }


/*    ----ADDED BY BH----
      Active section added to change the link to an X when menu is showing 
      on small screens.
      This was left out in the pure side menu release, but was in the website example.
*/
	
.menu-link.active span {
    background: transparent;
}

.menu-link.active span:before {
    transform: rotate(45deg) translate(.5em, .4em);
}

.menu-link.active span:after {
    transform: rotate(-45deg) translate(.4em, -.3em);
}

	    
/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.7);
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 1001; /* above the menu's shadow */
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}

.menu-link:hover,
.menu-link:focus {
    background: #000;
}

.menu-link span {
    position: relative;
    display: block;
}

.menu-link span,
.menu-link span:before,
.menu-link span:after {
    background-color: #fff;
    width: 100%;
    height: 0.2em;
}

.menu-link span:before,
.menu-link span:after {
    position: absolute;
    margin-top: -0.6em;
    content: " ";
}

.menu-link span:after {
    margin-top: 0.6em;
}


#menu {
    overflow-y: scroll;
    color: #191818;
    background-color: #eee;
    background-image: linear-gradient(#eee, #f6f6f6f6);
}


#menu .pure-menu-heading {
    background-color: #4484ce;
}


#menu .menu-entry-doc {
    color: #4484ce;
}

#menu .menu-entry-doc:hover,
#menu .menu-entry-doc:focus {
    color: #ff8000;
}

#menu .menu-entry-section {
/*    font-size: 5px; */
}

#menu .menu-entry-searchresult {
/*    font-size: 5px; */
}

#menu a {  
    border: none;
    color: #333;
}

#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
    background-color: #e0e0e0;
    border-radius: 3px;
}

#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
    border-top: 1px solid #aaa;
}

#menu ul {
   margin-left: 0.3em;
   padding-left: 0.3em;
}

#menu fieldset {
    border: none;
    margin-left: 0.3em;
    padding-left: 0.3em;
}

#menu fieldset:hover {
    background-color: #e0e0e0;
}


/* General Menu Items */

.pure-menu-heading,
.pure-menu-link
{
    white-space: normal;
}

.pure-menu-item a:hover {
    background-color: #e0e0e0;
}

.menu-item-with-icon {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.menu-heading-link-small {
    font-size: small;
    text-transform: none;
}


div.pure-menu-link:active {
    outline: 1px dotted #f9cf00;
    background: #eee;
}

/* This is the id, there is also a class menu-link */
#menuLink {
    cursor: pointer;
}


/* Top Menu */

#top-menu {
    border-top: 1px solid #4484ce;
    padding-bottom: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: sticky;
    top: 0;
    background: #fff;
    opacity: 0.8;
}


#top-menu a {
    color: #ff8000;
}

#top-menu a:hover {
    color: #4484ce;
}


#top-menu .active {
    color: #f9cf00;
}

.top-menu-list {
    list-style: none;
    margin-left: 0.3em;
    padding-left: 0.3em;
}


/* Links and backarrows */

.backarrow {
	width: 35px;
	height: 35px;
	align-items: center;
	justify-content: center;
	display: flex;
}

.backarrow:hover {
	background-color: #eee;
}

.hoverbackground {
    background-color: #eee;
}


/*
Popup style html/css from https://codepen.io/imprakash/pen/GgNMXO         
*/

.overlay {
    position: fixed;
    z-index: 1001;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    animation: fade-in .3s linear forwards;
}


.popup {
    position: fixed;
    z-index: 1002;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    width: 50%;
    border: 1px solid #E6E6E6;
    border-radius: 10px;
    opacity: 1;
    padding: 10px;
    background: white;
    overflow-y: auto;
    max-height: 90%;
}

.popup .close {
    position: fixed;
    top: 0px;
    right: 5px;
    transition: all 200ms;
    cursor: pointer;
    width: unset;
    padding: unset;
}


.popup-instructions {
    color: #777;
    padding: 10px;
}

.popup h2 {
    color: #191818;
    margin-bottom: 0;
}

.popup-content {
    overflow: auto;
    color: #191818;
    font-family: mono;
    user-select: all;          /* Likely future */
    padding: 0.5em;
    border: solid 1px #191818;
    border-radius:10px;
}



/*
Search Form, Bar
*/


/* This leaves the search sticky to the top of the screen. May want different layout 
if enabling this /*
/* 
#search {
    position: sticky;
    top: 40px;
    background-color: #fff; 
}
*/

#search {
    position:sticky;
    top:50px;
    opacity: 0.9;
    background: white;
}

#search .search-form {
    display: flex;
    flex-direction: column;
    border: none;
    color: #191818;

}


#search .search-container {
    display: flex;
    flex-direction: row;
    border: 1px solid;
    border-radius: 10px;
    align-items: center;
}

#search .search-glass,
#search .search-x {
    text-decoration: none;
    color: #ff8000;
    outline: 0; /* Gets rid of the dotted line that's for link accessability */
    padding: 0;
    margin: 0;
    width: 24px;
    height: 24px;
}

#search .search-x:hover {
    color: #4484ce;
}

#search .search-x:active {
    color: #f9cf00;
}


#search .search-bar {
    border: none;
    border-radius: 10px;
    margin-bottom: 0;
    width: 300px;
    height: 30px;
    outline: 0; /* Gets rid of the dotted line that's for link accessability */
}

#search .search-ac {
    
    /* match search-bar*/
    width: 312px;
    margin: 0;
    margin-left: 21px;
    border-radius: 0 0 4px 4px;
    padding: 0;
    
    /* positioning*/
    position: absolute;  
    z-index: 1000; 
    overflow-y: auto;
    transition: all 0.2s ease-out;

    /* To match pure-button */
    border:1px solid #777;
    border:transparent;
    background-color: #AAA;
    
    
    /* Text style */
    text-align: left;
    list-style: none;
}


#search .search-ac a {
    text-decoration: none;
    color: #333;
    margin-left: 10px;
    text-indent: -4px;
    display: block;
}


#search .search-ac li:hover,
#search .search-ac li:focus {
    background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}

.top-menu-gravatar {
    width: 25px;
    height: 25px;
}

.context-menu {
}

.context-menu:active,
.context-menu:focus {
    background-color: transparent;
}

/* Settings Form */
.content .settings-form p {
    text-align: left;
}

.settings-form select {
    max-width: 100%;
}

/*
Article Sub-menu
*/

.headingWithMenu a
{
    opacity: 0.1;
}

.headingWithMenu:hover a,
.headingWithMenu:focus a
{
    opacity: 1;
}

button.articleMenu
{
    text-decoration: none;
    color: transparent;
    border-left: solid 1px transparent;
    width: 30px;
    padding: 0;
    margin: 0;
}

button.articleMenu-visible .articleMenu
{
    color: #ff8000;
}

button.articleMenu:hover,
button.articleMenu-visible .articleMenu:hover,
{
    color: #191818;
}


button.articleMenu-always-on
{
    color: #4484ce;
}



/* 
Main content
*/

#main.col {
    max-width: none;
}

.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content {
    max-width: 50em;
    color: #333;
    font-size: 18px;
    line-height: 1.6em;
    
}

.content h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: .05em
}

.content p {
  text-rendering: optimizelegibility !important;
/*  letter-spacing: .03em;
  word-spacing: .04em; */
  text-align: justify;
  margin-bottom: 18px;
}



.pull-right {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.panel {

}

.panel.col  {
    padding-left: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    min-width: min-content;
}

.searchresults {

}

.searchresults.col {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-around;
    flex-wrap: wrap;
}

.Document {
    border-bottom: 1px solid #E6E6E6;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 50px;
    transition: all 0.2s ease-out;
}

.Document.col {
    /*See .panel.col, since this is now grouped with the fineprint in the column div.*/
}

.Document H2 {
    margin: 20px;
}

.DocTitle {
    background: #E6E6E6;
    color: #333; /*#ff8000;*/
    border: 1px solid #E6E6E6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.DocTitle .articleMenu {
    color: #191818;
}

.DocTitle .articleMenu:hover {
    color: #ff8000;
}


/* Entry and Definition boxes on hover */
.EntryContent,
.DefinitionContent,
.SecContent {
    margin: 0;
/*
    border: 1px dashed #F6F6E8;
    border-radius: 10px;
*/
}

.EntryContent:hover,
.DefinitionContent:hover,
.SecContent:hover {
    background: #f6f6f6;
    /*    border: 1px dashed #ff8000;    */
}


/* To show up on sub-entries on hover */
.Entry:hover,
.Definition:hover, 
.Section:hover{
    /*    border: 1px dashed blue; */
}


/* All submenus on hover */
.EntryContent:hover .articleMenu,
.DefinitionContent:hover .articleMenu,
.SecContent:hover .articleMenu {
    color: #191818;
}


/* All submenus on hover */
.EntryContent:hover .textMenu-menu,
.DefinitionContent:hover .textMenu-menu,
.SecContent:hover .textMenu-menu {
    border-left: solid 1px #e6e6e6;
}


.EntryContent:hover .articleMenu:hover,
.DefinitionContent:hover .articleMenu:hover,
.SecContent:hover .articleMenu:hover {
    color: #ff8000;
}


.SearchResults {
    border-bottom: 1px solid #333;
}

.SearchResults:hover {
    background-color: #e6e6e6;
}


.SearchResultInfo {
    font-style: italic;
}

/* SubMenu Layouts */
.textMenu-container {
    display: grid;
    grid-template-columns:  auto 30px;
    grid-template-areas:
        "heading menu"
	"content menu";
    transition: all 0.2s ease-in-out;    
}

.SecLowerEntries {
    padding-left: 5px;
}

.ArtLowerEntries {
    padding-left: 10px;
}

/* Style like the content */
.ArtLowerEntries h4 {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: unset;
    margin-left: 0;
    margin-bottom: 0;
}

.DefLowerEntries {
    padding-left: 10px;
}

.textMenu-heading {
    grid-area: heading;
	
}

.textMenu-content {
    grid-area: content;
}

.definitionLink {
    text-decoration: none;
    
}

.textMenu-menu {
    grid-area: menu;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}


.headingMenu-container{
    display: grid;
    grid-template-columns:  auto 30px;
    grid-template-areas:
        "heading menu"
	"content menu";
    transition: all 0.2s ease-in-out;    
}

.headingMenu-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.DocTitle .headingMenu-menu {
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 5px;
	border-left: none;
}

.fineprint {
    color: #404040;
    background-color:#E6E6E6;
    border: solid 1px #404040;
    padding: 10px;
    font-size: small;
    margin-top: 60px;
}




/*********************/
/* Alert buttons etc.*/

.passtest {
    color: green;
}

.failtest {
    color: red;
}

.notruntest {
    color: yellow;
}

 /* The alert message box */
.alert {
  padding: 20px;
  background-color: green;
  color: white;
  margin-bottom: 15px;
  border-style: dashed;
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
} 


/* ***** LOGIN ***** */

 /* Bordered form */
#login {
    padding: 50px;
    border: 3px solid #f1f1f1;
}

#login a {
     color: #ff8000;
}

#login a:hover {
    color: #4484ce;
}



/* Full-width inputs */
input[type=text],
input[type=password],
input[type=email] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#search input:disabled {
    background-color: #eee;
}


label.menu-checkbox {
    cursor: pointer;
    text-indent: -17px;
    padding-left: 15px;
    display: block;
}


/* Extra style for the cancel button (red) */
button.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #4484ce;
}


/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 40%;
  border-radius: 50%;
}


.login-container {
  padding: 16px;
}

/* The "Forgot password" text */
div.psw {
    text-align: center;
    padding: 5px;
}

/* The "Forgot password" text */
div.psw2 {
    text-align: center;
    padding: 5px;
}


.pro-badge
  {
        color: #4484ce;
        font-size: small;
        padding-left: 20px;
    }

.pro-badge svg {
        color: gold;
   }

.top-pro-message {
    padding-top: 20px;
}

.right-pro-star {
    color: gold;
    padding-right: 20px;

}

/*
Animations
*/

@keyframes fade-in {
    from {
	opacity: 0;
    }

    to {
	opacity: inherit;
    }
}


/*
Media queries
*/


/*
Larger screens

Hides the menu at `860px`.
*/
@media (min-width: 860px) {

    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }

    #layout {
        left: 300px; /* left col width "#menu" */
    }
    
    #menu {
        left: 300px;
	box-shadow: none;
    }

    .menu-link {
        position: fixed;
        left: 300px;
	display: none;
    }

    #layout.active .menu-link {
        left: 300px;
    }
}


/* Covers all phones and tablets */
@media screen and (max-width: 860px){

    .box{
	width: 70%;
    }
    .popup{
	width: 90%;
	max-height: 90%;
	overflow-y: auto;
    }
    .content {
	max-width: 100%;
	font-size: 18px;
	padding: 10px;
    }
    .ArtLowerEntries h4 {
	font-size: 18px;
    }
}


/* Covers most phones*/
@media screen and (max-width: 450px){

    .header {
        flex-direction: column;
	max-height: 40px;
	margin-top: 44px;
    }

    .header-edition { display: none;}

    .header-title a { font-size: 10vw;}  
    
    div.psw {
	text-align: center;
	display: block;
	float: none;
    }
    div.psw2 {
	text-align: center;
	display: block;
	float: none;
    }
    
    .cancelbtn {
	width: 100%;
    }
    
    .settings-form p {
        text-align: left;
    }

    .settings-form select {
	max-width: 100%;
    }
    
    .popup .close {
	margin: 0;
	padding: 0;
    }
  
    #search .search-container {
	max-width: 95vw;
    }
    
    
    /* Stops the left-right scroll on small screens */
    .container {
        width: 100%;
    }
    
    
    #top-menu {
	justify-content: center;
	top: 0px;
	padding-bottom: 0;
    }

    #top-menu a,
    #top-menu .button-link1,
    #top-menu div {
	padding-left: 2vmin;
	padding-right: 2vmin;
    }

    .menuLink {
	width: 15vw;
    }

    #layout {
	position: absolute;
	left: 0;
    }

    #layout.active #menu {
	left: 85vw;
	width: 85vw;
	margin-left: -85vw;
    }

    #layout.active .menu-link {
	left: 85vw;
    }

} 

/* For touch, when there is no mouse and so no hover... */
@media screen and (hover: none) {
    button.articleMenu {
	color: #777;
	opacity: .5;
    }

    .headingMenu-menu {
	margin-top: 20px;
	margin-left: 5px;
	padding-left: 5px;
	border-left: solid 1px #e6e6e6;
    }

    .DocTitle .headingMenu-menu {
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 5px;
	border-left: none;
    }

    
    .textMenu-container {
    }
    
    .textMenu-menu {
	margin-top: 20px;
	margin-left: 5px;
	border-left: solid 1px #e6e6e6;
    }
}