THE RACING CLUB - STYLE GUIDE

FORMS

1. MEDIA QUERY
STANDARD FORM
EXPADABLE FORM
CONFIRMATION PAGE
THANK YOU PAGE

2. FORM COMPONANT

ENROLLMENT
RACE DAY BOOKING / NON-RACE DAY BOOKING
ORDERING WINNING PHOTOS
UPDATE PROFILE
CONFIRMATION PAGE - ENROLLMENT
CONFIRMATION PAGE - RACE DAY BOOKING / NON-RACE DAY BOOKING
CONFIRMATION PAGE - ORDERING WINNING PHOTOS
CONFIRMATION PAGE - UPDATE PROFILE
THANK YOU PAGE

3. ELEMENT

GROUP TITLE & EXPANDABLE BUTTON

FORM INPUT STYLE
LENGTH OF INPUT & INSTRICTION
BUTTON WITH ICON
CALENDAR
MAX NUMBER OF GUEST
REMOVE BUTTON & GUEST INFORMATION

P.3
P.7
P.11
P.15

P.19
P.24
P.29
P.34
P.42
P.47
P.52
P.58
P.63

P.64
P.65
P.66
P.68
P.70
P.72
p.73

MEDIA QUERY

STANDARD FORM (#A)

1200px width

CSS
stylesheet: form.css
class: .col-md-2 .col-sm-3 .control-label

CSS
stylesheet: form.css
class: .col-md-4 .col-sm-3

CSS
stylesheet: form.css
class: .col-md-2 .col-sm-3 .control-label

For device width 1200 pixel or above.

CSS
stylesheet: form.css
class: .col-md-4 .col-sm-3

1200px
30px

193px

387px

193px

387px

30px

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)
50px

30px
15px

30px

MEDIA QUERY

