Bradley M. Kuhn
a80c95fd13
ourcoverage.html was a reasonable minimal start but not really ready
for production. Make changes necessary to put this into production,
as follows:
* Rename ourcoverage.html to vizio-coverage.html. This is just
Vizio coverage for now.
* Order articles by most in-depth/interesting. Verified this
ordering by consensus with Conservancy staff.
* mailto: link for press coverage on the main inthenews page, but
don't use that on Vizio page; it's unlikely we'll miss any of the
Vizio coverage.
* use — instead of -
* put quotes around article titles.
* Add missing PR Web article
* Switch from <p>'s to <li>'s in vizio-coverage.html
* Fix menu issues. 09a4b02
outlined the issues regarding how to
add items to menu; it does require a CSS change as explained
therein; merely using the right `base_` is not enough
* Improve menu integration. Per PR people's recommendation, the
Vizio stuff that also goes in other areas needs to be placed in
multiple menus.
694 lines
15 KiB
CSS
694 lines
15 KiB
CSS
* { margin: 0; padding: 0; }
|
|
img { border: 0; }
|
|
body { margin: 0; padding: 0; }
|
|
.clear { clear: both; }
|
|
.hidden { display: none; }
|
|
|
|
p, h1, h2, h3, h4, h5, h6, #mainContent ul, #mainContent ol {
|
|
/* margin-top: 1em; */
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
html {
|
|
/* Standard colorss. */
|
|
--khaki-green: #587733;
|
|
--light-green: #afe478;
|
|
--washed-green: #daf4be;
|
|
--light-blue: #92d4d1;
|
|
--washed-blue: #ddfbfa;
|
|
--navy: #224c57;
|
|
--orange: #ec6343;
|
|
--orange-dim: #e05340;
|
|
}
|
|
|
|
/* Some Tachyons-like classes to apply those standard colors. */
|
|
.bg-light-blue { background: var(--light-blue); }
|
|
.bg-orange { background: var(--orange); }
|
|
.orange { color: var(--orange); }
|
|
.b--light-blue { border-color: var(--light-blue); }
|
|
.navy { color: var(--navy); }
|
|
|
|
body {
|
|
/* Native font stack as per Bootstrap 5.1. */
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
"Segoe UI",
|
|
Roboto,
|
|
"Helvetica Neue", Arial,
|
|
"Noto Sans",
|
|
"Liberation Sans",
|
|
sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
font-size: .875rem;
|
|
color: #333;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--navy);
|
|
transition: all .1s ease-out;
|
|
font-weight: bold;
|
|
}
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* Missing links */
|
|
a, form { position: relative; }
|
|
.fixme,
|
|
a[href$="#fixme"]:before,
|
|
form[action$="#fixme"]:before {
|
|
border: 1px solid var(--orange);
|
|
border-radius: 6px;
|
|
content: '?';
|
|
font-size: 0.6rem;
|
|
color: var(--orange);
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
padding: 1px;
|
|
background: yellow;
|
|
/* opacity: 0.8; */
|
|
width: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
input:focus {
|
|
z-index: 3;
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 .25rem rgb(236, 99, 67, .5);
|
|
};
|
|
|
|
|
|
a.read-more {
|
|
cursor: pointer;
|
|
font-style: italic;
|
|
}
|
|
|
|
.btn-orange {
|
|
color: white;
|
|
background: var(--orange);
|
|
border: 1px solid var(--orange-dim);
|
|
}
|
|
.btn-orange:hover, .btn-orange:active {
|
|
background: var(--orange-dim);
|
|
text-decoration: none;
|
|
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
|
}
|
|
.btn-orange:focus {
|
|
box-shadow: 0 0 0 .25rem var(--orange-dim);
|
|
}
|
|
.btn-white {
|
|
color: var(--orange);
|
|
background: white;
|
|
border: 1px solid #777;
|
|
}
|
|
.btn-white:hover, .btn-white:active {
|
|
background: #eee;
|
|
text-decoration: none;
|
|
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
|
}
|
|
.btn-white:focus {
|
|
box-shadow: 0 0 0 .25rem #ddd;
|
|
}
|
|
|
|
a svg {
|
|
transition: all .2s ease;
|
|
}
|
|
a:hover svg {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.toggle-control {
|
|
cursor: pointer;
|
|
text-decoration: none; color: #557733;
|
|
}
|
|
.toggle-control:hover { text-decoration: underline; color: #577632; }
|
|
|
|
/* FIXME: We should do this: */
|
|
/* http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom */
|
|
.donate-sidebar {
|
|
background: var(--light-green) no-repeat;
|
|
position: sticky;
|
|
bottom: 0;
|
|
width: auto;
|
|
padding: 0.5rem 1rem;
|
|
margin: 2rem -0.5rem 0;
|
|
border-radius: 8px 8px 0 0;
|
|
border: 1px solid #90d468;
|
|
}
|
|
|
|
.donate-sidebar:hover {
|
|
background: #a0d870;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.donate-sidebar {
|
|
margin: 2rem -1rem 0;
|
|
}
|
|
}
|
|
|
|
p.footnote {
|
|
font-size: 85%;
|
|
}
|
|
|
|
h1 { margin-top: .75em; margin-bottom: .5em; }
|
|
h2 { margin-top: .75em; margin-bottom: .5em; }
|
|
h3 { margin-top: .6em; margin-bottom: .4em; }
|
|
|
|
#mainContent ul, #mainContent ol { padding-left: 1.5em; }
|
|
|
|
|
|
.internalNavigate { width: 19%; float: right; }
|
|
#mainContent .internalNavigate ul { list-style-type: none; padding-left: 0; }
|
|
.internalNavigate ul li { margin-top: .3em; margin-bottom: .3em; }
|
|
|
|
/* Header */
|
|
|
|
body > header {
|
|
/* background: linear-gradient(to top right, white, white, var(--washed-blue) 80%); */
|
|
overflow: auto; /* Prevent logo top margin popping out. */
|
|
}
|
|
|
|
#conservancyheader img {
|
|
max-height: 75px;
|
|
width: auto;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
#conservancyheader img {
|
|
max-height: 90px;
|
|
}
|
|
}
|
|
|
|
/* Navigation bar */
|
|
#navbar-outer {
|
|
background: var(--navy);
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
#navbar ul {
|
|
list-style: none;
|
|
text-transform: uppercase;
|
|
padding: 0;
|
|
}
|
|
#navbar li {
|
|
background: var(--navy);
|
|
position: relative;
|
|
padding-left: .25rem;
|
|
padding-right: .25rem;
|
|
}
|
|
@media screen and (min-width: 30em) {
|
|
#navbar li {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
}
|
|
}
|
|
#navbar li > a {
|
|
display: inline-block;
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 0.25rem 0.25rem 0;
|
|
/* Invisible borders to keep things even. */
|
|
border-top: 0.20rem solid var(--navy); /* A little less here. */
|
|
border-bottom: 0.25rem solid var(--navy);
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
#navbar li > a {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem
|
|
}
|
|
}
|
|
|
|
|
|
#navbar li a:hover, #navbar li a:focus {
|
|
border-bottom: 0.25rem solid var(--light-green);
|
|
}
|
|
#navbar li { padding-bottom: 0.25rem; }
|
|
|
|
/* Navbar submenus */
|
|
#navbar li ul {
|
|
display: none;
|
|
z-index: 100;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 15rem;
|
|
text-transform: none;
|
|
}
|
|
#navbar li ul a {
|
|
font-weight: normal;
|
|
}
|
|
#navbar li:hover ul {
|
|
display: block;
|
|
}
|
|
/* Right-align the second last and last sub-menus. */
|
|
#navbar li:nth-last-child(2) ul, #navbar li:nth-last-child(1) ul {
|
|
left: auto;
|
|
right: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
#menu-icon:active, #search-icon:active {
|
|
transform: scale(1.1);
|
|
}
|
|
#navbar-outer { min-height: .5rem; }
|
|
#navbar.mobile {
|
|
display: block;
|
|
max-width: 32rem;
|
|
}
|
|
#navbar.mobile.search { display: block; }
|
|
#navbar.mobile li {
|
|
display: block;
|
|
}
|
|
#navbar.mobile ul {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
display: block !important;
|
|
position: relative !important;
|
|
top: auto !important;
|
|
left: 0 !important;
|
|
right: auto !important;
|
|
text-align: left !important;
|
|
}
|
|
#navbar.mobile > ul > li {
|
|
padding-top: .5rem;
|
|
padding-bottom: .5rem;
|
|
}
|
|
#navbar.mobile > ul > li {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
#navbar.mobile li ul {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
#progressbar {
|
|
height: 1.8em;
|
|
}
|
|
|
|
#progressbar .ui-widget-header {
|
|
background: rgb(206, 31, 31);
|
|
}
|
|
|
|
#siteprogressbar .goalText {
|
|
color: #557733;
|
|
font-size: 10pt;
|
|
}
|
|
#siteprogressbar .soFarText {
|
|
font-size: 10pt;
|
|
}
|
|
#siteprogressbar .progress {
|
|
background: #577632;
|
|
}
|
|
@media all and (max-width: 600px) {
|
|
.goalText {
|
|
font-size: 8pt;
|
|
}
|
|
.soFarText {
|
|
font-size: 8pt;
|
|
}
|
|
}
|
|
#siteprogressbar .progress {
|
|
background: #577632;
|
|
}
|
|
#siteprogressbar .middle-goal {
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
#siteprogressbar .final-goal {
|
|
background: #eeeeee;
|
|
}
|
|
|
|
#fundraiser-percentage {
|
|
text-align: center;
|
|
}
|
|
|
|
#container #mainContent {
|
|
max-width: 50em;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #ffffff;
|
|
flex: 1 1 auto;
|
|
}
|
|
#container #sidebar {
|
|
background-color: #e6eae1;
|
|
padding: 1px 0.5rem 0.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
#container {
|
|
display: flex;
|
|
}
|
|
#container #sidebar {
|
|
flex: 1 0 15em;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
|
|
#container #sidebar li {
|
|
text-align: center;
|
|
list-style: none;
|
|
padding: 3px 10px 3px 10px;
|
|
margin: 5px;
|
|
border: 1px solid #CCC;
|
|
background: #eaf1f1;
|
|
background: -moz-linear-gradient(top, #fff, #eaf1f1);
|
|
background: -webkit-linear-gradient(top, #fff, #eaf1f1);
|
|
background: linear-gradient(to bottom, #fff, #eaf1f1);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaf1f1', GradientType=0);
|
|
}
|
|
#container #sidebar li a:hover { background: #577632; color: #fff; }
|
|
|
|
#container #sidebar.Sponsors ul li.Sponsors,
|
|
#container #sidebar.Directors ul li.Directors,
|
|
#container #sidebar.Eval ul li.Eval,
|
|
#container #sidebar.Overview ul li.Overview,
|
|
#container #sidebar.Contact ul li.Contact,
|
|
#container #sidebar.Staff ul li.Staff,
|
|
#container #sidebar.Outside ul li.Outside,
|
|
#container #sidebar.Transparency ul li.Transparency,
|
|
#container #sidebar.License ul li.License,
|
|
#container #sidebar.Current ul li.Current,
|
|
#container #sidebar.Services ul li.Services,
|
|
#container #sidebar.Applying ul li.Applying,
|
|
#container #sidebar.VizioTopBar ul li.VizioTopBar,
|
|
#container #sidebar.VizioMain ul li.VizioMain,
|
|
#container #sidebar.VizioPressRelease ul li.VizioPressRelase,
|
|
#container #sidebar.VizioComplaint ul li.VizioComplaint,
|
|
#container #sidebar.VizioQandA ul li.VizioQandA,
|
|
#container #sidebar.VizioPressKit ul li.VizioPressKit,
|
|
#container #sidebar.VizioPhotoAssets ul li.VizioPhotoAssets,
|
|
#container #sidebar.VizioPress ul li.VizioPress,
|
|
#container #sidebar.Glossary ul li.Glossary,
|
|
#container #sidebar.CopyleftCompliance ul li.CopyleftCompliance,
|
|
#container #sidebar.HelpComply ul li.HelpComply,
|
|
#container #sidebar.CopyleftPrinciples ul li.CopyleftPrinciples,
|
|
#container #sidebar.EnforcementStrategy ul li.EnforcementStrategy,
|
|
#container #sidebar.CopyleftCompliance ul li.CopyleftCompliance,
|
|
#container #sidebar.LiberateFirmware ul li.LiberateFirmware,
|
|
#container #sidebar.PastLawsuits ul li.PastLawsuits,
|
|
#container #sidebar.CopyleftOrg ul li.CopyleftOrg /* Never put a comma here */
|
|
{
|
|
color: #000033;
|
|
font-weight: bold;
|
|
background: #e3e6e0;
|
|
}
|
|
#container #sidebar h2 {
|
|
text-align: center;
|
|
font-size: 1.25em;
|
|
margin: 1.5em 0 0.8em 0;
|
|
}
|
|
#container #sidebar hr {
|
|
width: 75%;
|
|
float: center;
|
|
clear: all;
|
|
}
|
|
|
|
.shaded { background: #F0FFB8; padding: .1em .5em; margin-bottom: .5em; }
|
|
|
|
.columns {
|
|
}
|
|
|
|
.column h2 { font-size: 1.25em; }
|
|
.column h3 { font-size: 1.1em; }
|
|
.column hr { width: 50%; margin-left: auto; margin-right: auto; }
|
|
|
|
.column h2 a { text-decoration: none; color: #000000; }
|
|
.column h2 a:hover { text-decoration: underline; }
|
|
|
|
#conservancyfooter {
|
|
border-top: 1px solid #ccc;
|
|
text-align: center;
|
|
overflow: auto;
|
|
}
|
|
|
|
.continued {
|
|
display: block;
|
|
font-size: .9em;
|
|
font-weight: bold;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.date, .blog-tags, .blog-comments {
|
|
font-style: italic;
|
|
font-size: .9em;
|
|
margin-bottom: .3em;
|
|
margin-top: .3em;
|
|
}
|
|
|
|
a.feedlink /* RSS icon */ { display: block; float: right; font-size: 10pt; }
|
|
|
|
blockquote, div.quote /* div.quote is used by conservancy whitepaper */ {
|
|
margin-left: 2em;
|
|
margin-right: 2em;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
border: 1px solid #fff;
|
|
background: #eee;
|
|
}
|
|
|
|
.newsgraphic { float: right; }
|
|
.newsgraphic img { border: 1px solid #000; }
|
|
|
|
.picture {
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
.picture img {
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
}
|
|
.picture-small {
|
|
padding-left: 1em;
|
|
border: thin silver solid;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-size: 70%;
|
|
text-indent: 0;
|
|
margin: .25em;
|
|
min-width: 8%;
|
|
width: auto;
|
|
box-shadow: 1px 1px 2px rgba(0,0,0,.3);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.picture-small {
|
|
max-width: 20rem;
|
|
}
|
|
}
|
|
|
|
.picture-small img {
|
|
width: 100%;
|
|
}
|
|
.picture-tiny {
|
|
padding-left: 1em;
|
|
border: thin silver solid;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-size: 50%;
|
|
text-indent: 0;
|
|
margin: .25em;
|
|
min-width: 4%;
|
|
max-width: 15%;
|
|
width: auto;
|
|
}
|
|
.picture-tiny img {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.secondary_info { font-size: 83%; }
|
|
.next_page_button { float: right; }
|
|
.pagination_list { text-align: center; }
|
|
.document_format { border: 1px solid #888; padding: .2em; background: #fff99d;}
|
|
.copyright_info { font-size: 90%; }
|
|
hr.footnote-separator { width: 80%; margin-left: auto; margin-right: auto; }
|
|
.doc-footer { font-style: italic; }
|
|
.doc-footer > *:first-child::before { content: "["; }
|
|
.doc-footer > *:last-child::after { content: "]"; }
|
|
|
|
/* Resources pages */
|
|
div.download-formats { margin-top: 2em; margin-bottom: 2em; }
|
|
.download-formats p { display: inline; }
|
|
#mainContent .download-formats ul { display: inline; list-style: none;
|
|
padding-left: 0; }
|
|
.download-formats ul li { display: inline; padding-left: 2em; }
|
|
|
|
/* Resources - book styles */
|
|
hr.chapter-separator { display: none; }
|
|
h2.likechapterHead { text-align: center; }
|
|
h2.chapterHead { text-align: center; }
|
|
#mainContent ul.author { list-style-type: none; padding-left: 0; }
|
|
#mainContent div.footnotes { font-style: normal; } /* remove italics */
|
|
span.sectionToc { padding-left: 2em; } /* indent TOC properly */
|
|
span.subsectionToc { padding-left: 4em; }
|
|
span.subsubsectionToc { padding-left: 6em;}
|
|
.js, .js p, .js p.bibitem, .js p.bibitem-p { background-color: #cde7e9; }
|
|
|
|
body.conservancy-Home #navbar ul li.Home > a,
|
|
body.conservancy-Projects #navbar ul li.Projects > a,
|
|
body.conservancy-WhoWeAre #navbar ul li.WhoWeAre > a,
|
|
body.conservancy-WhatWeDo #navbar ul li.WhatWeDo > a,
|
|
body.conservancy-Learn #navbar ul li.Learn > a,
|
|
body.conservancy-news #navbar ul li.news > a,
|
|
body.conservancy-blog #navbar ul li.blog > a,
|
|
body.conservancy-About #navbar ul li.About > a,
|
|
body.conservancy-Compliance #navbar ul li.compliance > a,
|
|
body.conservancy-donate #navbar ul li.donate > a,
|
|
body.conservancy-npoacct #navbar ul li.npoacct > a,
|
|
body.conservancy-sponsors #navbar ul li.sponsors > a /* NO COMMA HERE! */
|
|
{
|
|
border-bottom: 4px solid var(--khaki-green);
|
|
}
|
|
|
|
#supporters ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#supporters li:before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 2em;
|
|
width: 2em;
|
|
background-image: url(/img/conservancy-supporter-heart.svg);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
padding: 0.25em 1.2em 0.25em 0.25em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#supporters li {
|
|
padding: 0.5em 2em 1em 2em;
|
|
margin-left: .25em;
|
|
list-style: none;
|
|
}
|
|
|
|
#sponsor ul {
|
|
clear: all;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#sponsor li {
|
|
width: 100%;
|
|
float: left;
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
list-style: none;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
ul#sponsor li:after {
|
|
content: "";
|
|
display: block;
|
|
height: 2px;
|
|
width: 30%;
|
|
margin-left: 35%;
|
|
margin-right: 35%;
|
|
margin-top: 4px;
|
|
background: #afe478;
|
|
}
|
|
|
|
#subbox {
|
|
position: absolute;
|
|
padding-top: 10px;
|
|
right: 0px;
|
|
width: 200px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
img.inside-faq {
|
|
max-width: 100%;
|
|
width: auto;
|
|
overflow: scroll;
|
|
}
|
|
pre {
|
|
overflow: auto;
|
|
}
|
|
|
|
.supporter-type-selector a {
|
|
font-size: 125%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.supporter-type-selector a.supporter-type-selector-selected {
|
|
font-size: 127%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Make dl's ( such as for FAQ entries) look nice on screens, both big and small. */
|
|
|
|
dl {
|
|
border: 3px double #ccc;
|
|
padding: 0.5em;
|
|
}
|
|
dt {
|
|
text-align: center;
|
|
margin: 0em 1em 0.5em 0.5em;
|
|
font-weight: bold;
|
|
color: green; }
|
|
dd {
|
|
margin: 0 0 1.5em 2em;
|
|
}
|
|
|
|
.fundraiser-top-text {
|
|
background: #F0FFB8;
|
|
padding: .2em .7em;
|
|
}
|
|
.fundraiser-top-text * {
|
|
margin: .5em auto;
|
|
max-width: 70em;
|
|
width: 95%;
|
|
}
|
|
.fundraiser-top-text p {
|
|
font-size: 110%;
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Fallback elements created by conservancy.js when no video source is
|
|
supported. */
|
|
div.small-right, div.medium-right {
|
|
border: thick solid #577632;
|
|
padding: .3em;
|
|
text-align: center;
|
|
}
|
|
|
|
.breadcrumbs {
|
|
font-size: 14px;
|
|
padding: 0.5rem 0 0;
|
|
}
|
|
|
|
.breadcrumbs, .breadcrumbs a {
|
|
color: #777;
|
|
}
|
|
.breadcrumbs a {
|
|
padding: 0 0.5em;
|
|
}
|
|
.breadcrumbs a:first-child {
|
|
padding-left: 0;
|
|
}
|
|
.breadcrumbs span {
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
.press-release .date, .conservancy-blog .date {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Expanding sections. */
|
|
details summary {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
padding: 0.5rem 0;
|
|
}
|