| @@ -93,7 +93,7 @@ html, body { | |||||
| position: absolute; | position: absolute; | ||||
| left: 50%; | left: 50%; | ||||
| margin-left: -100px; | margin-left: -100px; | ||||
| top: 15%; | |||||
| top: 5%; | |||||
| } | } | ||||
| @media (max-aspect-ratio: 1/1) { | @media (max-aspect-ratio: 1/1) { | ||||
| @@ -116,31 +116,6 @@ html, body { | |||||
| border-radius: 5px; | border-radius: 5px; | ||||
| } | } | ||||
| /* nicked from the internet */ | |||||
| /* | |||||
| .move-button:before, | |||||
| .move-button:after { | |||||
| content: ''; | |||||
| position: absolute; | |||||
| right: -20px; | |||||
| width: 32px; | |||||
| height: 15px; | |||||
| border-radius: 5px; | |||||
| background: #888; | |||||
| } | |||||
| .move-button:before { | |||||
| top: 9px; | |||||
| -webkit- | |||||
| -ms- | |||||
| } | |||||
| .move-button:after { | |||||
| bottom: 9px; | |||||
| -webkit- | |||||
| -ms- | |||||
| }*/ | |||||
| .disabled { | .disabled { | ||||
| background-color: gray; | background-color: gray; | ||||
| background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); | background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); | ||||
| @@ -155,86 +130,58 @@ html, body { | |||||
| position: absolute; | position: absolute; | ||||
| left: -140px; | left: -140px; | ||||
| top: 60px; | top: 60px; | ||||
| } | |||||
| #move-up-left > span { | |||||
| } | } | ||||
| #move-up { | #move-up { | ||||
| position: absolute; | position: absolute; | ||||
| left: 0px; | left: 0px; | ||||
| top: 0px; | top: 0px; | ||||
| } | |||||
| #move-up > span { | |||||
| } | } | ||||
| #move-up-right { | #move-up-right { | ||||
| position: absolute; | position: absolute; | ||||
| left: 140px; | left: 140px; | ||||
| top: 60px; | top: 60px; | ||||
| } | |||||
| #move-up-right > span { | |||||
| } | } | ||||
| #move-left { | #move-left { | ||||
| position: absolute; | position: absolute; | ||||
| left: -200px; | left: -200px; | ||||
| top: 120px; | top: 120px; | ||||
| } | |||||
| #move-left > span { | |||||
| } | } | ||||
| #move-right { | #move-right { | ||||
| position: absolute; | position: absolute; | ||||
| left: 200px; | left: 200px; | ||||
| top: 120px; | top: 120px; | ||||
| } | |||||
| #move-right > span { | |||||
| } | } | ||||
| #move-down-left { | #move-down-left { | ||||
| position: absolute; | position: absolute; | ||||
| left: -140px; | left: -140px; | ||||
| top: 180px; | top: 180px; | ||||
| } | |||||
| #move-down-left > span { | |||||
| } | } | ||||
| #move-down { | #move-down { | ||||
| position: absolute; | position: absolute; | ||||
| left: 0px; | left: 0px; | ||||
| top: 240px; | top: 240px; | ||||
| } | |||||
| #move-down > span { | |||||
| } | } | ||||
| #move-down-right { | #move-down-right { | ||||
| position: absolute; | position: absolute; | ||||
| left: 140px; | left: 140px; | ||||
| top: 180px; | top: 180px; | ||||
| } | } | ||||
| #move-down-right > span { | |||||
| #move-climb { | |||||
| position: absolute; | |||||
| left: -200px; | |||||
| top: 300px; | |||||
| } | |||||
| #move-descend { | |||||
| position: absolute; | |||||
| left: 200px; | |||||
| top: 300px; | |||||
| } | } | ||||
| @@ -53,6 +53,8 @@ | |||||
| <button class="move-button" id="move-down-left"><span>Dennis</span></button> | <button class="move-button" id="move-down-left"><span>Dennis</span></button> | ||||
| <button class="move-button" id="move-down"><span>Ectoplasm</span></button> | <button class="move-button" id="move-down"><span>Ectoplasm</span></button> | ||||
| <button class="move-button" id="move-down-right"><span>E</span></button> | <button class="move-button" id="move-down-right"><span>E</span></button> | ||||
| <button class="move-button" id="move-climb"><span>Penthouse</span></button> | |||||
| <button class="move-button" id="move-descend"><span>Basement</span></button> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||