Croquet England Logo
Croquet England Logo

Croquet England CSS Demo

This text introduces the document and (optionally) comes before the first heading.

Heading 1

If the page is split into sections, Heading 1 is the top-level heading below the page heading. This text is span class strikeout and this is span class inserted.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Heading 2

Other headings should be used in sequence as a cascade of sub-sections - do not select the one that look right to you. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Graham RobertsPicture Caption for Graham Roberts

Text in normal body with align right image using picture class, which allows a caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text in paragraph body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Now we have a numbered list (see below for other list formats):

  1. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  3. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    1. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    2. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    3. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      1. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      2. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      3. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      4. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        1. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        2. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          1. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          2. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          3. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          4. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          5. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        3. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        4. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        5. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      5. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    4. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    5. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  4. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  5. Some text in an ordered list showing how it is formatted. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Graham Roberts Here is some text in between the numbered and bullet list, with align right image class withBorder. Here is some text in between the numbered and bullet list. Here is some text in between the numbered and bullet list. Here is some text in between the numbered and bullet list. Here is some text in between the numbered and bullet list. Here is some text in between the numbered and bullet list. Here is some text in between the numbered and bullet list. Here is some text in between the numbered and bullet list. Here is some text in between the numbered and bullet list. Here is some text in between the numbered and bullet list.

Tables and Formatting

Basic Table

Table Caption is Rendered Like This
Header cell is rendered just like this Head Header cell is rendered just like this
Table body cell is rendered just like this

Table body cell is rendered just like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Table body cell is rendered just like this
Table body cell is rendered just like this Table body cell is rendered just like this

Table body cell is rendered just like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

ordinary cell data cell class 'left' cell class 'right'
  cell class highlight cell class lowlight
  nothing special here  
row highlight row highlight row highlight
  nothing special here  
row lowlight row lowlight row lowlight
  nothing special here  
Cell class 'a' Cell class 'b' Table body cell is rendered just like this

This is some regular text after the table in order to offset it from what follows or to give visual separation so it is easier to see which elements belong to the table and which are attached or belong to the next table. This is probably enough to achieve the required effect so hopefully, the reader is now clear on what is being displayed.

Basic Table - Configured for Knockout

Header cell is rendered just like this Head Header cell is rendered just like this Header cell is rendered just like this
one one One One!
Two
Three Three
four
five five five
six
seven seven
eight

This is some regular text after the table in order to offset it from what follows or to give visual separation so it is easier to see which elements belong to the table and which are attached or belong to the next table. This is probably enough to achieve the required effect so hopefully, the reader is now clear on what is being displayed.

Basic Table with Border and Row Stripes

Header cell is rendered just like this Head Header cell is rendered just like this
Table body cell is rendered just like this Table body cell is rendered just like this Table body cell is rendered just like this
Table body cell is rendered just like this Table body cell is rendered just like this Table body cell is rendered just like this
ordinary cell data cell class 'left' cell class 'right'
Cell class 'a' Cell class 'b' Table body cell is rendered just like this
ordinary cell data cell class 'left' cell class 'right'
  cell class highlight cell class lowlight
  nothing special here  
row highlight row highlight row highlight
  nothing special here  
row lowlight row lowlight row lowlight
  nothing special here  

This is some regular text after the table in order to offset it from what follows or to give visual separation so it is easier to see which elements belong to the table and which are attached or belong to the next table. This is probably enough to achieve the required effect so hopefully, the reader is now clear on what is being displayed.

Tables with Class

Table with Class Text with Border

Table class 'text withBorder'
Header cell is rendered just like this Head Header cell is rendered just like this
Table body cell is rendered just like this

Table body cell is rendered just like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Table body cell is rendered just like this
Table body cell is rendered just like this Table body cell is rendered just like this

Table body cell is rendered just like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

ordinary cell data cell class 'left' cell class 'right'
Cell class 'a' Cell class 'b' Table body cell is rendered just like this
ordinary cell data cell class 'left' cell class 'right'
  cell class highlight cell class lowlight
  nothing special here  
row highlight row highlight row highlight
  nothing special here  
row lowlight row lowlight row lowlight
  nothing special here  

This is some regular text after the table in order to offset it from what follows or to give visual separation so it is easier to see which elements belong to the table and which are attached or belong to the next table. This is probably enough to achieve the required effect so hopefully, the reader is now clear on what is being displayed.

