/*
  Copyright 1998-2018 PasDoc developers.

  This file is part of "PasDoc".

  "PasDoc" 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 2 of the License, or
  (at your option) any later version.

  "PasDoc" 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 "PasDoc"; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA

  ----------------------------------------------------------------------------
*/

body, html {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: black;
  background-color: white;
}

p {
	color: #777;
}

p strong { color: black; }

.container {
  width: 100%;
  height: 100%;
  border-spacing: 0;
}

@keyframes slideAndFade {
  from {
    /* Start from below the visible area and transparent */
    top: 100vh;
    opacity: 0;
  }
  to {
    /* End at its normal position and fully opaque */
    top: 50vh;
    opacity: 1;
	transform: translateY(-50%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.navigation {
  width: 15em; /* must match .content margin-left */
  color: black;
  background-color: #DFE;
  position: fixed;
  left: 0;
  box-sizing: border-box; /* without this, you could not have padding here, it would overlap with .content, causing errors on narrow screens */
  padding: 1em;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 5px 5px 5px rgb(0,0,0,0.15);
  animation: slideAndFade 1s ease-out forwards;
  margin: 0.25em;
}

.navigation ul {
  margin: 0em;
  padding: 0em;
}
.navigation li {
  list-style-type: none;
  margin: 0.2em 0em 0em 0em;
  padding: 0.25em;
}
.navigation h2 {
  text-align: left;
  margin: 0em;
  padding: 0.25em;
  font-size: 14px;
  font-weight: normal;
}

#tipue_search_input {
  width: 8.5em;
}

#tipue_search_button {
  background-color: #20bf6b;
  cursor: pointer;
  border-radius: 0 10px 10px 0;
}

#tipue_search_button:hover {
  background-color: #40df8b;
}

.content {
  margin-left: 15.5em;
  padding: 2%;
}
.content h1 {
  margin-top: 0;
}

@media (max-width: 800px) { 
  .container {
    display: flex;
	flex-direction: column;
  }
  .navigation {
	position: static;
	animation: none;
  }
  .content {
	margin-left: 0;
  }
}

.appinfo {
  float: right;
  text-align: right;
  margin-bottom: 1em;
}

img { border:0px; }

hr {
  border-bottom: medium none;
  border-top: thin solid #888;
}

