@media screen{
    #header-print{display: none;}
}


/* hypothesis button height */
.annotator-frame-button--sidebar_toggle {
    height: calc(var(--headerHeight) + 1px) !important;
}

#version {

    display: inline-block;
    margin-left: 0.4rem;
    padding-bottom: 0rem;

    vertical-align: top;

    color: #333333;
    font-family: 'muli';
    font-size: 0.6rem;
    line-height: 1;
}
/* header */


header {
    width: 100%;
    height: var(--headerHeight);
    position: fixed;
    top: 0; left: 0;

    background-color: white;
    box-shadow: 0px 0px 1px 1px var(--colorThird);
    z-index: 10;


    font-family: 'muli';
    font-size: 0px;
    line-height: 0px;
}


header > ul {
    width: 100%;
    height: var(--headerHeight);
    /*padding-left: 1rem;*/
    padding-right: calc(1rem + 36px); /*hypothesis button width*/

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

header > ul > li {
    height: 25px;
    /*margin-left: 0.5rem;*/
    /*margin-right: 0.5rem;*/
}

header > ul > li:first-child {
    margin-left: 0rem;
    height: 100%; width: 32px;
    margin: 0; padding: 0;
}

header > ul > li:last-child {
    margin-right: 0rem;
}

header > ul > li:nth-child(1) > button{
    outline: none;
    border: none;
    display: table;
    width: 32px; width: var(--headerHeight);
    height: 100%;
    color: var(--colorDark);
    border-right: 1px solid var(--colorThird);
}
body[data-aside-state="open"] > header > ul > li:nth-child(1) > button{
    /*color: dodgerblue;*/
}
body[data-aside-state="close"] > header > ul > li:nth-child(1) > button{}
body[data-aside-state="open"] > header > ul > li:nth-child(1) > button:after{
    content: "|←";
    /*content: "◫";*/
}
body[data-aside-state="close"] > header > ul > li:nth-child(1) > button:after{
    content: "→|";
    /*content: "◧";*/
    content: "≡";
    font-size: var(--fsMedium);
}

/* aside toggler button  */

/*header > ul > li:nth-child(1) > button {
    height: 100%;

    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
}

header > ul > li:nth-child(1) > button:hover {
    cursor: pointer;
}

header > ul > li:nth-child(1) > button > img {
    height: 100%;
    padding: 5px;
}*/

/* logo sens public */

header > ul > li:nth-child(2){
    padding-left: 1.3rem;
}
header > ul > li:nth-child(2) > a {
    height: 100%;
}

header > ul > li:nth-child(2) > a > img {
    height: 100%;
    max-width: 80px;
    max-width: 110px;
}

/* recherche form */

header > ul > li:nth-child(3) {
    flex-grow: 100;
    height: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
/*    align-self: flex-end;*/
}

header > ul > li:nth-child(3) > form {
    height: 100%;
    width: calc(var(--asideWidth) - 0rem);
    margin-left: 1rem;
    /*max-width: 500px;*/
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items:   center;
    align-content: center;
    border-left: 1px solid gainsboro;
    border-right: 1px solid gainsboro;
}

header > ul > li:nth-child(3) > form > input[type="text"] {
    height: 32px;
    width: calc(100% - 40px);
    /*padding-left: 0.5rem;
    padding-right: 0.5rem;*/
    padding-left: 0.36rem;

    /*border: 1px solid var(--colorThird);
    border-radius: 2px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;*/
    border: none;

    color: var(--colorFifth);
    font-family: 'muli';
    font-weight: 100;
    font-size: var(--fsSmall);
    line-height: var(--lhSmall);
}

header > ul > li:nth-child(3) > form > input[type="text"]:placeholder {
    color: /*TODO*/;
}

header > ul > li:nth-child(3) > form > button {
    height: 32px;
    width: 50px;
   
    /*reset button styles*/
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    
    background-color: var(--colorSecond);
/*    border: 1px solid var(--colorThird);
    border-radius: 2px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;*/
    border-left: 1px solid var(--colorThird);
    /*margin-right: 0.36rem;*/
    margin-left: 0.36rem;

    background-color: white;
}

header > ul > li:nth-child(3) > form > button:hover {
    cursor: pointer;
}

header > ul > li:nth-child(3) > form > button > img {
    height: 100%;
    padding: 7px;
}

/* user button */

header > ul > li:nth-child(3) > a {
    height: 100%;
}

header > ul > li:nth-child(3) > a > img {
    height: 100%;
    padding: 5px;
}