Table with Class Data Sortable with Border

Table class 'data withBorder sortable'
Header cell is rendered just like this Head Header cell is rendered just like this
Table body cell is rendered just like this

Table body cell is rendered just like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Table body cell is rendered just like this
Table body cell is rendered just like this Table body cell is rendered just like this

Table body cell is rendered just like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

ordinary cell data cell class 'left' cell class 'right'
Cell class 'a' Cell class 'b' Table body cell is rendered just like this
ordinary cell data cell class 'left' cell class 'right'
  cell class highlight cell class lowlight
  nothing special here  
row highlight row highlight row highlight
  nothing special here  
row lowlight row lowlight row lowlight
  nothing special here  

This is some regular text after the table in order to offset it from what follows or to give visual separation so it is easier to see which elements belong to the table and which are attached or belong to the next table. This is probably enough to achieve the required effect so hopefully, the reader is now clear on what is being displayed.

Table with Class Data

Table class 'data '
Header cell is rendered just like this Head Header cell is rendered just like this
Table body cell is rendered just like this Table body cell is rendered just like this Table body cell is rendered just like this
77.2 88.7 99.6
Table body cell is rendered just like this Table body cell is rendered just like this Table body cell is rendered just like this
ordinary cell data cell class 'left' cell class 'right'
Cell class 'a' Cell class 'b' Table body cell is rendered just like this
ordinary cell data cell class 'left' cell class 'right'
  cell class highlight cell class lowlight
  nothing special here  
row highlight row highlight row highlight
  nothing special here  
row lowlight row lowlight row lowlight
  nothing special here  

This is some regular text after the table in order to offset it from what follows or to give visual separation so it is easier to see which elements belong to the table and which are attached or belong to the next table. This is probably enough to achieve the required effect so hopefully, the reader is now clear on what is being displayed.

Table with Class Data Right

Table class 'data right'
Header cell is rendered just like this Head Header cell is rendered just like this
Table body cell is rendered just like this Table body cell is rendered just like this Table body cell is rendered just like this
77.2 88.7 99.6
Table body cell is rendered just like this Table body cell is rendered just like this Table body cell is rendered just like this
ordinary cell data cell class 'left' cell class 'right'
Cell class 'a' Cell class 'b' Table body cell is rendered just like this
ordinary cell data cell class 'left' cell class 'right'
  cell class highlight cell class lowlight
  nothing special here  
row highlight row highlight row highlight
  nothing special here  
row lowlight row lowlight row lowlight
  nothing special here  

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This Section Demonstrates Class Picture

PictureThis image appears first and is floated right

PictureThis is just class 'picture' and appears in line with what follows it

PictureThis is just class 'picture' and appears in line with what follows it - the image width is not set, but the container is

PictureThis is just class 'picture' and appears in line with what follows it

PictureThis is just class 'picture' and the container width is not set

PictureThis is just class 'picture' and the container width is not set - here the text is longer

This is some text after the inline images but before the final one (in a standard paragraph tag).

PictureThis image appears last and is floated right

This text follows the last floated image

Vertical Picture Strip

The container div has a specified width and is floated right. The red background is for illustration

PictureThis image is in a specified-width picture-class p tag. Text wraps as it should

PictureThis image is in a specified-width picture-class p tag. Text wraps as it should

PictureThis image is in a specified-width picture-class p tag. Text wraps as it should

PictureThis image is in a specified-width picture-class p tag. Text wraps as it should

This is content that appears on the left of the floated-right div containing the pictures

Horizontal Picture Strip

