/* 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;} .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; } /* Search*/ .searchbox { position:relative; top:0; right:0px; height:98px; width:202px ; float:right; } .search { float:right; padding: 0px 15px 0px 15px ; opacity:1; border-left:1px solid #FFF ; } .search img { opacity:1; } /* 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/keplercrater-bg.png); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } @media screen and (max-width: 580px) { .parallax0 { background-attachment: scroll; } .parallax1 { background-attachment: scroll; background-image: url(../webdesign/trans.png) } } 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/moonbg.jpg) no-repeat center top; } body2 { 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; } 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; } .bannerwrap {width:100%; max-width:800px; background:#000; margin:auto; } /* for 480px or less */ @media screen and (max-width: 580px) { header { height: auto;} .nasahead img { opacity:1; padding:0; float:left; width:60px; } .nasahead img:hover { opacity:.8;} } /* 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; } .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;} *{margin:0;padding:0;text-decoration:none} nav{ 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; } #cssmenu > ul > li > a{padding:15px 25px 15px 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; margin-left:-20px; width:230px; } #cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#000; border-left:solid 1px #FFF; transition:all .25s ease} #cssmenu ul ul li:hover{} #cssmenu li:hover > ul{left:auto} #cssmenu li:hover > ul > li{height:auto} #cssmenu ul ul ul{margin-left:169px; top:0; width:140px;} #cssmenu ul ul li a{padding:10px 25px 10px 25px; 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; display:none} .search { display:none } .search img { opacity:0; } .dark{ opacity:0; height:1px;} .dark input[type=text]{ opacity:0 ; height:1px; } } @media screen and (max-width:1000px){ nav{ } #cssmenu{ margin-left:100px; background-color:#000; margin-top:10px; padding:0; border-left:1px solid white; padding-left:0 } #cssmenu ul{ display:none; padding-top:40px ; } #cssmenu ul li{width:100%;border:0; border-left:1px solid black } #cssmenu ul li:hover{background:#363636;border:0; border-left:1px solid white } #cssmenu ul ul{ display:none; padding-top:0px; } #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; border:0} #cssmenu > ul > li{float:none; padding-top:0px;} #cssmenu ul ul li a{padding-left:25px; } #cssmenu ul ul li{background:transparent; border:0; padding-top:0px; } #cssmenu ul ul li:hover{background:transparent} #cssmenu ul ul ul li a{padding-left:15px} #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:70px;height:70px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;} .button:after{position:absolute;top:22px;right:29px;display:block;height:9px;width:40px;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:11px;right:29px;display:block;height:3px;width:40px;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 */ .footcellwrap {width:100%} .footcellleft { width: 320px; padding: 10px; margin: 2px; float: left ; color:#FFF; } .footcellleft img { padding:2px; float:left; position:relative; opacity:1 ;} .footcellleft img:hover { opacity:.6;} .footcellmid { padding: 30px 30px 10px 10px; margin-top: 20px; color:#b2b2b2; font-size:11px; border:0; width: auto; float:right; } .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;} @media screen and (max-width:600px){ .footcellwrap {width:300px; padding:0;margin:auto;} .footcellleft { width:300px; padding:0;margin:auto; clear:both; } .footcellmid { width:300px; padding:20px; float:left; margin:auto; clear:both; } .footcellright { width:300px; padding:0 0 0 20px; margin:auto; clear:both; float:left} } .pagewrapwhite { background:#FFF; color:#000 ; width:100%; max-width:1100px; padding:20px; margin-top:100px; } .pagewrapwhite p{ font-family: Arial,Helvetica,sans-serif; font-size:14px; line-height:22px; padding-bottom:10px; } .pagewrapwhite img { padding:10px; margin:0px; } .pagewrapgray { background:#444; color:#FFF ; margin: 0px ; width:90%; } .pagewrap { padding: 5px; margin:auto; width:100%; max-width:1100px; } /* List Items */ .pagewrapwhite ul {list-style-type: none; margin: 10px 30px 10px 30px; } .pagewrapwhite li { margin: 0px; border-left: 1px solid #aaa; padding: 5px 5px 5px 10px; font-size:14px; color: #666; } .pagewrapwhite li a {text-decoration: none; color:#336699;} .pagewrapwhite li a:visited { text-decoration: none; color: #6699cc; } .pagewrapwhite li a:hover { text-decoration: none; color: #3399ff; } .pagewrapwhite li.a:active { text-decoration: none; color: #99ccff; } .pagewrapwhite ul ul {list-style-type:square; margin-left:30px ; } .pagewrapwhite ul ul li { margin: 0px; border: 0px; padding:5px 5px 15px 5px; font-size:18px; color: #666; } .pagewrapwhite ul ul li a {text-decoration: none; color:#336699;} .pagewrapwhite ul ul li a:visited { text-decoration: none; color: #6699cc; } .pagewrapwhite ul ul li a:hover { text-decoration: none; color: #3399ff; } .pagewrapwhite ul ul li.a:active { text-decoration: none; color: #99ccff; } .pagewrapwhite ol ul {list-style-type:square; margin-left:30px ; } .pagewrapwhite ol ul li { margin: 0px; border: 0px; padding:5px 5px 15px 5px; font-size:18px; color: #666; } .pagewrapwhite ol ul li a { text-decoration: none; color:#336699;} .pagewrapwhite ol ul li a:visited { text-decoration: none; color: #6699cc; } .pagewrapwhite ol ul li a:hover { text-decoration: none; color: #3399ff; } .pagewrapwhite ol ul li.a:active { text-decoration: none; color: #99ccff; } .banner { width: 100%; margin:auto; border-bottom:solid 1px } .banner img{ width: 90%; max-width:800px; margin:auto; } .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; } /* various format options */ .kids { width: 300px; margin-left:0px; margin:15px; margin-top:2px; margin-bottom:3px; vertical-align:top; color:#FFF; background-color:#000; float:left; padding:10px; } .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; } /* various format options */ .kids { width: 30%; margin-left:0px; margin-right:0px; margin-top:2px; margin-bottom:3px; vertical-align:top; color:#FFF; background-color:#000; float:left; padding:10px; } .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; } } @media screen and (max-width: 600px) { .kids { width: 96%; margin-left:0px; margin:5px; vertical-align:top; color:#FFF; background-color:#000; 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; } } .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);} .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;} 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; } .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; } .scrollbox1:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; } .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; } .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; } .scrollbox2:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; } .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; } .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; } .scrollbox3:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; } .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; } .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; } .scrollbox4:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; } .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; } .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; } .scrollbox5:hover p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px; font-size:12px; line-height:12px; } .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; margin:3px; } .boxbuttons p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:20px; 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; margin:3px; } .fourcolintro p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:20px; 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: 400; 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; margin:3px; } .boxmissionlink p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:18px; 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; margin:3px; } .boxexonasalink p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:15px; 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; 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; } .missionbox1:hover h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; padding:5px; font-size:18px; line-height:20px; } .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; } .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; } .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; } .missionbox2:hover h6 { font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#fff; padding:5px; font-size:18px; line-height:20px; } @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; margin:3px; } .fourcolintro p { opacity:9; font-family:"helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:15px; font-size:16px; line-height:20px; 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; 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%; } .fourcol { display: block; background-color:#FFF; width:23%; color:#000; line-height:12px; float:left; padding:2px; font-weight:normal; margin:5px; height:100% } .fourcol img { opacity:1; width:92%; } .fourcol img:hover { opacity:.8;} .thumb img { opacity:1; width:150px; float:left; } .thumb img:hover { opacity:.8;} @media screen and (max-width: 1000px) { .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; } .fourcol { display: block; background-color:#FFF; width:80%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; } .fourcol img { width:43%; float:left } .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 } } @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; } .fourcol { display: block; background-color:#FFF; width:80%; color:#000; line-height:12px; float:left; padding:5px; font-weight:normal; margin:5px; } .fourcol img { width:95%; } } .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 } } .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; } .halfleft { width:47%; float:left; margin:20px; background-color:#000; padding:10px; } .halfleft img {width:100%; padding:0} @media screen and (max-width: 600px) {.halfleft {width:90%; margin:0; } } .intropg {font-size:12px} @media screen and (max-width: 600px) { .intropg {font-size:9px; line-height:9px}} /* RESPONSIVE MENU */ .topnav { overflow: hidden; background-color: #333; float:left; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 15px; } .topnav a:hover { background-color: #ddd; 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; } .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: left; display: block; text-align: left; } } /* universal font styles */ h1 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#663399; padding: 15px 25px 5px 25px; font-size:38px; line-height:39px; font-weight: 400; } h2 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#666; padding: 15px 25px 5px 25px; font-size:24px; line-height:29px; font-weight: 500; } h3 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#003399; padding: 21px 25px 5px 25px; font-size:22px; line-height:24px; font-weight: 500; } h4 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#003399; padding: 15px 25px 5px 25px; font-size:18px; line-height:26px; font-weight: 500; } h5 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#666; padding: 15px 25px 5px 25px; font-size:19px; line-height:22px; font-weight: 500; } h6 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#663399; padding: 5px 15px 5px 15px; font-size:18px; line-height:18px; font-weight: 400; } h7 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#003399; padding: 0px; font-size:15px; line-height:17px; font-weight: 500; } p { font-size:15px; padding: 5px 25px 15px 25px; color:#666; line-height:19px; } .right {float:right; padding:10px} .caption { font-size:13px; line-height:14px; padding: 12px 25px 20px 25px; color:#666; font-style: italic; text-align:justify; clear:both } sup, sub { vertical-align: baseline; position: relative; top: -0.3em; } sub { top: 0.3em; } blockquote {border-left: 3px solid #663399 ; color:#663399; padding: 30px 15px 30px 20px; font-size:22px; line-height:30px; margin:20px 50px 20px 30px; font-weight:400; } 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; } @media screen and (max-width: 600px) { h1 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#663399; font-size:23px; line-height:25px; font-weight:normal; } h2 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#666; font-size:17px; line-height:21px; font-weight:500; font-weight:bold; } h3 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#003399; font-size:17px; font-size:18px; line-height:22px; font-weight: 500; float:left; } h4 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#003399; font-size:17px; line-height:20px; font-weight: 500; } h5 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#666; font-size:17px; line-height:22px; font-weight: 500; } p { font-size:13px; padding: 5px 25px 15px 25px; color:#666; line-height:17px; } blockquote {border-left:3px solid #663399; color:#663399; padding: 30px 15px 30px 20px; font-size:18px; line-height:22px; font-weight:400; } }