/* Common stylesheet for all themes.

Copyright (C) 1999, 2000 The SourceForge Crew
Copyright (C) 2000-2006 Mathieu Roy <yeupou--gnu.org>
Copyright (C) 2014, 2016, 2017 Assaf Gordon
Copyright (C) 2001-2011, 2013, 2017 Sylvain Beucler
Copyright (C) 2013, 2014, 2017-2025 Ineiev

This file is part of Savane.

Code written before 2008-03-30 (commit 8b757b2565ff) is distributed
under the terms of the GNU General Public license version 3 or (at your
option) any later version; further contributions are covered by
the GNU Affero General Public license version 3 or (at your option)
any later version.  The license notices for the AGPL and the GPL follow.

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 <https://www.gnu.org/licenses/>.

Savane is free software: you can redistribute it and/or modify
it under the terms of the GNU 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 General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.  */

/* THIS CSS DEFINES BASIC ELEMENTS AND IS SUPPOSED TO BE IMPORTED */
/* GUIDELINES VERSION FOLLOWED: 1.18 */

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

body { font-family: sans-serif; }

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

p, td a
{
  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 posted.  */
  border: thin dashed black;
  margin-left: 0.5em;
  background-color: #FFFCA8;
  color: black;
}

/* The Join FSF button.  */
body span.button a
{
  border-radius: 1em;
  -moz-border-radius: 1em;
  -khtml-border-radius: 1em;
  -webkit-border-radius: 1em;
  -opera-border-radius: 1em;
}
body span.button a
{
  display: block;
  line-height: 1.2em;
  text-align: center;
  text-decoration: none;
  padding: .3em .5em;
  border: .5em solid #be0d0d;
  color: black;
  background: white;
  margin-top: .5em;
}
body span.button a strong
{
  line-height: 2em;
  font-style: italic;
  font-size: 1.7em;
}
body span.button a img
{
  height: 1.5em;
  padding: .25em;
  width: 95%;
}

body span.button a:hover
{
  color: #777;
  border-color: #777;
  text-decoration: none;
}
div.tracker_comment
{
  font-family: monospace;
}
div.tracker_comment img
{
  max-width: 40em;
}
div.tracker_comment blockquote
{
  margin-left: 0;
}

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; }

.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;
}

.minusorplus:after { content: " "; }

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

.feedback p, .feedbackerror p, .feedbackerrorandsuccess p
{
  margin: 0;
  padding-right: 0;
  padding-left: 0;
}
.feedback, .feedbackerror, .feedbackerrorandsuccess
{
  cursor: pointer;
  vertical-align: middle;
  font-weight: normal;
  text-align: left;
  position: fixed;
  top: 1%;
  right: 9%;
  bottom: auto;
  /* Feedback should not interfere with the menu (width: 15%):
     so we have 9% + menu.  */
  left: 24%;
  opacity: 0.9;
}

.feedback
{
  font-size: smaller;
  border: thin solid #005d23;
  background-color: #e7ffe8;
  color: #005d23;
}

.feedbackerror
{
  border: thin solid #871b00;
  background-color: #ffeae5;
  color: #871b00;
}

/* This last feedback style is used when there was both Ok
   and error feedbacks.  */
.feedbackerrorandsuccess
{
  font-size: smaller;
  border: thin solid #804206;
  background-color: #ffd1a5;
  color: #804206;
}

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

.feedbacktitle, .feedbackerrortitle, .feedbackerrorandsuccesstitle
{
  vertical-align: middle;
  font-weight: bold;
  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;
}

.feedbacktitle { background-color: #005d23; }
.feedbackerrortitle { background-color: #871b00; }

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

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

/* Button to make the hidden feedback showed back.  It is hidden by default.
It does not carry every possible colors for feedback, it would overcomplicate
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;
}

.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;
}

.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
{
  margin-left: 0.5em;
  font-style: italic;
}

.quote em, .quote i
{
  font-style: normal;
}

/* Alignment, 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;
}

/* The next two classes are .splitleft and .splitright used
  in the reverse sequence, from left to right. */
.splitsecond { margin-right: 1%; margin-left: 51%; }
.splitfirst
{
  display: block;
  float: left;
  margin-left: 1%;
  width: 49%;
  overflow: hidden;
  vertical-align: top;
}

.floatleft
{
  float: left;
  margin-right: 1em;
}

.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; }

.highlight
{
  background-color: #f7c58f;
  color: black;
}

/* Note: 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],
.menusearch input[name=words0],
.menusearch input[name=words1]
{
  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;
}
li.topmenuitemmainitem span
{
  margin: 1em;
}

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: 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;
}

#topmenu ul.topmenuitemsubmenu ul.topmenuitemsubmenu
{
  margin-top: .5em;
  left: 0;
}

ul.topmenuitemsubmenu li
{
  display: block;

  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.sublist
{
  border: none;
}

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

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

ul.group-page-admins
{
  list-style-type: none;
  padding-right: 0;
  padding-left: 0;
  margin-top: .3em;
  margin-bottom: .3em;
}

/* 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;
}
/* For some reason this is necessary with firefox, and it does
not change anything for other browsers.  */
.boxoptions { margin-top: 1em; }

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

/* Boxes.  */

.box
{
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: .5em;
  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 h2
{
  font-size: 1em;
  margin: 0;
  font-weight: bold;
}

.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 show the HTML, 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;
  padding-left: 2em;
  padding-right: 2em;
}

.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;
}


/* Tracker-specific definitions.  */

.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;
}

tr.priora a, tr.priorb a, tr.priorc a, tr.priord a, tr.priore a, tr.priorf a,
tr.priorg a, tr.priorh a, tr.priori a,
tr.prioraclosed a, tr.priorbclosed a, tr.priorcclosed a, tr.priordclosed a,
tr.prioreclosed a, tr.priorfclosed a, tr.priorgclosed a, tr.priorhclosed a,
tr.prioriclosed a
{
  display: block;
}

/* When the priority is included in a menu, we dont want any border effect.  */
.menu .priore { 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;
}
span.show-hide
{
  cursor: pointer;
}
