/*
Stylesheet for Octave Forge.

The design is largely inspired by GNU Octave's website, which has been
redesigned in 2016 by Alex Krolick with the Octave community.

Copyright (C) 2018 Oliver Heimlich <oheim@posteo.de>

You can redistribute this program 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.

This program 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 <http://www.gnu.org/licenses/>.
*/

/* Font declarations */
@import url('fonts/fontawesome-free-5.2.0-web/css/solid.min.css');
@import url('fonts/fontawesome-free-5.2.0-web/css/fontawesome.min.css');

@font-face
{
	font-family: 'PT Sans';
	font-weight: normal;
	font-style: normal;
	src: url('fonts/pt-sans-2.005-web/PTS55F_W.eot');
	src: local('PT Sans'),
	     url('fonts/pt-sans-2.005-web/PTS55F_W.eot?#iefix') format('embedded-opentype'),
	     url('fonts/pt-sans-2.005-web/PTS55F_W.woff') format('woff'),
	     url('fonts/pt-sans-2.005-web/PTS55F_W.ttf') format('truetype'),
	     url('fonts/pt-sans-2.005-web/PTS55F_W.svg#PTSans-Regular') format('svg');
}
@font-face
{
	font-family: 'PT Sans';
	font-weight: normal;
	font-style: italic;
	src: url('fonts/pt-sans-2.005-web/PTS56F_W.eot');
	src: local('PT Sans Italic'),
	     url('fonts/pt-sans-2.005-web/PTS56F_W.eot?#iefix') format('embedded-opentype'),
	     url('fonts/pt-sans-2.005-web/PTS56F_W.woff') format('woff'),
	     url('fonts/pt-sans-2.005-web/PTS56F_W.ttf') format('truetype'),
	     url('fonts/pt-sans-2.005-web/PTS56F_W.svg#PTSans-Italic') format('svg');
}
@font-face
{
	font-family: 'PT Sans';
	font-weight: bold;
	font-style: normal;
	src: url('fonts/pt-sans-2.005-web/PTS75F_W.eot');
	src: local('PT Sans Bold'),
	     url('fonts/pt-sans-2.005-web/PTS75F_W.eot?#iefix') format('embedded-opentype'),
	     url('fonts/pt-sans-2.005-web/PTS75F_W.woff') format('woff'),
	     url('fonts/pt-sans-2.005-web/PTS75F_W.ttf') format('truetype'),
	     url('fonts/pt-sans-2.005-web/PTS75F_W.svg#PTSans-Bold') format('svg');
}
@font-face
{
	font-family: 'PT Sans';
	font-weight: bold;
	font-style: italic;
	src: url('fonts/pt-sans-2.005-web/PTS76F_W.eot');
	src: local('PT Sans Bold Italic'),
	     url('fonts/pt-sans-2.005-web/PTS76F_W.eot?#iefix') format('embedded-opentype'),
	     url('fonts/pt-sans-2.005-web/PTS76F_W.woff') format('woff'),
	     url('fonts/pt-sans-2.005-web/PTS76F_W.ttf') format('truetype'),
	     url('fonts/pt-sans-2.005-web/PTS76F_W.svg#PTSans-BoldItalic') format('svg');
}
@font-face
{
	font-family: 'PT Mono';
	font-weight: normal;
	font-style: normal;
	src: url('fonts/pt-mono-1.003-web/PTM55F_W.eot');
	src: local('PT Mono'),
	     url('fonts/pt-mono-1.003-web/PTM55F_W.eot?#iefix') format('embedded-opentype'),
	     url('fonts/pt-mono-1.003-web/PTM55F_W.woff') format('woff'),
	     url('fonts/pt-mono-1.003-web/PTM55F_W.ttf') format('truetype'),
	     url('fonts/pt-mono-1.003-web/PTM55F_W.svg#PTMono-Regular') format('svg');
}

/* Basic font settings */
body
{
	font-family: 'PT Sans', sans-serif;
}
pre,
code,
kbd,
samp
{
	font-family: 'PT Mono', monospace;
	color: #FF7226;
}
.octave-input::before,
.shell-input::before
{
	color: #db8604;
	font-weight: bold;
}
.octave-input::before
{
	content: '> ';
}
.shell-input::before {
	content: '$ ';
}
pre
{
	overflow: auto;
	color: black;
	background-color: #ffe99c;
	padding: 1em;
}

