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 }