/* Common stylesheet for all themes.
 *
 * Copyright (C) 2002-2006 Mathieu Roy <yeupou--gnu.org>
 * Copyright (C) 2018 Ineiev
 *
 * This file is part of Savane.
 *
 * Savane is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * Savane is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

/* THIS CSS DEFINES BASIC ELEMENTS AND IS SUPPOSED TO BE IMPORTED */

/* GUIDELINES VERSION FOLLOWED: 1.17 */


/**********************************************************************
 *
 * Very basic (mostly text) items:
 *
 **********************************************************************/

body {
        font-family: sans-serif;
}

img {
        border: none;
        margin-bottom: -0.2em;
}

p {
        padding-left: 0.2em;
        padding-right: 0.2em;
}

strong { font-weight: bold; }
.bold { font-weight: bold; }
em { font-style: italic; }
.italic { font-style: italic; }

.verbatim {
        /* useful to put code blocks, should look by default like postit */
        border: thin solid #E5E297 !important;
        margin-left: 0.5em;
        background-color: #FFFCA8 !important;
        color: black !important;
        font-family: monospace;
}

code { border: solid thin; }

pre {
        border-top: dashed thin;
        border-bottom: dashed thin;
        border-left: solid thick;
        padding: 1em;
        margin: 1em;
}

.block { display: block; }


.smaller { font-size: smaller; }
.small { font-size: small; }
.xsmall { font-size: xx-small; }
.large { font-size: large; }

