/* 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 {position:relative; top:0; width:100%; z-index:2; } #nasahome { display:inline; position:absolute; } #nasahead img { opacity:1; padding:0; float:left; } #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:0px} .dark input[type=text]{ border:0; height:36px; width:180px; background:#333 no-repeat; color:#FFF; position:relative; } /* MAIN PAGE DEFINITIONS */ #paperTop { position:relative; margin:0px auto 0 auto; padding: 0; z-index:3; } #bkg_surround {position:relative; top:0px; border:0; margin:0; padding:0; z-index:1 } #bkg_layer { position:absolute; background: transparent url(../webdesign/background-mid.png) no-repeat center top; height: 2000px; width: 100%; } 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:13px; } p.large {line-height:19px; padding:5px; font-size:16px; } 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; } h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; padding:5px; font-size:30px; line-height:35px; } h2 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#000; padding:5px; font-size:22px; line-height:23px; } h3 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#6699cc; padding:5px; font-size:22px; line-height:23px; } h4 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#FFF; padding:5px; font-size:16px; line-height:17px; } h5 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#666; padding:5px; font-size:15px; line-height:18px; } h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:38px; line-height:39px; } @media screen and (max-width: 480px) { h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; padding:5px; font-size:18px; line-height:30px; margin-top:40px; } h2 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#000; padding:5px; font-size:18px; line-height:23px; } } .fancylist ul { background: linear-gradient(#333366, #000033); padding: 20px; list-style-image: url('li.gif'); line-height:16px;} .fancylist li { margin-top: 10px; } .basiclist ul { padding:0 0 20px 40px; list-style-image: url('li2.gif'); line-height:16px;} .basiclist li { margin-top: 10px; } /* BASIC SCROLLOVER BUTTON LINK*/ .buttonlink a:link { background-color:#003366; text-decoration: none; color: #FFF; padding:10px; margin:1px; font-size:14px; float:left; } .buttonlink a:visited { background-color:#003366; text-decoration: none; color: #FFF; padding:10px; margin:1px; font-size:14px; } .buttonlink a:hover { background-color:#003399; text-decoration:none; color: #FFF; padding:10px; 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; } .frontcenter { width:100%; padding-left:20%; padding-right:20%; } .frontcenter{ width:60%; } .frontcenter img {width: 100%; opacity:1; filter:alpha(opacity=100);} .frontcenter a img:hover { opacity:.8; filter:alpha(opacity=80);} /* TOP 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 { background-color: #ddd; color: black;} .topnav .icon { display: none;} .banner {float:left} @media screen and (max-width: 450px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: left; display: block; text-align: left; } .banner img {width:100%; float:left; padding-top:100px; } } *{margin:0;padding:0;text-decoration:none} header{position:relative;width:100%;background:transparent; z-index:99; } nav{position:relative; margin:0 auto;} #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; } #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: linear-gradient(#333366, #000033)!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:#333366;transition:all .25s ease; border-left:1px solid #FFF} #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:#363636;} #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:1000px) { nav{width:100%;} #cssmenu{width:80%;margin-left:100px; background:#333 } #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} .searchbox { position:relative; opacity:0 } .form { opacity:0 } .input[type=text]{ opacity:0 } .dark{ opacity:0} .dark input[type=text]{ opacity:0 } } /* NASA FOOTER */ .footcellleft { width: 420px; padding: 10px; margin: 2px; float: left ; } .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: 180px; padding: 10px; margin-top: 2px; float: right ; } .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; } /* MAIN PAGE SECTIONS */ .pagewrapwhite { background:#FFF; color:#000 ; width:100%; padding:20px; } .pagewrapwhite h1 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#000066; padding:5px; font-size:27px; line-height:23px; } .pagewrapgray { background:#444; color:#FFF ; margin: 0px } .pagewrap { padding: 5px; margin: auto; max-width: 1400px; } .header { height: 100px; padding: 15px;} .dracula { width: 100%; float: left; margin:5px; } .dracula img {width: 66%; float: left; margin:5px;} .mummy { width: 48%; float: left; margin:5px; } .mummy img {width:100%; opacity:1; } .frankenstein { width: 56%; float:right; margin:5px; } .frankenstein img {width:100%; opacity:1; } .creature { width: 40%; float: left; margin:2px; margin-top:5px; } .creature img {width:100%; opacity:1; } .zombie { width: 15%; margin:5px; float: left; } .zombie img {width:100%; float:left; opacity:1; } .toptab { background: linear-gradient(#333366, #000033); padding: 5px; margin-right:10px; float: left; width:41%} .toptab img {width:25%; padding: 10px; float:left; opacity:1; } .toptab img:hover { opacity:.8;} .bluetab { background: linear-gradient(#333366, #000033); padding: 5px; margin:5px; float: left; width:46%} .bluetab img {width:25%; padding: 10px; float:left; opacity:1; } .bluetab img:hover { opacity:.8;} /* for 800px or less */ @media screen and (max-width: 800px) { .dracula {clear:both; width: 100%; float: left; margin:5px; } .mummy { clear:both; width: auto; float: none; margin:5px; } .mummy img { width: 100%; float: left; margin:5px; opacity:1; } .frankenstein { clear:both; width: auto; float: none; margin:5px; } .frankenstein img { width: 100%; float: left; margin:5px; } .mummy img:hover { opacity:.8;} .creature { clear:both; width: auto; float: none; margin:2px; margin-top:5px; } .creature img { width: 100%; float: left; margin:5px; opacity:1; } .creature img:hover { opacity:.8;} .zombie { width: 200px; float:left; margin:5px; } .zombie img { width: 100%; float: left; margin:5px; } .zombie img:hover { opacity:.8;} .toptab { background: linear-gradient(#333366, #003366); padding: 5px; margin:2px; float: left; width: 100%; } .toptab img {width:25%; padding: 10px; float:left; opacity:1; } .toptab img:hover { opacity:.8;} .bluetab { background: linear-gradient(#333366, #003366); padding: 5px; margin-right:10px; float: left; width: 100%;} .bluetab img {width:25%; padding: 10px; float:left; opacity:1; } .bluetab img:hover { opacity:.8;} .banner { width: 100%; float: left; margin:5px; } .banner img {width:100%; opacity:1; } } .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;} /* for 480px or less */ @media screen and (max-width: 480px) { header { height: auto; } h1 { font-size: 2em; } } .half-left {float: left; padding: 10px; margin: 0; color:#666; width:65%; } .half-right {float: right; padding: 10px; margin: 0; color:#666; width:30%; } .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; } /* LARGE Image : Image floats left with content to the right of it */ .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-size:15px;} .lgfeature dd {padding:0; margin:0;} .lgfeature em {padding:0;margin:0; color:#666; font-size:11px; } .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 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 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 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 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 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; width:33%; float:left; margin-left :0px; margin-top :0px; 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:5px; font-size:19px; line-height:19px; font-weight: 200; margin:3px; } .boxbuttons p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:13px; line-height:15px; font-weight: 200; margin:3px; } .buttonlink a:link { background-color:#333366; text-decoration: none; color: #FFF; padding:10px; margin:5px; font-size: 18px; } .buttonlink a:visited { background-color:#333366; text-decoration: none; color: #FFF; } .buttonlink a:hover { background-color:#000033; text-decoration:none; color: #FFF; } .buttonlink a:active { text-decoration: none; color: #FFF; } /* for 800px or less */ @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:600px; padding-left:20px; padding-right:20px; } .frontcenter{ width:100% ; } .frontcenter img {width: 100%; opacity:1; filter:alpha(opacity=100);} .frontcenter a img:hover { opacity:.8; filter:alpha(opacity=80);} } .table{ display: table; padding: 0px; margin-right: 15px; border: solid 1px #FFFFFF; width:100% ; } .row{ display: table-row; vertical-align: top; padding-bottom: 10px; border-left: 0px; } .row:nth-child(2n) { background:#FFFFFF; } .cell{ display: table-cell; vertical-align: top; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 2px; text-align: left; margin: 1px; border: solid 2px #FFFFFF; } .celltop{ display: table-cell; vertical-align: top; padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 2px; text-align: left; margin: 1px; background:#DCDCDC; border: solid 2px #FFFFFF; }