/******************************************************************************
    Style for Open Gauquelin web application
    A priori included by all pages
    
    @license    GPL
    @history    2021-07-14 09:55:28+02:00, Thierry Graff : Creation
********************************************************************************/

@import "normalize.css";
@import "style.css";

@media print{
    .top-header{
        display:none;
    }
}

:root {
    --main-bg-color:linear-gradient(90deg, rgba(181,139,50,1) 0%, rgba(164,203,58,1) 100%);
}


body{
    font-family:Verdana, Geneva, sans-serif;
    background:#dbdbdb;
}

/* shift anchors by menu height */
:target{
   position: relative;
   border-top: 52px solid transparent;
   margin: -30px 0 0;
   background-clip: padding-box;
}
:target:before {
   content: "";
   position: absolute;
   top: 30px;
   left: 0;
   right: 0;
}


/* ================ HTML tags ================ */
a{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
h1{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    margin-bottom:2rem;
}
h1 .subtitle{
    font-size:.8em;
}
h3{
    margin-top:0.5rem;
    margin-bottom:0.5rem;
}
pre{
    white-space:pre-wrap;
    margin:1rem;
    background:lightgrey;
    padding:.5rem;
    border-radius:5px;
    border:1px solid #717a9f;
}
pre.normal{
    background:none;
}

/* ================ Top header ================ */
/*
    Used for local anchors in a page.
    Introduces an offset corresponding to the size of the fixed header.
*/
div.anchor {
    display:block;
    position:relative;
    top:-50px;
    visibility:hidden;
}
.top-header{
    position:fixed;
    top:0;
    width:100%;
    background:linear-gradient(to left, #5d9cba, #aadff7);
    border-bottom:1px solid grey;
    z-index:100;
    box-shadow: 3px 3px 5px #888888;
}
.top-nav{
    padding-left:4rem;
    padding-bottom:5px;
}
.top-nav a{
    padding:.1rem .5rem;
    background:lightblue;
    border-radius:2px;
    border:1px solid black;
    box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.25);
}
.top-right{
    float:right;
    padding-right:1rem;
}
.search{
    display:inline;
}
.search input[type=text]{
    border-radius:7px;
}

/* ================ Semantic ================ */
.intro{
    font-size:1.4rem;
    margin:1rem 0 1rem 2rem;
}

.content{
    padding-left:1rem;
    padding-right:1rem;
    margin-top:4rem;
    margin-left:1rem;
    margin-bottom:1rem;
    line-height:1.618;
}

.warning{
    font-weight:bold;
    background:gold;
    padding:2px;
    border:1px solid red;
}

.todo{
    display:inline-block;
    margin:.5rem;
    padding:.5rem;
    border:1px solid grey;
    background:gold;
}

.wip{
    display:inline-block;
    margin:.5rem;
    padding:.5rem;
    border:1px solid grey;
    background:white;
}

.info{
    padding:.3rem;
    border:1px solid grey;
    border-radius:5px;
    background:white;
    position:relative;top:-.3rem;
}

.trust1{background-color:#39ca75;}
.trust2{background-color:#82e2a9;}
.trust3{background-color:#ffce2b;}
.trust4{background-color:#fda05c;}
.trust5{background-color:#f8726b;}


/* ================ Particular pages ================ */
/*  For css specific to pages, see static/css/pages/ */
.error404{
    position:relative;
    top:3rem;
}

/* Downloads - used in several pages */
.download{
    display:flex;
    align-items:center
}
.download-multiline{
    display:flex;
    align-items:flex-start;
}
.download-image{
    display:inline-block;
    background:#dbf1b1;
    border:1px solid grey;
    padding:0 8px;
    margin-right:.5rem;
}
.caption{
    display:block;
    font-size:.6rem;
}

/* ================ Particular elements ================ */
.right-box{
    font-size:1.1rem;
    padding-top:2px;
    padding-left:1rem;
    padding-bottom:5px;
    padding-right:4px;
    border-left:1px solid grey;
    border-bottom:1px solid grey;
    border-bottom-left-radius:10px;
    box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.25);
    background:#ccc;
}
/*
https://cssgenerator.org/box-shadow-css-generator.html
https://colorpicker.me
https://cssgradient.io/
*/
.hr-big{
    width:50%;
    margin:auto;
    margin-top:2rem;
}
.hr-cool{
    width:80%;
}

/* 2 columns, to present results */
.grid2-pres{
    display:grid;
    grid-template-columns: max-content 1fr;
}
.grid2-pres>*:nth-child(odd){
    text-align:right;
    padding-right:1em;
}
.grid2-pres>*:nth-child(even){
}

/* 2 columns, to present results */
.table-pres td:nth-child(1){
    text-align:right;
    vertical-align:top;
    padding-right:1rem;
}
.table-pres td:nth-child(2){
    font-weight:bold;
}
.table-pres td.paragraph{
    font-weight:bold;
    text-align:left;
    padding-top:1rem;
}

table.alternate tbody tr:nth-child(odd){
    background:#bdd7ee;
}
table.alternate tbody tr:nth-child(even){
    background:#ddebf7;
}

/* Wikitable */
table.wikitable{
    border-collapse:collapse;
}
table.wikitable th{
    background-color:#dbe599;
    text-align:center;
    vertical-align:middle;
    border:1px solid black;
    padding:.5rem;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td{
    border:1px solid black;
    padding:.4rem;
    vertical-align:top;
}
table.wikitable td.paragraph{
    font-size:1.3rem;
    font-weight:bold;
    background:#bac1c4;
    padding:1rem;
}

/* datatable */
table.datatable{
    width:100%;
}
table.datatable thead tr th{text-align:left;}
table.datatable thead tr th,
table.datatable tbody tr td{
    padding:.7rem;
}
table.datatable tbody tr:hover {
    background-color:#ffa;
}
.datatable-links{
    margin:.5rem 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.datatable-links a{
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #979797;
    background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
    font-size:130%;
    padding:0 6px;
    margin:2px 3px;
}
.datatable-links a:hover,
.datatable-links a.current{
    text-decoration:none;
    background:linear-gradient(to bottom, #0f0e0e 0%, #383636 100%);
    color:#dcf0f7;
}