kallisor.css
1    div {
2      border: 1px black solid;
3      box-sizing: border-box;
4      position: absolute;
5    }
6    
7    h1 {
8      margin: 0;
9      text-align: center;
10     text-shadow: 1px 1px 0 white;
11   }
12   
13   h3 {
14     margin: 0;
15     text-align: center;
16   }
17   
18   #interface {
19     width: 476px;
20     height: 351px;
21     position: relative;
22     background-color: bisque;
23     border-radius: 10px;
24     background-image: url("http://coding.stephenjwolf.com/cfk2/images/kallisor.png");
25   }
26   
27   #text {
28     width: 375px;
29     height: 150px;
30     top: 50px;
31     left: 0;
32     color: white;
33     padding: 10px;
34     background-color: rgba(0, 0, 0, 0.8);
35     overflow-y: auto;
36   }
37   
38   #foe {
39     width: 100px;
40     height: 100px;
41     padding: 25px;
42     top: 50px;
43     left: 375px;
44     background-color: rgba(0, 0, 0, 0.8);
45     color: white;
46   }
47   
48   #foe-image {
49     width: 50px;
50     height: 50px;
51   }
52   
53   #foe-info {
54     width: 100px;
55     height: 50px;
56     top: 150px;
57     left: 375px;
58     background-color: rgba(0, 0, 0, 0.8);
59     color: white;
60     padding: 10px;
61   }
62   
63   #stats {
64     width: 275px;
65     height: 150px;
66     top: 200px;
67     left: 200px;
68     background-color: rgba(0, 0, 0, 0.8);
69     color: white;
70     border-bottom-right-radius: 10px;
71     padding: 10px;
72   }
73   
74   .button-div {
75     width: 80px;
76     height: 55px;
77     border-radius: 25px;
78     margin: 10px;
79     text-align: center;
80     color: white;
81     line-height: 55px;
82   }
83   
84   #fight {
85     top: 200px;
86     left: 0;
87     background-color: darkred;
88   }
89   
90   #fight:hover {
91     background-color: red;
92   }
93   
94   #herb {
95     top: 275px;
96     left: 0;
97     background-color: darkgreen;
98   }
99   
100  #herb:hover {
101    background-color: green;
102  }
103  
104  #defend {
105    top: 200px;
106    left: 100px;
107    background-color: darkblue;
108  }
109  
110  #defend:hover {
111    background-color: blue;
112  }
113  
114  #run {
115    top: 275px;
116    left: 100px;
117    background-color: darkgoldenrod;
118  }
119  
120  #run:hover {
121    background-color: goldenrod;
122  }
123  
124  #ok {
125    width: 180px;
126    height: 130px;
127    top: 200px;
128    left: 0;
129    margin: 10px;
130    line-height: 130px;
131    font-size: 1.2em;
132    text-align: center;
133    background-color: darkmagenta;
134    color: white;
135    border-radius: 25px;
136  }
137  
138  #ok:hover {
139    background-color: magenta;
140  }