body
{
	margin: 0;
}

/*
	Original colors of Octave Forge:
		orange #fcaf3e
		blue #729fcf

	New colors:
		blue   #427cbd
		orange #ff874b
		yellow #ffd64b
		green  #38bf93
		violet #564dc5
		red    #f0466e
*/

/* Header container of the surrounding page */
header
{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	background: #427cbd;
	box-shadow: 0 8px 8px 8px white;
	overflow: hidden;
	z-index: 20;
}
header > :first-child
{
	display: block;
	margin: auto;
	width: 100vw; /* synchronize width between frame and parent */
	height: 48px;
	max-width: 62.5rem;
	transition: height 80ms ease-out;
}

/* Header content (in header.html) */
#of-header,
#of-footer
{
	overflow: hidden;
	line-height: 48px;
}
#of-header #of-logo > *
{
	float: left;
	color: white;
}
#of-header #of-logo > :first-child
{
	line-height: initial;
	margin: 8px 1rem 8px 0;
}
#of-header #of-logo h1
{
	font-size: 140%;
	font-weight: normal;
	margin: 0;
	margin-right: 1rem;
}
#of-header #of-menu
{
	float: right;
	color: white;
	font-weight: bold;
}
#of-header #of-menu > ul,
#of-header #of-menu > ul > li
{
	margin: 0;
	padding: 0;
	display: inline;
	white-space: nowrap;
}
#of-header #of-menu a
{
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 0 1em;
}
#of-header #of-menu a:hover
{
	background-color: #2565ac;
}
#of-header #of-menu a:active
{
	background-color: #6497D0;
}

footer > :first-child
{
	display: block;
	margin: auto;
	width: 100%;
	height: 48px;
	max-width: 62.5rem;
}

/* Footer content (in footer.html) */
#of-footer
{
	display: flex;
	justify-content: space-between;
	height: 48px;
}
#of-footer > *
{
	margin: auto 0;
}
#of-footer #sf-logo > :first-child,
#of-footer #sf-logo img
{
	display: block;
	pointer-events: none;
}
#of-footer #sf-logo img
{
	border: none;
	margin: -4px -20px -4px 0; /* clean white boundary in SourceForge.net badge */
}
#of-footer
{
	font-size: small;
}
#of-footer .short
{
	display: none;
}
@media (max-width: 25rem)
{
	#of-footer #sf-logo
	{
		width: 25px;
		overflow: hidden;
	}
}
@media (max-width: 45rem)
{
	#of-footer
	{
		font-size: initial;
	}
	#of-footer .short
	{
		display: initial;
	}
	#of-footer .long
	{
		display: none;
	}
}

/*
Anchor links need to scroll up,
otherwise the link target would be covered by the header
*/
a[name]
{
	display: block;
	position: relative;
	visibility: hidden;
	top: -72px;
}

/* Responsive header menu layout */
#of-menu-open,
#of-menu-close
{
	display: none;
}
@media (max-width: 62rem)
{
	header > :first-child
	{
		/* display menu in second row */
		height: 96px;
	}
	a[name]
	{
		top: -120px;
	}
	#of-header #of-menu
	{
		float: none;
	}
	#of-header #of-logo,
	#of-header #of-menu > ul
	{
		display: table;
		margin: 0 auto;
	}
@media (max-width: 45rem)
{
	header > :first-child
	{
		/* display logo in 1st row, vertical menu shows on hover */
		height: 48px;
	}
	a[name]
	{
		top: -72px;
	}
	header > :first-child:hover,
	header > :first-child:active
	{
		/*
		Logo         = 48px
		5 Menu Items = 5 * 48px
		Padding      = 12px
		*/
		height: 300px;
	}
	#of-header
	{
		padding-bottom: 12px
	}
	#of-header #of-logo h1 {
		margin-right: 2.66em;
	}
	/*
	Open menu icon: #of-header #of-menu-open
	Close menu icon: header #of-menu-close
	*/
	#of-menu-close,
	#of-menu-open
	{
		display: block;
		position: absolute;
		right: 0;
		padding: 0 .75em;
		font-size: 24px;
		color: white;
		cursor: default;
		line-height: 48px;
	}
	#of-menu-close
	{
		top: 240px;
		visibility: hidden;
	}
	#of-menu-open
	{
		top: 0;
		transition: opacity 80ms ease-in;
	}
	#of-header:hover #of-menu-open,
	#of-header:active #of-menu-open,
	#of-menu-open:hover,
	#of-menu-open:active
	{
		opacity: 0;
	}
	#of-menu-close:focus,
	#of-menu-open:focus
	{
		outline: none;
	}
	header:hover #of-menu-close,
	header:active #of-menu-close
	{
		visibility: visible;
	}
	#of-header #of-menu > ul,
	#of-header #of-menu > ul > li,
	#of-header #of-menu a
	{
		display: block;
	}
@media (max-width: 19rem)
{
	#of-header #of-logo h1
	{
		/* hide 'Octave Forge' title, show only logo */
		display: none;
	}
}
}
}

