/*
IFDB Default Main Style Sheet
Copyright 2007, 2008 Michael J Roberts
General notes:
1. Whenever you refer to an item by URL (such as in an "@import"
directive, or in a "url()" spec in a "background" style), any
relative URL you specify will be relative to the location of your
custom style sheet. This will be your own user-specific directory,
where your style-sheet-related items are stored. This means that
you can easily refer to your own custom images, for example, since
they're in a subdirectory of your user directory called "images/".
However, be aware that if you want to refer to any SYSTEM files,
such as this main style sheet or the default graphics (GIF/JPG)
files, you MUST start the URL with a "/" to look in the root
system directory. We use that notation throughout this file
when referring to system files to provide easy cut-and-paste
examples.
2. We recommend that custom style sheets always import this style
sheet as the "base" style sheet. Doing this will provide default
definitions for everything you don't explicitly override in the
custom style sheet. This has two advantages: (1) it allows you to
write a shorter style sheet, by only defining styles for items you
want to override; and (2) it ensures better upward compatibility,
because whenever we add new items in the future, you'll automatically
inherit our default styles for the new items. To import this sheet,
add a line like this at the top of your custom CSS file:
@import url("/ifdb.css");
3. Custom style sheets can replace most of the graphics used on the
site. To make this possible, we use a "fake" image file for the SRC
file of each or tag that can be replaced in
CSS. This fake image is simply a 1x1 transparent GIF, so it doesn't
have any on-screen appearance. The *actual* image is provided in the
style sheet, via the "background" style. So, to replace a graphic
with your own, you must:
a. Upload the JPEG/GIF/PNG file via the style-graphic manager
b. Add an IMG definition for the class or ID of the image you wish
to replace, like so:
a.rss-icon {
background: url("images/my-rss-icon.gif");
}
Note that you must specify the height and width of the image in pixels.
Since we're just setting the background, it doesn't automatically set
the layout size of the object to match; the only way to set the layout
size is to do so explicitly via the "width" and "height" styles. And
CSS unfortunately doesn't have a way to refer indirectly to the dimensions
from the image file, so you just have to hard-code the actual pixel size.
*/
html {
box-sizing: border-box;
scroll-behavior: smooth;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*
This is the style for the main body of the page - nearly everything
that doesn't have a separate style of its own inherits this style.
We use a 0-pixel left and top margin here so that the IFDB banner and
navigation bar graphics at the top of the page run all the way to the
edges of the window. We compensate for this for the main page layout
by specifying our actual margins the "main" division, where most of
the page's contents go.
*/
body {
background: #ffffff;
font: 100%/140% Verdana, Arial, Helvetica, Sans-Serif;
color: #000000;
line-height: 1.4;
margin: 0px 0px 1.5em 0px;
}
:root {
/* The width of the main sections of a page, without any sidebars. */
--paragraph-width: 60ch;
}
/*
The style for