@import url("/ifdb.css"); /* * IFDB Default Main Style Sheet * Copyright 2007, 2008 Michael J Roberts */ /* 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: #EDEFED; font: 100%/140% Verdana, Arial, Helvetica, Sans-Serif; color: #000000; line-height: 1.4; margin: 0px 0px 1.5em 0px; } a:link { color: #333333; text-decoration: none; border-bottom: thin dotted #aaaaaa } a:visited { color: #333333; text-decoration: none; border-bottom: thin solid #aaaaaa } a:hover { color: #717171; background: #dddddd; text-decoration: none; border-bottom: thin solid #aaaaaa } a:visited:hover { color: #715722; text-decoration: none; } /* The style for
areas - this is the style used for areas of the page where there are data entry fields, buttons, and so on. We use the same style here as in the main page body. */ form { font: 100%/140% Verdana, Arial, Helvetica, Sans-Serif; } /* The default style for cells within tables. We use the same style here as in the main page body. */ table tr td { font: 100%/140% Verdana, Arial, Helvetica, Sans-Serif; } /* "Silent" hyperlinks. Some hyperlinks are marked with the silent style because we don't want them to be as conspicuous as ordinary links. We show these as though they were ordinary text, *except* that when the mouse cursor is hovering over one, we reveal its hyperlink status with an underline (via the ":hover" version of the style). */ a.silent { text-decoration: none; color: #000000; } a.silent:hover { text-decoration: underline; } /* Heading 1 - for top-level headings. This is generally used for the title at the top of a page. */ h1 { font: 125% Verdana, Arial, Helvetica, Sans-Serif; font-weight: bold; color: #000080; } /* Heading 2 - for second-level headings. This is generally used for main section headings within a page. */ h2 { /*font: 110% Verdana, Arial, Helvetica, Sans-Serif;*/ font-size: 110%; font-weight: bold; color: #000080; } h2 { font-size:14pt; font-family: "verdana"; background-color: #CCC; border:1px solid #999; /* border:2px solid #9b9989; */ color: #222; margin-left:15pt; } /* Heading 3 - for third-level headings. This is used for sub-section headings. */ h3 { /*font: 95% Verdana, Arial, Helvetica, Sans-Serif;*/ font-size: 100%; font-weight: bold; color: #000080; margin-bottom: 0px; } /* The "topbar" division is the area where we display the main IFDB banner identifying the site. The color setting is chosen so that the graphic banner blends seamlessly into the background at its right edge. The "topbar" anchor is used to place a "home" hyperlink over the background image, so this should have the same width and height as the background image. This can be set to zero size if the hyperlink isn't wanted. */ div.topbar { width: 100%; background: url("ifdb-topbar.jpg") #c0c0c0 no-repeat; height: 55px; } a.topbar { height: 55px; width: 511px; } /* The "topctl" division is the area at the top under the main IFDB banner where we show the quick navigation controls. Within this area, we have a table (for spacing the navigation links) and a form (for the "Search" box), so we have to specify how we want these laid out. Throughout this division, we use a slightly smaller version of the main page font. */ div.topctl { font: 100%/140% Verdana, Arial, Helvetica, Sans-Serif; width: 100%; padding: 0px 0em 0px 0em; margin: 0 0 2em 0; font-size: 95%; background: #e8e8e8; border-bottom: thin dotted #d0d0d0; } div.topctl table { margin: 0 0 0 0; padding: 0 0 0 0; } div.topctl table tr { margin: 0 0 0 0; padding: 0 0 00; } div.topctl table tr td { font-size: 80%; margin: 0 0 0 0; padding: 0 1em 0 1em; } div.topctl form { font-size: 95%; margin: 0 0 0 0; padding: 0 0 0 0; } /* The "main" division is basically the rest of the page below the banner and navigation divisions at the top. The overall body of the page has 0-pixel left and top margins, so that the graphics at the top of the page run all the way to the edges of the window; so in order to make the main contents more readable, we add some actual margins here. */ div.main { margin: 1em 1em 1em 1em; } /* The "botbar" table contains the navigation controls at the bottom of the page. */ table.botbar { padding: 0 0 0 0; margin: 4em 0 0 0; width: 100%; border-spacing: 0; border-collapse: collapse; border: none; background: #f8f8ff; } table.botbar tr { vertical-align: top; } table.botbar td { padding: 0 0 0 0; border-spacing: 0; border-collapse: collapse; border: thin solid #a0a0e0; } table.botbar table { padding: 0 0 0 0; border-spacing: 0; border-collapse: collapse; } table.botbar table tr.botbarhdr td { background: #e0e0e0; padding: 0 1em 0 1em; font-size: 100%; font-weight: bold; color: #0000C0; } table.botbar table tr td { font-size: 90%; padding: 0.5em 0 0.5em 0; border: none; } table.botbar div div { padding: 0.5em 0 0.5em 0; } /* The "smalltopbar" division is the equivalent of "topbar" for small popup windows (e.g., help windows). We show a smaller version of the banner image in these windows, so that the banner size is scaled down in proportion to the overall window size. */ div.smalltopbar { width: 100%; background: url("ifdb-smalltopbar.jpg") #c0c0c0 no-repeat; height: 16px; } /* The "smallmain" division is the equivalent of the "main" division for pages we show in pop-up windows (which we use mostly for help messages). Since most of these pop-ups are fairly small windows, we use a smaller font and smaller margins to make the contents fit the smaller area better. */ div.smallmain { font-size: 85%; margin: 5px 0.5em 0.5em 0.5em; } div.smallmain form { font-size: 85%; } div.smallmain table tr td { font-size: 85%; } /* The "helpmain" division is the same as the "smallmain" division, but we use it specifically for pages showing help messages. */ div.helpmain { font-size: 90%; margin: 0.25em 0.5em 0.5em 0.5em; } div.helpmain table tr td { font-size: 90%; } /* The "title" division is used to display the title of a game in a review. */ div.title { font-size: 125%; color: #000080; font-weight: bold; } /* The "xsrc" span style is used to show the name of the source of an external review (e.g., Xyzzy News). */ span.xsrc { font-size: 90%; font-weight: bold; color: #000080; } /* The "coverart" table is used on a game's main listing page to display the game's cover art image. */ td.coverart { padding-right: 1em; } /* We use the "authorProfileLink" style for hyperlinks to author profiles, as shown in the author section of a game listing. We show these without underlines (except when hovering), to make them fit better visually into the rest of the byline, but we do show them in a distinct color. */ a.authorProfileLink { font-size: 75%; border: 1px dotted #d0d000; background: #ffff00; text-decoration: none; color: #0000ff; } a.authorProfileLink:hover { color: #ff0000; text-decoration: underline; } /* The "tags" table style is used for displaying the list of tags associated with a game. */ table.tags { margin: 1ex 0 1em 0; } table.tags tr td { padding-right: 3em; } /* The "downloadfloat" division is for the Download box on a game's main listing page. This is a floating box on the right side of the page. */ div.downloadfloat { float: right; margin: 0 0 2em 1em; background: #F8F8FF; width: 35ex; -moz-border-radius:7px; border-radius:7px; } /* The "downloads" table is for the table we use to lay out the contents of the Download box. */ table.downloads { padding: 0 0 0 0; margin: 0 0 0 0; background: #F8F8FF /*old color #F0F0F0;*/ border: thin dotted #e0e0e0; width: 100%; } table.downloads h3 { font: 100%/140% Verdana, Arial, Helvetica, Sans-Serif; font-weight: bold; color: #000080; background: #F8F8FF margin: 0 0 0 0; } table.downloads td { font: 80%/140% Verdana, Arial, Helvetica, Sans-Serif; } /* The "downloadlist" table is a sub-table within the Download box, where we display the list of links to individual downloads. */ table.downloadlist td { padding-top: 1em; } /* The "dlnotes" span is used for additional notes about a download listing. */ span.dlnotes { font-size: 95%; } /* "dlzipmain" is used to show the name of the primary file within a compressed archive (such as a .zip file) within a download listing. */ span.dlzipmain { font-size: 95%; color: #000000; } /* The "zipnote" style is used to display a description of a compression format (e.g., ZIP) in a Download box. */ span.zipnote { color: #0000C0; font-style: italic; } div.zipnote { margin-top: 0.5em; margin-bottom: 0.5em; padding: 0em 0.5em 0em 0.5em; } /* The "zipstar" style shows an asterisk, dagger, etc for a compression format footnote in Download box. */ span.zipstar { color: #0000C0; } /* "fmtnotes" displays the description of a file format in a download listing. This is used on game listing pages in the Download box, and also on the Download Adviser page. */ span.fmtnotes { font-size: 85%; line-height: 1.25em; color: #606060; } /* The "gamerightbar" table is the box on a game's listing page, underneath the Download box, where we display quick rating input links ("Have you played this game?"). */ table.gamerightbar { padding: 0 0 0 0; margin: 0 0 0 0; /*background: #F0F0F0;*/ background: #f5f5f9; border: thin dotted #e0e0e0; width: 100%; font-size: 80%; } table.gamerightbar h3 { font: 100%/140% Verdana, Arial, Helvetica, Sans-Serif; font-weight: bold; color: #000080; margin: 0 0 0.5em 0; } table.gamerightbar td { padding: 0 0 0.5em 0; } /* We use the "xmlstatmsg" span style in various places to display the results of "Ajax" requests. (These are interactive features where clicking a button causes the page to communicate with the server, and display the results in-place, right on the same page, rather than navigating to a new page.) These are generally short status messages - things like "Saved" after clicking a wishlist update button, for instance. */ span.xmlstatmsg { color: red; font-weight: bold; } /* We use the "details" span in various places where we display additional details about a listing or other item. */ span.details { font-size: 85%; } /* We use the "notes" span and division styles in various places to display help notes or additional details about an item. */ span.notes { font-size: 95%; color: #606060; } span.notes a.silent { color: #606060; } div.notes { font-size: 95%; } /* The "microhelp" style is used for additional help notes displayed in some interactive entry forms. */ span.microhelp { font-size: 85%; color: #606060; } span.spoilerButton { font-size: 90%; font-style: italic; background: #eaeaea; } span.hiddenSpoiler { display: none; } /* The "cklabel" span is used for checkbox labels in Ajax checkboxes. (These aren't "real" checkboxes - they're basically custom graphics that we generate, along with some Javascript code to make them interactive.) */ */ span.cklabel { color: #000080; cursor: pointer; } /* The "disabledCtl" span is used for navigation controls that happen to be disabled at the moment or for the current page, such as a "Next Page" button on the last page of a result set. */ span.disabledCtl { color: #b0b0b0; } /* The "searchSummary" table is used to show the current location in the result set for a search. */ table.searchSummary { background: #e0e0e0; width: 100%; } table.searchSummary tr td { font-size: 85%; } /* "indented" divisions show their contents slightly indented from the surrounding text. */ div.indented { margin-left: 1.5em; } /* "hangindented" divisions show their contents in a hanging indent style: the contents are indented from the surrounding text, but the first line of each paragraph is "outdented" a bit from the rest of the paragraph. */ div.hangindented { margin-left: 2.5em; text-indent: -1em; } /* The "inset" division style is used for an area that's inset on all sides from the surrounding text. */ div.inset { padding: 1em 1em 1em 1em; } div.inset table { } div.inset table tr td { font-size: 90%; padding: 1em .5ex 1em .5ex; } div.inset table tr { padding: 0 0 0 0; margin: 0 0 0 0; } table tr td div.inset { width: 100%; } div.inset table tr td.insetheading { padding: 0 0 0 0; margin: 0 0 0 0; color: #000080; background: #e0e0e0; font-size: 100%; font-weight: bold; } /* The "tipbox" style is used to display help messages alongside the main page content, suggesting other things the user might want to try in addition to the current operation. We display these in floating boxes on the right of the page. */ div.tipbox { float: right; border: 1px solid gray; width: 35ex; margin-top: 1em; padding: 1ex; background: #f0f0ff; font-size: 80%; color: #505050; line-height: 1.2em; } div.tipbox h1 { font-weight: bold; font-size: 100%; margin-bottom: 0.5ex; } /* The "inlinetip" style is for tip boxes displayed in-line with the main content of the page, rather than floating alongside the main page area. */ div.inlinetip { margin: 1em 4em 1em 4em; border: 1px solid gray; padding: 1ex; background: #f0f0ff; font-size: 90%; color: #404040; } div.inlinetip h1 { font-weight: bold; font-size: 100%; margin-top: 0; margin-bottom: 0.5ex; } /* The "prebox" style is used to simulate a data-entry text field, without actually making the text editable. We display this type of text in a monospaced font with a border line around the box. */ div.prebox { font: 85% monospace; margin-top: 0.5em; border: thin solid #d0d0d0; padding: 0.5em; } /* The "nosp" paragraph style is for paragraphs with no additional margin spacing on any side. */ p.nosp { margin: 0 0 0 0; } /* The "smallhead" and "smallfoot" division styles are used for headings and footers set in normal size text (that's the "small" part - most headings and footers use slightly larger text than usual). */ div.smallhead { margin-top: 0.1em; margin-bottom: 0.4em; } div.smallfoot { margin-top: 0.4em; margin-bottom: 0.4em; } /* "errmsg" spans are for error messages on interactive forms. */ span.errmsg { color: #ff0000; } /* "warning" spans are for warning messages on interactive forms. These don't necessarily indicate error conditions, but are conditions that we want the user to be aware of before proceeding. We use a separate color to make these stand out visually. */ span.warning { background: #ffff80; } /* "success" spans are for status messages showing successful outcomes on interactive forms. */ span.success { color: #00e000; } /* We use the "dataform" table to lay out most data entry forms. */ table.dataform tr td { padding-right: 1em; } /* We use the "gamedataform" table to lay out the data entry form for game listing data. */ table.gamedataform tr td { padding-bottom: 1em; } table.gamedataform tr td tr td { padding-bottom: 0em; } /* The "dlinst" table is used to display download instructions in the Download Adviser and for some IFDB browser plug-ins. */ table.dlinst tr td { padding-top: 1em; padding-bottom: 1em; } table.dlinst tr td ul li { list-style-image: url("/dlarrow.gif"); margin-top: 1em; } table.dlinst tr td ul.normal li { margin-top: 0; list-style-image: none; } /* The "footer" division style is for the area with the navigation links at the bottom of each page. */ div.footer { margin-top: 2em; margin-bottom: 2em; margin-left: 0px; color: #808080; font-size: 70%; } /* The "nav" style is used for the navigation links at the bottom of each page. */ a.nav { text-decoration: none; } a.nav:hover { text-decoration: underline; } /* The "headline" division is used for the top headline on the home page and some other pages. "headline2" is used for additional headlines. The main difference is that "headline2" has a different top margin, to space it out from preceding content. */ div.headline { width: 100%; background: #f8f8ff; border-top: thin solid #e8e8ff; font: 110% Verdana, Arial, Helvetica, Sans-Serif; font-weight: bold; color: #000080; margin-bottom: 1em; } div.headline2 { width: 100%; background: #f8f8ff; border-top: thin solid #e8e8ff; font: 110% Verdana, Arial, Helvetica, Sans-Serif; font-weight: bold; color: #000080; margin-bottom: 1em; margin-top: 2em; } /* The "rightbar" table style is used for the little information boxes at the right of the home page and some other pages. */ table.rightbar { border: thin dotted #e8e8FF; background: #F8F8FF; width: 20em; padding: 0 0 0 0; margin: 0 0 0 0; } table.rightbar tr { margin: 0 0 0 0; padding: 0 0 0 0; } table.rightbar tr td { padding: 2px 4px 4px 4px; margin: 0 0 0 0; font-size: 85%; } /* The "boxhead" style is used for the headline within "rightbar" boxes. */ tr.boxhead { margin: 0 0 0 0; padding: 0 0 0 0; } tr.boxhead td { text-align: left; } /* The "dots" is used for horizontal rules that separate sections on a page. */ hr.dots { border: thin dotted #d0d0d0; } /* The "grid" table class is used for tables showing images along the right and associated text alongside to the right. */ table.grid tr td { vertical-align: top; padding-right: 1em; } /* Doublespaced lists - this shows extra vertical spacing between each element of the list. */ ul.doublespace li { margin-top: 1em; margin-bottom: 1em; } /* Tag ages 1 through 7 - these depict the age of a tag using font weight and color intensity. We use darker color and heavier [bolder] type for newer tags, lighter color [more washed out, closer to white] and lighter type for older tags. Age 1 is newest, 7 is oldest. */ span.tagAge1 { color: #000090; font-weight: 700; } span.tagAge2 { color: #0000B0; font-weight: 600; } span.tagAge3 { color: #0000D0; } span.tagAge4 { color: #2020FF; } span.tagAge5 { color: #4040FF; } span.tagAge6 { color: #6060FF; } span.tagAge7 { color: #8080FF; } /* The "ratingHistogram" table style is used to draw the histogram showing how game ratings are distributed. Within each table row, a "ratingHistoBox" division contains the overall space for a single bar, and a nested "ratingHistoBar" division is the colored bar itself. */ table.ratingHistogram tr td { font-size: 70%; line-height: 1em; padding-right: 5px; } div.ratingHistoBox { width: 8ex; background: #e0e0ff; height: 1em; border-top: 1px solid white; } div.ratingHistoBar { background: #2020ff; height: 1em; } /* ------------------------------------------------------------------------ */ /* Obsolete styles */ td.dltext { font-size: 80%; padding-left: 1em; } .forceReflow { border-right: 2x solid transparent; } span.ckmsg { color: #ff0000; font-weight: bold; } span.fileinfo { font-size: 95%; } div.box { border: thin solid #d0d0d0; padding: 0.5em; } div.footer2 { text-align: center; margin-top: 4em; margin-bottom: 3em; font-size: 85%; } div.nav { margin-left: 0px; margin-top: 15px; font-size: 75%; color: #606060; } a.cprlink { text-decoration: none; } a.cprlink:hover { text-decoration: underline; } img.logo { margin: 0 1em 0.5ex 0; }