HTML styles

Style Sheets — html_style.css

This is the file that gives the page its look and feel.

The elements are listed by element name, in alphabetical order for classes and ids.

This file says that:

• the page should use Helvetica, or Arial at 12 points

• paragraphs have no padding or margins (basically, no space around words in paragraph)

• box labels should be underlined (unused)

• the game panel has 20-pixel padding (useless)

• The inventory:

  • has thin (1-pixel) black border

  • can scroll (vertically)

  • is long and skinny (720 pixels by 90 pixels)

  • is 20 pixels from the top of the page and 220 pixels from the left side of the page

• Each inventory item:

  • has a thin black border, just like the inventory itself

  • has some 'buffer space' outside of the border, along the top and along the left sides, but not below or along the right side.

  • has some 'buffer space' between the border and what's in the box

• The links panel

  • has right-aligned text

  • has underlined text

  • is squished into the top right corner of the page

• The map panel

  • has a thin black border (just like the inventory)

  • uses grey Courier New as the font, instead of Helvetica or Arial

  • each line of text will be smaller than usual, squishing the lines of text into a map

  • each character of text will be squished horizontally too

  • there is some buffer space between the text and the border of the map

  • is a large square (700 pixels by 700 pixels)

  • is 120 pixels below the top of the page, and 220 pixels from the left of the page

• The messages panel

  • is tall and skinny (200 pixels by 700 pixels)

  • is 20 pixels below the top of the page

  • is on the very left side of the page

• Each individual message

  • has 10 pixels of buffer space inside and outside of its box

  • uses 14 point font size, instead of 12 points

  • is stacked on top anything below it

• The overlay (for scenes)

  • covers the entire screen

  • is white

  • is 75% transparent, so you can see what's behind it

• A scene

  • is smack in the center of the screen, on top of the overlay

  • has a thin black border

  • is white

  • has some buffer space between the border and what's inside

• A button

  • has a thin black border

  • is white

  • is 150 pixels wide

  • text is underlined when you put your mouse over the button

  • is greyed out when it's disabled

• A link

  • is grey

  • is underlined when you put your mouse over it