/* Basic styling of main content */
main
{
	box-sizing: border-box;
	margin: 0 auto;
	width: 100%;
	max-width: 62.5rem;
}
@media (max-width: 64.5rem)
{
	main,
	footer
	{
		padding: 0 1rem;
	}
}
main h1
{
	font-size: 2.33rem;
	margin: 1.5rem 0;
}
main h2
{
	font-size: 1.66rem;
	font-weight: normal;
	margin: 1rem 0;
}
p
{
	line-height: 1.5em;
}
p a,
dt a,
dd a,
li a
{
	text-decoration: none;
	color: #2565ac;
}
 p a:hover,
dt a:hover,
dd a:hover,
li a:hover
{
	color: #FF7226;
}
 p a:active,
dt a:active,
dd a:active,
li a:active
{
	color: #FFA16F;
}
main  p a:not(:hover) .fas,
main dt a:not(:hover) .fas,
main dd a:not(:hover) .fas,
main li a:not(:hover) .fas
{
	/* bold symbols: use slightly lighter color compared to text */
	color: #427cbd;
}
 p a .fa,  p a .fab,  p a .fal,  p a .far,  p a .fas,
dt a .fa, dt a .fab, dt a .fal, dt a .far, dt a .fas,
dd a .fa, dd a .fab, dd a .fal, dd a .far, dd a .fas,
li a .fa, li a .fab, li a .fal, li a .far, li a .fas
{
	/* prevent line break between symbol and word */
	display: inline;
}
main ul
{
	margin: 0;
	padding: 0;
	padding-left: 2em;
	list-style: none;
}
main ul li
{
	margin: .5em 0;
}
main ul li::before
{
	position: absolute;
	content: '\f0da';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: -1.2em;
	margin-top: .15em;
	color: gray;
}
main ul li li::before
{
	content: '\f105';
}
@media (max-width: 62rem)
{
	main .of-col ul
	{
		padding-left: 1.6em;
	}
	main .of-col ul li::before
	{
		margin-left: -1em;
	}
@media (max-width: 45rem)
{
	main ul
	{
		padding-left: 1.6em;
	}
	main ul li::before
	{
		margin-left: -1em;
	}
}
}

/* Package list */
.of-pkg-list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	margin: 0 -1rem;
}
.of-pkg-list > *
{
	width: calc(33.33% - 2rem); /* 3-column layout */
	margin: 1rem 0;
}
@media (max-width: 62rem)
{
	.of-pkg-list > *
	{
		width: calc(50% - 2em); /* 2-column layout */
	}
@media (max-width: 45rem)
{
	.of-pkg-list
	{
		margin: initial;
	}
	.of-pkg-list > *
	{
		width: 100%; /* 1-column layout */
	}
}
}

