mirror of
https://bitbucket.org/oreolek/imaginary-realities.git
synced 2024-04-29 23:59:33 +03:00
480 lines
8.7 KiB
CSS
480 lines
8.7 KiB
CSS
/* Basic all-device representation. */
|
|
|
|
/* @import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700); */
|
|
|
|
@font-face {
|
|
font-family: 'Berkshire Swash';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Berkshire Swash'), local('BerkshireSwash-Regular');
|
|
src: url('../fonts/berkshireswash_v4_400.woff2') format('woff2');
|
|
src: url('../fonts/berkshireswash_v4_400.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Titillium Web';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Titillium Web'), local('TitilliumWeb-Regular');
|
|
src: url('../fonts/titilliumweb_v4_400.woff2') format('woff2');
|
|
src: url('../fonts/titilliumweb_v4_400.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Titillium Web';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold');
|
|
src: url('../fonts/titilliumweb_v4_600.woff2') format('woff2');
|
|
src: url('../fonts/titilliumweb_v4_600.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Titillium Web';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: local('Titillium WebBold'), local('TitilliumWeb-Bold');
|
|
src: url('../fonts/titilliumweb_v4_700.woff2') format('woff2');
|
|
src: url('../fonts/titilliumweb_v4_700.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
|
}
|
|
|
|
ol {
|
|
display: block;
|
|
list-style-type: decimal;
|
|
margin: 1em 0 1em 0;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
ol li, ul li {
|
|
display: list-item;
|
|
}
|
|
|
|
ul {
|
|
display: block;
|
|
list-style-type: disc;
|
|
margin: 1em 0 1em 0;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.table-base {
|
|
width: 100%;
|
|
}
|
|
|
|
.table-base-wrapper {
|
|
}
|
|
|
|
.indent-left {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.table-base td {
|
|
padding: 0 3px 0 3px;
|
|
}
|
|
|
|
.table-issues thead {
|
|
display: none;
|
|
}
|
|
|
|
.table-base thead td {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
background-color: rgb(245,245,245);
|
|
border-top-left-radius: 0.3em;
|
|
border-top-right-radius: 0.3em;
|
|
}
|
|
|
|
.table-issues thead td {
|
|
text-align: center;
|
|
}
|
|
|
|
.table-base tbody {
|
|
border: 1px solid darkgrey;
|
|
}
|
|
|
|
.table-base tbody tr:hover {
|
|
background-color: rgb(55, 135, 226) !important;
|
|
color: white;
|
|
}
|
|
|
|
.table-base tbody tr:nth-of-type(2n+1) {
|
|
background-color: rgb(191,232,244);
|
|
}
|
|
|
|
.table-base tbody tr:nth-of-type(2n) {
|
|
background-color: rgb(213,247,255);
|
|
}
|
|
|
|
.table-base td {
|
|
padding: 0 10px 0 10px;
|
|
}
|
|
|
|
.table-toc thead td:nth-of-type(2) {
|
|
display: none;
|
|
}
|
|
|
|
.table-toc tbody td:nth-of-type(2) {
|
|
display: none;
|
|
}
|
|
|
|
.text-read-issue {
|
|
text-align: right;
|
|
}
|
|
|
|
.row-link {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding: 3px 0 3px 0;
|
|
}
|
|
|
|
table.table-comments tr.last-row td{
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.row-comment-text {
|
|
font-style: italic;
|
|
}
|
|
|
|
.licensetitle {
|
|
padding-top: 10px;
|
|
border-bottom: 1px solid grey;
|
|
}
|
|
|
|
.featured-article-title {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.quotetext {
|
|
direction: ltr;
|
|
margin-left: 3em;
|
|
font-style: italic;
|
|
padding: 10px;
|
|
}
|
|
|
|
.quoteattr {
|
|
margin-top: 0.5em;
|
|
text-align: right;
|
|
}
|
|
|
|
.quoteattr:before {
|
|
content: '—';
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.author-nick:before {
|
|
content: "\201C";
|
|
}
|
|
|
|
.author-nick:after {
|
|
content: "\201D";
|
|
}
|
|
|
|
.watch-this-space {
|
|
border: 2px dashed grey;
|
|
padding: 5px;
|
|
}
|
|
|
|
html {
|
|
/* This always shows the right hand scroll bar. This is necessary because every article
|
|
scrolls vertically and has the bar, but the index page does not. Whether the bar is
|
|
present affects page centering, and placement of the nav bar down the bottom. If the
|
|
page centering changes between pages, then the nav bar shifts under the mouse. */
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
body, body * {
|
|
font-family: Verdana, Trebuchet, Times New Roman, Arial;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
body {
|
|
background-color: black;
|
|
}
|
|
|
|
body p, body div.mainbody {
|
|
margin: 1em 0 1em 0;
|
|
}
|
|
|
|
body p, body div.mainbody {
|
|
line-height: normal;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
background-color: white;
|
|
}
|
|
|
|
.main {
|
|
padding: 10px 10px 30px 10px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
padding: 2px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.header:after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.headermenu {
|
|
background-color: white;
|
|
color: black;
|
|
margin: 0 auto;
|
|
min-width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.headermenu a {
|
|
font-family: Verdana, Trebuchet, Times New Roman, Arial;
|
|
}
|
|
|
|
.header * {
|
|
background-color: black;
|
|
color: white;
|
|
font-family: "Titillium Web", sans-serif;
|
|
}
|
|
|
|
header .header-name * {
|
|
font-size: 36px;
|
|
line-height: 1.1em;
|
|
}
|
|
|
|
.headermenu .headermenu-link {
|
|
display: inline-block;
|
|
padding: 0 4pt 0 4pt;
|
|
background-color: #F5F5F5;
|
|
color: black;
|
|
border-bottom: 1px solid rgb(152,152,152);
|
|
line-height: 18pt;
|
|
}
|
|
|
|
.headermenu .headermenu-link:hover {
|
|
background-color: rgb(55, 135, 226);
|
|
color: white;
|
|
border-color: inherit;
|
|
border-bottom: 1px solid rgb(60, 112, 128);
|
|
}
|
|
|
|
.headermenu .headermenu-link:last-child {
|
|
border-left: 1px solid rgb(152,152,152);
|
|
border-right: 1px solid rgb(152,152,152);
|
|
}
|
|
|
|
.headermenu .headermenu-link:not(:last-child) {
|
|
border-left: 1px solid rgb(152,152,152);
|
|
}
|
|
|
|
.headermenu .headermenu-link:last-child:hover {
|
|
border-left: 1px solid rgb(60, 112, 128);
|
|
border-right: 1px solid rgb(60, 112, 128);
|
|
}
|
|
|
|
.headermenu .headermenu-link:not(:last-child):hover {
|
|
border-left: 1px solid rgb(60, 112, 128);
|
|
border-bottom: 1px solid rgb(60, 112, 128);
|
|
}
|
|
|
|
.header .headermenu-name a {
|
|
font-size: 1em;
|
|
line-height: 1em;
|
|
vertical-align: top;
|
|
font-family: "Titillium Web", sans-serif;
|
|
}
|
|
|
|
header a {
|
|
display:block;
|
|
}
|
|
|
|
.centered-row {
|
|
clear: both;
|
|
display: block;
|
|
margin: 0 auto;
|
|
min-width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.action-button {
|
|
display: inline-block;
|
|
padding: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.action-button {
|
|
border-radius: 0.3em;
|
|
color: black;
|
|
background-color: #F5F5F5;
|
|
border: 1px solid rgb(152, 152, 152);
|
|
}
|
|
|
|
.action-button a, .headermenu-link a {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.action-button:hover {
|
|
color: white;
|
|
border: 1px solid rgb(60, 112, 128);
|
|
background-color: rgb(55, 135, 226);
|
|
}
|
|
|
|
.action-link {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer {
|
|
clear: both;
|
|
display: block;
|
|
margin: 0 auto;
|
|
background-color: black;
|
|
min-width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
footer * {
|
|
color: white;
|
|
background-color: black;
|
|
font-family: "Titillium Web", sans-serif;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
footer .section {
|
|
display: inline-block;
|
|
padding: 10px;
|
|
}
|
|
|
|
footer .section, footer .section * {
|
|
vertical-align: top;
|
|
text-align: left;
|
|
}
|
|
|
|
footer .section a {
|
|
text-decoration: none;
|
|
height: 18px;
|
|
display: table;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
footer .section img, footer .section span {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* Larger for smaller devices so fumbly fingers can fumble away. */
|
|
footer .section a img.mini {
|
|
display: table-cell;
|
|
width: 32px;
|
|
height: 32px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
footer .section a:hover {
|
|
color: #C0C0C0;
|
|
}
|
|
|
|
.mainsection {
|
|
clear: both;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.mainsection:after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.mainheader {
|
|
border-bottom: 1px solid grey;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mainheader, .mainheader * {
|
|
font-family: "Titillium Web", sans-serif;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.mainbody {
|
|
padding: 0 10px 0 10px;
|
|
}
|
|
|
|
.rcaptionblock {
|
|
display: inline;
|
|
float: right;
|
|
text-align: center;
|
|
margin-left: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.aligned-examples {
|
|
clear: both;
|
|
padding-top: 20px;
|
|
margin: 0 auto;
|
|
min-width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.aligned-example {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.aligned-example.text {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
float: left;
|
|
text-align: left;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.aligned-example.highlight {
|
|
background-color: #F5F5F5;
|
|
border: 1px solid rgb(152, 152, 152);
|
|
border-radius: 0.3em;
|
|
padding: 5px 5px 5px 5px;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
max-width: 350px;
|
|
}
|
|
|
|
.aligned-example.highlight:hover {
|
|
background-color: rgb(55, 135, 226);
|
|
border: 1px solid rgb(60, 112, 128);
|
|
color: white;
|
|
}
|
|
|
|
.aligned-example div.issue-label {
|
|
text-align: left;
|
|
}
|
|
|
|
.aligned-example div.issue-feature {
|
|
text-align: left;
|
|
}
|
|
|
|
.gametitle, .publicationtitle {
|
|
font-style: italic;
|
|
}
|
|
|
|
.softwaretitle, .website {
|
|
}
|
|
|
|
.smaller-text {
|
|
font-size: smaller;
|
|
}
|