a:link {color:#3d578c; text-decoration: none; }
a:visited {color:#7E5C31; text-decoration: none; }
a:hover {text-decoration: underline; }
a:active {text-decoration: underline; }

p a:link { color: #00a285; }
p a:visited { color: #02d2b5; }

.navigation a { display: inline-block; padding-left: 0; padding-right: 3px; }
.navigation a:link { color: #666; text-decoration: none; }
.navigation a:visited { color: #666; text-decoration: none; }
.navigation a:hover { color: black; text-decoration: none; 
	padding-left: 3px; padding-right: 0; text-shadow: 5px 5px 5px rgb(0,0,0,0.25);
    transition: all 0.3s ease-out; }
.navigation a:active { color: #666; text-decoration: none; }

a.bold:link {color:#3d578c; text-decoration: none; font-weight:bold; }
a.bold:visited {color:#7E5C31; text-decoration: none; font-weight:bold; }
a.bold:hover {text-decoration: underline; font-weight:bold; }
a.bold:active {text-decoration: underline; font-weight:bold; }

a.section {color: #666; text-decoration: none; font-weight: bold; }
a.section:hover {color: #222; text-decoration: underline; font-weight: bold; }

.float-boton {
	float: right;
	margin-block-start: 0.15em;
	margin-block-end: 0.15em;
}

a.boton {
    display: inline-block;
	font-size: 14px;
	font-weight: normal;
    text-align: center;
    color: #fff !important;
    padding: 8px 20px;
    background-color: #20bf6b;
    border-radius: 35px;
    border: 2px solid #20bf6b;
    box-shadow: 0px 5px 18px rgba(0, 0, 0, .2);
    transition: all 0.3s ease 0s;
}

a.boton:hover {
    color: #20bf6b !important;
    background-color: transparent;
    border-radius: 30px;
    transition: all 0.3s ease 0s;
    box-shadow: 0px 15px 18px rgba(32, 191, 107, 0.4);
    transform: translateY(-6px);
	text-decoration: none;
}

ul.useslist a:link {color:#3d578c; text-decoration: none; font-weight:bold; }
ul.useslist a:visited {color:#7E5C31; text-decoration: none; font-weight:bold; }
ul.useslist a:hover {text-decoration: underline; font-weight:bold; }
ul.useslist a:active {text-decoration: underline; font-weight:bold; }

ul.hierarchy { list-style-type:none; }
ul.hierarchylevel { list-style-type:none; }

tr.list { background: #f7f8fb; }
tr.list2 { background: #fbfcff; }
tr.listheader, .table_tag th { background: #20bf6b; color: white; }
tr.listheader th, .table_tag th { border-radius: 10px 10px 0 0; }
.table_tag th p { color: white; }

.table_tag th p a:link { color: #def; }
.table_tag th p a:visited { color: #cdf; }


table.wide_list { border-spacing:2px; width:100%; }
table.wide_list td { vertical-align:top; padding:4px; }

table.markerlegend { width:auto; }
table.markerlegend td.legendmarker { text-align:center; }

.sections { 
  height: 5em;
  width: 98%;
  display: flex; /* Enable flexbox */
  align-items: center; /* Center children vertically */
  justify-content: center; /* Center children horizontally, optional */
  flex-wrap: wrap;
  background: white;
}

.sections .one_section {
  display: inline-block;
  margin: 0;
  padding: 0 0.5em;
  color: #bbb;
}

.sections .one_section a {
  padding: 0.5em 0;
  display: inline-block;
  font-weight: normal;
  border-bottom: 2px solid white;
}

.sections .one_section a:hover {
  text-decoration: none;
  border-bottom: 2px solid #20bf6b;
}

.menu_toggle {
    display: inline-block;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); 
	height: 28px;
	width: 28px;
	padding: 0;
    margin: 0;
	margin-right: 0.5em;
	cursor: pointer;
    color: #bbb;
	vertical-align: bottom; /* relative to text */
}

table.summary td.itemcode { width:100%; }
table.detail td.itemcode { width:100%; border-radius: 0 10px 0 0; }
table.detail td.visibility { border-radius: 10px 0 0 0; }

td.itemname {white-space:nowrap; }
td.itemunit {white-space:nowrap; }
td.itemdesc { width:100%; }

.nodescription, .inheritdescription { color: #c70; }
.inheritdescription { display: none; }
dl.parameters dt {
  color:blue;
}

code {
  font-family: monospace;
  font-size:1.2em;
}

/* style for warning and note tag */
dl.tag.warning {
  margin-left:-2px;
  padding-left: 3px;
  border-left:4px solid;
  border-color: #FF0000;
}
dl.tag.note {
  margin-left:-2px;
  padding-left: 3px;
  border-left:4px solid;
  border-color: #D0C000;
}

/* Various browsers have various default styles for <h6>,
   sometimes ugly for our purposes, so it's best to set things
   like font-size and font-weight in out pasdoc.css explicitly. */
h6.description_section {
  /* font-size 100% means that it has the same font size as the
     parent element, i.e. normal description text */
  font-size: 100%;
  font-weight: bold;
  /* By default browsers usually have some large margin-bottom and
     margin-top for <h1-6> tags. In our case, margin-bottom is
     unnecessary, we want to visually show that description_section
     is closely related to content below. In this situation
     (where the font size is just as a normal text), smaller bottom
     margin seems to look good. */
  margin-top: 1.4em;
  margin-bottom: 0em;
}

/* Style applied to Pascal code in documentation
   (e.g. produced by @longcode tag) } */
.longcode {
  font-family: monospace;
  font-size: 1.2em;
  background-color: #eee;
  padding: 0.5em;
  border: thin solid #ccc;
}
span.pascal_string { color: #000080; }
span.pascal_keyword { font-weight: bolder; }
span.pascal_comment { color: #000080; font-style: italic; }
span.pascal_compiler_comment { color: #008000; }
span.pascal_numeric { }
span.pascal_hex { }

p.hint_directive { color: red; }

input#search_text { }
input#search_submit_button { }

acronym.mispelling { background-color: #f00; }

/* Actually this reduces vertical space between *every* paragraph
   inside list with @itemSpacing(compact).
   While we would like to reduce this space only for the
   top of 1st and bottom of last paragraph within each list item.
   But, well, user probably will not do any paragraph breaks
   within a list with @itemSpacing(compact) anyway, so it's
   acceptable solution. */
ul.compact_spacing p { margin-top: 0em; margin-bottom: 0em; }
ol.compact_spacing p { margin-top: 0em; margin-bottom: 0em; }
dl.compact_spacing p { margin-top: 0em; margin-bottom: 0em; }

/* Style for table created by @table tags
*/
table.table_tag { border-collapse: none; }
table.table_tag td { border: none; padding: 0.3em; }
table.table_tag th { border: none; padding: 0.3em; }
table.table_tag tr:nth-child(odd) { background: #f4f4f8; }
table.table_tag tr:nth-child(even) { background: #fbfcff; }

table.detail {
  border: 1pt solid #eee;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  background: #fffeea;
  border-radius: 10px;
  border-spacing: 0;
}

.search-form { white-space: nowrap; }
.search-input input { max-width: 80%; } /* this provides some safe space to always fit even on very narrow screens */
.search-input input, .search-button { display: inline-block; vertical-align: middle; }
.search-input { display: inline-block; }

/* Do not make extra vertical space at the beginning/end of table cells.
   We need ">" selector, to not change paragraphs inside lists inside
   table cells. */
table.table_tag td > p:first-child,
table.table_tag th > p:first-child,
       td.itemdesc > p:first-child { margin-top: 0em; }

table.table_tag td > p:last-child,
table.table_tag th > p:last-child,
       td.itemdesc > p:last-child { margin-bottom: 0em; }
