CSS style list |  |

# Dealer stylesheet styles

This page demonstrates all the dealer styles defined in the dealer override stylesheet (over.css), showing your browser's rendering of them on the left, and a screenshot from our reference browser (Firefox) on the right. If everything's working well the two should look very similar.

These styles are active within any HTML division of class 'dmb0':

    <div class="dmb0"> ... </div>

### Side by side style comparison

Styles appear below in the same order as they do in the dealer stylesheet.

BORDER STYLE
.border showing the standard border style (applied to bordered XComponents, etc) |

GENERAL TEXT STYLES
p, th, td, .key b showing the font, size and colour of standard body text |
b, th b, td b showing bold body text |
.voice_A showing the voice_A class on body text |
.voice_B showing the voice_B class on body text |
.voice_C showing the voice_C class on body text |
.voice_D showing the voice_D class on body text |
.key b showing the keypad action class on body text #2 5 |
ul li The unordered list class 2nd list item |

HEADLINE AND SUBHEAD STYLES
h1, h2 # A headline |
h3 ### A sub-head |

TABLE CELLS / GENERIC BACKGROUND AND BORDER COLOURS
.col1i, td.cell1i, td.cell1i_thin, td.cell1i_thin_pale
Text and background colour
td.cell1i_thin_pale
...thin_pale modification of text colour
.col1f, td.cell1f, td.cell1f_thin, td.cell1f_thin_pale
Text and background colour
td.cell1f_thin_pale
...thin_pale modification of text colour
.col2i, td.cell2i, td.cell2i_thin, td.cell2i_thin_pale
Text and background colour
td.cell2i_thin_pale
...thin_pale modification of text colour
.col2f, td.cell2f, td.cell2f_thin, td.cell2f_thin_pale
Text and background colour
td.cell2f_thin_pale
...thin_pale modification of text colour
.divider, .padded_table td.divider, .padded_table_thin td.divider
Table cell divider background colour
.sg_num .mid The background colour of the middle section of 'service graphic' numbers, on which the actual number is displayed
| +44-20- 7060-1234 |

FORM ELEMENTS
.form_text_field, .form_select, .form_submit NOTE: The appearance of these elements varies between browsers and platforms | OLD
.form_text_field_error, .form_select_error, .form_checkbox_error NOTE: The appearance of these elements varies between browsers and platforms A checkbox |

LINKS
a A link looks like this |
a.popup A popup link looks like this | OLD
a.forward A forward link looks like this |
a.options An options opener looks like this |
.grabut_left, .grabut_right Links styles as buttons. A Graphic Button | OLD
.grabut_left_forward, .grabut_right_forward Buttons that move to another page A Graphic Button |
.grabut_left_reload, .grabut_right_reload Buttons that reload current page. A Graphic Button |
.tabs Sets the footer line colour of a set of tabbled links. |
.tabs li a Sets the background and border colours of unselected tabbled links. |
.tabs li a.current Sets the background and border colours of the selected tab (the 2nd in this example). | OLD
.tab_body Sets the background and border colours of the tab body (the part containing the content) |

RIGHT ALIGNED FEATURE PANELS
.floatbox_narrow h1, .floatbox_medium h1 Sets the text and background colours of the heading block the top of a feature panel. # Box heading |
.floatbox_brief Sets the text, background and border colours of each story block in a feature panel. Feature panel text looks like this, on this colour background, with these colour borders. | OLD

INFOTEXT INDICATORS, INFOTEXT BUBBLES AND INFOTEXT COPY
.infotext Sets the style of text to which infotext is attached (the infotext indicator style). Infotext indicator |
.infotext_bubble Sets the infotext copy colour, and background and border colours of the infotext bubble. A useful message in a bubble |

## XComponent specific styles

These styles are active within any HTML division of class 'dmx' nested within a 'dmb0' division:

    <div class="dmb0"><div class="dmx"> ... </div></div>

XCOMPONENT SPECIFIC STYLES
p, td Applies to body text in XCpmponents. Inherits from general .dmb0 text style. |
h1, h2 # A headline |
h1.bordered # XComponent name |
h3 ### A sub-head |
a.nu Number links in number choosers 020-7060-2000 |
.price The price in a shopping trolley £29.95 |

## dmClub Specific styles

The following styles are used on dmClub pages only and are defined in over_dmclub.css, and not in the dealer override stylesheet (over.css). They mainly define the common structural elements of dmClub pages (eg Headers, NavBars, Help Areas), and are not relevant for use on dealer sites.

HEADER / NAV / ERROR MESSAGE / FOOTER BARS
#header_bar Sets the colour (or background tile) of the header bar. |
#header_bar title Sets the colour of the page title that appears in the header bar. Page Title Colour |
#nav_bar Sets the colour of the nav bar. |
#nav_bar a Sets the colour of the text and dotted horizontal borders of nav bar links. |
#err_msg_bar Sets the text and background colours of the error message bar. Error messages look like this |
#footer_bar Sets the text and background colours of the footer bar. |
#footer_bar a Sets the colour of the text and dotted horizontal borders of footer bar links. |

HELP AREA
#help_header_bar Sets the background colour of the help area header bar. |
#help_header_bar .title Sets the text colour and font size of the title in the help area header bar Help header bar title text |
#help_header_bar a Sets the text colour and left dotted border colour for the links that appear in the help area header bar dmNotes dmSupport etc |
#help Sets the text, background and left, right and bottom border colours of the help area. Help text ... |
#help .emphasis, #help b Sets the colour of emphasised or bolded text in the help area. We want this to stand out |
#help h1, #help h2 Sets the style of headlines that appear in the help area. # Help area headline |