Main Heading

First Level SubHeading With the Short Story Button - Click the icon on this line

First Level SubHeading

Click to See how to Navigate in this System

Second Level Sub Heading

Third Level Sub heading h4

Fourth level Sub Heading h5

Alternate Sub Heading Color

Alternate Third Level Sub Heading

Table Section

Table Caption and Sub Heading Color
Column	Headings
Table row color a	Table row color a
Table row color c	Table row color c
Table row color b	Table row color b
Using a contextual selector	td p

Alternate Table

Table row color R1

Table row color R2

	Col1	Col2	Col3
Row 1	C1R1	C2R1	C3R1
Row 2	C1R2	C2R2	C3R2

Table Caption and Sub Heading Color
Column	Headings
Table row color c	Table row color c
Table row color a	Table row color a
Table row color c	Table row color c
This uses contextual selectors	td p

column 1	to have tables aligned on the left use - clear all after table end	column 3
lets see what we get	I want a table with border lines on the columns	but not on the rows

Link types and Button conventions


Buttons perform calculations and do actions like sorting, re arranging things and bringing up
pop ups.

There are two different color buttons, the colors change with the theme.
I have no convention for when to use the different colors of buttons yet.

See GaryDefaultNavigation for examples of how buttons are use for bringing up pop ups

Note on XUL
the button icon='help' is for how to use this application.
the button icon='properties' is for settings and options.

Nice Idea for HTML
I should do a CSS help button and an options button with the Linux icons for the widgets

Close type -> closes the header it appears to be on

buttondiv

A block type link, or what most people think of as a button , is used for jumps to other pages.

The buttondiv is used for mini Horizontal Menus, showing closely related items.  Is another way to make navigating easy.
The main menu has everything.  The on page buttondiv menu has very frequently used items.  Example widgets

MyButton

MyButton is used for vertical menus.  Example a Table of contents for a short tutorial

Can Size Equivalents

Conversion Charts

Conversion Calculator

General Vegetable and Fruit Guidelines

Additional Resources

Small with Dot

Small with Dot is used for further information on this subject.
Sort of more help on this kind of thing, but not application related

• A one line dot link

Class AOne links are used for jumps from one part of a page to another.  Its a clue that if they open this link in a new tab,
they will have 2 tabs of the same page open.

Test Multimedia Section

Test Real Player
Test AVI File
Test Midi File
Test Wav File

Original Concept

Can Size
Equivalents

Conversion
Charts

Conversion
Calculators

General Vegetable
and Fruit
Guidelines

Other
Resources

• Can Size Equivalents • Conversion Charts • Conversion Calculators • General Vegetable and Fruit Guidelines • Additional Resources

Std Links

Text section

This my first sentence. I want two spaces between the period and the start of the next sentence. This is also my default font. See the settings directly below. This is the right way to code it, [full stop (.!?)][non breaking space][regular space].

Emphasized Text

Structured Text

EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.
CITE: Contains a citation or a reference to other sources.
DFN: Indicates that this is the defining instance of the enclosed term.
CODE: Designates a fragment of computer code.
SAMP: Designates sample output from programs, scripts, etc.
KBD: Indicates text to be entered by the user.
VAR: Indicates an instance of a variable or program argument.

ACRONYMs: have a dotted line around the word
Pass your Mouse Over the item. A ? will show at the mouse cursor and a tooltip will popup!

bold , italic , bold italic , teletype text big small quote
This following line has the tags without an enclosing p

I sometimes use this typographic type effect for the start of somewhat longer narrative. It usually signifies that you might have to think about this for a second.

Paragraphs start out indented. To format multiple line within a p I have to use a   and a space to get the spacing correct,like this and the following line. The last line of this paragraph will not have a   and I bet it will only have one space between the period and the next sentence. I have two spaces before this but no  .

CBError warnings and unexpected or different informational messages in this color

Alternate formatting options for special cases

p class small margins with class note. A Combination of this technique with other typographic conventions, such as first line indent, would prove too distracting visually, and should be avoided. Besides, the P is hosed in IE as the following DIV is not

* The Imperial gallon is divided into 160 fluid ounces (the U.S. gallon is divided into 128). British Pints and Cups are very different from their U.S. counterparts!

Note the pullquote3 and smaller p this is any easy way to highlight a item, like in a list without having to do a table

What to highlight	its description
Slice	with a serrated knife, or prick the skin with the tip of a paring knife to get a slice going, then follow through with the blade. Cut lengthwise, from stem to blossom end, rather than widthwise to retain more juice.
Dice	Slice and put half of the slices on a cutting surface with a flat slice down, and cut them into strips. Cut crosswise into dice, and repeat with the other slices.
Peel	Make a small x opposite the stem end. Drop into boiling water for about 15 to 20 seconds. Remove and place in a bowl of ice water for about 5 minutes. Slip the skin off.
Seed	Cut in half horizontally, hold each half over a strainer sitting on a bowl and squeeze; the seeds will be trapped in the strainer. Only seed tomatoes if necessary for aesthetic reasons, because you will lose some of their nutritional value if you do.

Checkbox
Hidden
Radio
Text
Textarea
Reset object		Submit object