/* —————————— GENERAL PAGE CSS ———————————— */ body { width: 1290px; margin: 10px 0 1400px; background-color: #000; font-family: arial; font-size: 10pt; } div { position: absolute; border-radius: 50%; } .TitleBar { left: 377px; width: 520px; background-color: #503; background-image: linear-gradient(to bottom, #834, #301); background-repeat: no-repeat; border: 2px solid #d79; border-radius: 24px; padding: 2px 8px 8px; color: #fff; text-align: center; font-family: verdana; font-weight: bold; text-shadow: 4px 4px 2px #000; } .TitleBar2 { position: relative; text-align: center; font-size: 24pt; color: #fa6; margin-bottom: 7px; } .HmLink { border: 1px solid #7fc; border-radius: 11px; background-color: #476; padding: 2px 15px; color: #fff; text-decoration: none; font-size: 12pt; text-shadow: 2px 2px 2px #000; } .HmLink:hover { background-color: #fff; color: #000; border-color: #000; } .Caption { background-color: #053; border: 1px solid #fff; border-radius: 10px; padding: 4px 8px 12px; color: #fff; width: 240px; margin: 0 0 0 15px; } .Caption2 { height: 200px; overflow: hidden; top: 900px; width: 130px; background-color: #430; } .Caption2:hover { height: auto; overflow: visible; z-index: 2; width: 270px; } .SeeMore { left: 23px; top: 1097px; width: 130px; box-shadow: 0 -6px 8px #430; background-color: #430; border-radius: 0; color: #fc7; text-align: right; padding-bottom: 4px; } .SeeMore:hover { z-index: -1; cursor: pointer; } .ParaBuff { position: relative; height: 12px; } .NoBr { white-space: nowrap; } .Hilite01 { color: #ff4; } .Footer { position: fixed; bottom: 0; border-radius: 0; background-color: #333; width: 100%; text-align: center; padding: 11px 0; color: #bbb; font-family: verdana; font-size: 8pt; } .Footer a { color: #eee; background-color: #777; padding: 2px 6px; border-radius: 7px; box-shadow: 0 0 8px #999; margin: 0 3px; text-decoration: none; } .Footer a:hover { color: #fc0; box-shadow: 0 0 15px #999; } /* —————————— ORBITS ———————————— */ #MerOrb, #VenOrb, #EarOrb, #MarOrb, #JupOrb, #SatOrb, #UraOrb, #NepOrb, #PluOrb { border: 1px solid #222; } /* —————————— SUN ——————————————— */ /* ● ● ● ● ● ● SUN STARTING POSITION: 665 - 1/2 OF SUN WIDTH = LEFT X, TOP Y */ #Sun { left: 625px; top: 655px; width: 80px; height: 80px; background-color: #fff; box-shadow: 0 0 35px #ff0; } /* —————————— MERCURY: 88 days, diam: 3,032 mi ——————————— */ /* ● ● ● ● ● ● ORBIT POSITION: 664 - 1/2 OF ORBIT WIDTH = LEFT X, TOP Y ● ● ● ● ● ● PLANET STARTING POSITION: 665 - 1/2 OF PLANET WIDTH = LEFT X, TOP Y */ #MerOrb { left: 595px; top: 625px; width: 138px; height: 138px; } #Mercury { left: 663px; top: 693px; width: 4px; height: 4px; background-color: #b84; animation: MerOrbit 0.24s linear infinite; } /* ● ● ● ● ● ● TRANSLATION-X POSITION: 1/2 OF ORBIT WIDTH + 1 = TRANSLATION-X */ @-webkit-keyframes MerOrbit { from { transform: rotate(0deg) translateX(70px) rotate(0deg); } to { transform: rotate(360deg) translateX(70px) rotate(-360deg); } } /* —————————— VENUS: 225 days, diam: 7,521 mi ————————————— */ #VenOrb { left: 560px; top: 590px; width: 208px; height: 208px; } #Venus { left: 660px; top: 690px; width: 10px; height: 10px; background-color: #a98; animation: VOrbit 0.62s linear infinite; } @-webkit-keyframes VOrbit { from { transform: rotate(0deg) translateX(105px) rotate(0deg); } to { transform: rotate(360deg) translateX(105px) rotate(-360deg); } } /* —————————— EARTH: 1 year, diam: 7,918 mi ————————————— */ #EarOrb { left: 530px; top: 560px; width: 268px; height: 268px; } #Earth { left: 659px; top: 689px; width: 12px; height: 12px; background-color: #049; animation: EOrbit 1.00s linear infinite; } @-webkit-keyframes EOrbit { from { transform: rotate(0deg) translateX(135px) rotate(0deg); } to { transform: rotate(360deg) translateX(135px) rotate(-360deg); } } /* —————————— MARS: 687 days, diam: 4,212 mi ——————————————— */ #MarOrb { left: 485px; top: 515px; width: 358px; height: 358px; } #Mars { left: 662px; top: 692px; width: 6px; height: 6px; background-color: #843; animation: MarOrbit 1.88s linear infinite; } @-webkit-keyframes MarOrbit { from { transform: rotate(0deg) translateX(180px) rotate(0deg); } to { transform: rotate(360deg) translateX(180px) rotate(-360deg); } } /* —————————— JUPITER: 11.86 yrs., diam: 86,881 mi ———————————— */ #JupOrb { left: 425px; top: 455px; width: 478px; height: 478px; } #Jupiter { left: 645px; top: 675px; width: 40px; height: 40px; background-color: #b95; animation: JOrbit 11.86s linear infinite; } @-webkit-keyframes JOrbit { from { transform: rotate(0deg) translateX(240px) rotate(0deg); } to { transform: rotate(360deg) translateX(240px) rotate(-360deg); } } /* —————————— SATURN: 29.45 yrs., diam: 72,367 mi ————————————— */ #SatOrb { left: 360px; top: 390px; width: 608px; height: 608px; } #Saturn { left: 647px; top: 677px; width: 36px; height: 36px; background-color: #db7; animation: SOrbit 29.45s linear infinite; } @-webkit-keyframes SOrbit { from { transform: rotate(0deg) translateX(305px) rotate(0deg); } to { transform: rotate(360deg) translateX(305px) rotate(-360deg); } } #SatRing1 { left: 636px; top: 666px; width: 48px; height: 48px; border: 5px solid #a98; animation: SOrbit 29.45s linear infinite; box-shadow: inset 0 0 10px #a98; opacity: 0.75; } #SatRing2 { left: 632px; top: 662px; width: 60px; height: 60px; border: 3px solid #876; animation: SOrbit 29.45s linear infinite; box-shadow: 0 0 10px #876; opacity: 0.75; } /* —————————— URANUS: 84.0 yrs., diam: 31,518 mi ————————————— */ #UraOrb { left: 280px; top: 310px; width: 768px; height: 768px; } #Uranus { left: 657px; top: 687px; width: 16px; height: 16px; background-color: #69a; animation: UOrbit 84.00s linear infinite; } @-webkit-keyframes UOrbit { from { transform: rotate(0deg) translateX(385px) rotate(0deg); } to { transform: rotate(360deg) translateX(385px) rotate(-360deg); } } #UraRing1 { left: 652px; top: 682px; width: 24px; height: 24px; border: 1px solid #69a; animation: UOrbit 84.00s linear infinite; box-shadow: inset 0 0 2px #a98; opacity: 0.45; } #UraRing2 { left: 650px; top: 680px; width: 28px; height: 28px; border: 1px solid #69a; animation: UOrbit 84.00s linear infinite; box-shadow: 0 0 2px #69a; opacity: 0.65; } #UraRing3 { left: 648px; top: 678px; width: 32px; height: 32px; border: 1px solid #7ac; animation: UOrbit 84.00s linear infinite; opacity: 0.85; } /* —————————— NEPTUNE: 164.8 yrs., diam: 30,599 mi ———————————— */ #NepOrb { left: 210px; top: 240px; width: 908px; height: 908px; } #Neptune { left: 658px; top: 688px; width: 14px; height: 14px; background-color: #56b; animation: NOrbit 164.80s linear infinite; } @-webkit-keyframes NOrbit { from { transform: rotate(0deg) translateX(455px) rotate(0deg); } to { transform: rotate(360deg) translateX(455px) rotate(-360deg); } } /* —————————— PLUTO: 247.94 yrs., diam: 1,477 mi ———————————— */ #PluOrb { left: 130px; top: 160px; width: 1068px; height: 1068px; } #Pluto { left: 663px; top: 693px; width: 2px; height: 2px; background-color: #fc7; animation: POrbit 247.94s linear infinite; } @-webkit-keyframes POrbit { from { transform: rotate(0deg) translateX(535px) rotate(0deg); } to { transform: rotate(360deg) translateX(535px) rotate(-360deg); } } /* —————————— SUN & PLANET MARKERS ———————————— */ #SMark { left: 653px; top: 687px; } #MMark, #VMark, #EMark, #MarMark, #JMark, #SatMark, #UMark, #NMark, #PMark { background-color: #046; border: 1px solid #fff; border-radius: 10px; padding: 2px 8px; color: #fff; } #MLine, #VLine, #ELine, #MarLine, #JLine, #SLine, #ULine, #NLine, #PLine { border-bottom: 1px solid #448; } #MMark { left: 20px; top: 530px; } #MLine { transform: rotate(15deg); left: 117px; top: 606px; width: 491px; } #VMark { left: 66px; top: 430px; } #VLine { transform: rotate(20deg); left: 146px; top: 524px; width: 479px; } #EMark { left: 130px; top: 340px; } #ELine { transform: rotate(26deg); left: 195px; top: 455px; width: 479px; } #MarMark { left: 210px; top: 260px; } #MarLine { transform: rotate(33deg); left: 251px; top: 392px; width: 455px; } #JMark { left: 300px; top: 190px; } #JLine { transform: rotate(41deg); left: 349px; top: 328px; width: 390px; } #SatMark { left: 440px; top: 130px; } #SLine { transform: rotate(53deg); left: 473px; top: 268px; width: 322px; } #UMark { left: 630px; top: 110px; } #ULine { transform: rotate(65deg); left: 652px; top: 234px; width: 250px; } #NMark { left: 930px; top: 178px; } #NLine { transform: rotate(104deg); left: 852px; top: 245px; width: 125px; } #PMark { left: 1050px; top: 260px; } #PLine { transform: rotate(130deg); left: 1017px; top: 285px; width: 40px; }