html { margin: 0; padding: 0; height: 100%; width: 100%; position: relative; } body { margin: 0; padding: 0; position: absolute; height: 100%; width: 100%; background-image: url(pics/wallpaper3.jpg); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .bordertop { position: fixed; margin: 0; height: 12px; width: 100%; padding: 0; z-index: 4; top: 0; right: 0; background-color: yellow; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } img.sevenfiveseven { margin: 0; padding: 0; width: 100%; position: absolute; display: block; display: none; margin-left: auto; margin-right: auto; top: 0; z-index: 4; border-bottom: 2px solid gold; } img.seveneightseven { margin: 0; padding: 0; width: 100%; position: absolute; display: block; display: none; margin-left: auto; margin-right: auto; top: 0; z-index: 4; border-bottom: 2px solid gold; } img.threeeighty{ margin: 0; padding: 0; width: 100%; position: absolute; display: block; display: none; margin-left: auto; margin-right: auto; top: 0; z-index: 4; border-bottom: 2px solid gold; } p.instructions { margin: 0; padding: 0; position: absolute; bottom: 0; left: 0; right: 0; display: none; color: white; background-color: whitesmoke; height: 270px; width: 100%; text-align: center; font-family: 'Open Sans Condensed', sans-serif; color: grey; } button.request { font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; background-color: #4CAF50; color: white; height: 45px; width: 150px; padding: 0 5px 0 5px; border: none; position: absolute; top: 60%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); box-shadow: 3px 3px 2px #888888; } button.request:hover { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; cursor: pointer; } img.help { height: 20px; width: 20px; position: absolute; top: 52%; left: 58%; margin-right: -50%; transform: translate(-50%, -50%); } img.help:hover { cursor: pointer; } div.form { margin: 0; padding: 10px; height: 420px; width: 500px; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); z-index: 10; background-color: gainsboro; border: 3px solid gold; text-align: center; color: black; font-family: 'Open Sans Condensed', sans-serif; border: 6px solid gold; border-radius: 15px; display: none; } div.loading { margin: 0; padding: 10px; height: 200px; width: 400px; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); z-index: 10; background-color: gainsboro; border: 3px solid gold; text-align: center; color: black; font-family: 'Open Sans Condensed', sans-serif; border: 6px solid gold; border-radius: 15px; display: none; } img.loading { height: 40px; width: 40px; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } h2.loading { font-size: 15px; font-style: italic; position: absolute; top: 55%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } div.aord { margin: 0; padding: 10px; height: 200px; width: 400px; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); z-index: 10; background-color: gainsboro; border: 3px solid gold; text-align: center; color: black; font-family: 'Courier New'; border: 6px solid gold; border-radius: 15px; display: none; } h2.acceptordeny { position: absolute; top: 40%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); color: darkgoldenrod; padding: 35px; } input.name { padding: 5px; background-color: whitesmoke; color: black; height: 20px; width: 175px; -moz-box-shadow: inset 0 0 4px #000000; -webkit-box-shadow: inset 0 0 4px #000000; box-shadow: inset 0 0 4px #000000; border: none; } input.number { padding: 5px; background-color: whitesmoke; color: black; height: 30px; width: 75px; -moz-box-shadow: inset 0 0 4px #000000; -webkit-box-shadow: inset 0 0 4px #000000; box-shadow: inset 0 0 4px #000000; border: none; font-size: 20px; } input.letter { padding: 5px; background-color: whitesmoke; color: black; height: 30px; width: 75px; -moz-box-shadow: inset 0 0 4px #000000; -webkit-box-shadow: inset 0 0 4px #000000; box-shadow: inset 0 0 4px #000000; border: none; font-size: 20px; } textarea.msg { padding: 5px; background-color: whitesmoke; color: black; height: 100px; width: 400px; -moz-box-shadow: inset 0 0 4px #000000; -webkit-box-shadow: inset 0 0 4px #000000; box-shadow: inset 0 0 4px #000000; border: none; } button.submit { margin: 0; padding: 0; font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; background-color: #4CAF50; color: white; height: 30px; width: 150px; border: none; position: absolute; bottom: 0; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); box-shadow: 3px 3px 2px #888888; } button.submit:hover { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; cursor: pointer; } div.greyOut { margin: 0; padding: 0; position: fixed; top:0; right:0; left:0; height: 100%; width: 100%; z-index: 9; background-color: black; opacity: .8; display: none; } img.cancel2 { height: 20px; width: 20px; margin:0; padding: 0; position: absolute; top: 0; right: 0; z-index: 5; } img.cancel2:hover { cursor: pointer; } div.threePlanes { margin: 0; padding: 0; width: 100%; height: 90%; position: relative; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .plane1 { margin: 0; padding: 0; position: absolute; height: 100%; width: 33%; left: 0; border-right: 1px solid grey; } img.introPics { height: 200px; width: 300px; position: absolute; top: 60%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } img.introPics:hover { height: 205px; width: 305px; cursor: pointer; } .plane2 { margin: 0; padding: 0; position: absolute; height: 100%; width: 33%; left: 33%; border-right: 1px solid grey; } .plane3 { margin: 0; padding: 0; position: absolute; height: 100%; width: 33%; right: 0; } h1 { margin: 0; padding: 0; font-family: 'Open Sans Condensed', sans-serif; text-align: center; font-size: 40px; color: white; position: absolute; top: 20%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } h1:hover { border-top: .1px solid aqua; } h3 { margin: 0; padding: 25px; font-family: 'Open Sans Condensed', sans-serif; text-align: center; font-size: 18px; color: lightgray; position: absolute; top: 34%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } button.togglePlane { font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; background-color: white; color: black; height: 45px; width: 150px; padding: 0 5px 0 5px; border: .5px solid black; position: absolute; bottom: 0; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } button.togglePlane:hover { background-color: gainsboro; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); cursor: pointer; font-size: 22px; } hr { position: absolute; width: 80%; top: 25%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } img.cancel { margin:0; padding: 0; height: 50px; width: 50px; position: absolute; display: none; top: 0; right: 0; z-index: 5; } img.cancel:hover { cursor: pointer; } .hide { display:none; } #backHome { margin: 0; padding: 0; height: 50px; width: 100px; position: absolute; top: 8%; left: 22%; margin-right: -50%; transform: translate(-50%, -50%); }