STANDARD FORM (#A)

992px width

960px
30px

153px

307px

153px

307px

30px

For device width 992 pixel to 1199px.

Device:

40px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
10px
15px

287px

287px

201px

747px

30px

MEDIA QUERY

STANDARD FORM (#A)

768px width

768px
20px

206px

207px

206px

207px

20px

For device width 768 pixel to 991px.

Device:
30px

iPad - Portrait (768px viewport)

30px
5px
15px

157px (25%)

157px (25%)

110px

511px (75%)

20px

MEDIA QUERY

STANDARD FORM (#A)

320px
20px

280px

20px

320px width

For device width 320px.

20px

Device:

20px

Mobile - iPhone, Samsung Galaxy S4

196px

MEDIA QUERY

EXPANDABLE FORM (#B)

1200px width

CSS
stylesheet: form.css
class: .col-md-2 .col-sm-3 .control-label

CSS
stylesheet: form.css
class: .col-md-4 .col-sm-3

CSS
stylesheet: form.css
class: .col-md-2 .col-sm-3 .control-label

For device width 1200 pixel or above.

CSS
stylesheet: form.css
class: .col-md-4 .col-sm-3

1200px
30px

193px

387px

193px

387px

30px

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)
50px

30px
15px

367px
367px

947px

30px

MEDIA QUERY

EXPANDABLE FORM (#B)

992px width

960px
30px

153px

307px

153px

307px

30px

For device width 992 pixel to 1199px.

Device:

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

40px

30px
10px
10px

30px

MEDIA QUERY

EXPANDABLE FORM (#B)

768px width

768px
20px

206px

207px

206px

207px

20px

For device width 768 pixel to 991px.

Device:

iPad - Portrait (768px viewport)

30px

30px
15px

20px

MEDIA QUERY

EXPANDABLE FORM (#B)

320px
20px

280px

20px

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

MEDIA QUERY

CONFIRMATION PAGE (#C)

1200px width

CSS
stylesheet: form.css
class: .col-md-2 .col-sm-3 .control-label

CSS
stylesheet: form.css
class: .col-md-4 .col-sm-3

CSS
stylesheet: form.css
class: .col-md-2 .col-sm-3 .control-label

For device width 1200 pixel or above.

CSS
stylesheet: form.css
class: .col-md-4 .col-sm-3

1200px
30px

193px

387px

193px

387px

30px

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)
50px

30px
15px

MEDIA QUERY

CONFIRMATION PAGE (#C)

992px width

960px
30px

153px

307px

153px

307px

30px

For device width 992 pixel to 1199px.

Device:

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

40px

30px
10px
10px

MEDIA QUERY

CONFIRMATION PAGE (#C)

768px width

768px
20px

206px

207px

206px

207px

20px

For device width 768 pixel to 991px.

Device:

iPad - Portrait (768px viewport)

30px

30px
15px

MEDIA QUERY

CONFIRMATION PAGE (#C)

320px
20px

280px

20px

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

MEDIA QUERY

THANK YOU PAGE (#C)

1200px width

CSS
stylesheet: form.css
class: .col-md-2 .col-sm-3 .control-label

CSS
stylesheet: form.css
class: .col-md-4 .col-sm-3

CSS
stylesheet: form.css
class: .col-md-2 .col-sm-3 .control-label

For device width 1200 pixel or above.

CSS
stylesheet: form.css
class: .col-md-4 .col-sm-3

1200px
30px

193px

387px

193px

387px

30px

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)
50px

30px
15px

30px

MEDIA QUERY

THANK YOU PAGE (#C)

992px width

960px
30px

153px

307px

153px

307px

30px

For device width 992 pixel to 1199px.

Device:

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

40px

30px
10px
10px

MEDIA QUERY

THANK YOU PAGE (#C)

768px width

768px
20px

206px

207px

206px

207px

20px

For device width 768 pixel to 991px.

Device:

iPad - Portrait (768px viewport)

30px

30px
15px

MEDIA QUERY

THANK YOU PAGE (#C)

320px
20px

280px

20px

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

FORM COMPONANT

STANDARD FORM - ENROLLMENT

1200px width

30px

30px

For device width 1200 pixel or above.

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

50px

30px
15px

10px
20px
40px
10px
20px
40px
10px

20px

40px

30px

20px

FORM COMPONANT

STANDARD FORM - ENROLLMENT

992px width

30px

30px

For device width 992 pixel to 1199px.

Device:

40px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
10px
10px
10px
20px
40px
10px
20px
40px
10px

20px

40px

30px
20px

FORM COMPONANT

STANDARD FORM - ENROLLMENT

20px

20px

768px width

For device width 768 pixel to 991px.

30px

Device:

30px

iPad - Portrait (768px viewport)

15px
10px

20px
40px
10px
20px
40px
10px

20px

40px

10px

FORM COMPONANT

STANDARD FORM - ENROLLMENT

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

20px

20px

20px

20px

20px

20px

10px

20px

20px

10px
Style
font:
Arial
font-size:
15px
line-height:
20px
color:
#ffffff

20px

20px

20px
20px

30px

5px

20px
30px
20px
10px
30px

50px

FORM COMPONANT

STANDARD FORM - ENROLLMENT

Bootstrap grid system

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-sm-5

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-sm-7

FORM COMPONANT

STANDARD FORM - RACE DAY BOOKING / NON-RACE DAY BOOKING

1200px width

30px

30px

For device width 1200 pixel or above.

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

50px

30px
15px
10px
40px
10px
20px
20px
20px
20px

40px

30px

20px

FORM COMPONANT

STANDARD FORM - RACE DAY BOOKING / NON-RACE DAY BOOKING

992px width

30px

30px

For device width 992 pixel to 1199px.

Device:

40px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
10px
10px
10px
40px
10px
20px
20px
20px
20px

40px

30px

20px

FORM COMPONANT

STANDARD FORM - RACE DAY BOOKING / NON-RACE DAY BOOKING

768px width

For device width 768 pixel to 991px.

20px

20px

Device:

iPad - Portrait (768px viewport)

30px

30px
15px
10px
40px

10px
20px
20px
20px
20px

40px

30px

10px

FORM COMPONANT

STANDARD FORM - RACE DAY BOOKING / NON-RACE DAY BOOKING

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

20px

20px

20px

20px

20px

20px
20px

10px

20px

20px
20px
30px

30px
20px
10px

20px

20px

20px

5px

50px

FORM COMPONANT

STANDARD FORM - RACE DAY BOOKING / NON-RACE DAY BOOKING

Bootstrap grid system

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-10 .col-sm-9

.col-md-4 .col-sm-3

FORM COMPONANT

STANDARD FORM - ORDERING WINNING PHOTOS

1200px width

30px

30px

For device width 1200 pixel or above.

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

50px

30px
15px
10px

20px
20px
20px
40px

30px

20px

FORM COMPONANT

STANDARD FORM - ORDERING WINNING PHOTOS

992px width

30px

30px

For device width 992 pixel to 1199px.

Device:

40px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
10px
10px
10px
20px
20px
20px
20px
40px

30px

20px

FORM COMPONANT

STANDARD FORM - ORDERING WINNING PHOTOS

768px width

For device width 768 pixel to 991px.

20px

20px

Device:

iPad - Portrait (768px viewport)

30px

30px
15px
10px
20px
20px
20px
20px
40px

30px

10px

FORM COMPONANT

STANDARD FORM - ORDERING WINNING PHOTOS

320px width

For device width 320px.

Device:

20px

20px

20px

20px

Mobile - iPhone, Samsung Galaxy S4

20px
20px

20px
20px

10px

20px

20px
30px
20px
5px

20px
50px
20px

FORM COMPONANT

STANDARD FORM - ORDERING WINNING PHOTOS

Bootstrap grid system

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-10 .col-sm-9

.col-md-4 .col-sm-3

.col-md-4 .col-sm-3

FORM COMPONANT

EXPANDABLE FORM - UPDATE PROFILE

1200px width

30px

30px

For device width 1200 pixel or above.

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

50px

30px
15px
10px
40px
20px
20px
20px
20px
20px

5px
10px
30px

20px

FORM COMPONANT

EXPANDABLE FORM - UPDATE PROFILE

1200px width

30px

30px

For device width 1200 pixel or above.

Device:

20px

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

20px
20px
20px
20px
40px
20px

40px
30px
30px
30px
Style
font:
Arial
font-size:
14px
line-height:
20px
color:
#ffffff

60px

30px

20px

FORM COMPONANT

EXPANDABLE FORM - UPDATE PROFILE

992px width

30px

30px

For device width 992 pixel to 1199px.

Device:

40px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
20px
10px
40px
20px
20px
20px
20px
20px

5px
10px
30px

20px

FORM COMPONANT

EXPANDABLE FORM - UPDATE PROFILE

992px width

30px

30px

For device width 992 pixel to 1199px.

20px

Device:

20px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

20px
20px
20px
40px
20px

40px
30px
30px
30px
Style
font:
Arial
font-size:
14px
line-height:
20px
color:
#ffffff

60px

30px

20px

FORM COMPONANT

EXPANDABLE FORM - UPDATE PROFILE

768px width

For device width 768 pixel to 991px.

20px

20px

Device:

iPad - Portrait (768px viewport)

30px

30px
15px
10px
40px
20px
20px
20px
20px
20px

5px
10px
30px

10px

FORM COMPONANT

EXPANDABLE FORM - UPDATE PROFILE

768px width

20px

For device width 768 pixel to 991px.

20px

Device:

20px

iPad - Portrait (768px viewport)

20px
20px
20px
20px
40px
20px

40px
30px
30px
30px
Style
font:
Arial
font-size:
14px
line-height:
20px
color:
#ffffff

60px

30px

10px

FORM COMPONANT

EXPANDABLE FORM - UPDATE PROFILE

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

20px

20px

20px

20px

20px
5px
20px

Style
font:
Arial
font-size:
15px
line-height:
20px
color:
#ffffff

20px

10px

20px
20px
30px

40px
20px

20px

5px
30px

20px
50px
20px

10px
20px
20px

FORM COMPONANT

EXPANDABLE FORM - UPDATE PROFILE

Bootstrap grid system

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-10 .col-sm-9

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-4

.col-md-3

.col-md-2 .col-sm-3

.col-md-4

.col-md-3

.col-md-4

.col-md-3

.col-md-12

.col-md-4 .col-sm-3

.col-md-3

FORM COMPONANT
30px

30px

CONFIRMATION PAGE ENROLLMENT

1200px width

50px

30px

For device width 1200 pixel or above.

10px

Device:

10px

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

20px
40px
10px
20px
40px
10px
30px
40px
20px
120px
20px

20px
30px

20px

FORM COMPONANT

CONFIRMATION PAGE - ENROLLMENT

992px width

20px

20px

For device width 992 pixel to 1199px.

Device:

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
30px
10px
10px

Style
font:
Arial
font-size:
14px
line-height:
20px
color:
#ffffff

10px
30px
10px
10px
30px
10px
40px

10px

20px
30px

20px

FORM COMPONANT

CONFIRMATION PAGE - ENROLLMENT

20px

20px
30px

768px width

30px
15px

For device width 768 pixel to 991px.

Device:

iPad - Portrait (768px viewport)

10px

Style
font:
Arial
font-size:
14px
line-height:
20px
color:
#ffffff

20px
40px
10px
20px
40px

10px
40px
40px
120px
20px

10px

FORM COMPONANT

CONFIRMATION PAGE - ENROLLMENT

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

20px

20px

20px

20px

20px

20px
40px
10px
Style
font:
Arial
font-size:
15px
line-height:
20px
color:
#ffffff

20px

30px
20px

20px
20px
20px

20px

20px

20px

30px
20px

30px

10px

30px

5px

50px

FORM COMPONANT

CONFIRMATION PAGE - ENROLLMENT

Bootstrap grid system

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

FORM COMPONANT

CONFIRMATION PAGE - RACE DAY BOOKING / NON-RACE DAY BOOKING

1200px width

30px

30px

For device width 1200 pixel or above.

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

50px

30px
15px
10px
40px
10px
20px
20px
20px
20px
40px
40px

30px

20px

FORM COMPONANT

CONFIRMATION PAGE - RACE DAY BOOKING / NON-RACE DAY BOOKING

992px width

30px

30px

For device width 992 pixel to 1199px.

Device:

40px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
10px
10px
10px
40px
10px
20px
20px
20px
20px
40px
40px

30px

20px

FORM COMPONANT

CONFIRMATION PAGE - RACE DAY BOOKING / NON-RACE DAY BOOKING

768px width

For device width 768 pixel to 991px.

20px

20px

Device:

iPad - Portrait (768px viewport)

30px

30px
15px
10px
40px

10px
20px
20px
20px
20px
40px

40px

30px

10px

FORM COMPONANT

CONFIRMATION PAGE - RACE DAY BOOKING / NON-RACE DAY BOOKING

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

20px

20px

20px

20px

20px

20px

10px

20px
20px
20px
30px

20px

20px

30px

20px

10px

20px

20px

20px

20px

20px

20px

30px

30px

5px

50px

FORM COMPONANT

CONFIRMATION PAGE - RACE DAY BOOKING / NON-RACE DAY BOOKING

Bootstrap grid system

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

FORM COMPONANT

CONFIRMATION PAGE - ORDERING WINNING PHOTOS

1200px width

30px

30px

For device width 1200 pixel or above.

Device:

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

50px

30px
15px
10px
10px
10px

10px
10px
40px
10px
20px
20px
20px
40px
40px

30px

20px

FORM COMPONANT

CONFIRMATION PAGE - ORDERING WINNING PHOTOS

992px width

30px

30px

For device width 992 pixel to 1199px.

Device:

40px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
10px
10px
10px
10px
10px

10px
10px
40px
10px
20px
20px
20px
40px
40px

30px

20px

FORM COMPONANT

CONFIRMATION PAGE - ORDERING WINNING PHOTOS

768px width

For device width 768 pixel to 991px.

20px

20px

Device:

iPad - Portrait (768px viewport)

30px

30px
15px
10px
10px
10px

10px
10px
40px
10px
20px
20px
20px
40px

40px

30px
10px

FORM COMPONANT

CONFIRMATION PAGE - ORDERING WINNING PHOTOS

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

20px

20px

20px

20px

20px

10px

20px

20px
20px
30px
10px
10px
10px

20px

20px

20px

30px

5px

10px
20px
50px

40px
30px
10px

FORM COMPONANT

CONFIRMATION PAGE - ORDERING WINNING PHOTOS

Font-style

320px width

For device width 1200 pixel, 992 pixel, 768 pixel

Style
font: Myriad_procondensed
font-size: 20px
color: #ffffff
text-transform: uppercase
Style
font: Myriad_procondensed
font-size: 24px
color: #ffffff
text-transform: uppercase
Style
font: Arial bold
font-size: 14px
color: #ffffff

Style
font: Myriad_procondensed
font-size: 20px
color: #ffffff
Style
font:Arial
font-size:14px
color: #ffffff

Style
font:Arial
font-size:14px
color: #ffffff

Style
font: Myriad_procondensed
font-size: 20px
color: #ffffff
text-transform: uppercase

Style
font: Myriad_procondensed
font-size: 20px
color: #ffffff
Style
font:Arial
font-size:15px
color: #ffffff

Style
font: Myriad_procondensed
font-size: 24px
color: #ffffff
text-transform: uppercase

Style
font: Arial bold
font-size: 15px
color: #ffffff

Style
font:Arial
font-size:15px
color: #ffffff

FORM COMPONANT

CONFIRMATION PAGE - ORDERING WINNING PHOTOS

Bootstrap grid system

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

FORM COMPONANT

CONFIRMATION PAGE - UPDATE PROFILE

1200px width

30px

30px

For device width 1200 pixel or above.

Device:

50px

Desktop screen resolution 1280 x 960 or above.

Samsung Galaxy Tab 10.1 - Landscape (1280px viewport)

30px
15px

10px
40px
20px
20px
20px
20px
40px
20px
25px
20px
30px
40px

30px
20px

FORM COMPONANT

CONFIRMATION PAGE - UPDATE PROFILE

992px width

30px

30px

For device width 992 pixel to 1199px.

Device:

30px

Desktop screen resolution 1024x768.

iPad - Landscape (1024px viewport)

30px
15px

10px
40px
20px
20px
20px
20px
40px
20px
25px
20px
30px
40px

30px
20px

FORM COMPONANT

CONFIRMATION PAGE - UPDATE PROFILE

768px width

20px

20px

For device width 768 pixel to 991px.

Device:

30px

iPad - Portrait (768px viewport)

30px
15px

10px
40px
20px
20px
20px
20px
40px
20px
25px
20px
30px

40px

30px
10px

FORM COMPONANT

CONFIRMATION PAGE - UPDATE PROFILE

320px width

For device width 320px.

Device:

Mobile - iPhone, Samsung Galaxy S4

20px

20px

20px

20px

20px

30px

20px
20px
20px

30px

10px

20px

30px

30px

5px

20px
50px
20px

20px

Style
font:
Arial
font-size:
15px
line-height:
20px
color:
#ffffff

FORM COMPONANT

CONFIRMATION PAGE - UPDATE PROFILE

Bootstrap grid system

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

.col-md-2 .col-sm-3

.col-md-4 .col-sm-3

FORM COMPONANT

THANK YOU PAGE

For device width 1200 pixel, 992 pixel & 768 pixel
30px

30px

15px

Style
font:
Arial bold
font-size:
20px
line-height:
25px
color:
#ffffff

20px

20px

For device width 320 pixel(Mobile)

20px

Style
font:
Arial bold
font-size:
20px
line-height:
25px
color:
#ffffff

10px

ELEMENT

GROUP TITLE

For device width 1200 pixel, 992 pixel, 768 pixel & 320 pixel(Mobile)
CSS
stylesheet: global.css / line97
class: h3
270px
20px
Style
font:
myriad_procondensed
font-size:
26px
color:
#ffffff
text-transform:
uppercase
character limit(including spacing):
21

228px

Background gradiant:

22px
40px

EXPANDABLE BUTTON

For device width 1200 pixel, 992 pixel, 768 pixel

CSS
stylesheet: global.css / line624
class: . panel-red .panel-heading

Style
font:
Arial
font-size:
11px
color:
#999999

For device width 320 pixel(Mobile)

+/- background tab image

40px
10px

40px

40px
40px

Background treatment
Color: #c54b73 (2px)
Color: #ad0039 (50%)
Color: #7c052c (50%)
Color: #7c052c (2px)

Style
font:
myriad_procondensed
font-size:
26px
color:
#ffffff
text-transform:
uppercase
character limit(including spacing):
23

40px

10px

40px
100% width base on mobile device width
Background color
Color: #dd366c

40px

ELEMENT

FORM INPUT STYLE

For device width 1200 pixel, 992 pixel, 768 pixel

*Input style will be different on different type of browser.
CSS
stylesheet: .form-control / line1
class: .form-control

Style
font:
Arial bold
font-size:
14px
color:
#ffffff
character limit(including spacing):
20

25px
20px
Style
font:
Arial
font-size:
14px
color:
#ffffff
character limit(including spacing):
20

25px

15px

25px

Style
font:
Arial
font-size:
14px
color:
#ffffff

15px

For device width 320 pixel(Mobile)

15px
Style
font:
Arial bold
font-size:
15px
color:
#ffffff
character limit(including spacing):
20

15px
Style
font:
Arial
font-size:
15px
color:
#ffffff
character limit(including spacing):
20

35px
20px
35px

35px

Style
font:
Arial
font-size:
15px
color:
#ffffff

ELEMENT

LENGTH OF INPUT FIELD & RESTRICTION

Input field font style font: Arial font-size: 14px

DROPDOWN MENU

Value: English, Chinese, numeric, symbol

Highlight: default by browser
Category: Bold (unselectable)

CONTACT NO. / PAGER / MOBILE / FAX NO.

Value: Numeric
Field length: 40
Restriction: Numeric only

CSS
stylesheet: .form-control / line1
class: .form-control
padding: 0px 3px
font-size: 14px
line-height: 25px
color: #000000
vertical-align: middle
border: 1px solid #cccccc
background-color: #FDFDFD
-moz-border-radius: 5px*
-webkit-border-radius: 5px*
border-radius: 5px*
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)*
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)*

* CSS3 will only work on IE9+, Chrome, Firefox, Safari

EMAIL

Value: English, symbol, numeric

Field length: Maximum 255
Restriction: @ & .com must be contained
BETTING ACCOUNT

Value: Numeric
Field length: 8
Restriction: Numeric only

ELEMENT

LENGTH OF INPUT FIELD & RESTRICTION

Input field font style font: Arial font-size: 14px
ADDRESS

Value: English, Chinese, numeric, symbol

Field length: Maximum 120

OTHER REQUEST

Value: English, Chinese, numeric, symbol

Field length: Maximum 300

COMPANY NAME

Value: English, Chinese, numeric, symbol

Field length: Maximum 80

POSITION

Value: English, Chinese, numeric, symbol

Field length: Maximum 225

GUEST NAME

MEMBERSHIP NO.

Value: English, Chinese, numeric, symbol

Field length: Maximum 225

Value: English & numeric

Field length: Maximum 6

ELEMENT

BUTTON WITH ICON

For device width 1200 pixel, 992 pixel & 768 pixel
CSS
stylesheet: global.css / line661
class: .btn_bottom
Font style
font:
Myriad pro regular
font-size:
20px
color:
#ffffff
text-shadow:
1px 1px 1px #000000
character limit(including spacing):
21

Background gradiant:
Background treatment
Color: #c54b73 (2px)
Color: #ad0039 (50%)
Color: #7c052c (50%)
Color: #7c052c (2px)

25px

25px

43px

15px

Background treatment
Color: #878787 (2px)
Color: #555555 (50%)
Color: #333333 (50%)
Color: #2d2d2d (2px)

43px

20px

8px

15px

20px

8px
25px

25px

43px

43px

15px

15px

20px

8px

8px

20px

25px

*Sound effect will trigger when user click this button.

43px

15px

8px

20px

25px

25px

25px

43px

15px

8px

20px

43px

43px

15px

8px

20px

15px

8px

20px

ELEMENT

BUTTON WITH ICON

BUTTON WITH ICON

For device width 320 pixel(Mobile)

20px
Font style
font:
Myriad pro regular
font-size:
20px
color:
#ffffff
text-shadow:
1px 1px 1px #000000
text-alignment:
center
character limit(including spacing):
21

For device width 1200 pixel, 992 pixel, 768 pixel & 320 pixel(Mobile)
width: 100% base on device width (with 20px space on left & right)

20px
25px

15px 25px

43px

43px
15px
43px

43px

43px

43px

43px

43px

20px 15px 25px

20px

8px

20px

ELEMENT

CALENDAR

For device width 1200 pixel, 992 pixel & 768 pixel
CSS
stylesheet: datepicker.css / line9
class: .datepicker .dropdown-menu

Font style
font:
Arial bold
font-size:
14px
color:
#000000

Font style
font:
Arial bold
font-size:
14px
color:
#000000
character limit:
2

290px

CSS
stylesheet: datepicker.css / line72
class: .day .disabled
250px

CSS
stylesheet: datepicker.css
class: .day
Font style
font:
Arial
font-size:
14px
color:
#000000

* CSS3 will only work on IE9+, Chrome, Firefox, Safari

Font style
font:Arial
font-size:14px
color: #cccccc

CSS
stylesheet:
datepicker.css / line83
class: td.active
Font style
font: Arial
font-size: 14px
color: #ffffff
Background treatment
Color: #ad0039 (50%)
Color: #7c052c (50%)
border-radius: 4px*

ELEMENT

CALENDAR

For device width 320 pixel(Mobile)

CSS
stylesheet: datepicker.css / line9
class: .datepicker .dropdown-menu

Font style
font:
Arial bold
font-size:
14px
color:
#000000

width: 90% base on device width

Font style
font:
Arial bold
font-size:
14px
color:
#000000
character limit:
2

CSS
stylesheet: datepicker.css / line109
class: td.active
Font style
font: Arial
font-size: 14px
color: #ffffff
Background treatment
Color: #ad0039 (50%)
Color: #7c052c (50%)
border-radius: 4px*
* CSS3 will only work on IE9+, Chrome, Firefox, Safari

CSS
stylesheet: datepicker.css / line72
class: .day .disabled
250px

Font style
font:
Arial
font-size:
14px

CSS
stylesheet: datepicker.css
class: .day
Font style
font:
Arial
font-size:
14px
color:
#000000

ELEMENT

SPECIAL TREATMENT

For device width 1200 pixel, 992 pixel & 768 pixel

For device width 320 pixel(Mobile)

CSS
stylesheet: global.css/line36
class: .label .label-default

Font style
font:
Arial
font-size:
14px
color:
#ffffff

Font style
font:Arial bold
font-size:14px
color: #f00

Font style
font:Arial
font-size:14px
color: #ad0039
text-decoration: underline

* CSS3 will only work on IE9+, Chrome, Firefox, Safari

CSS
background-color: #ad0039
border-radius: .25em

Font style
font:
Arial
font-size:
15px
color:
#ffffff

CSS
background-color: #ad0039
border-radius: .25em*

Font style
font:Arial bold
font-size:15px
color: #f00

Font style
font:Arial
font-size:15px
color: #ad0039
text-decoration: underline

REMOVE BUTTON

For device width 1200 pixel, 992 pixel, 768 pixel & 320 pixel (mobile)
CSS
stylesheet: btns.css / line118
class: .btn_remove

Font style
font:
Myriad pro regular
font-size:
14px
color:
#ffffff
text-shadow:
1px 1px 1px #000000

87px
16px
25px

4px

GUEST INFORMATION

For device width 1200 pixel, 992 pixel & 768 pixel

20px
Background treatment
Color: #202020 (50%)
Color: #131313 (50%)

40px

120px

Background
Color: #222222

For device width 320 pixel (mobile)

20px
Font style
font:
Arial
font-size:
18px
color:
#ffffff

40px

20px

Background treatment
Color: #202020 (50%)
Color: #131313 (50%)
Background
Color: #222222