.error { font-weight: bold; color: #c12424; }
.warn {  color: #c12424; }

.footer { font-size: x-small; clear: both; }


/* .text should be deprecated in favor of <p class="smaller">
.text {
        padding-left: 5px;
        text-indent: 1em;
        font-size: smaller;
}
*/

.icon {
        width: 1em;
        height: 1em;
        margin-bottom: -0.2em;
}


.pageicon {
        padding-right: 0.5em;
        margin-bottom: -0.5em;
}


.minusorplus {
        vertical-align: middle;
        font-family: monospace;
        font-size: xx-small;
}

.minusorplus:after {
        content: " ";
}

.feedbackimage {
        vertical-align: middle;
        width: 1em;
}


.feedback {
        cursor: pointer;
        vertical-align: middle;
        font-size: smaller;
        font-weight: normal;
        border: thin solid #005d23;
        background-color: #e7ffe8;
        text-align: left;
        color: #005d23;
        position: fixed;
        top: 1%;
        right: 9%;
        bottom: auto;
        /* should not interfere with the menu (width: 15%):
                so we have 9% + menu*/
        left: 24%;
        opacity: 0.9;  /* CSS3 standard */

}

.feedback:hover {
        background-color: #f1fff2;
}

.feedbacktitle {
        vertical-align: middle;
        font-weight: bold;
        background-color: #005d23;
        text-align: center;
        color: white;
        float: left;
        padding-left: 0.1em;
        padding-right: 0.1em;
        margin-right: 0.5em;
        text-indent: 0;
        width: 20%;
        opacity: 0.9;  /* CSS3 standard */
}


.feedbackerror {
        cursor: pointer;
        vertical-align: middle;
        font-weight: normal;
        border: thin solid #871b00;
        background-color: #ffeae5;
        text-align: left;
        color: #871b00;
        position: fixed;
        top: 1%;
        right: 9%;
        bottom: auto;
        /* should not interfere with the menu (width: 15%):
                so we have 9% + menu*/
        left: 24%;
        opacity: 0.9;  /* CSS3 standard */
}

.feedbackerror:hover {
        background-color: #ffefeb;
}

.feedbackerrortitle {
        vertical-align: middle;
        font-weight: bold;
        background-color: #871b00;
        text-align: center;
        color: white;
        float: left;
        padding-left: 0.1em;
        padding-right: 0.1em;
        margin-right: 0.5em;
        text-indent: 0;
        width: 20%;
        opacity: 0.9;  /* CSS3 standard */
}

/* this last feedback time occurs when there was both ok and error feedbacks */
.feedbackerrorandsuccess {
        cursor: pointer;
        font-size: smaller;
        font-weight: normal;
        border: thin solid #804206;
        background-color: #ffd1a5;
        text-align: left;
        color: #804206;
        position: fixed;
        top: 1%;
        right: 9%;
        bottom: auto;
        /* should not interfere with the menu (width: 15%):
                so we have 9% + menu*/
        left: 24%;
        opacity: 0.9;  /* CSS3 standard */
}

.feedbackerrorandsuccess:hover {
        background-color: #ffe3c7;
}

.feedbackerrorandsuccesstitle {
        font-weight: bold;
        background-color: #804206;
        text-align: center;
        color: white;
        float: left;
        padding-left: 0.1em;
        padding-right: 0.1em;
        margin-right: 0.5em;
        text-indent: 0;
        width: 20%;
        opacity: 0.9;  /* CSS3 standard */
}

/* button to make the hidden feedback showed back
     - by default it is hidden
     - does not carries every possible colors for feedback, it would
        overcomplicated it */

.feedbackback {
        cursor: pointer;
        visibility: hidden;
        position: fixed;
        background-color: #d5d5d5;
        border: thin solid #adadad;
        color: #727272;
        top: 1%;
        right: 1em;
        white-space: nowrap;
        font-size: smaller;
        padding-left: 0.2em;
        padding-right: 0.2em;
        opacity: 0.9;  /* CSS3 standard */
}

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

.nextprev {
        text-align: center;
}
.nextprev a {
        display: inline;
}


.debug {
        width: 80%;
        border: thin solid #871b00;
        background-color: #ffbfaf;
        text-align: center;
        color: #871b00;
        font-weight: normal;
        font-size: xx-small;
}

.unavailable {
        text-decoration: line-through !important;
        cursor: default;
}

.unavailable:hover {
        text-decoration: line-through !important;
        cursor: default;
}

.help {
        cursor: help;
        text-decoration: underline;
}

.preinput {
        font-style: italic;
}

hr {
        background-color: black;
        height: 1px;
        border: 0;
}


h2 a {
        display: block;
}

h4 a {
        display: block;
}

.quote {
        padding-left: 1em;
        font-style: italic;
}



/**********************************************************************
 *
 * Alignement, main tables
 *
 **********************************************************************/

.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.justify { text-align: justify; }


.backtotop { text-align: right; clear: both; }

.indexcenter { vertical-align: top; width: 80%; }
.indexright { vertical-align: top; float: right; width: 19%; font-size: small; }

.splitleft { margin-left: 1%;         margin-right: 51%; }
.splitright {  display:block;  float: right; margin-right: 1%; width: 49%; overflow: hidden; vertical-align: top;}

.trash { vertical-align: top; text-align: right; margin-right: 0; float: right; height: 1em; }


.clear { clear: both; }
.clearl { clear: left; }
.clearr { clear: right; }

.realbody {
        vertical-align: top;
}


/* like  boxhighlight */
.highlight {
        background-color: #f7c58f;
        color: black;
}

/* margin-left + width must be equal to 100% (but think about body margins
 present in many themes) */
.main
{
  vertical-align: top;
  margin-left: 16%;
  border-spacing: 0;
  border: none;
  display: block;
  width: 80%;
}

/* Menus */
.menu {
        float: left;
        font-size: small;
        vertical-align: top;
        border-spacing:        0;
        border: none;
        width: 15%;
        margin-top: 0;
        margin-left: 0;
        padding-left: 0;
}

.menulogo {
        list-style-type: none;
        font-size: larger;
        text-align: center;
}


.menutitle {
        list-style-type: none;
        vertical-align: top;
        padding-top: 0;
        margin-top: 15px;
}

.menuitem {
        text-indent: 0;
        list-style-type: none;
        list-style-position: inside;
        vertical-align: middle;
        margin-left: 0;
        font-size: small;
}

.menu a {
        display: block;
}
.menu {
        list-style-type: none;
}

.menusearch {
        text-indent: 0;
        text-align: right;
        list-style-type: none;
        font-size: smaller;
}

.menusearch input[name=words] {
        width: 100%;
        box-sizing: border-box;
}

.relatedrecipes {
        text-indent: 0;
        list-style-type: none;
        list-style-position: inside;
        vertical-align: middle;
        margin-left: 0;
        text-align: left;

}

.relatedrecipesitem {
        margin-left: 1em;
        font-size: xx-small;
}

.topmenu {
        font-size: small;
        margin-right: 6em;
}

.topmenutitle {
        float: left;
        padding-left: 1%;
        padding-right: 1%;
        width: 15%;
}

.topmenuitem {
        border: none;
        padding-left: 15%;
}

#topmenu { z-index: 1; }
#topmenu ul { margin: 0; padding: 0; }
#topmenu li { margin: 0; padding: 0; list-style-type: none; }

li.topmenuitemmainitem {
        display: inline;
        float: left;
        position: relative;
}

li.topmenuitemmainitem a {
        padding-bottom: 0;
        padding-left: 0.5em;
        padding-right: 0.5em;
}

/* not supported by MSIE, that is why we need extra javascript */
li.topmenuitemmainitem:hover > ul {
        visibility: visible;
}


ul.topmenuitemsubmenu {
        z-index: 100;  /* big z-index to be always on top */
        display: block;
        visibility: hidden;
        text-align: left;
        position: absolute;
        top: 1.1em;
        left: -0.3em;
        width: 13em;
        /* default border, so it the theme is not up to date, it still
        looks ok ; keep that color please, some themes do not override it */
         border: thin solid #F1F1F1;
}


ul.topmenuitemsubmenu li {
        display: block;

        /* default border, so it the theme is not up to date, it still
        looks ok */
        border: solid thin #F1F1F1;
        /* no top border, that would be make too large separators
         while it is perfectly fine to overload the right and bottom with
        the ul border, it makes some kind of light 3d effect*/
        border-top: none;
        border-left: 0.4em solid #E2E2E2;
}

ul.topmenuitemsubmenu li a {
        margin: 0;
        display: block;
        line-height: normal;
        text-decoration: none;
}


li.topmenuitemsubmenuseparator {
        line-height: 2px;
}


/* Here we do something quite strange to avoid an overlap of the menu:
        We add two divs, one in float right, the other with clear
        right.
        Ideally, only a clear left would have done trick, but it does not
        because the menu is a float left like the menu

    */
#topmenunooverlap {
        visibility: hidden;
        background: red;
        margin-right: 50%;
        padding: 0;
        float: right;
        height: 0.5em;
}

#topmenunooverlapbis {
        visibility: hidden;
        padding: 0;
        margin: 0;
        clear: right;
        height: 0.5em;
}
.boxoptions {
        /* for some reason, with firefox, this is necessary, and it does                 not change anything for the others */
        margin-top: 1em;
}


