/* Define basic colors and lengths */
:root {
--clrBackground0: #ffffff;
--clrBackground1: #e8f0ff;
--clrBackground2: #d0e0ff;
--clrBackground3: #80a0ff;
--clrHotBackground2: #ffd0e0;
--clrHotBackground3: #ffa080;
--clrHotForeground: #800000;
--clrTextStd: #000000;
--stdMaxWidth: 27cm;
line-height: 1.3;
font-family: Calibri, Arial, sans-serif;
font-size: 12pt;
background-color: var(--clrBackground1);
color: var(--clrTextStd);
text-align: justify;
}
@media print {
:root {
font-size: 10pt;
}
}
/* Default styles of basic HTML elements */
p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, form {
max-width: var(--stdMaxWidth); /* We cannot set max-width for , since tables and other elements then cannot expand beyond the body width */
min-width: 300px;
margin-left: auto; /* Setting margin-left and margin-right to auto centers the elements by default */
margin-right: auto;
}
body {
background-color: var(--clrBackground1);
/* background-repeat: repeat; */
margin: auto;
/* margin-top: 2ex; */
margin-bottom: 3ex;
padding-left: 0.5em;
padding-right: 0.5em;
max-width: var(--stdMaxWidth);
min-width: 300px;
}
a:link, a:visited, a:active {
color: #0010e0;
text-decoration: none;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 150%;
margin-top: 4ex;
border-top: 1px solid var(--clrBackground3);
border-bottom: 1px solid var(--clrBackground3);
background-color: var(--clrBackground2);
padding: 0.75ex 0ex;
}
h1.hot {
background-color: var(--clrHotBackground2);
border-color: var(--clrHotBackground3);
color: var(--clrHotForeground);
}
h2 {
font-size: 130%;
text-align: left;
padding-top: 2ex;
}
h3 {
font-size: 115%;
text-align: left;
padding-top: 2ex;
}
h4 {
font-size: 100%;
text-align: left;
padding-top: 2ex;
}
td,th { /* Border-less tables need additional horizontal spacing to maintain readability (contact.php) */
padding-right: 2ex;
}
a.external {
background: transparent url('../img/externallink.svg') no-repeat right center;
background-size: 1em;
padding-right: 1.25em;
}
a.stdtext {
color: var(--clrTextStd);
}
img, iframe {
border: none;
}
iframe.c { /* centered and scaled on responsive webs - DO NOT FORGET TO SET aspect-ratio ON THE APPROPRIATE iframe ELEMENT!!! */
display:block;
margin: 0 auto;
/* aspect-ratio must be set to enable the following construction for resizing the content */
max-width: 100%;
height: 100%;
}
table.address {
max-width: 100%;
border-collapse: collapse;
margin-left: 0;
margin-top: 1ex;
margin-bottom: 1ex;
}
table.address td {
vertical-align: top;
text-align: left;
padding: 0;
margin: 0;
}
table.address td:nth-child(1) {
text-align: center;
padding-right: 0.2em;
width: 0.2em;
}
.header-ad {
background: var(--clrBackground3);
color: white;
text-align: center;
font-style: italic;
padding-top: 0.25ex;
padding-bottom: 0.25ex;
margin-bottom: 2ex;
}
@media print {
.header-ad {
font-size: 10pt;
}
}
.header {
width: 100%;
border: none;
border-collapse: collapse;
text-align: left;
margin-bottom: 3ex;
}
.header td {
padding: 0;
}
.header td:nth-child(1) > img {
padding-right: 1em;
}
.header td:nth-child(2) {
width: 100%;
}
.header td:nth-child(2) > div:nth-child(1) {
font-weight: bold;
font-size: 250%;
line-height: 1.0;
}
.header td:nth-child(2) > div:nth-child(2) {
padding-top: 0.5ex;
}
.header td:nth-child(3) {
padding-left: 1em;
line-height: 1.8;
white-space: nowrap;
}
@media print {
.header td:nth-child(3) {
visibility: hidden;
}
}
.header td:nth-child(3) div img {
vertical-align: middle;
padding-right: 0.5em;
}
.funding {
margin-top: 4ex;
margin-bottom: 4ex;
text-align: center;
border: none;
border-top: 4px solid var(--clrBackground3);
}
.funding legend {
margin: auto;
font-size: larger;
font-weight: bold;
background: var(--clrBackground2);
border: 2px solid var(--clrBackground3);
padding: 1ex 1em;
}
.funding img {
padding-left: 12px;
padding-right: 12px;
padding-top: 2ex;
}
.footer {
background-color: var(--clrBackground2);
font-size: 70%;
padding: 1ex 1em;
border-top: 1px solid var(--clrBackground3);
width: 100%;
font-weight: normal;
}
.footer td:nth-child(1) {
width: 40%;
text-align: left;
}
.footer td:nth-child(2) {
width: 20%;
text-align: center;
}
.footer td:nth-child(3) {
width: 40%;
text-align: right;
}
/* Menu-like table in the ARCHIVE.PHP file */
.archivetbl {
border-collapse: collapse;
margin: auto;
}
.archivetbl tr:nth-child(odd) {
background-color:var(--clrBackground2);
}
.archivetbl tr:nth-child(even) {
background-color:var(--clrBackground3);
}
.archivetbl th {
background-color:var(--clrBackground3);
}
.archivetbl td, .archivetbl th {
text-align: center;
padding: 1ex 1em;
}
.archivetbl td.disabled {
color: #808080;
background-color: #c0c0c0;
}
/* Style applied for the 17 IYPT tasks in the TASKS.PHP file */
.task-title {
text-align: left;
padding-top: 2ex;
font-weight: bold;
font-size: larger;
}
.task-text {
margin-top: 1ex;
}
.task-text img {
float: right;
margin-left: 1em;
margin-top: 1ex;
margin-bottom: 1ex;
}
.task-advisor {
font-weight: normal;
font-size: small;
font-style: italic;
color: #808080;
}
.task-links, .task-links a {
font-weight: normal;
font-size: small;
font-style: italic;
color: #808080;
margin-top: 1ex;
}
.task-ad {
background-color: var(--clrBackground3);
text-align: center;
color: #ffffff;
padding: 1ex 1em;
margin-left: 4em;
margin-right: 4em;
}
/* Style applied for the 17 IYPT tasks in the TASKS.PHP file when 'both' mode is on */
.taskgridcontainer {
display: grid;
column-gap: 1.5em;
row-gap: 0;
grid-template-columns: repeat(auto-fill, minmax(10cm, 1fr) ) ; /* Overridden for print ... */
padding-top: 1em;
padding-bottom: 1em;
}
@media print {
.taskgridcontainer {
grid-template-columns: repeat(auto-fill, minmax(8cm, 1fr) ) ;
}
}
.taskgriditem {
}
.itemize li {
margin-top: 1.5ex;
margin-bottom: 1.5ex;
margin-right: 3em;
}
.tt {
font-family: courier;
}
.todo {
color: #b0b0b0;
background-color: #ffffb0;
}
.float_l {
float: left;
margin-right: 1em;
margin-bottom: 1ex;
}
.float_r {
float: right;
margin-left: 1em;
margin-bottom: 1ex;
}
.float_r .caption {
background: right;
font-size: 85%;
}
.stdgridcontainer {
display: grid;
grid-gap: 0;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr) ) ;
padding-top: 1em;
padding-bottom: 1em;
}
.stdgriditem {
/* background-color: #444;
color: #fff;
border-radius: 5px; */
padding: 1em;
/*vertical-align: top; */
}
.stdgriditem img {
display: block;
margin: auto;
}
.stdgriditem img.inline_l { /* Used namely in contacts_whoiswho.php */
float: left;
padding-top: 1em; /* Must be same as .stdgriditem */
padding-right: 0.5em;
}
.stdgriditem a {
color: var(--clrTextStd);
}
.stdgriditem:hover {
background-color: var(--clrBackground2);
}
.stdgriditem p:nth-child(1) { /* Title of the grid item */
text-align: center;
font-weight: bold;
font-size: 125%;
margin: 0;
padding-bottom: 1ex;
}
/* Menu bar */
.menugridcontainer {
display: grid;
grid-template-columns: repeat(auto-fill, 7em) ;
grid-gap: 0;
justify-content: center;
align-content: center;
background-color: var(--clrBackground2);
border-bottom: 2px solid var(--clrBackground3);
}
@media print {
.menugridcontainer {
font-size: 8pt;
}
}
.menugridcontainer.first { /* First menu line --> draw the top border */
border-top: 2px solid var(--clrBackground3);
}
.menugridcontainer.volumes { /* Other volumes in index.php and results.php --> narrower width of items */
grid-template-columns: repeat(auto-fill, 5.5em);
row-gap: 0.5ex;
}
.menugridcontainer>div { /* Items inside the menugridcontainer */
vertical-align: middle;
height: 3.5ex;
padding: 0.5em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: normal;
}
.menugridcontainer>div.selected, .menugridcontainer>div.selectedparent {
font-weight: bold;
background-color: var(--clrBackground0);
}
.menugridcontainer>div.selectedparent {
background-color: #e8f0ff;
}
.menugridcontainer>div a:hover {
color: #ff0000;
}
/* Tables cells and paragraphs with explicit alignment */
td.c,th.c,p.c {
text-align: center;
}
td.l,th.l,p.l {
text-align: left;
}
td.r,th.r,p.r {
text-align: right;
}
/* Photogallery */
.gallery {
text-align: center;
}
.gallery img {
margin: 4px;
border-radius: 6px;
}
/* Tables with YPT results */
.resultstbl {
max-width: unset;
border-collapse: collapse;
}
.resultstbl tr:nth-child(even) {
background-color: var(--clrBackground2);
}
.resultstbl td,th {
padding-top: 0.7ex;
padding-bottom: 0.7ex;
padding-left: 0.5em;
padding-right: 0.5em;
}
.resultstbl th {
font-weight: bold;
background-color: var(--clrBackground3);
}
.resultstbl td.section {
background-color: var(--clrBackground3);
font-weight: bold;
font-size: 100%;
}
/* Timeline in dates.php */
.timeline {
display: block;
background-color: var(--clrBackground2);
border: 2px solid var(--clrBackground3);
padding: 1ex 1em;
margin-top: 2ex;
color: black;
}
.timeline table {
font-size: larger;
font-weight: bold;
/* border: 1px solid black; */
width: 100%;
}
.timeline td {
width: 50%;
text-align: left;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.timeline td:nth-child(2) {
text-align: right;
}
.timeline.hot td:nth-child(2) {
color: red;
}
.timeline.past td:nth-child(2) {
font-style: italic;
font-weight: normal;
}
.timeline.nonypt {
background-color: #e0ffd0;
border: 2px solid #a0ff80;
}
.timeline.past {
background-color: #d0d0d0;
border: 2px solid #b0b0b0;
color: #404040;
}
.timeline.hot {
background-color: var(--clrHotBackground2);
border-color: var(--clrHotBackground3);
color: var(--clrHotForeground);
}
.tournament_inset {
float: right;
margin-left: 2em;
margin-bottom: 1ex;
}
.tournament_inset div {
font-size: 85%;
}
@media (max-width:540px) {
.tournament_inset {
float: none;
text-align: justify;
}
}
/* Page press.php */
.press_continue {
font-style: italic;
color: blue;
}
/* Page articles.php */
.articles_forcelinks a {
color: blue;
}
.codelike404 {
font-size: 200%;
}
.errmsg {
display: inline-block;
background-color: lightyellow;
width: 100%;
color: red;
font-style: italic;
padding: 1ex 1em;
}
.ywawy {
display: none;
/*visibility: hidden; */
}
/*
Simple selectors
* = universal selector
p = type selector
.class = class selector
.cls1.cls2 = class selector (element must match both classes)
#myId = Id selector (id="myId")
p.myClass#myId = compound selector (must be in this order)
Attribute selectors
a[title] = elements with a title attribute
a[href="https://example.org"] = elements with an href matching "https://example.org"
a[href*="example"] = elements with an href containing "example"
a[href$=".org" i] = elements with an href ending ".org", case-insensitive
a[class~="logo"] = elements whose class attribute contains the word "logo"
elements whose class attribute contains the word "logo"
[attr]
Represents elements with an attribute name of attr.
[attr=value]
Represents elements with an attribute name of attr whose value is exactly value.
[attr~=value]
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
[attr|=value]
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
[attr^=value]
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
[attr$=value]
Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
[attr*=value]
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
[attr operator value i]
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
[attr operator value s]
Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).
Nesting selector
parentRule {
& childRule {
}
}
selector1 selector2 = descendant combinator
selector1>selector2 = child combinator (direct descendant combinator)
selector1~selector2 = subsequent-sibling combinator = all elements matching selector2 will be selected if they are preceded by selector1, provided both selector1 and selector2 share the same parent
selector1+selector2 = next-sibling combinator = only matches selector2 which is directly preceded by the selector1, provided both selector1 and selector2 share the same parent
selector1||selector2 = column combinator. When supported, selects nodes that belong to a column. For example, col || td will match all | elements that belong to the scope of the .
selector1|selector2 = namespace separator...
*/ |