/* Basic styles for real old browsers */ img { border:0; display:block; } a:link, a:visited { color:#006699; text-decoration:underline; } a:hover { color:#333; } dl dt { margin-left:10px; } dl dd { margin-left:10px; } .hidden { height: 0; width: 0; overflow: hidden; position: absolute; } .textonly { display:none; } .imagesandtext { display:none; } /* NASA Header */ .nasahead img { opacity:1; padding:0; float:left; width:100px; } .nasahead img:hover { opacity:.8;} .searchbox { position:relative; top:0; right:0px; height:98px; width:202px ; float:right; } .form { margin:30px 0px 0 0px; padding:6px 15px 6px 0px; float:right; } .input[type=text]{color:#FFF; } .dark{ position:relative; top:0; right:0px; float:right; margin-top:10px; margin-right:120px} .dark input[type=text]{ border:0; height:36px; width:180px; background:#333 no-repeat; color:#FFF; position:relative; } /* MAIN PAGE DEFINITIONS */ #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index:1; } #paperTop { position:relative; margin:0px auto 0 auto; padding: 0; z-index:3; top:100px; } .parallax0 { background-image: url( ); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .parallax1 { background-image: url(../webdesign/ExoplanetsBG2.jpg); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .parallax2 { background-image: url(../webdesign/earthbackground.png); width: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .parallax3 { background-image: url(../webdesign/orionbackground.png); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .parallax4 { background-image: url(../webdesign/anotherbackground.png); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } @media only screen and (max-device-width: 500px) { .parallax0 { background-attachment: scroll; } .parallax1 { background-attachment: scroll; } .parallax2 { background-attachment: scroll; } .parallax3 { background-attachment: scroll; } .parallax4 { background-attachment: scroll; } } body { font-family: "helvetica neue", Arial,Helvetica,sans-serif; font-size:13px; line-height:18px ; letter-spacing: 0.02em; color:#fff; margin:0; margin-bottom:10px; text-align:center; background:#000 url(../webdesign/background-deep.png) repeat center top; } div { text-align:left; } a:link { text-decoration: none; color: #6699cc; } a:visited { text-decoration: none; color: #6699cc; } a:hover { text-decoration: none; color: #3399ff; } a:active { text-decoration: none; color: #99ccff; } p {line-height:19px; padding:5px; font-size:12px; } ul { padding-left:20px; padding-right:20px; } li {line-height:23px; font-size:13px; } div.clear { clear:both; margin:0; border:0; padding:0; } /* CONTENT */ #content { background:transparent; text-align:center; margin:10px; padding:0px 0px 0px 0px; z-index:6; } header{position:fixed; top:0; left:0; width:100%; background:#000; height:auto; z-index:99; } .titleimage {width:420px; float:left ; padding:10px; } h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:38px; line-height:39px; font-weight: 100; } h2 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#666; padding:5px; font-size:22px; line-height:23px; font-weight:normal; } h3 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#6699cc; padding: 5px 5px 0px 5px; font-size:18px; line-height:18px; font-weight:normal; float:left; } h4 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#666; padding:5px; font-size:24px; line-height:27px; font-weight:normal; } h5 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#666; padding:5px; font-size:30px; line-height:34px; font-weight: 200; } h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:18px; line-height:20px; font-weight: 200; } /* for 480px or less */ @media screen and (max-width: 480px) { header { height: auto;} .titleimage img {width:380px; float:left ; } .nasahead img { opacity:1; padding:0; float:left; width:60px; } .nasahead img:hover { opacity:.8;} h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:38px; line-height:39px; font-weight: 100; } h2 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#666; padding:5px; font-size:22px; line-height:20px; font-weight:normal; } h3 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#6699cc; padding: 5px 5px 0px 5px; font-size:18px; line-height:18px; font-weight:normal; float:left; } h4 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#666; padding:5px; font-size:24px; line-height:27px; font-weight:normal; } h5 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#FFF; padding:5px; font-size:37px; line-height:37px; font-weight: normal; } h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:18px; line-height:20px; font-weight:normal; } } /* BASIC SCROLLOVER BUTTON LINK*/ .buttonlink a:link { background-color:#003366; text-decoration: none; color: #FFF; padding:20px; margin:1px; font-size:14px; float:left; } .buttonlink a:visited { background-color:#003366; text-decoration: none; color: #FFF; padding:20px; margin:1px; font-size:14px; } .buttonlink a:hover { background-color:#003399; text-decoration:none; color: #FFF; padding:20px; margin:1px; font-size:14px; } .buttonlink a:active { text-decoration: none; color: #FFF; padding:10px; margin:1px; font-size:14px; } .bluebox { background-color:#006699; text-decoration: none; color: #FFF; padding:5px; line-height:18px; text-align:left;} .bluebox h1,h2, h3 { color:#FFF; } .bluebox a:link { text-decoration: none; color: #FFF; font-size: 15px; } .bluebox a:visited { background-color:#000; border:1px; text-decoration: none; color: #FFF;} .bluebox a:hover { text-decoration:none; color: #3399ff; } .bluebox a:active { text-decoration: none; color: #FFF;} .darkbluebox { background-color:#003366; text-decoration: none; color: #FFF; padding:5px; line-height:18px; text-align:left; margin-left :3px; } .darkbluebox h1,h2, h3 { color:#FFF; } .darkbluebox a:link { text-decoration: none; color: #FFF; font-size: 15px;} .darkbluebox a:visited { background-color:#000; text-decoration: none; color: #FFF;} .darkbluebox a:hover { text-decoration:none; color: #3399ff; } .darkbluebox a:active { text-decoration: none; color: #FFF;} .graybox { background-color:#666; text-decoration: none; color: #FFF; padding:5px; line-height:18px; text-align:left;} .graybox h1,h2, h3 { color:#FFF; } .graybox a:link { text-decoration: none; color: #FFF; font-size: 15px;} .graybox a:visited { background-color:#000; border:1px; text-decoration: none; color: #FFF;} .graybox a:hover { text-decoration:none; color: #3399ff;} .graybox a:active { text-decoration: none; color: #FFF;} .darkgraybox { background-color:#333; text-decoration: none; color: #FFF; padding:5px; line-height:18px; text-align:left;} .darkgraybox h1,h2, h3 { color:#FFF; } .darkgraybox a:link { text-decoration: none; color: #FFF; font-size: 15px;} .darkgraybox a:visited { background-color:#000; border:1px; text-decoration: none; color: #FFF;} .darkgraybox a:hover { text-decoration:none; color: #3399ff;} .darkgraybox a:active { text-decoration: none; color: #FFF;} .whitebox { background-color:#FFF; text-decoration: none; color: #000; padding:5px; line-height:18px; text-align:left;} .whitebox h1,h2, h3 { font-family:Arial,Helvetica,sans-serif; color:#6699cc; padding:5px; font-weight:normal; } /* RESPONSIVE MENU */ .topnav { overflow: hidden; background-color: #333; float:left; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;} .topnav a:hover { color: black;} .topnav .icon { display: none;} @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: left; display: block; text-align: left; } } *{margin:0;padding:0;text-decoration:none} nav{position:relative; margin:0 auto; padding-top:10px } #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; } #cssmenu #head-mobile{display:none; } #cssmenu{font-family:sans-serif;background:transparent; } #cssmenu > ul > li{float:left; border:1px; width:180px; } #cssmenu > ul > li > a{padding:25px; font-size:14px; letter-spacing:1px;text-decoration:none; color:#ddd; border-left:1px solid #FFF ; } #cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff} #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#3333cc!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;} #cssmenu > ul > li.has-sub > a{padding-right:30px} #cssmenu > ul > li.has-sub > #cssmenu > ul > li.has-sub > #cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0} #cssmenu ul ul{position:absolute;left:-9999px} #cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#000099;transition:all .25s ease} #cssmenu ul ul li:hover{} #cssmenu li:hover > ul{left:auto} #cssmenu li:hover > ul > li{height:35px} #cssmenu ul ul ul{margin-left:100%;top:0} #cssmenu ul ul li a{padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;} #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0} #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff; text-decoration:underline;} #cssmenu ul ul li.has-sub > #cssmenu ul ul li.has-sub > #cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0} #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#000099;} #cssmenu ul ul ul li.active a{border-left:1px solid #333} #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333} @media screen and (max-width:1250px){ .searchbox { position:relative; opacity:0; height:1px; } .dark{ opacity:0; height:1px;} .dark input[type=text]{ opacity:0 ; height:1px; } } @media screen and (max-width:1000px){ nav{width:100%;} #cssmenu{width:80%;margin-left:100px; } #cssmenu ul{width:100%;display:none} #cssmenu ul li{width:100%;border-top:1px solid #444} #cssmenu ul li:hover{background:#363636;} #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto} #cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0} #cssmenu > ul > li{float:none} #cssmenu ul ul li a{padding-left:25px} #cssmenu ul ul li{background:transparent;} #cssmenu ul ul li:hover{background:transparent} #cssmenu ul ul ul li a{padding-left:35px} #cssmenu ul ul li a{color:#ddd;background:none} #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff} #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left} #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none} #cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px; } .button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;} .button:after{position:absolute;top:22px;right:29px;display:block;height:5px;width:30px;border-top:3px solid #dddddd;border-bottom:3px solid #dddddd;content:''} .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:14px;right:29px;display:block;height:3px;width:30px;background:#ddd;content:''} .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:3px;width:30px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} .button.menu-opened:before{top:23px;background:#fff;width:30px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} #cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer} #cssmenu .submenu-button.submenu-opened{background:#262626} #cssmenu ul ul .submenu-button{height:34px;width:34px} #cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''} #cssmenu ul ul .submenu-button:after{top:15px;right:13px} #cssmenu .submenu-button.submenu-opened:after{background:#fff} #cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''} #cssmenu ul ul .submenu-button:before{top:12px;right:16px} #cssmenu .submenu-button.submenu-opened:before{display:none} #cssmenu ul ul ul li.active a{border-left:none} #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none} } /* NASA FOOTER */ .footcellleft { width: 420px; padding: 10px; margin: 2px; float: left ; color:#FFF; } .footcellleft img { padding:2px; float:left; position:relative; opacity:1 ;} .footcellleft img:hover { opacity:.6;} .footcellmid { margin-top: 20px; color:#b2b2b2; font-size:11px; border:0; padding: 10px; width: auto; float: left; } .footcellmid ul { list-style:none; margin-top: 10px; margin-right: 15px; margin-bottom: 15px; margin-left: 3px; } .footcellmid ul li { margin:0px 0px 5px 0px; padding:0 0 0 12px;} .footcellmid ul li a:link, #nasafootplus ul li a:visited { text-decoration:none; color:#CCC; font-size:15px; line-height:16px;} .footcellmid ul li a:hover { text-decoration:underline;} .footcellmid { position:relative; color:#CCC; font-size:11px;} .footcellmid img{ height:40px; width:40px; padding:2px; float:left; position:relative; opacity:1;} .footcellmid img:hover { opacity:.6;} .footcellright { width: 230px; padding: 10px; margin-top: 2px; float: right ; color:#FFF; } .footcellright ul { list-style:none; } .footcellright ul li { margin:0px 0px 5px 0px; padding:0 0 0 12px;} .footcellright ul li a:link, #nasafootplus ul li a:visited { text-decoration:none; color:#CCC; font-size:12px;} .footcellright ul li a:hover { text-decoration:underline;} .footcellright h1{ position:relative; color:#666; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:22px; padding-top:10px; padding-left:0px; padding-bottom:0px; font-weight:normal;} .pagewrapwhite { background:#FFF; color:#000 ; width:95%; padding:20px; margin-top:100px; } .pagewrapwhite p{ font-family: Arial,Helvetica,sans-serif; font-size:14px; line-height:22px; padding-bottom:10px; } .pagewrapwhite h1{ font-family: Arial,Helvetica,sans-serif; font-size:34px; line-height:40px; padding-bottom:10px; color:#666} .pagewrapwhite h2{ font-family: Arial,Helvetica,sans-serif; font-size:26px; line-height:30px; padding-bottom:10px; color:#666} .pagewrapwhite img { padding:10px; margin:0px; } .pagewrapgray { background:#444; color:#FFF ; margin: 0px ; width:90%; } .pagewrap { padding: 5px; margin: auto; width:95%; } .banner { width: 100%; float: left; margin:5px; } .titlecaption { background-color:#003366; text-decoration: none; color: #FFF; padding:10px; font-size: 18px; line-height:18px; } .titlecaption a:link { text-decoration: none; color: #FFF; font-size: 15px; } .titlecaption a:visited { background-color:#000; border:1px; text-decoration: none; color: #FFF; } .titlecaption a:hover { text-decoration:none; color: #3399ff; } .titlecaption a:active { text-decoration: none; color: #FFF; } .bigtitlecaption { background-color:#003366; text-decoration: none; color: #FFF; padding:10px; font-size: 19px; line-height:21px; } .bigtitlecaption a:link { text-decoration: none; color: #FFF; } .bigtitlecaption a:visited { background-color:#000; border:1px; text-decoration: none; color: #FFF; } .bigtitlecaption a:hover { text-decoration:none; color: #3399ff; } .bigtitlecaption a:active { text-decoration: none; color: #FFF; } .kids { width: 310px; margin-left:0px; margin-right:5px; margin-top:2px; margin-bottom:3px; vertical-align:top; color:#FFF; float:left; } .kids p { padding-left:10px; font-size:11px; line-height:12px; } .kids h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .kids img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; opacity:1; } .kids img:hover { opacity:.7; } .lady { background:#000; width: 623px; height:300px; margin-left: 0px; margin-right:5px; margin-top:2px; margin-bottom:2px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#FFF; } .lady img { width:100%; } .lady h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .lady img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; } .aunt { width: 500px; margin-left: 0px; margin-right:20px; margin-top:20px; margin-bottom:10px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#FFF; } .aunt h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .aunt img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:97%; opacity:1; } .aunt img:hover { opacity:.7; } .grandmother { background:#222; width: 940px; margin-left: 0px; margin-right:5px; margin-top:2px; margin-bottom:2px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#FFF; } .grandmother img { width:600px; float:left; padding:10px; } .grandmother h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .grandmother img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; } .grandfather{ background:#FFF; width: 940px; margin-left: 0px; margin-right:5px; margin-top:2px; margin-bottom:2px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#666; } .grandfather h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .grandfather img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; } .man { background:transparent; width: 930px; margin-left: 0px; margin-right:5px; margin-top:2px; margin-bottom:2px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#FFF; } .man h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .man img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; } @media screen and (max-width: 1200px) { .banner { width: 100%; float: left; margin:5px; } .banner img {width:90%; opacity:1; } .titlecaption { background-color:#003366; text-decoration: none; color: #FFF; padding:10px; font-size: 18px; line-height:18px; } .titlecaption a:link { text-decoration: none; color: #FFF; font-size: 15px; } .titlecaption a:visited { background-color:#000; border:1px; text-decoration: none; color: #FFF; } .titlecaption a:hover { text-decoration:none; color: #3399ff; } .titlecaption a:active { text-decoration: none; color: #FFF; } .bigtitlecaption { background-color:#003366; text-decoration: none; color: #FFF; padding:10px; font-size: 19px; line-height:21px; } .bigtitlecaption a:link { text-decoration: none; color: #FFF; } .bigtitlecaption a:visited { background-color:#000; border:1px; text-decoration: none; color: #FFF; } .bigtitlecaption a:hover { text-decoration:none; color: #3399ff; } .bigtitlecaption a:active { text-decoration: none; color: #FFF; } .kids { width: 310px; margin-left:0px; margin-right:0px; margin-top:2px; margin-bottom:3px; vertical-align:top; color:#FFF; float:left; } .kids p { padding-left:10px; font-size:11px; line-height:12px; } .kids h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .kids img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; opacity:1; } .kids img:hover { opacity:.7; } .lady { background:#000; width: 623px; height:300px; margin-left: 0px; margin-right:5px; margin-top:2px; margin-bottom:2px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#FFF; } .lady img { width:100%; } .lady h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .lady img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; } .aunt { width: 100%; margin-left: 0px; margin-right:20px; margin-top:20px; margin-bottom:20px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#FFF; } .aunt h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .aunt img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:97%; opacity:1; } .aunt img:hover { opacity:.7; } .grandmother { background:#222; width: 940px; margin-left: 0px; margin-right:5px; margin-top:2px; margin-bottom:2px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#FFF; } .grandmother img { width:600px; float:left; padding:10px; } .grandmother h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .grandmother img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; } .grandfather{ background:#FFF; width: 940px; margin-left: 0px; margin-right:5px; margin-top:2px; margin-bottom:2px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#666; } .grandfather h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .grandfather img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; } .man { background:transparent; width: 930px; margin-left: 0px; margin-right:5px; margin-top:2px; margin-bottom:2px; vertical-align:top; font-size:12px; line-height:12px; float:left; color:#FFF; } .man h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:12px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:left; } .man img { padding-left:10px; padding-right:10px; padding-top:10px; margin:0px; width:93%; } /*FULL SCREEN */ #fullscreen { position:relative; float:right; background:transparent; border:0; text-align:left; width:949px; margin:0px ; padding:0px; } #fullscreenwhite { position:relative; float:left; background:#FFF; border:0; text-align:left; width:919px; margin:2px 0px 0px 2px ; padding:10px; } .fullscreen { position:relative; float:right; background:transparent; border:0; text-align:left; width:949px; margin:0px ; padding:0px; } .fullscreenwhite { position:relative; float:left; background:#FFF; border:0; text-align:left; width:919px; margin:2px 0px 0px 2px ; padding:10px; } .fullscreenwhite h9{ border-bottom:0px; font-family: Arial,Helvetica,sans-serif; color:#006699; line-height:18px; letter-spacing: -0.02em; font-size:15px; margin-left:620px; } .pagewrapwhite { background:#FFF; color:#000 ; width:95%; padding:20px; margin-top:50px; } .pagewrapwhite p{ font-family: Arial,Helvetica,sans-serif; font-size:14px; line-height:22px; padding-bottom:10px; } .pagewrapwhite h1{ font-family: Arial,Helvetica,sans-serif; font-size:34px; line-height:40px; padding-bottom:10px; color:#666} .pagewrapwhite h2{ font-family: Arial,Helvetica,sans-serif; font-size:26px; line-height:30px; padding-bottom:10px; color:#666} .pagewrapwhite img { width:96%; } } .scifeature1 {clear:both; width: 100%; min-height:500px; float: left; margin:5px; bottom:10px; text-align:center; background:#000 url(../images/scifeature1.png) no-repeat; } .scifeature1 p {line-height:19px; padding:5px; font-size:14px; text-align:justify; width:100%} .scifeature1 img { opacity:.7;} .scifeature1 img:hover { opacity:1;} .scifeature2 {clear:both; width: 100%; min-height:500px; float: left; margin:5px; bottom:10px; text-align:center; background:#000 url(../images/scifeature2.png) no-repeat; } .scifeature2 img {opacity:.7;} .scifeature2 img:hover { opacity:1;} .scifeature3 {clear:both; width: 100%; min-height:500px; float: left; margin:5px; bottom:10px; text-align:center; background:#000 url(../images/scifeature3-b.png) no-repeat; } .scifeature3 img {opacity:.7;} .scifeature3 img:hover { opacity:1;} .scifeature4 {clear:both; width: 100%; min-height:500px; margin:5px; bottom:10px; text-align:center; background:#000 url(../images/scifeature4.png) no-repeat; } .scifeature4 img {opacity:.7;} .scifeature4 img:hover { opacity:1;} .scifeature5 {clear:both; width: 100%; min-height:500px; margin:5px; bottom:10px; text-align:center; background:#000 url(../images/scifeature5.png) no-repeat; } .scifeature5 img {opacity:.7;} .scifeature5 img:hover { opacity:1;} /* IMAGES with nested caption */ .half-left {float: left; padding: 2px 18px 18px 0px; margin: 0; color:#666; font-style:italic; width:50%; text-align:center; } .half-left img {width: 100%; opacity:1; filter:alpha(opacity=100);} .half-left a img:hover { opacity:.8; filter:alpha(opacity=80);} .half-right {float: right; padding: 2px 0px 18px 8px; margin: 0; color:#666; font-style:italic; text-align:center; width:50%; } .half-right img {width: 100%; opacity:1; filter:alpha(opacity=100);} .half-right a img:hover { opacity:.8; filter:alpha(opacity=80);} .full-center{float: left; padding:0px 0px 18px 0px; margin: 0; color:#666; font-style:italic; width:100%; text-align:center; } .full-center img {width: 100%; opacity:1; filter:alpha(opacity=100);} .full-center a img:hover { opacity:.8; filter:alpha(opacity=80);} .quarter-left {float: left; padding: 2px 18px 18px 0px; margin: 0; color:#666; font-style:italic; width:25%; text-align:center; } .quarter-left img {width: 100%; opacity:1; filter:alpha(opacity=100);} .quarter-left a img:hover { opacity:.8; filter:alpha(opacity=80);} .quarter-right {float: right; padding: 2px 0px 18px 8px; margin: 0; color:#666; font-style:italic; text-align:center; width:25%; } .quarter-right img {width: 100%; opacity:1; filter:alpha(opacity=100);} .quarter-right a img:hover { opacity:.8; filter:alpha(opacity=80);} .thumb { float:left; margin:0; padding:10px 10px 10px 10px; width:250px; } .lgfeature { position:relative; margin:0; padding:0; text-align:left; } .lgfeature dl { padding:10px 10px 10px 10px; margin:0px 15px 0px 110px; color:#000; text-align:left; } .lgfeature dt {padding:0; margin:0; font-weight:bold; font-size:15px; } .lgfeature dd {padding:0; margin:0; } .lgfeature em {padding:0; margin:0; color:#666; font-size:11px; } /* team */ ul#portfolio-filter{ padding:0px; line-height: 22px; } ul#portfolio-filter li{ display: inline; padding:10px; } ul#portfolio-filter a{ margin:0px; padding: 3px; color: #AAA; font-weight: bold; text-decoration: none; } ul#portfolio-filter a:hover, ul#portfolio-filter a.current{ color:#0099cc; } ul#portfolio-filter a.current{ background-color: #DDD; } ul#portfolio-list{ margin:0px 25px 10px 10px; padding: 0; list-style: none; color:#000; } ul#portfolio-list li{ display: inline; float: left; margin-right: 0px; overflow: hidden; background:#FFF; width:100%; padding:10px; } ul#portfolio-list img{ float:left; width:15%; padding:10px;} /* TWITTER */ .twitter { width: 100%; position:relative; margin: auto; float:right;} /* DROP DOWN MENU*/ #dropmenutop { position:absolute; margin:0px; right:260px; top:20px; width:242px; } #dropmenutop a{ text-align:left; margin:0px; padding:10px; background-color:#000000; background-image:none; border-width:0px 0 0 0; text-decoration:none; width:242px;} #dropmenutop a:hover{ text-align:left; margin:0px; padding:10px; background-color:#003366; background-image:none; border-width:0px; text-decoration:none; width:242px;} ul#dropmenu ul{ display:none; width:242px; position:absolute; left:0px; top:100%; background-color:#000000; background-image:none; border-width:0px; padding:0px; } ul#dropmenu li:hover>*{display:block; } ul#dropmenu li{ position:relative; display:block; white-space:nowrap; font-size:0; float:right; } ul#dropmenu li:hover{ z-index:1; } ul#dropmenu a{ display:block; } ul#dropmenu ul li {float:left; margin: 0px ; } ul#dropmenu ul a{ text-align:left; background-image:none; border-width:0px 0 0 0; border-style:solid; border-color:#000000; font:14px Arial; color:#FFFFFF; text-decoration:none; } ul#dropmenu img{ height:40px; width:40px; padding:0px; float:right; position:relative; opacity:1; } ul#dropmenu img:hover { opacity:.6; } .style-tabs { background: none; width: 480px;} .style-tabs,.style-tabs .ui-tabs-nav li a, .style-tabs .ui-tabs-nav { padding: 0;} .style-tabs .ui-tabs-panel { padding: 5px;} .style-tabs .ui-widget-header { border: none; background: url(images/TabMenu.png) repeat; height: 74px; width: 100%;} .style-tabs .ui-corner-all { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;} .style-tabs .ui-tabs-nav li { position: relative; height: 100%; cursor: pointer; margin: 0; top: 0;} .style-tabs .ui-widget-header .ui-state-default { background: none; border: none;} .style-tabs .ui-tabs-nav li.ui-tabs-active, .style-tabs .ui-tabs-nav li:hover { background: url(images/SelectedMiddle.png) repeat;} .style-tabs .ui-tabs-nav li .icon { color: #787878; background-position: center 3px; padding-top: 40px; font-weight: bold; font-size: 12px; text-align: center; width: 80px;} .style-tabs .ui-tabs-nav li.ui-tabs-active .icon,.style-tabs .ui-tabs-nav li:hover .icon { color: #414141;} .style-tabs .ui-tabs-nav li.ui-tabs-active .icon:before,.style-tabs .ui-tabs-nav li:hover .icon:before { content: url(images/SelectedSides.png); position: absolute; right: 0; top: 0;} .style-tabs .ui-tabs-nav li.ui-tabs-active .icon:after, .style-tabs .ui-tabs-nav li:hover .icon:after { content: url(images/SelectedSides.png); position: absolute; left: 0; top: 0;} .style-tabs .ui-tabs-nav li a { outline: none;} .style-tabs .ui-tabs-nav li.ui-tabs-active a { cursor: pointer;} ul#horizontal-list { list-style: none; padding-top: 20px; } ul#horizontal-list li { display: inline; } .scrollbox1 { background-image: url('../images/alonescroll2.jpg'); height:300px; width: 20%; float:left; } .scrollbox1 h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#FFF; padding:15px; font-size:30px; line-height:34px; font-weight: 200; } .scrollbox1 H2 { opacity:0; } .scrollbox1 p { opacity:0; } .scrollbox1:hover { background-image: url('../images/alonescroll1.jpg'); } .scrollbox1:hover H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:17px; line-height:19px; font-weight: 200; } .scrollbox1:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; font-weight: 200; } .scrollbox2 { background-image: url('../images/solarsystem1.jpg'); height:300px; width: 20%; float:left; } .scrollbox2 h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#FFF; padding:15px; font-size:30px; line-height:34px; font-weight: 200; } .scrollbox2 H2 { opacity:0; } .scrollbox2 p { opacity:0; } .scrollbox2:hover { background-image: url('../images/solarsystem2.jpg'); } .scrollbox2:hover H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:17px; line-height:19px; font-weight: 200; } .scrollbox2:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; font-weight: 200; } .scrollbox3 { background-image: url('../images/habitableplanet1.jpg'); height:300px; width: 20%; float:left; } .scrollbox3 h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#FFF; padding:15px; font-size:30px; line-height:34px; font-weight: 200; } .scrollbox3 H2 { opacity:0; } .scrollbox3 p { opacity:0; } .scrollbox3:hover { background-image: url('../images/habitableplanet2.jpg'); } .scrollbox3:hover H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:17px; line-height:19px; font-weight: 200; } .scrollbox3:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; font-weight: 200; } .scrollbox4 { background-image: url('../images/spacescroll2.jpg'); height:300px; width: 20%; float:left; } .scrollbox4 h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#FFF; padding:15px; font-size:30px; line-height:34px; font-weight: 200; } .scrollbox4 H2 { opacity:0; } .scrollbox4 p { opacity:0; } .scrollbox4:hover { background-image: url('../images/spacescroll1.jpg'); } .scrollbox4:hover H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:17px; line-height:19px; font-weight: 200; } .scrollbox4:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; font-weight: 200; } .scrollbox5 { background-image: url('../images/earthover1.jpg'); height:300px; width: 20%; float:left; } .scrollbox5 h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#FFF; padding:15px; font-size:30px; line-height:34px; font-weight: 200; } .scrollbox5 H2 { opacity:0; } .scrollbox5 p { opacity:0; } .scrollbox5:hover { background-image: url('../images/earthover2.jpg'); } .scrollbox5:hover H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:17px; line-height:19px; font-weight: 200; } .scrollbox5:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; font-weight: 200; } .boxbuttons { background-color:#003366; height:199px; width:33%; float:left; margin-left :0px; margin-top :10px; border:1px; border-style:solid; border-color:#000000; } .boxbuttons:hover { background-color:#000066; } .boxbuttons H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:26px; font-weight: 200; margin:3px; } .boxbuttons p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:20px; font-weight: 200; margin:3px; } .fourcolintro { background-color:#000; height:250px; width:24%; float:left; margin-left :0px; margin-top :10px; border:1px; border-style:solid; border-color:#FFF; } .fourcolintro:hover { background-color:#000066; } .fourcolintro H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:26px; font-weight: 200; margin:3px; } .fourcolintro p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:20px; font-weight: 200; margin:3px; } .questions { width:16%; float:left; padding:15px; margin-left :0px; margin-top :10px; border:0px; } .questions:hover { background-color:#000066; } .questions H1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:29px; line-height:31px; font-weight: 300; margin:3px; } .questions p { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:20px; font-weight: 400; margin:3px; } .boxmissionlink { width:33%; float:left; margin-left :0px; margin-top :0px; border:0; } .boxmissionlink H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:23px; font-weight: 200; margin:3px; } .boxmissionlink p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:18px; font-weight: 200; margin:3px; } .boxmissionlink img { opacity:1; } .boxmissionlink:hover img{ opacity:.9; } .boxexonasalink { background-color:#FFFFFF; width:66%; float:left; margin-left :0px; margin-top :0px; border:0; } .boxexonasalink :hover { background-color:#003366; } .boxexonasalink H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:23px; font-weight: 200; margin:3px; } .boxexonasalink p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:15px; font-weight: 200; margin:3px; } .boxexonasalink img { opacity:1; } .boxexonasalink :hover img{ opacity:.9; } .featureboxlarge { background-color:#003366; width: 828px; height:552px; margin-left :0px; margin-top :0px; display: inline-block; margin: 5px; border: 1px solid #ccc; float: left; } .featureboxlarge:hover { border: 1px solid #777; background-color:#000066; } .featureboxlarge img { width: 100%; height: auto;} .featurebox { background-color:#003366; width: 268px; height:270px; margin-left :0px; margin-top :0px; display: inline-block; vertical-align:top; margin: 5px; border: 1px solid #ccc; float: left; } .featurebox:hover { border: 1px solid #777; background-color:#000066; } .featurebox img { width: 100%; height: auto;} .featurebox h2 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#FFF; padding:10px; font-size:19px; line-height:23px; font-weight: 200; text-align:center; } .desc { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; font-size:18px; padding: 10px; text-align: center;} .whitebox { background-color:#FFF; margin: 5px; border: 1px solid #000; width: 28%; padding: 10px; text-align: center; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#000; display: inline-block; vertical-align:top; } .whitebox img { width: 100%; height: auto;} .missionbox1 { height:300px; width:22%; float:left; padding:10px; border-right: 2px dotted #336699; } .missionbox1 h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#66ccff; padding:5px; font-size:38px; line-height:39px; font-weight: 100; } .missionbox1:hover h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; padding:5px; font-size:38px; line-height:39px; font-weight: 100; } .missionbox1 h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#66ccff; padding:5px; font-size:18px; line-height:20px; font-weight: 200; } .missionbox1:hover h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; padding:5px; font-size:18px; line-height:20px; font-weight: 200; } .missionbox1:hover { background-image: url('../images/missionsparkle2.gif' ) ; background-repeat: no-repeat; background-size:100%; } .missionbox1 p { opacity:0; } .missionbox1:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; font-weight: 200; } .missionbox2 { height:300px; width:22%; float:left; padding:10px; } .missionbox2 H2 { opacity:0; } .missionbox2 p { opacity:0; } .missionbox2:hover { background-image: url('../images/missionsparkle2.gif' ) ; background-repeat: no-repeat; background-size:100%; } .missionbox2 p { opacity:0; } .missionbox2:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; font-weight: 200; } .missionbox2 h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#66ccff; padding:5px; font-size:38px; line-height:39px; font-weight: 100; } .missionbox2:hover h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; padding:5px; font-size:38px; line-height:39px; font-weight: 100; } .missionbox2 h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#66ccff; padding:5px; font-size:18px; line-height:20px; font-weight: 200; } .missionbox2:hover h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; padding:5px; font-size:18px; line-height:20px; font-weight: 200; } @media screen and (max-width: 450px) { .missionbox1 {width:70%; padding:40px; border:0; } .missionbox2 {width:70%; padding:40px; border:0; } .boxmissionlink { clear:both; width: auto; float: none; margin:5px; } .boxmissionlink { width:100%; float:left; border:1px; border-style:solid; border-color:#000000; } .boxexonasalink { clear:both; width: auto; float: none; margin:5px; } .boxexonasalink { width:100%; float:left; border:1px; border-style:solid; border-color:#000000; } } @media screen and (max-width: 800px) { .scrollbox1 { clear:both; width: auto; float: none; margin:5px; } .scrollbox2 { clear:both; width: auto; float: none; margin:5px; } .scrollbox3 { clear:both; width: auto; float: none; margin:5px; } .scrollbox4 { clear:both; width: auto; float: none; margin:5px; } .scrollbox5 { clear:both; width: auto; float: none; margin:5px; } .boxbuttons { clear:both; width: auto; float: none; margin:5px; } .boxbuttons { background-color:#003366; width:100%; float:left; border:1px; border-style:solid; border-color:#000000; } .frontcenter { width:100%; margin-top :10%; margin-bottom :10%; } .featureboxlarge { background-color:#003366; width: 90%; margin-left :0px; margin-top :0px; display: inline-block; margin: 5px; border: 1px solid #ccc; height: auto; } .featureboxlarge:hover { border: 1px solid #777; background-color:#000066; } .featureboxlarge img { width: 100%; height: auto;} .featurebox { background-color:#003366; width: 90%; margin-left :0px; margin-top :0px; display: inline-block; vertical-align:top; margin: 5px; border: 1px solid #ccc; height: auto; } .featurebox:hover { border: 1px solid #777; background-color:#000066; } .featurebox img { width: 100%; height: auto;} .desc { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; font-size:18px; padding: 10px; text-align: center;} .whitebox { background-color:#FFF; margin: 5px; border: 1px solid #000; width: 90%; padding: 10px; text-align: center; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#000; display: inline-block; vertical-align:top; } .whitebox img { width: 100%; height: auto;} .fourcolintro { background-color:#000; height:199px; width:100%; float:left; margin-left :0px; margin-top :10px; border:1px; border-style:solid; border-color:#FFF; } .fourcolintro:hover { background-color:#000066; } .fourcolintro H2 { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:26px; font-weight: 200; margin:3px; } .fourcolintro p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:20px; font-weight: 200; margin:3px; } .questions { width:100%; float:left; padding:20px; margin-left :0px; margin-top :10px; border:0px; } .questions H1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:29px; line-height:31px; font-weight: 300; margin:3px; } .questions p { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:20px; font-weight: 400; margin:3px; } } /* ECLIPSE COLUMNS with image bg */ .eclipsecol1 { background-color:#000; width: 227px; margin-left:1px; margin-right:1px; margin-top:3px; margin-bottom:0px; vertical-align:top; font-size:14px; line-height:35px; float:left; padding:0px; } .eclipsecol1 a:hover { background-color:#000099; width: 227px; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; vertical-align:top; font-size:14px; line-height:35px; float:left; padding:0px; } .eclipsecol1 img { width:100%; float:left; padding:0px; } .eclipsecol1 h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:18px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:center; } .eclipseoncol { background-color:#000099; width: 227px; margin-left:1px; margin-right:1px; margin-top:3px; margin-bottom:0px; vertical-align:top; font-size:14px; line-height:35px; float:left; padding:0px; } .eclipseoncol img { width:100%; float:left; padding:0px; } .eclipseoncol h1 { position:relative; color:#FFF; font-family:Lucida Grande, Arial,Helvetica,sans-serif; font-size:18px; padding:10px; font-weight:bold ; border-bottom:0px ; text-align:center; } /* COLUMNS white bg */ .threecol-container { display: table; width: 100%; background-color:#FFF; } .threecol { display: block; background-color:#FFF; width:31%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; height:100% } .threecol img { opacity:1; width:92%; } .threecol img:hover { opacity:.8;} .threecol2 { display: block; background-color:#FFF; width:31%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; height:100% } .threecol2 img { opacity:1; width:92%; } .threecol2 img:hover { opacity:.8;} .threecoltn { display: block; background-color:#FFF; width:31%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; height:100% } .threecoltn img { width:92%; } @media screen and (max-width: 1000px) { .threecol { display: block; background-color:#FFF; width:80%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; } .threecol img { width:43%; float:left } .threecol2 { display: block; background-color:#FFF; width:80%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; } .threecol2 img { opacity:1; width:95%; } .threecol2 img:hover { opacity:.8;} .threecoltn { float:left; width:10%; } .threecoltn img { width:92%; float:left; }} @media screen and (max-width: 600px) { .threecol-container { display: table; width: 100%; background-color:#FFF; } .threecol { display: block; background-color:#FFF; width:80%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; } .threecol img { width:95%; } .threecol2 { width:80%; float:left; } .threecol2 img { width:95%; } .threecoltn { float:left; width:5%; } .threecoltn img { width:100%; float:left; }} .twocol { display: block; background-color:#FFF; width:46%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; height:100% } .twocol img { opacity:1; width:100%; } .twocol img:hover { opacity:.8;} @media screen and (max-width: 1000px) { .twocol { display: block; background-color:#FFF; width:100%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; } .twocol img { width:96%; float:left } } .fourcol { display: block; background-color:#FFF; width:22%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; height:100% } .fourcol img { opacity:1; width:100%; } .fourcol img:hover { opacity:.8;} @media screen and (max-width: 1000px) { .fourcol { display: block; background-color:#FFF; width:40%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; } .fourcol img { width:96%; float:left } } .grayleftcol {background: -moz-linear-gradient(top, rgba(216,216,216,0.65) 0%, rgba(0,0,0,0) 100%); /*FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,0.65)), color-stop(100%,rgba(0,0,0,0))); /*Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(216,216,216,0.65) 0%,rgba(0,0,0,0) 100%); /*Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(216,216,216,0.65) 0%,rgba(0,0,0,0) 100%); /*Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(216,216,216,0.65) 0%,rgba(0,0,0,0) 100%); /*IE10+ */ background: linear-gradient(to bottom, rgba(216,216,216,0.65) 0%,rgba(0,0,0,0) 100%); /*W3C */ width: 280px; margin-left:2px; margin-right:10px; margin-top:3px; margin-bottom:0px; vertical-align:top; color:#000; line-height:12px; float:left; padding: 0px 10px 10px 10px; } .grayleftcol img a { width:292px; float:left; padding:10px; } .grayrightcol {background: -moz-linear-gradient(top, rgba(216,216,216,0.65) 0%, rgba(0,0,0,0) 100%); /*FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,0.65)), color-stop(100%,rgba(0,0,0,0))); /*Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(216,216,216,0.65) 0%,rgba(0,0,0,0) 100%); /*Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(216,216,216,0.65) 0%,rgba(0,0,0,0) 100%); /*Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(216,216,216,0.65) 0%,rgba(0,0,0,0) 100%); /*IE10+ */ background: linear-gradient(to bottom, rgba(216,216,216,0.65) 0%,rgba(0,0,0,0) 100%); /*W3C */ width: 280px; margin-left:2px; margin-right:10px; margin-top:3px; margin-bottom:0px; vertical-align:top; color:#000; line-height:12px; float:right; padding: 0px 10px 10px 10px; } .grayrightcol img a { width:292px; float:left; padding:10px; } /*IMAGE with CAPTION*/ .imageRight {font-size: 12px; line-height: 13px; color:#666; text-align:center; font-style:italic; font-weight:normal; float:right; padding: 0px; width: 400px; margin-left:20px; margin-bottom:20px; } .imageRight img {width: 400px; } .imageRightlarge {font-size: 12px; line-height: 13px; color:#666; text-align:center; font-style:italic; font-weight:normal; float:right; padding: 0px; width: 600px; margin-left:20px; margin-bottom:20px; } .imageRightlarge img {width: 600px; } .imageRightSmall {font-size: 12px; line-height: 13px; color:#666; text-align:center; font-style:italic; font-weight:normal; float:right; padding: 0px; width: 250px; margin-left:20px; margin-bottom:20px; } .imageRightSmall img {width: 250px; } .imageLeft {font-size: 12px; line-height: 13px; color:#666; text-align:center; font-style:italic; font-weight:normal; float:left; padding: 0px; width: 500px; margin-right:20px; margin-bottom:20px; } .imageLeft img {width:500px; } .imageLeftSmall {font-size: 12px; line-height: 13px; color:#666; text-align:center; font-style:italic; font-weight:normal; float:left; padding: 0px; width: 250px; margin-right:20px; margin-bottom:20px; } .imageLeftSmall img {width: 250px; } .imageCenter {font-size: 12px; line-height: 13px; color:#666; text-align:center; font-style:italic; font-weight:normal; float:left; padding: 0px; width: 100%; margin-bottom:20px; } .imageCenter img {width: 100%; } .image100percent img {font-size: 12px; line-height: 13px; color:#666; text-align:center; font-style:italic; font-weight:normal; float:right; padding: 0px; width: 916px; margin-right:2px; margin-bottom:2px; } .image50percent img {font-size: 12px; line-height: 13px; color:#666; text-align:center; font-style:italic; font-weight:normal; float:right; padding: 0px; width: 456px; margin-right:2px; margin-bottom:2px; } @media screen and (max-width: 600px) { .imageRight {width:100%; } .imageRight img {width: 95%; } .imageRightlarge {width:100%; } .imageRightlarge img {width: 95%; } .imageRightSmall {width:100%; } .imageRightSmall img {width: 95%; } .imageLeft {width:100%; } .imageLeft img {width: 95%; } .imageLeftSmall {width:100%; } .imageLeftSmall img {width: 95%; } .imageCenter {width:100%; } .imageCenter img {width: 95%; } .image100percent {width:100%; } .image100percent img {width: 95%; } .image50percent {width:100%; } .image50percent img {width: 95%; } } /*gallery */ .gallery { margin:2px;padding:2px; border:0px solid #cccccc; height:auto; width:auto; float:left; text-align:left; } .gallery img { display:inline; margin:2px; padding:0px; border:1px solid #ffffff; } .gallery a:hover img { border:1px solid #000000;opacity:0.8;filter:alpha(opacity=80); /*For IE8 and earlier */ } .desc { text-align:center; font-weight:normal; width:280px; margin:0px; } /* Inner */ .inner { margin: 0 auto; width: 102rem; max-width: calc(100% - 6rem); } @media screen and (max-width: 480px) { .inner { max-width: calc(100% - 3rem); } }