/* only for bots */
#website {
        visibility: hidden;
        display: none;
}


/**********************************************************************
 *
 * Boxes
 *
 **********************************************************************/

.box {
        width: 96%;
        margin-left: 2%;
          margin-right: 2%;
        vertical-align: top;
        border-spacing: 1px;
        border: 0;
}

.boxli {
        padding: 0;
        margin: 0;
        border: 0;
        border-spacing: 0;
}



.boxtitle {
        font-weight: bold;
        text-align: center;
}

.boxtitle a {
        display: block;
}

.boxitem {
        padding-left: 1%;
        text-indent: 0;
        list-style-type: none;
        text-align: left;
}


.boxitemextra {
        text-align: right;
        font-size: smaller;
        vertical-align: top;
}


.boxitemalt {
        padding-left: 1%;
        text-indent: 0;
        list-style-type: none;
        text-align: left;
}

.boxitemaltextra {
        text-align: right;
        font-size: smaller;
        vertical-align: top;
}


.boxoptions {
        width: 95%;
        padding: 1%;
        text-align: left;
        font-size: small;

}

/* by default, the boxoption will provide content, so the page should work
  properly with or without javascript */
#boxoptionslinkshow {
        cursor: pointer;
        display: none;
}
#boxoptionslinkhide {
        cursor: pointer;
}

.boxoptionssubmit {
        vertical-align: bottom;
        text-align: right;
        float: right;
        height: 1em;
}

.boxhighlight {
        padding-left: 1%;
        text-indent: 0;
        list-style-type: none;
        text-align: left;
        background-color: #f7c58f;
        color: black;
}

.boxhighlightextra {
        text-align: right;
        font-size: smaller;
        vertical-align: top;
}


/**********************************************************************
 *
 * Trackers specific
 *
 **********************************************************************/

.trackersoriginalsubmission {
        padding-left: 0.2em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        border-left: thin #b5b5b5 solid;
}

/**********************************************************************
 *
 * Priorities
 *
 **********************************************************************/