/* Package list content */
.package_display
{
	border-radius: 5px;
	box-shadow: 0 .5rem 1rem -.25rem gray;
	display: grid;
	grid-gap: 1rem;
	justify-content: stretch;
	align-content: stretch;
	grid-template-columns: 0 100px auto 0;
	grid-template-rows: 0 30px 70px auto 2rem 0;
	grid-template-areas:
		". .     .           . "
		". image title       . "
		". image description . "
		". .     description . "
		". links links       . "
		". .     .           . ";
}
.package_display > *
{
	margin: 0;
}
.package_display img
{
	grid-area: image;
}
.package_desc
{
	grid-area: description;
}
.package_display > .package_name
{
	grid-area: title;
}
.package_display h3,
.of-release h3,
.of-cardbox .cardbox-title
{
	border-top: 2px solid #427cbd;
	border-bottom: 2px solid #427cbd;
	text-align: center;
	line-height: 30px;
}
.package_display h3
{
	height: 30px;
}
a.package_name
{
	text-decoration: none;
	display: block;
	color: inherit;
}
a.package_name:hover,
a.package_name:active
{
	background-color: #427cbd;
	color: white;
}
.package_display .deep_links
{
	grid-area: links;
	line-height: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}
@media (max-width: 62rem)
{
	.package_display .deep_links
	{
		justify-content: space-around;
	}
@media (max-width: 45rem)
{
	.package_display
	{
		grid-template-columns: 0 100px auto 0;
		grid-template-rows: 0 48px auto auto 0;
		grid-template-areas:
			". .           .           . "
			". image       title       . "
			". image       links       . "
			". description description . "
			". .           .           . ";
	}
}
}

/* News list */
.of-news-list dt
{
	margin-top: 1em;
}
.of-news-list dt + dd
{
	/* move dd elements up, so they start next to the dt element */
	margin-top: -2.35em;
}
.of-news-list dt + dd > :first-child
{
	margin-top: 0;
}
.of-news-list dt + dd::before
{
	/* ensure spacing between dt elements for short dd elements */
	content: '';
	float: left;
	height: 2.35em;
	margin-bottom: 1.2em;
}
.of-news-list dd + dt
{
	clear: left;
}
.of-news-list > :last-child::after
{
	/* clean last spacing */
	content: '';
	float: left;
	clear: left;
}
.of-news-list dd
{
	padding: 0 1em;
}
.of-news-list time
{
	display: inline-flex;
	flex-direction: column-reverse;
	color: gray;
	border-left: 3px solid gray;
	text-align: center;
	padding-left: 6px;
}
.of-news-list time :nth-child(1)
{
	/* month */
	font-style: italic;
	margin-bottom: -.25em;
}
.of-news-list time :nth-child(2)
{
	/* day */
	font-size: 1.75em;
	margin-top: -.5rem;
	margin-bottom: -.25em;
}
.of-news-list time :nth-child(3)
{
	/* year */
	font-size: .7em;
	margin-top: -.25em;
	margin-bottom: .25em;
}

/* Two-column content */
.of-two-col
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.of-two-col > .of-col
{
	width: calc(50% - 2rem); /* 2-column layout */
}
.of-col > :first-child
{
	margin-top: 0;
}
@media (max-width: 45em)
{
	.of-two-col > .of-col
	{
		width: 100%; /* 1-column layout */
	}
	.of-col + .of-col
	{
		margin-top: .5em;
	}
}

/* Link to RSS feed */
a.of-rss
{
	float: right;
	text-decoration: none;
	background-color: #FF8A4B;
	color: white;
	font-weight: bold;
	font-size: 1rem;
	padding: .5em .75em;
	margin: -.5em 0;
	margin-left: .75em;
}
a.of-rss:hover,
a.of-rss:active
{
	background-color: gray;
}

/* Higlighted content with border */
.of-cardbox,
.of-release
{
	border-radius: 5px;
	box-shadow: 0 .5rem 1rem -.25rem gray;
	display: grid;
	grid-gap: 1rem;
	justify-content: stretch;
	align-items: center;
	/* display centered ... */
	margin: 1em auto 2em auto;
	max-width: 42rem;
}
.of-cardbox
{
	grid-template-columns: 0 36px auto 0;
	grid-template-rows: 0 auto auto 0;
	grid-template-areas:
		". .       .       . "
		". icon    title   . "
		". content content . "
		". .       .       . ";
}
.of-cardbox > *,
.of-release > *
{
	margin: 0;
}
.of-cardbox .cardbox-icon
{
	grid-area: icon;
	font-size: 24px;
	line-height: 36px;
	text-align: center;
	color:#427cbd;
	cursor: default;
}
.of-cardbox .cardbox-title
{
	grid-area: title;
}
.of-cardbox .cardbox-content
{
	grid-area: content;
}

