1. body  {
2.     background-image: url("../images/pokemon_background.png"), url("../images/pikachu_background.png");
3.     background-position: right bottom, left bottom;
4.     background-size: 50% 50%, 15% 25%;
5.     background-repeat: no-repeat;
6. }
7.  
8.  
9. /* tell the container's children to float left: */
10. .float-my-children > * {
11.     float:left;
12.     margin-right:5px;
13. }
14.  
15. /* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */
16.  
17. .clearfix {
18.     *zoom:1 /* for IE */
19. }
20.  
21. .clearfix:before,
22. .clearfix:after {
23.     content: " ";
24.     display: table;
25. }
26.  
27. .clearfix:after {
28.     clear: both;
29. }
30.  
31. .bubble
32. {
33.     position: relative;
34.     width: 250px;
35.     height: 120px;
36.     padding: 5px;
37.     background: #FFFFFF;
38.     -webkit-border-radius: 10px;
39.     -moz-border-radius: 10px;
40.     border-radius: 10px;
41.     border: #000000 solid 1px;
42. }
43.  
44. .bubble:after
45. {
46.     content: '';
47.     position: absolute;
48.     border-style: solid;
49.     border-width: 18px 15px 18px 0;
50.     border-color: transparent #FFFFFF;
51.     display: block;
52.     width: 0;
53.     z-index: 1;
54.     left: -15px;
55.     top: 20px;
56. }
57.  
58. .bubble:before
59. {
60.     content: '';
61.     position: absolute;
62.     border-style: solid;
63.     border-width: 18px 15px 18px 0;
64.     border-color: transparent #000000;
65.     display: block;
66.     width: 0;
67.     z-index: 0;
68.     left: -16px;
69.     top: 20px;
70. }
71.  
72. .center {
73.     text-align: center;
74. }