.priora {
        background-color: #fff2f2;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none; }


.priorb {
        background-color: #ffe8e8;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none; }

.priorc {
        background-color: #ffe0e0;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none; }

.priord {
        background-color: #ffd8d8;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none; }

.priore {
        background-color: #ffcece;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none;  }

.priorf {
        background-color: #ffc6c6;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none; }
.priorg {
        background-color: #ffbfbf;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none; }
.priorh {
        background-color: #ffb7b7;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none; }
.priori {
        background-color: #ffadad;
        border: thin solid #ef6e6e;
        text-indent: 0;
        list-style-type: none; }


.prioraclosed {
        background-color: #F5FFEB;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }
.priorbclosed {
        background-color: #EDFFE6;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }
.priorcclosed {
        background-color: #EEFFE1;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }
.priordclosed {
        background-color: #E0FFD5;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }

.prioreclosed {
        background-color: #CCFFBB;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }

.priorfclosed {
        background-color: #C6FFB9;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }
.priorgclosed {
        background-color: #C0FFB2;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }
.priorhclosed {
        background-color: #ADFFA4;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }
.prioriclosed {
        background-color: #A0FF9D;
        border: thin solid #51DA96;
        text-indent: 0;
        list-style-type: none; }


h1.priora { text-shadow: 0.1em 0.1em #f89b9b; }
h1.priorb { text-shadow: 0.1em 0.1em #f89b9b; }
h1.priorc { text-shadow: 0.1em 0.1em #f89b9b; }
h1.priord { text-shadow: 0.1em 0.1em #f89b9b; }
h1.priore { text-shadow: 0.1em 0.1em #f89b9b; }
h1.priorf { text-shadow: 0.1em 0.1em #f89b9b; }
h1.priorg { text-shadow: 0.1em 0.1em #f89b9b; }
h1.priorh { text-shadow: 0.1em 0.1em #f89b9b; }
h1.priori { text-shadow: 0.1em 0.1em #f89b9b; }

h1.prioraclosed { text-shadow: 0.1em 0.1em #8cf2bf; }
h1.priorbclosed { text-shadow: 0.1em 0.1em #8cf2bf; }
h1.priorcclosed { text-shadow: 0.1em 0.1em #8cf2bf; }
h1.priordclosed { text-shadow: 0.1em 0.1em #8cf2bf; }
h1.prioreclosed { text-shadow: 0.1em 0.1em #8cf2bf; }
h1.priorfclosed { text-shadow: 0.1em 0.1em #8cf2bf; }
h1.priorgclosed { text-shadow: 0.1em 0.1em #8cf2bf; }
h1.priorhclosed { text-shadow: 0.1em 0.1em #8cf2bf; }
h1.prioriclosed { text-shadow: 0.1em 0.1em #8cf2bf; }


tr.priora a {
        display: block;
}
tr.priorb a {
        display: block;
}
tr.priorc a {
        display: block;
}
tr.priord a {
        display: block;
}
tr.priore a {
        display: block;
}
tr.priorf a {
        display: block;
}
tr.priorg a {
        display: block;
}
tr.priorh a {
        display: block;
}
tr.priori a {
        display: block;
}

tr.prioraclosed a {
        display: block;
}
tr.priorbclosed a {
        display: block;
}
tr.priorcclosed a {
        display: block;
}
tr.priordclosed a {
        display: block;
}
tr.prioreclosed a {
        display: block;
}
tr.priorfclosed a {
        display: block;
}
tr.priorgclosed a {
        display: block;
}
tr.priorhclosed a {
        display: block;
}
tr.prioriclosed a {
        display: block;
}

.menu .priore
{
 /* when the priority is included in a menu, we dont want any border effect */
 border: none;
}

.feedback-hide
{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: relative;
}
/* table in graphs.php */
table.graphs
{
  width: 98%;
}
table.graphs tr.half-width
{
  width: 50%;
}
table.graphs td.first
{
  width: 15%;
  text-align: right;
  vertical-align: middle;
}
table.graphs td.second
{
  width: 5%;
  text-align: right;
  vertical-align: middle;
}
table.graphs td.third
{
  width: 75%;
  text-align: left;
  vertical-align: middle;
}
table.graphs td.third div.prioraclosed
{
  width: 95%;
}
table.graphs div.prioraclosed div
{
  padding: 1px;
  line-height: 1em;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
}
/* Link to RSS feed with an icon.  */
a.inline-link
{
  display: inline;
}
/* Support Freedom image */
img.support-freedom
{
  width: 100%;
  margin-bottom: 0.2em;
}
/* GPLQuickForm */
span.red
{
  color: red;
}
td.lightgrey
{
  background: lightgrey;
}
form.gpl-quick-form .label
{
  text-align: right;
  font-weight: bold;
}
form.gpl-quick-form .element
{
  text-align: left;
}
form.gpl-quick-form .error
{
  color: red;
}