/* Package index page (substitutes package/index.html) */
.of-release
{
	grid-template-columns: 0 140px auto 0;
	grid-template-rows: 0 auto auto auto 0;
	grid-template-areas:
		". .     .      . "
		". title title  . "
		". icon  info  . "
		". links links  ."
		". .     .      . ";
}
.of-release > h3
{
	grid-area: title;
}
.of-release > img
{
	grid-area: icon;
	justify-self: center;
	align-self: center;
}
.of-release > dl
{
	grid-area: info;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto;
}
.of-release > dl > dd
{
	margin-left: 1em;
}
.of-release > p
{
	grid-area: links;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: baseline;
}
.of-release > p > *
{
	padding: 0 .5em;
}
@media (max-width: 42rem)
{
	.of-release > dl
	{
		grid-template-columns: auto;
	}
@media (max-width: 35rem)
{
	.of-release
	{
		grid-template-columns: 0 120px auto 0;
		grid-template-rows: 0 auto auto auto 0;
		grid-template-areas:
			". .     .      . "
			". title title  . "
			". icon  links  . "
			". info  info  ."
			". .     .      . ";
	}
	.of-release > p
	{
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.of-release > p > *
	{
		display: inline-block;
		padding: .25em 0;
	}
}
}

/* Form input (function search) */
input,
label
{
	line-height: 32px;
	padding: 0;
}
input[type=submit]
{
	background-color: #427cbd;
	border: none;
	color: white;
	font-weight: bold;
	padding: 0 1em;
	-webkit-appearance: none;
}
input[type=submit]:hover,
input[type=submit]:focus
{
	background-color: #2565ac;
	cursor: pointer;
}
input[type=text]
{
	border: 1px solid gray;
	border-radius: 5px;
	padding: 0 .5em;
}
input[type=text]:placeholder-shown
{
	font-style: italic;
}
input[type=text]:focus
{
	border-color: #FF8A4B;
}
.radio-container
{
	display: inline-flex;
}
label
{
	display: inline-block;
	margin: 0;
	padding: 0 1em;
	color: gray;
	background-color: white;
	border-color: gray;
	border-style: solid;
	border-width: 1px 0;
}
.radio-container input + label:first-of-type
{
	border-width: 1px 0 1px 1px;
	border-radius: 5px 0 0 5px;
}
.radio-container input + label:last-of-type
{
	border-width: 1px 1px 1px 0;
	border-radius: 0 5px 5px 0;
}
@media (max-width: 25rem)
{
	.radio-container
	{
		flex-direction: column;
	}
	.radio-container input + label:first-of-type
	{
		border-width: 1px 1px 0 1px;
		border-radius: 5px 5px 0 0;
	}
	.radio-container input + label:last-of-type
	{
		border-width: 0 1px 1px 1px;
		border-radius: 0 0 5px 5px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
}
.radio-container input:not(:checked) + label:hover
{
	color: #FFBE9C;
	border-color: #FFA16F;
}
.radio-container input:checked + label
{
	color: white;
	background-color: #427cbd;
	border-color: #427cbd;
}
.radio-container input[type=radio]
{
	display: none;
}
.fieldset
{
	margin: 0;
	padding: 0;
	border: none;
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: auto 6em;
	grid-template-rows: auto;
	grid-template-areas:
		"query submit"
		"options options";
}
.fieldset > input[type=text]
{
	grid-area: query;
}
.fieldset > input[type=submit]
{
	grid-area: submit;
}
.fieldset > .radio-container
{
	grid-area: options;
	justify-self: center;
}

#of-search-group-list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#of-search-group-list > *
{
	padding: 0 .5em;
}
dt.of-function .of-package
{
	color: gray;
	margin-left: .5em;
}
.match
{
	border-radius: 3px;
	margin: 0 -1px;
	padding: 0 1px;
	background-color: #FFE99C;
}

#of-intro
{
	display: grid;
	grid-template-columns: calc(50% - 140px) 224px calc(50% - 140px);
	grid-template-rows: auto;
	justify-content: space-between;
	align-items: center;
}
@media (max-width: 45rem)
{
	#of-intro
	{
		grid-template-columns: auto;
		justify-items: center;
	}
	#of-intro > img
	{
		max-width: 50vw;
		max-height: 50vw;
	}
}