/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+ TABLE OF CONTENTS +
+ 1. Root and layout matters +
+ 2. Navigation menus +
+ 3. Other lists than nav menus +
+ 4. Text matters +
+ 5. Table styling +
+ 6. Miscellaneous matters +
+ 7. Further @media queries +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+ 1. ROOT AND LAYOUT MATTERS +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@import url(../../../fonts/fonts-style.css);
*,
*:before,
*:after {
box-sizing: border-box;
}
:root {
scrollbar-color: #505050;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
margin: 0;
position: relative;
background-color: rgba(139, 171, 206, 1);
}
body:before {
content: "";
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 700px;
z-index: -1;
background-image: url(../images/skier-on-corduroy_2000x700.jpg);
background-repeat: no-repeat;
background-position: 50% 0%;
}
.smallScreen body:before {
background-image: url(../images/skier-on-corduroy_1000x350.jpg);
height: 350px;
}
#controlsHeader {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 5px 5px 20px rgba(0,0,0,0.3), -5px -5px 20px rgba(0,0,0,0.3);
font-weight: bold;
font-size: 1.5rem;
background-color: rgba(255,255,255,0.5);
background-image: url(../images/100-90-5.png);
z-index: 10;
}
#controlsHeaderInternContainer {
max-width: 980px;
margin: 0 auto;
}
nav {
float: left;
padding: 1rem;
}
#fontSizeContainer {
float: right;
padding: 1rem 0 1rem 1rem;
}
.smallScreen #fontSizeContainer {
padding: 1rem;
}
#topTitleContainer {
float: none;
padding: .8rem;
text-align: center;
font-size: 2rem;
text-transform: uppercase;
display: none; /* See @media */
}
#topTitleContainer:after {
content: "";
clear: both;
}
#siteNameCont {
margin: 2rem auto;
padding-top: 1em;
font-size: 5.75rem;
font-weight: bold;
text-align: center;
color: white;
text-transform: uppercase;
text-shadow: 1px 1px 1px black, 0px 0px 15px white;
}
.Android #siteNameCont {
font-family: 'Verdana Web Bold';
}
.smallScreen #siteNameCont {
font-size: 5.5vmax;
}
main {
max-width: 980px;
margin: 0 auto;
box-shadow: 0 0 20px gray;
}
h1 { /* Has a quite big influence on the layout. */
margin-top: 2rem;
margin-bottom: 0;
padding: 1rem 3rem;
font-size: 2.4rem;
color: black;
text-shadow: 3px 3px 3px white, -3px -3px 3px white, 3px -3px 3px white, -3px 3px 3px white;
t/ext-shadow: 0px 0px 20px white; /* Not the same effect as the above method. */
background-color: rgba(255,255,255,0.5);
background-image: url(../images/100-90-5.png);
}
.smallScreen h1 {
font-size: 3vmax;
padding-left: 2rem;
}
footer {
margin: 5rem 0 0 0;
}
/* For more layout matters, see Further @media queries */
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+ 2. NAVIGATION MENUS +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
nav:hover {
cursor: pointer;
}
nav {
font-size: 1.8rem; /* For the MENU text. */
o/verflow: scroll; /* Doesn't work as desired. */
}
nav ul {
display: none;
font-size: 1.4rem;
font-weight: normal;
list-style-type: square;
margin: .5em 0 0 0;
padding: 0 0 2rem 2rem;
background-color: rgb(255,255,255);
background-image: url(../images/100-90-5.png);
}
nav:hover ul {
/*display: block;*/ /* Redundant because taken over by onmouseover; see below for the reason */
}
nav:hover ~ #topTitleContainer {
/*display: none !important;*/
/* Doesn't work because on touchscreens onclick = hover until another <a> is clicked,
and toggleMenuDisplay() works with onclick...*/
}
nav ul ul {
display: block;
margin: 0 1em;
padding: 0;
list-style-type: circle;
}
nav a {
color: black;
}
nav a:hover {
text-decoration: none;
color: red;
}
nav ul ul {
margin-left: 3em;
}
.touchScreen nav li {
margin-top: 0rem; /* Set to 1rem once the fold-out menu is implemented */
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+ 3. OTHER LISTS THAN NAV MENUS +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.explanationsList li {
list-style-type: none;
}
.muchTextList {
margin-bottom: 3rem;
}
.muchTextList li {
margin-bottom: 1rem;
}
.littleTextList li {
margin-bottom: 0;
}
.secondOrderedList {
list-style-type: upper-roman;
}
.thirdOrderedList {
list-style-type: upper-alpha;
}
.nestedOrderedLittleTextList li {
margin-bottom: 0;
list-style-type: lower-alpha;
}
.nestedOrderedMuchTextList {
margin-bottom: 1rem;
list-style-type: upper-alpha;
}
.nonNestedList {
padding-left: 18px;
}
.secondUnorderedList {
list-style-type: circle;
}
.thirdUnorderedList {
list-style-type: square;
}
.nestedUnorderedLittleTextList li {
margin-bottom: 0;
list-style-type: circle;
}
.listWithHeaders li {
font-weight: bold;
margin-top: 4rem;
}
.listWithHeaders li > *,
.listWithHeaders li > * > * {
font-weight: normal;
}
.listWithHeaders li > h4,
.listWithHeaders li > h4 > em,
.listWithHeaders li > * > h4 {
font-weight: bold;
}
.oldLogItem {
display:none;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+ 4. TEXT MATTERS +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
a,
a:visited {
color: blue;
}
a.defined:link,
a.defined:visited,
span.defined {
color: black;
text-decoration: none;
border-bottom: 1px dotted gray;
}
a.defined:hover {
cursor: pointer;
}
#abstract {
margin: 2rem 0;
font-style: italic;
}
#abstract h3 {
font-style: normal;
font-weight: bold;
}
#abstract em {
font-style: normal;
}
.advancedTerm,
.advancedTerm a {
color: violet;
}
#articlePlusSideContainer {
background-color: white;
-webkit-hyphens: auto;
hyphens: auto;
padding: 1rem 2rem;
}
article {
text-align: justify;
}
.basicInstruction,
.movemDescr {
margin: 2em 0;
padding: 40px;
font-family: Arial;
font-size: 1.4rem;
border: 30px solid white; /* 'transparent' breaks in Safari iOS */
border-image-source: url(../images/bg_blue-facets.jpg);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
.basicInstruction h4,
.movemDescr h4 {
text-transform: uppercase;
font-size: 1.6rem;
margin: 1rem 0;
}
.basicInstruction ul {
padding-left: 1.5rem;
}
blockquote {
padding: 15px 30px 15px 45px;
margin: 3em 0;
position: relative;
color: #666;
border-left: 15px solid rgba(255,150,122,1);
border-right: 1px solid rgba(255,150,122,1);
box-shadow: 2px 2px 15px #ccc;
}
blockquote:before{
content: "\201C"; /*Unicode for left double quote*/
font: 60px bold Georgia, serif;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
.clickText {
color: blue;
}
.clickText:hover {
cursor: pointer;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 2.5rem;
}
.essentialText {
color: red;
}
#endNote {
margin-top: 5rem;
}
@supports not (initial-letter: 3) {
/* On Android, the float method for dropcaps is buggy in this case. */
.Windows article > p:first-of-type:first-letter {
float: left;
font: bold 5.2em/0.7 Georgia, serif;
margin: 4px 4px 0 0;
color: #FF4500;
}
}
.iOS article > p:first-of-type:first-letter {
/* On iOS, the supports rule requires -webkit-initial-letter, which is unwanted. */
font: bold 5.2em Georgia, serif; /* No line-height here! */
margin: 0 2px 0 0;
color: #FF4500;
-webkit-initial-letter: 3;
}
.footNote {
font-size: 0.8em;
color: gray;
}
/* h1 is also part of the layout and therefore also declared under ROOT AND LAYOUT MATTERS */
h1, h2, h3, figcaption, a {
hyphens: none;
text-align: left;
}
h1 span {
font-size: 1.2rem;
text-shadow: none;
background: none;
}
h2 {
font-size: 2.2rem;
margin-top: 4rem;
padding: 1rem;
background: #F5F5FF url(../images/100-90-5.png);
}
h2#textTopHeader {
margin: 0 0 1rem 0;
}
.smallScreen h2 {
font-size: 2.6vmax;
}
h3 {
font-size: 1.8rem;
margin-top: 4rem;
}
.smallScreen h3 {
font-size: 2.4vmax;
}
h4 {
font-size: 1.5rem;
margin-top: 4rem;
}
h4.columnHeader {
text-align: center;
margin-top: 0;
}
.smallScreen h4 {
font-size: 2.2vmax;
}
.basicInstruction h5 {
font-size: 1.4rem;
margin-top: 2em;
}
hr + p {
margin-top: 4em;
}
.itemsExplanation {
margin-left: 25px;
}
.justifiesPoorly {
text-align: left;
}
#logToggleText {
font-size: 1.3rem;
font-weight: normal;
}
.notToBeHyphenatedOrWrapped,
.doNotBreak {
hyphens: none;
white-space: nowrap;
}
p:first-of-type {
margin-top: 0;
}
.proceedLink {
margin-top: 5rem;
text-align: right;
}
#refHeader {
margin-top: 5em;
}
.quickLinks {
text-align: center;
}
.seo {
display: none;
}
.smallChar {
font-size: larger;
}
.standardItem {
display: none;
}
sup a {
font-weight: bold;
font-size: 1.2em;
}
.videoCaption {
margin-top: 0;
padding: 0 2.5em;
font-style: italic;
text-align: center;
font-size: .85em;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+ 5. TABLE STYLING +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
table#stanceWidth {
empty-cells: hide;
border-collapse: collapse;
}
table#stanceWidth td,
table#stanceWidth th {
border: 1px solid black;
padding: 5px;
}
table#stanceWidth thead tr:first-child td:nth-child(-n+2),
table#stanceWidth tbody tr:first-child td:nth-child(-n+2) {
border: none;
}
table#stanceWidth #topHeader {
text-align: center;
text-transform: uppercase;
}
table#stanceWidth #sideHeader div {
text-align: center;
text-transform: uppercase;
writing-mode: vertical-rl;
min-width: 22px;
min-height: 150px;
}
table#stanceWidth th#firstVariable {
min-width: 130px;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+ 6. MISCELLANEOUS MATTERS +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
a img {
border: none; /* For older browsers */
}
a[id] {
display: block;
position: relative;
top: -3em; /* Correction for the fixed nav bar */
}
figure {
max-width: 100%;
margin: 2em auto;
}
figcaption {
width: 90%;
margin: 0 auto;
padding: .5em 0;
text-align: center;
font-style: italic;
font-size: 0.9em;
}
figure img:first-child {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
dd figure img:first-child {
display: block;
max-width: 100%;
height: auto;
margin: .5rem auto 0 auto;
}
figure.modalBox {
margin: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 7em; /* For the nav bar (always stays on top) */
overflow: auto;
background-color: rgba(0,0,0,0.8);
}
figure.modalBox img:first-child {
display: block;
max-width: 80%;
height: auto;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
figure.modalBox figcaption {
display: none;
}
#footNoteHeading {
margin-top: 5rem;
}
#fontSizeContainer a {
display: inline-block;
min-width: 40px;
border: 1px solid black;
padding: 1px;
color: black;
text-decoration: none;
text-align: center;
}
#fontSizeContainer a:hover {
background-color: black;
color: white;
cursor: pointer;
}
.gradientExample {
transform: rotateZ(-15deg);
}
hr {
margin: 3rem 0;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(255,150,122,0.4), rgba(255,150,122,1), rgba(255,150,122,0.4));
background-image: linear-gradient(to right, rgba(255,150,122,0.4), rgba(255,150,122,1), rgba(255,150,122,0.4));
text-align: center;
overflow: visible;
}
hr:after {
content: '§';
display: inline-block;
position: relative;
top: -12px;
border: 1px solid rgba(255,150,122,1);
padding: 0 3px 3px 3px;
font-size: 11px;
background: white;
color: rgba(255,150,122,1);
}
hr:first-child {
display: none; /* Displayed further down, in @media query */
}
iframe.youtube {
display: block;
border: 0;
max-width: 560px;
width: calc(100% - 0px); /* Work-around for iOS and droidChrome bugs (too wide) */
margin: 1rem auto 2rem auto;
/* height is calculated and set by Javascript in script-2.js */
}
iframe.youtube + p.videoCaption {
margin-top: -1rem;
}
.inArticleImg {
float: left;
}
#randomImgFig {
margin: 0;
}
#randomImgFig.hidden {
display: none;
}
.seoElem,
.spamstop {
display: none;
}
.shareButtonsCont {
margin-top: 4em;
}
.shareButtonsCont:first-of-type {
margin-top: 3em;
}
.shareButtonsCont img {
width: 2.2em;
height: 2.2em;
border: 0;
}
.shareButtonsCont img:hover {
border: 1px solid lightblue;
cursor: pointer;
}
.storedMatters {
display: none;
}
sup {
font-size: 0.6em;
}
table {
width: 100%;
border-collapse: collapse;
caption-side: bottom;
empty-cells: hide; /* Works in FF only with border-collapse: separate; */
font-size: smaller;
}
td {
border: 1px solid black;
}
td:first-child {
font-weight: bold;
}
thead td {
font-weight: bold;
}
thead td:first-child { /* Work-around for the above-mentioned FF-bug */
border-top-width: 0;
border-left-width: 0;
}
#toTopButton {
position: fixed;
bottom: 2px;
right: 2px;
padding: 10px;
border: 1px solid purple;
background: white;
}
.unpublished,
a:visited.unpublished {
color: silver;
}
video {
max-width: 100%;
height: auto;
margin-top: 1em;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+ 7. FURTHER @MEDIA QUERIES +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width: 1000px) {
#articlePlusSideContainer {
padding: 3rem;
display: flex;
}
article {
width: 55%;
padding-right: 4rem;
border-right: 1px solid rgba(255,150,122,1);
}
aside {
width: 45%;
padding-left: 3.25%;
}
article hr:first-child {
display: block;
margin: 1.5rem 0;
}
article hr:last-child {
display: none;
}
}