This container div has no class or style (other than the red background.

PictureThis image is in a specified-width picture-class p tag. Text wraps as it should

PictureThis image is in a specified-width picture-class p tag. Text wraps as it should

PictureThis image is in a specified-width picture-class p tag. Text wraps as it should

PictureThis image is in a specified-width picture-class p tag. Text wraps as it should

Specialist Application

Attention-Drawing

This is a div with class attention

Pre Tag (Pre-Formatted)

This is text in a pre tag
This is text in a pre tag
This is text in a pre tag
This is text in a pre tag
This is text in a pre tag 

Code Tag

The following is tag type 'code' used for maths, etc.

a = SQRT(zxy)
c = 10
z = a * c

Column Layout

The following is a 2-column layout, or perhaps a CSS table layout? It is shown for illustration and should probably be treated as under development.

Column Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Another Col Heading in the next column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

This text follows the end of the column layout. This text follows the end of the column layout. This text follows the end of the column layout. This text follows the end of the column layout. This text follows the end of the column layout. This text follows the end of the column layout. This text follows the end of the column layout. This text follows the end of the column layout. This text follows the end of the column layout. This text follows the end of the column layout. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Ball Point Layout

This is used to give a croquet-themed layout drawing attention to a number of points.

 

220
Croquet
Clubs

Interested in trying croquet? Every one of the 220 Croquet Clubs in the country offers taster sessions and coaching for beginners. Find your local club and call them - you can be sure of a warm welcome!

150
Club-Level Coaches

More than 150 accredited Club-Level Coaches are ready to coach beginners and improving players in their clubs throughout the country.

200
Graded Coaches

200 qualified Graded Coaches are ready to coach players at all levels of ability - from refreshing and consolidating the basics right on through to international standard. Just ask!

20
Examining Coaches

Our 20 Examining Coaches coach the coaches by running initial courses to train new Club-Level Coaches. They also take a lead in developing Graded Coaches and recommending them for appointment.

12-Block Page Layout

This is used on the home page.

This text spans one block. This text spans one block.

This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks.

This text spans six blocks. This text spans six blocks. This text spans six blocks. This text spans six blocks. This text spans six blocks.

This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks.

This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks.

This text spans six blocks. This text spans six blocks. This text spans six blocks. This text spans six blocks. This text spans six blocks.

This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks. This text spans five blocks.

This text spans one block. This text spans one block.

This text follows the block layout and is not a part of it. This text follows the block layout and is not a part of it. This text follows the block layout and is not a part of it. This text follows the block layout and is not a part of it. This text follows the block layout and is not a part of it. This text follows the block layout and is not a part of it. This text follows the block layout and is not a part of it. This text follows the block layout and is not a part of it. This text follows the block layout and is not a part of it.

Regulations Numbering

A hierarchical list numbering system that supports automatic formatting of the Tournament Regulations. This entire section is inside a div that has class regs-numbering. Here's a demonstration of a structured list within <div class='regs-numbering'>

  1. Level 1
    1. Level 2
      1. Level 3
        1. Level 4
          1. Level 5
          2. Level 5
        2. level 4
      2. level 3
    2. level 2
  2. Level 1

And here's the regular (default, site style) hierarchical list style (i.e. not enclosed in a regs-numbering div):

  1. Level 1
    1. Level 2
      1. Level 3
        1. Level 4
          1. Level 5
          2. Level 5
        2. level 4
      2. level 3
    2. level 2
  2. Level 1

The following is an extract from the Regulations where each list uses its default CSS-defined layout, as modified by being inside the regs-numbering div.

C3 Procedures for Dealing with Entries: General

This regulation applies to Singles and Doubles events, and should be read in conjunction with Regulations C4 (allocation methods for entries to Singles events) and C5 (allocation methods for entries to Doubles events). Procedures for entries to Team events should be defined by the competition's special conditions. Separate conditions apply to Croquet England Selection events.

  1. DATES.
    1. ALLOCATION DEADLINE: the day before the Allocation Date, and the date on or before which entries must be received by the Entries Secretary in order to be considered for inclusion in the initial allocation of places.
    2. ALLOCATION DATE: the date on, or as soon as possible after, which the initial allocation of places is expected to be carried out. The Allocation Date must not be before 15 February, and is recommended to be between 8 and 12 weeks before the event.
    3. CLOSING DATE: the date on or before which entries must be received by the Entries Secretary in order to be considered for any remaining places. The Closing Date is recommended to be 2 weeks before the event.
    4. DRAW DATE: the date on which the draw will be conducted and thereafter published as soon as is practicable. For seeded events, it is recommended that the draw be conducted no earlier than 3 days before the start of the event.
  2. TERMINOLOGY.
    1. DYNAMIC GRADE, PROXY DYNAMIC GRADE AND HANDICAP.
      1. An entrant with no Dynamic Grade on the Allocation Date (see Regulation I(b)(8)) shall be assigned a proxy dynamic grade, which will be set to the Automatic Handicapping System Trigger Point for the entrant's handicap, or 900 where the entrant has no handicap. For example, a GC player with a handicap of 7 would be assigned a proxy dynamic grade of 1350, or an AC player with handicap of 14 would be assigned a proxy dynamic grade of 1050.
      2. SINGLES EVENTS.
        1. If more than one entrant is shown in the Ranking System with the same Dynamic Grade, they shall rank in the order in which they appear on a ranking list generated by setting the minimum number of games to zero.
        2. For Singles events, if more than one entrant has the same proxy dynamic grade, their order shall, when necessary, be determined by drawing lots (noting Regulation C3(c)(2)).
        3. A proxy dynamic grade shall rank after the same actual Dynamic Grade.
      3. DOUBLES EVENTS.
        1. The handicap of a pair shall, for the purposes of allocation only, be equal to half of the sum of each player's handicap.
        2. The Dynamic Grade/proxy dynamic grade of a pair shall be equal to half of the sum of each player's Dynamic Grade or proxy dynamic grade (as applicable)
          1. An additional sub-clause to illustrate the lowest programmed numbering level.
        3. If more than one pair has the same Dynamic Grade/proxy dynamic grade, pairs where both entrants have Dynamic Grades shall rank first, followed by pairs where only one entrant has a Dynamic Grade; followed by pairs where neither entrant has a Dynamic Grade. The order between pairs within each of these categories shall, when necessary, be determined by drawing lots (noting Regulation C3(c)(2)).
      4. An entrant who is wrongly allocated a place on the basis of an incorrect proxy dynamic grade, due to a failure to ensure that the handicap in the Croquet England Directory (see Regulation H1(c)) is up to date, may be disqualified at any time prior to the commencement of the event.

Legal Numbering

(under development but deployed in AC Laws with a view to automating the numbering)

Law Level 0

Another level 0

7 START AND END OF A GAME AND TURN

7.1 WHEN A GAME STARTS A game and its first turn start when the first stroke is played in accordance with Law 11.1.

7.2 WHEN A GAME ENDS A game ends when, in agreement as to which side has won, the players quit the court or start another game on it.

7.3 WINNER A game is won:

7.3.1 by the side whose balls are first both pegged out; or

7.3.2 in accordance with Law 61.1.7 if the game is subject to a time limit and neither side has both balls pegged out when play ceases after the time limit has been reached.

7.4 WHEN A TURN STARTS All turns subsequent to the first start when the preceding turn ends in accordance with Law 7.5.

7.5 WHEN A TURN ENDS A turn ends and, unless the game has been won, a new turn starts when:

7.5.1 one of the events causing end of turn, as defined in Law 7.6, occurs, the last stroke of the turn has ended and the balls and clips are correctly positioned; or

7.5.2 the opponent plays a stroke after the striker has either:

7.5.2.1 quitted the court in the belief that the requirements of Law 7.5.1 have been met; or

7.5.2.2 permitted the opponent to play a stroke by mutual agreement or under Law 38.1.

In time-limited games, this definition of end of turn is subject to Law 61.1.2.

Hierarchical List Numbering

(Under Development)

1. Maladministration complaints

1.1 A maladministration complaint arises if an Individual Associate, Affiliated Club or Affiliated Federation believes that they have been adversely affected by maladministration by the Council, the Executive Board, a Committee or an Officer of the Association, or someone purporting to act on behalf of those bodies, including a Croquet England tournament official.

1.2 Examples of maladministration include, but are not limited to, incorrect acts, undue delay in acting, failure to act and failure to follow correct procedure in reaching a decision. A properly made decision with which a complainant disagrees does not constitute maladministration.

1.3 Failure to follow correct procedure typically involves:

1.3.1 taking into account a factor that should not have been taken into account; or

1.3.2 failing to take into account a factor that should have been taken into account; or

1.3.3 making a decision that no reasonable body could reasonably have made.

2. Conduct complaints

2.1 A conduct complaint arises if a complainant believes that the conduct of an Individual Associate, Affiliated Club or Affiliated Federation is:

2.1.1 in breach of the Association's Constitution, policies, regulations or other governance documents; or

2.1.2 injurious to the character or interests of the Association.

2.2 A conduct complaint may be brought by either:

2.2.1 an Individual Associate, Affiliated Club or Affiliated Federation who believes that they have been adversely affected by the conduct alleged; or

Disclaimer

Class disclaimer. Class disclaimer. Class disclaimer. Class disclaimer. Class disclaimer.