/* 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: img.rss-icon { background: url("images/my-rss-icon.gif"); width: 22px; height: 22px; } 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. */ /* 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; } /* The style for