/* This margin: 0px 0px 0px -0px; Means top margin is 0px right margin is 0px bottom margin is 0px left margin is 0px This padding: 0px 0px 0px 0px; Means top padding is 0px right padding is 0px bottom padding is 0px left padding is 0px */ .TxtOutline1 { color: #ffffff; -webkit-text-stroke: 1px black; } .TxtOutline2 { color: #ffffff; text-shadow: /* Outline 1 */ -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, -2px 0 0 #000000, 2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, /* Outline 2 */ -2px -2px 0 #ff0000, 2px -2px 0 #ff0000, -2px 2px 0 #ff0000, 2px 2px 0 #ff0000, -3px 0 0 #ff0000, 3px 0 0 #ff0000, 0 3px 0 #ff0000, 0 -3px 0 #ff0000; } h1, h2, h3, h4, h5, h6, { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } h3 { position: absolute; top: 18px; left: 80px; width: 230px; font-size: 24px; color:#000; } html { min-height: 100%; cursor: url(/Web_Internals/Images/PopUpMenu/SpaceShipRight.png),auto; } body{ line-height: 1; background: url(/Web_Internals/Images/PopUpMenu/Universe-800x600.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #PopUpContent { position:relative; margin:0 auto; } a.PopUpIcon { width: 80px; height: 80px; position: absolute; top: 0px; left: 0px; /* cursor: pointer; */ cursor: url(/Web_Internals/Images/PopUpMenu/SpaceShipUp.png),auto; } .PopUpNav { margin: 0px auto; font-style: normal; font-weight: bold; /* font-family: "Trebuchet MS", sans-serif; */ /* font-family: "Comic Sans MS"; */ font-size: 24px; font-style: normal; font-weight: bold; letter-spacing: 1.4px; } .PopUpNav .PopUpMenu { position: absolute; } .PopUpNav .PopUpMenu a.active{ background-position:0px -80px; } .PopUpMenu img.PopUpImage{ /* PopUpImage class for images within PopUpMenu Class All img with class = "PopUpMenu" & "PopUpImage" */ position:absolute; top:0px; left:0px; width:80px; height:80px; /* opacity:0.1; */ opacity:0; } /* This is just an exaple if active this style would apply to all h2 that are not within any other classes */ /* h2 {font-size:38px; width:500px; height:500px;} */ .PopUpMenu h2{ /* item class for H2 All H2 in class ="PopUpMenu" */ position:absolute; width:147px; height:52px; color:#222; Color:#fff; font-size:18px; font-size:24px; font-weight: bold top:0px; left:73px; text-indent:10px; font-weight: bold; /* line-height:80px; NOT SURE WHY THIS IS HERE MAKES TOO BIG FOR A 2 LINE HEADING */ /* text-shadow:1px 1px 1px #fff;*/ /*text-shadow:.5px 3px .5px #faf92f ;*/ /*text-transform:uppercase;*/ /* -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: #fff; */ } .PopUpMenu h2 a{ color:#fff; text-decoration: none; font-weight: bold; cursor: url(/Web_Internals/Images/PopUpMenu/SpaceShipUp.png),auto; } .PopUpMenu h2 .active{ /* PopUpMenu class for "Active" H2 All "Active Link" H2 in class ="PopUpMenu" */ color:#fff; text-shadow:1px 0px 1px #555; cursor: url(/Web_Internals/Images/PopUpMenu/SpaceShipUp.png),auto; } .PopUpMenu ul{ /* Hyperlinks in the navagation PopUpMenu class for ul (The links in the planets) */ list-style:none; position:absolute; top:78px; top:45px; left:-15px; display:none; } .PopUpMenu ul li a{ /* a = Hyperlinks in the navagation PopUpMenu class for ul and li (The links in the planets) */ font-size:15px; font-size:18px; text-decoration:none; letter-spacing:1.5px; /* text-transform:uppercase; */ color:#222; color:#fff; padding:3px; float:left; clear:both; width:125px; width:270px; text-shadow:1px 1px 1px #fff; text-shadow:2px 2px 2.5px #000; cursor: url(/Web_Internals/Images/PopUpMenu/SpaceShipUp.png),auto; line-height: 1.3; } .PopUpMenu ul li a:hover{ /* Hover aspect for a = Hyperlinks in the PopUpMenu class for ul and li (The links in the planets) */ background-color:#fff; text-shadow:1px 1px 1px #fff; text-indent: 10px; text-indent: 15px; color:#444; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 4px #666; -webkit-box-shadow:1px 1px 4px #666; box-shadow:1px 1px 4px #666; z-index; 3; /* Make sure its up front incase it is overlaping anything */ background-color:#d9d9d9; color:#fff; color:#444444; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 24px #333333; -webkit-box-shadow:1px 1px 24px #333333; box-shadow:1px 1px 24px #333333; } /* =================================================================================================== */ .menu1 { top: 250px; left:0px; left: 10px; } .menu1 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Green-Icon.png) no-repeat 0px 0px; } .menu2 { top:150px; top: 70px; left: 130px; } .menu2 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Moon-Icon.png) no-repeat 0px 0px; } .menu3 { top:85px; top: 15px; left: 290px; left: 350px; } .menu3 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Mars-Icon.png) no-repeat 0px 0px; } .menu4 { top:60px; top: -20px; left: 490px; left: 650px; } .menu4 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Uranus-Icon.png) no-repeat 0px 0px; } .menu5 { top: 500px; left: 30px; } .menu5 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Earth-Icon.png) no-repeat 0px 0px; } .menu6 { top: 520px; top: 550px; left: 320px; left: 345px; } .menu6 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Jupiter-Icon.png) no-repeat 0px 0px; } .menu7 { top:430px; top: 520px; left: 520px; left: 650px; } .menu7 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Neptune-Icon.png) no-repeat 0px 0px; } .menu8 { top:330px; left:700px; left: 800px; } .menu8 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Mercury-Icon.png) no-repeat 0px 0px; } .menu9 { top:190px; top: 150px; left:800px; left: 900px; } .menu9 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Sun-Icon.png) no-repeat 0px 0px; } .menu10 { top:320px; top: 240px; left:350px; left: 450px; } .menu10 a.PopUpIcon { background: url(/Web_Internals/Images/PopUpMenu/Ship-Icon.png) no-repeat 0px 0px; } /* Hamburger */