*{margin:0;padding:0;text-decoration:none}

*{box-sizing:border-box;} 

/* Basic styles for 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;}


body {	font-family: helvetica, sans-serif;	font-size:14px; line-height:125%; color:#fff; padding:0; margin:0; margin-bottom:10px; background:#000; }


div {text-align:left;}
a:link {text-decoration: none; color: #000; font-weight:600}
a:visited {text-decoration: none; color: #000;  font-weight:600}
a:hover {text-decoration: underline;}
a:active {text-decoration: none; color:#e2433b;}



h1 {font-family: helvetica, sans-serif; color:#000; padding:5px; font-size:30px; line-height:34px; font-weight: 500; margin:auto;  text-align:center }
h2 {font-family: helvetica, sans-serif; color:#000; padding:5px; font-size:30px; line-height:23px; font-weight:600; text-transform:uppercase }
h3 {font-family: helvetica, sans-serif; color:#000; padding: 5px 5px 5px 5px; font-size:18px; line-height:22px; font-weight:600; }
h4 {font-family: helvetica, sans-serif; color:#000; padding:5px 0; font-size:16px; line-height:17px; font-weight:500;}
h5 {font-family: helvetica, sans-serif; color:#000; padding: 5px 0px 0px 0px; font-size:27px; line-height:27px; font-weight: normal;}
h6 {font-family: helvetica, sans-serif; color:#999; padding:5px; font-size:18px; line-height:20px; text-transform:uppercase}

h1 a{color:#000;   }
h2 a{color:#000;  }
h3 a{color:#000; }
h4 a{color:#000;  }
h5 a{color:#000;  }
h6 a{color:#999;  }

h1 a:hover{color:#000; text-decoration:underline   }
h2 a:hover{color:#000; text-decoration:underline  }
h3 a:hover{color:#000; text-decoration:underline }
h4 a:hover{color:#000; text-decoration:underline  }
h5 a:hover{color:#000; text-decoration:underline  }
h6 a:hover{color:#999; text-decoration:underline  }



	@media screen and (max-width: 600px) {

		.titleimage {width:85%; height:auto; float:left; margin-right:0px ;}
		.nasahead img {opacity:1; padding-top:20px; width:10%; float:left; }
		.nasahead img:hover {opacity:1;} 

		h1 {font-family: helvetica, sans-serif; color:#ccc; padding:5px; font-size:30px; line-height:31px; font-weight: 600;}
		h2 {font-family: helvetica, sans-serif; color:#ccc; padding:5px; font-size:18px; line-height:120%; font-weight:500;}
		h3 {font-family: helvetica, sans-serif; color:#000; padding: 5px 5px 0px 5px; font-size:18px; line-height:18px; font-weight:500; } 
		h4 {font-family: helvetica, sans-serif; color:#000; padding:5px; font-size:16px; line-height:17px; font-weight:500;}
		h5 {font-family: helvetica, sans-serif; color:#000; padding: 5px 0px 0px 0px; font-size:27px; line-height:27px; font-weight: normal;}
		h6 {font-family: helvetica, sans-serif; color:#999; padding:5px; font-size:15px; line-height:20px; font-weight:normal;}
		
}






div.clear {clear:both; margin:0; border:0; padding:0;}

/* generic responsive img class */

.imageResponsive {width:100%; height:auto; max-width: 100%; }

/* basic blockquote style */

blockquote{color:#333; border-left: 8px #70cbff solid; width:50%; float:right; padding: 2% 2%;margin: 2% 0; font-family: helvetica, sans-serif; font-size: 22px; font-style: italic; line-height: 130% ; margin-left:40px;}

	@media(max-width:600px){
		blockquote{float:none; margin: 2% auto;	width:75%;border-left: 5px #70cbff solid;font-size: 18px;}}

/* page wrapper */

#myVideo {position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index:1;}

.paperTop {margin:0px auto 0px auto; height:auto; min-width:100%; } 

/* CONTENT */

#content {background:transparent; text-align:center; margin:10px; padding:0px 0px 0px 0px; z-index:6;}

/* iframe for library */

#docframe {width: 70%; height: 500px; float:right; overflow: hidden; border: none; border: solid 1px #ccc }

.pagewrapwhite { background:#FFF; color:#000; padding:2% 2%; width:94%; margin:1%; border:0px } 

.fullpagewhite { background:#FFF; color:#000; border:0; margin:0; width:100%; padding:0; }

.titleimage {width:350px; float:left; margin-right:20px; }
.titleimage img{width:100%; margin-right:30px; padding-right:30px; }	



.pagewrapwhite p {font-size:15px; line-height: 150%; margin:15px 0; padding:0 5px 0 5px;}
.pagewrapwhite h1 {font-size:30px; margin-bottom:10px; color:#000; font-weight:600;}
.pagewrapwhite h2 {font-size:22px; color:#000; font-weight:600; margin-bottom:15px; text-transform:uppercase}
.pagewrapwhite h3 {font-size:24px; margin-top:25px; font-weight:600; color:#000; line-height:120%; }

.pagewrapwhite ul {margin:20px; list-style-type:square; list-style-position: inside; padding:0;}
.pagewrapwhite li {font-family: helvetica, sans-serif; font-size:16px; line-height:20px; color:#000;
list-style-type:square;	list-style-position: inside; padding:0 0 12px 15px;	margin:0;}
.pagewrapwhite li a {border-radius: 5px; margin:1px; padding:3px; color:#6699cc;}
.pagewrapwhite li a:hover {border-radius: 5px; margin:1px; padding:3px;}

.pagewrapwhite a:link {text-decoration:none; color: #000;}
.pagewrapwhite a:visited {text-decoration:none; color: #000;}
.pagewrapwhite a:hover {text-decoration:underline; color: #000;}
.pagewrapwhite a:active {text-decoration:none; color: red;}

	@media screen and (max-width: 600px) {

		.titleimage {width:85%; height:auto; float:left; margin-right:0px ;}
		.nasahead img {opacity:1; padding-top:20px; width:10%; float:left; }
		.nasahead img:hover {opacity:1;} 
		
		.pagewrapwhite p {font-size:14px;}
		.pagewrapwhite h1 {font-size:24px;}
		.pagewrapwhite h2 {font-size:22px;}
		.pagewrapwhite h3 {font-size:16px;} }


.textOnlyPage {max-width:600px; margin:0 auto }

		
/* columns */

.threecol {width:30%; margin:0 0 0 0; box-sizing: border-box; padding:0; float:left; border:none; }
.threecolblk {padding:13px; float:left; padding-left:20px; border:none; background-color:#000; width:29% ;} 
.threecolblk h2 {font-family: helvetica, sans-serif; margin:0px; background-color:#000; padding:15px; font-size:14px; line-height:16px; color:#70cbff ; text-align:center; border-top:1px solid #00276b; border-radius:300px }
.threecolblk h3 {font-family: helvetica, sans-serif; margin:0px; background-color:#000; padding:15px; font-size:14px; line-height:16px; color:#FFF ; text-align:center; border-top:1px solid #00276b; border-radius:300px }
.threecolblk li {font-family: helvetica, sans-serif; font-size:14px; line-height:24px; margin-left:20px;}
.threecolblk p {font-family: helvetica, sans-serif; font-size:14px; line-height:18px; padding:5px 15px 5px 0px;}

.threecolblk img {float:left; width:100%; height:auto; max-width: 100%; border:solid 2px #000; margin-bottom:10px}
.threecolblk img:hover {border-bottom:2px solid #00276b;}

.threecolblktwitter {padding:13px; float:left; margin-left:20px; border:0px; background-color:#000; width:29% ;}
.threecolblk a:link {text-decoration: none; color: #FFF; font-weight:600}
.threecolblk a:visited {text-decoration: none; color: #FFF;  font-weight:600}
.threecolblk a:hover {text-decoration: underline;}
.threecolblk a:active {text-decoration: none; color:#e2433b;}
 

.twocol {background-color:#FFF; width:49%; float:left; margin-left:20px; border:0px; }
.twocol h2 {font-family: helvetica, sans-serif; color:#666; padding-left:15px; font-size:26px; font-weight: 400; margin:3px;}
.twocol p {color:#000; padding-left:15px; padding-right:25px; font-size:14px; line-height:20px;}
.twocol ul {color:#000; margin-left:30px;}
.twocol li {font-size:14px; line-height:20px; color:#000; margin-left:15px; padding:4px;}

.twocolblk {padding:13px; float:left; margin:10px; border:0px; background-color:#000; width:44% ;}
.twocolblk h2 {font-family: helvetica, sans-serif; margin:0px; background-color:#000; padding:15px; font-size:14px; line-height:16px; color:#70cbff ; text-align:center; border-top:1px solid #00276b; border-radius:300px }
.twocolblk li {font-family: helvetica, sans-serif; font-size:14px; line-height:24px; margin-left:20px;}
.twocolblk p {font-family: helvetica, sans-serif; font-size:14px; line-height:18px; padding:5px 15px 5px 0px;}
.twocolblk img {float:left; padding:0; border:1px solid #000;}
.twocolblk img:hover {border:1px solid #00276b;}

.fourcolblk {padding:13px; float:left; margin:10px; border:0px; background-color:#000; width:21% ;}
.fourcolblk h2 {font-family: helvetica, sans-serif; font-size:24px; line-height:24px; margin:0px; background-color:#000; border:1px solid #666; padding:15px }
.fourcolblk li {font-family: helvetica, sans-serif; font-size:14px; line-height:24px; margin-left:20px;}
.fourcolblk p {font-family: helvetica, sans-serif; font-size:14px; line-height:18px; padding:5px 15px 5px 0px;}
.fourcolblk img {float:left; width:50% }

	@media screen and (max-width: 1200px) {
		
		.fourcolblk {padding:13px; float:left; margin:10px; border:0px; background-color:#000; width:40% ;}
		.twocolblk {padding:13px; float:left; margin:10px; border:0px; background-color:#000; width:85% ;}
		.twocol {width:100%; margin:10px 0 0 0 ; border:0px; }
		.twocol h2 {font-family: helvetica, sans-serif; font-size:26px; font-weight: 400; margin:0px;}
		.twocol p {}
		.twocol ul {margin-left:30px;}
		.twocol li {font-family: helvetica, sans-serif; font-size:14px; line-height:24px; margin-left:30px;}
		.threecolblk .twocolblk h2 {font-size:14px; line-height:16px; }	
		.imglargeright {width:70%; float:right; padding:10px; border:0px;}	
		.twocol, .threecol, .threecolblk, .twocolblk, .threecolblktwitter {width:95% ; margin:0 auto; padding:0; float:none;}	
		.threecolblktwitter {max-width: 400px; margin:0 auto; padding:0;} 

		.homePageVideo {max-width: 700px; margin:0 auto; padding:0;}
		.homePageAbout {max-width: 500px; margin:50px auto; padding:0;}
		.homePageTwitter {max-width: 500px; margin:0 auto; padding:0;}}

/* photos with nested captions */

.photoleft {float: left; padding:10px 25px 20px 0px; margin: 0; width:40%; max-width:500px; color:#666; font-style:italic; }
.photoleft img {width: 100%; height:auto; max-width:100%; opacity:1; filter:alpha(opacity=100);} 
.photoleft p {font-style:italic;}
.photoleft a img:hover {opacity:1; filter:alpha(opacity=80);}

.photoright {float: right; padding:10px 0px 20px 25px; margin: 0; width:40%; max-width:500px; color:#666; font-style:italic;}
.photoright img {width: 100%; height:auto; max-width:100%; opacity:1; filter:alpha(opacity=100);} 
.photoright a img:hover {opacity:1; filter:alpha(opacity=80);}
.photoright p {font-style:italic;}

.photofullpage {padding:0; margin: 0; width:100%; color:#666; font-style:italic;}
.photofullpage img {width: 100%; height:auto; max-width:100%; opacity:1; filter:alpha(opacity=100);} 
.photofullpage a img:hover {opacity:1; filter:alpha(opacity=80);}

.photoWidth25 {width: 25%;}
.photoWidth50 {width: 46%; } 
.photoWidth75 {width: 75%;}
.photoWidth100 {width: 100%;}

.photoWidth33 {width: 33%;}
.photoWidth66 {width: 66%;}

	@media screen and (max-width: 600px) {
		
		.photoleft, .photoright, .photofullpage,
		.photoWidth25,.photoWidth50, .photoWidth75, .photoWidth100, .photoWidth33, .photoWidth66 {width:100%; padding:0; margin: 0 auto; float:none; max-width:none;} }

/* gallery responsive IMGs */

.galleryResponsiveWrapper {display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.galleryResponsiveItem {width:300px; text-align:left; padding:15px; }
.galleryResponsiveItem img {width:100%; height:auto; border:2px solid #FFF;}
.galleryResponsiveItem img:hover {border:2px solid #e2433b;}

/* @ssmod added classes for galleryResponsiveVideo */

.galleryResponsiveVideoItem {width:100%; margin:10px auto 10% auto;	padding:0;}
.galleryResponsiveVideoItem FIGCAPTION {clear:both;	font-style: italic;	text-align: left; margin:10px auto;	padding:0;}
.galleryResponsiveVideo4x3 {/* wrap youtube Iframe with this to make responsive - remove all dims from iframe */
 float: none; clear: both; width: 100%; position: relative; padding-bottom: 75%; padding-top: 0px; height: 0; border: 1px solid #aaaaaa;	border-radius:0px;	box-sizing: border-box;}
.galleryResponsiveVideo16x9 {/* make youtube Iframe responsive */
 float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; border: 1px solid #aaaaaa; border-radius:0px;	box-sizing: border-box; }
.galleryResponsiveVideo4x3 iframe,
.galleryResponsiveVideo16x9 iframe {/* may also need to add targets for object, embed */
 position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* BASIC SCROLLOVER BUTTON LINK*/

.buttonlinkOLD {margin:30px auto 15px auto !important;	}
.buttonlinOLDk a {font-size:18px; text-decoration: none; background-color:#00276b; color: #ccc; padding:20px 10px; border:#FFF solid 1px; border-radius: 6px;}
.buttonlinkOLD a:hover {background-color:#000; color: #FFF;}

.buttonsmall {margin:30px auto 30px auto !important;	}
.buttonsmall a {font-size:16px; text-decoration: none; background-color:#00276b; color: #ccc; padding: 10px; border:#FFF solid 1px; border-radius: 6px; }
.buttonsmall a:hover {background-color:#000; color: #FFF;}

.buttonlink a, .buttonlink2 a:link {background-color:#eee; text-decoration: none; color: #00276b; padding:8px; margin:2px; font-size:18px; border:1px #aaa solid; border-radius: 3px; float:left;}
.buttonlink a:visited {color: #00276b;}
.buttonlink a:hover {background-color:#000; color: #FFF;}
.buttonlink a:active {color: #FFF; background-color:#00276b;}


.buttonlink2 a, .buttonlink2 a:link {background-color:#eee; text-decoration: none; color: #00276b; padding:8px; margin:2px; font-size:18px; border:1px #aaa solid; border-radius: 3px; float:left;}
.buttonlink2 a:visited {color: #00276b;}
.buttonlink2 a:hover {background-color:#000; color: #FFF;}
.buttonlink2 a:active {color: #FFF; background-color:#00276b;}

	@media (max-width:600px){
		
		.buttonlink a:link {font-size:13px; padding:6px}	 
		.buttonlink2 a:link {font-size:13px; padding:6px}}

/* groups of button links in gallery pages */


.ssdInPageNav.onBlack { width:96%; max-width:900px; margin:auto; padding:0 2% 10px 2%;}
.ssdInPageNav.onBlack ul {list-style:none; padding:0; margin:0;}
.ssdInPageNav.onBlack li {display: inline-block; text-align: center; padding: 6px 8px; margin:4px 0 0 0; margin-right:1px; list-style:none;	border-bottom:solid 2px #3C3D41; background-color:#3C3D41;}
.ssdInPageNav.onBlack li:last-child {	/* border-right:1px solid #444; */ }
.ssdInPageNav.onBlack li a {width:100%;	height:100%; color:#aaa; text-decoration: none;}
.ssdInPageNav.onBlack li:hover {border-bottom:solid 2px #70cbff;}
.ssdInPageNav.onBlack li.selected {border-bottom:solid 2px #70cbff;}
.ssdInPageNav.onBlack li a:hover {color:#ddd;}

		@media (max-width:600px){
			
	.ssdInPageNav.onBlack ul {margin:5px; clear:both;}
	.ssdInPageNav.onBlack li {width:44%; float:left; margin:2px}	
	}

/*TABLES Basic */


.quicktable{display: table; padding: 0px; margin: 0px 20px 5px 400px;}
.quickrow{display: table-row; padding:0px; border-left: 0px;}
.quickcell{display: table-cell; padding:5px; text-align: right; margin: 1px; border: 0px;}

.table{display: table; padding: 0; margin: 20px 0px ; text-align: center; width:100%;}
.row{display: table-row; padding:0px; border-left: 0px;}
.row:nth-child(2n) {background:#F0F0F0;}
.cell{display: table-cell; padding:5px; text-align: left; margin: 1px; border: 0px;}

.celltop{display: table-cell; padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 2px; text-align: center; margin: 1px; background:#DCDCDC;}
.row1span{display: table-row; display:inline; padding:0px; border-left: 0px;}
.cell1span{display: table-cell; display:inline; column-span:all; padding:5px; margin: 1px; border: 0px; font-style:italic;}

.darktable {display: table; padding: 0px; margin: 20px ; text-align: center; width:96%; color: #ffffff; background: #333; border: 1px solid #000;}
.darkrow {display: table-row; padding:0px; border-left: 0px; border: 1px solid #000;}

.darkrow{display: table-row; padding:0px; border-left: 0px; border: 1px solid #000;}
.darkrow:nth-child(2n) {background: #444; border-right: 1px solid #000;}

.darkcell {display: table-cell; padding:10px; border-right: 1px solid #444; border-right: 1px solid #000; font-family: helvetica, sans-serif; color: #ffffff;}
.darkcell1 {display: table-cell; padding:10px; border-right: 1px solid #444; border-top: 1px solid #444; background: #000; font-family: helvetica, sans-serif; color: #ffffff;}
.darkcell2 {display: table-cell; padding:10px; border-right: 1px solid #000; border: 0px solid #333; background: #333; font-family: helvetica, sans-serif; color: #ffffff;}
.darkcell3 {display: table-cell; padding:10px; border-right: 1px solid #000; border-right: 1px solid #333; border-bottom: 1px solid #333; background: #000; font-family: helvetica, sans-serif; color: #ffffff;}
.darkcell4 {display: table-cell; padding:10px; border:0px; border-top: 0px solid white; border-bottom: 0px solid white; background: #333; font-family: helvetica, sans-serif; color: #ffffff;}
.darkcell5 {display: table-cell; padding:10px; border:0px; border-top: 0px solid white; border-bottom: 0px solid white; background: #333; font-family: helvetica, sans-serif; color: #ffffff; width:100% }


/* FAQ */

.faq { position: relative; display: inline-block; width:48%; margin:5px; float:left; border:0; min-height:300px;}
.faq-content { position: relative; float:left; background-color:#FFF; border-left:1px solid #000; z-index: 1; padding:10px; margin-bottom:40px; margin-right:20px;}

	@media screen and (max-width: 1100px) {
		.faq { position: relative; display: inline-block; width:95%; float:left; border:0; min-height:100px; margin-bottom:20px }
		.faq-content {position: relative; float:left; background-color:#FFF; border-left:1px solid #000; z-index: 1; padding:0px; margin:0px; }}

/* News Items */

.news-item {padding: 15px 0; border-bottom: 1px #ccc dashed;}
.news-item .date {padding-top: 12px; font-weight: bold; color:#666; font-size:16px;}
.news-item p {padding: 0; line-height:14px;}

.list ul {padding-left:5px; list-style-position:outside; text-align:left; line-height:115%; margin:5px; list-style-image: url(../webdesign/plus.gif);}
.list ol {padding-left:5px; list-style-position:outside; text-align:left; margin-top: 5px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; list-style-type: lower-alpha;}
.list li {padding-bottom:5px; margin-left: 10px; }
.list dl {margin-top: 5px; margin-left: 30px; font-size:14px; text-align: left; color: #666; list-style-image: url(../webdesign/plus.gif);}

/* nested image boxes */

.imghighlight1 {width:30%; float:left; padding:10px ; border:0px; }
.imghighlight1 img {width:100%; border:0px;}
.imghighlight1 p {text-align:center; font-family: helvetica, sans-serif; font-size:15px; line-height:19px; margin:3px; font-style:italic;}

.imghalfleft {width:50%; float:left; padding:10px ; border:0px; }
.imghalfleft img {width:100%; border:0px;}
.imghalfleft p {text-align:center; font-family: helvetica, sans-serif; font-size:14px; line-height:16px; margin:3px; font-style:italic;}

.imghalfright {width:40%; float:right; padding:10px; border:0px;}
.imghalfright img {width:100%; border:0px; }
.imghalfright p {text-align:center; font-family: helvetica, sans-serif; font-size:14px; line-height:16px; margin:3px; font-style:italic;}

.imglargeright {width:50%; float:right; padding:10px; border:0px;}
.imglargeright img {width:100%; border:0px; }
.imglargeright p {text-align:center; font-family: helvetica, sans-serif; font-size:14px; line-height:16px; margin:3px; font-style:italic;}

.imgfull {width:46%; float:left; padding:10px 20px 20px 20px; border:0px; }
.imgfull img {width:100%; border:0px; }
.imgfull p {text-align:center; font-family: helvetica, sans-serif; font-size:14px; line-height:16px; margin:3px; font-style:italic;}

.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:1; 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:1; 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; }

	@media screen and (max-width: 600px) {
		
		.imghighlight1 {width:90%; float:left; padding:10px ; border:0px; }
		.imghighlight1 p {font-size:12px; line-height:14px;}
		.imghalfleft p {font-size:12px; line-height:14px;}
		.imgfull p {font-size:12px; line-height:14px;}
		.imghalfright p {font-size:12px; line-height:14px;}	

		.featureboxlarge {background-color:#00276b; 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:#70cbff;}
		.featureboxlarge img {width: 100%; height: auto;}
		.featurebox {background-color:#00276b; 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:#70cbff;}
		.featurebox img {width: 100%; height: auto;}
		.desc {font-family: 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, sans-serif; color:#000; display: inline-block; vertical-align:top;}
		.whitebox img {width: 100%; height: auto;}
		.imglargeright {width:100%; float:right; padding:10px; border:0px;} }

/* subscript spacing fix */
	
sup, sub {vertical-align: baseline; position: relative; top: -0.3em;}
sub {top: 0.3em;}


/* Expanded Gallery */

	.gallerytop {width:100%; text-align:center; margin:auto; padding:50px 0 50px 0; } 
	.gallerylarge {width:74%; margin:auto; padding-left:50px; }
	.galleryview {width: 30%; height: 250px; margin: 10px; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; border-top:solid 1px #000; background:#000; }
	.galleryview .mask, .galleryview .content {width: 100%; position: absolute; overflow: hidden; top: 0; left: 0; border-top:solid 1px #fff; }
	.galleryview img {display: block; position: relative; }
	.galleryview h2 {color: #fff; text-align: center; position: relative; font-size: 17px; padding: 15px; background-color: #00276b; margin: 0px 0 0 0; }
	.galleryview p { font-size: 14px; position: relative; color: #fff; padding: 20px; text-align: center; }
	.galleryview p.caption { font-size: 14px; line-height:16px; position: relative; color: #fff; padding: 20px; text-align: center } 
	.galleryview a.info {display: inline-block; text-decoration: none; color: #fff; box-shadow: 0 0 1px #000;	 text-align:center; margin:2px; background-color:#00276b; padding:6px; border:#FFF solid 1px; border-radius: 4px; }
	.galleryview a.info:hover {box-shadow: 0 0 5px #000; background:#000;}
	.gallery-item img {width:100%; transition: all 0.2s linear; }
	.gallery-item .mask {opacity: 0; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.8); transition: all 0.4s ease-in-out; }
	.gallery-item h2 {transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; }
	.gallery-item p {transform: translateY(0px); opacity: 0; transition: all 0.2s linear; padding: 10px;}
	.gallery-item a.info{opacity: 0;	transition: all 0.2s ease-in-out; }
	.gallery-item:hover .mask {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
	.gallery-item:hover h2, .gallery-item:hover p, .gallery-item:hover a.info {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	 filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
	.gallery-item:hover p {-webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; }
	.gallery-item:hover a.info {-webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; }

		@media screen and (max-width: 1400px) {
			
			.galleryview {width: 46%; }
			.galleryview p.caption { font-size: 13px; line-height:15px; } }

		@media screen and (max-width: 750px) {
			
			.gallerylarge {padding-left: 0px}
			.galleryview {width: 95%; height: auto; }
			.galleryview p.caption { font-size: 12px; line-height:14px; } }



/* sUB HEADERS */

	.subheadermain {background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); transition: background-image 0.5s linear; margin-bottom:0; padding-top:150px}
 

	.romancircle {border: solid 2px #00276b; background-color:#000; height: 30px; width: 30px; -moz-border-radius:75px; -webkit-border-radius: 75px; border-radius:75px; float:left; margin-top:15px; margin-right:10px; margin-bottom:30px }
	.tinycircle1 { background-color:#00276b; height: 9px; width: 9px; -moz-border-radius:75px; -webkit-border-radius: 75px; border-radius:75px; float:left; margin-top:45px ;}
	.tinycircle2 { background-color:#00276b; height: 6px; width: 6px; -moz-border-radius:75px; -webkit-border-radius: 75px; border-radius:75px; float:left; margin-left:-12px; margin-top:10px; margin-right:10px }
	h2.romansubhead{line-height:102%; margin-left:50px; color:#FFF; font-weight:400; text-transform:none }
	h3.romansubhead{padding-bottom:5px; border-bottom:2px #00276b solid; color:#999; margin:0 30px 0 20px;  font-weight:200; text-transform: uppercase; font-size:14px }
	
		@media(max-width:600px){	.romancircle {display: none;} 	.tinycircle1 {display: none}	.tinycircle2 {display: none }	h2.romansubhead{margin-left:0px} h3.romansubhead{margin-left:0px } 	}
	
/* CONTENT WRAP 800 MAX */

		.contentWrap {		max-width:900px; /* constrain content so it's more readable */
		margin:0 auto; /* center it */ }
	
		.innercontent {max-width:900px; margin:auto}
	
/* header BANNER VARIATIONS */

.imagecredit {padding:5px 0; font-size:10px; line-height:11px; color:#666}

.bannercredit {float:right; padding:0 20px 0 20px; font-size:9px; color:#666}



.headerDM{ background-attachment:fixed ; margin:0px auto 0 auto; z-index:3; top:0px; padding:0px; background-image:url(../webdesign/darkmatter-banner.jpg); background-repeat: no-repeat; background-size: cover; width:100%;} 

.headerINFRARED{ background-attachment:fixed ; margin:0px auto 0 auto; z-index:3; top:0px; padding:0px; background-image:url(../webdesign/infrared-banner.jpg); background-repeat: no-repeat; background-size: cover; width:100%;} 

.headerINST{ background-image:url(../webdesign/Inst-banner.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 

.headerCORN{ background-image:url(../webdesign/corn-banner.png); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 

.headerWFI1 { background-image:url(../webdesign/wfi-banner.png); ; background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 

		
.headerFAQ { background-image:url(../webdesign/DarkEnergyExpanse-BG.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 
		
.headerNR { background-image:url(../webdesign/ngrbanner.png); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 
		
.headerRST { background-image:url(../webdesign/satellite-BG.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 

.headerGAL { background-image:url(../webdesign/satellite-BG.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;}


 
 
@media(max-width:600px) {.headerGAL{ background-image:url(../webdesign/satellite-BG-crop.jpg); background-repeat: no-repeat; background-size:cover}	}

.headerKID{ background-image:url(../webdesign/kidsbanner3.jpg); background-repeat: no-repeat; background-size: cover; } 

.headerBLU { background-image:url(../webdesign/romaninblue.png); background-repeat: no-repeat; background-size: 80%; } 
 
 @media(max-width:600px){.headerBLU { background-image:url(../webdesign/romaninblue.png); background-repeat: no-repeat; background-size: 100%; } 	} 
	


.headerLR { background-image:url(../images/education/stem-v5.png); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 

.headerOBSERV { background-image:url(../webdesign/Roman_Mission_Details-BG.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 
		@media(max-width:600px) {.headerOBSERV { background-image:url(../webdesign/Roman_Mission_Details-BG2.jpg); background-repeat: no-repeat; background-size: cover; top:0; width:100%; } 	}

 .headerMICRO { background-image:url(../webdesign/microlensing-bg.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 
		@media(max-width:600px){.headerMICRO { background-image:url(../webdesign/microlensing-small.jpg); background-repeat: no-repeat; background-size: cover; top:0; width:100%;} 	}
	
 .headerEXO { background-image:url(../webdesign/Brown_Dwarf_banner1.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 
		@media(max-width:600px){.headerEXO { background-image:url(../webdesign/Brown_Dwarf_Still_print.jpg); background-repeat: no-repeat; background-size: cover; top:0; width:100%;} 	}

 .headerEXO1 { background-image:url(../webdesign/exoplanet-jpl-illustration1.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; width:100%;} 
		@media(max-width:600px){.headerEXO1 { background-image:url(../webdesign/exoplanet-jpl-illustration1.png); background-repeat: no-repeat; background-size: cover; top:0; width:100%;} 	}

 .headerEXO2 { background-image:url(../webdesign/exoplanet-jpl-illustration2.jpg); background-repeat: no-repeat; background-size: cover; width:100%;} 
		@media(max-width:600px){.headerEXO2 { background-image:url(../webdesign/exoplanet-jpl-illustration2.png); background-repeat: no-repeat; background-size: cover; top:0; width:100%;} 	}

 .headerEXO3 { background-image:url(../webdesign/exoplanets-banner.jpg); background-repeat: no-repeat; background-size: cover; width:100%;} 
		@media(max-width:600px){.headerEXO2 { background-image:url(../webdesign/exoplanets-banner.jpg); background-repeat: no-repeat; background-size: cover; top:0; width:100%;} 	}


/* SCI Containers , scrollover image + info */


/* original 2 item */
	.SCIcontainer {position:relative; width:48%; float:left; margin:1%; border:0; }
	.SCIimage {display:block; width:100%; height:auto;}
	.SCIoverlay {position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%; opacity:0; transition:.5s ease; background-color:#00276b;}
	.SCIcontainer:hover .SCIoverlay {opacity:.9;} 

 	@media screen and (max-width:500px) {
	.SCIcontainer {position:relative; width:98%; float:left; margin:2%;}
	.SCIimage {display:block; width:100%; height:auto;}
	.SCIoverlay {position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%; opacity:0; transition:.5s ease; background-color:#00276b;}
	.SCIcontainer:hover .SCIoverlay {opacity:1;}
	} 

/* original 3 item */
	.SCIcontainer3 {position:relative; width:30%; float:left; margin:1%; border:0; }
	.SCIimage3 {display:block; width:100%; height:auto;}
	.SCIoverlay3 {position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%; opacity:0; transition:.5s ease; background-color:#00276b;}
	.SCIcontainer3:hover .SCIoverlay3 {opacity:.9;} 
 
 	@media screen and (max-width:900px) {
 .SCIcontainer3 h1 {font-size:17px; line-height:16px}
 .SCIcontainer3 p {font-size:12px; line-height:13px}		
}
/* revised 3 item */
 	@media screen and (max-width:640px) {
	.SCIcontainer3 {position:relative; width:98%; float:left; margin:2%; height:250px; overflow: hidden; }
	.SCIimage3 {display:block; width:100%; height:auto; }
	.SCIoverlay3 {position:absolute; height:250px; top:0; bottom:0; left:0; right:0; width:100%; opacity:0; transition:.5s ease; background-color:#00276b;}
	.SCIcontainer3:hover .SCIoverlay3 {opacity:1;}
	.SCIcontainer3 h1 {font-size:20px; line-height:16px}
 	.SCIcontainer3 p {font-size:16px; line-height:19px; margin:30px}	
	} 


	.SCIcontainer3b {position:relative; width:31%; float:left; margin:1%; border:0; }
	.SCIimage3b { width:100%; margin:auto; height:auto; padding:2px }
	.SCIoverlay3b {position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%; opacity:0; transition:.5s ease; border: solid 2px #e2433b; }
	.SCIcontainer3b:hover .SCIoverlay3b {opacity:1;} 
 
 	@media screen and (max-width:900px) {
 .SCIcontainer3b h1 {font-size:24px; line-height:16px}
	
}

 	@media screen and (max-width:640px) {
	.SCIcontainer3b {position:relative; width:96%; float:left; margin:1%; }
	.SCIimage3b {display:block; width:99%; padding:0px }
	.SCIoverlay3b {position:absolute; top:0; bottom:0; left:0; right:0; width:99%; transition:.5s ease; border: solid 2px #e2433b; }
	.SCIcontainer3b:hover .SCIoverlay3b {opacity:1;}
	.SCIcontainer3b h1 {font-size:24px; line-height:16px} 
	} 



/* NEWSROOM ADDS */

	h1.newshead { color:#000; font-weight:700; animation: mymove 1s ease-out forwards; animation-iteration-count: 1; font-size:40px; text-align:center}

			@keyframes mymove
			{ from { color:#FFF; font-size:1px }
			 to { color:#000; font-size:50px }}
	

			
	
/* CREDIT FLOAT RIGHT*/
	
	.credit {width:40%; float:right; padding-left:2%; border-top:2px #ddd dashed; border-bottom:2px #ddd dashed; clear:both; margin:20px 0 20px 40px; font-size: 12px; line-height:16px; }
		.credit p { font-size: 12px; line-height:16px;  color:#666; }
 
/* CAPTION */
	p.caption {text-align:justify;  color:#666; padding:0; margin-top:5px; margin-bottom:30px; font-size: 12px; line-height:16px;}


/* FAQ items */

	.faqPair { max-width: 800px; padding:10px 0; margin: 10px auto; border-bottom:2px #ddd dashed }
	.faqPair H3 { color: #000;font-family: helvetica,Arial,sans-serif; font-weight: 900;font-size: 22px;}
	.faqPair P { color: #000; margin-left: 8px;}

		@media (max-width:600px){ .faqPair H3{font-size: 18px;} }
 

/* EXOplanets subhead */

	.exosubheadouter {width:550px; margin:40px auto; display:block; clear:both}
	.exosubhead a:hover {border-bottom:solid 0px #e2433b;}
	.exosubhead a:link{color:#e2433b;}
	.exosubhead a:visited{color:#e2433b;}
	.exosubhead {color:#e2433b; text-align:center; line-height:50px; float:left; padding:0 5px; display:block;}

		.miniexosubheadouter {display:none}
		.miniexosubhead	{display:none}	
		
			@media (max-width:600px)	{
				
		.exosubheadouter {display:none}
		.exosubhead	{display:none}	
		
	.miniexosubheadouter {width:300px; margin:40px auto; display:block; clear:both }
	.miniexosubhead a:hover {border-bottom:solid 0px #e2433b;}
	.miniexosubhead a:link{color:#e2433b;}
	.miniexosubhead a:visited{color:#e2433b; }
	.miniexosubhead {display:block; color:#e2433b; line-height:50px; float:left; padding:0 5px; }			
	}
 

 

/* Dark Energy subhead */

	.darksubheadouter {width:700px; margin:40px auto; display:block; clear:both}
	.darksubhead a:hover { }
	.darksubhead a:link{color:#e2433b;}
	.darksubhead a:visited{color:#e2433b;}
	.darksubhead {color:#e2433b; text-align:center; line-height:50px; float:left; padding:0 5px; display:block;}
	.minidarksubheadouter {display:none}
	.minidarksubhead	{display:none}	
		
	@media (max-width:666px)	{
	.darksubheadouter {display:none}
	.darksubhead	{display:none}	
	.minidarksubheadouter {width:350px; margin:40px auto; display:block; clear:both }
	.minidarksubhead a:hover { }
	.minidarksubhead a:link{color:#e2433b;}
	.minidarksubhead a:visited{color:#e2433b; }
	.minidarksubhead {display:block; color:#e2433b; line-height:50px; float:left; padding:0 5px; }			
		}
 

 
/* tech resources outer boxes with 2 cols */
	
	.keybox {width:100%; border:solid 4px #e2433b; border-radius:10px; padding:20px}
	.addbox {width:100%; border:solid 4px #70cbff; border-radius:10px; padding:20px}
	.half {width:48%; margin:1%; float:left }
	.half h4{color:#00276b; font-weight:600; font-size:130%; padding-bottom:10px}
	.half  li{padding-left:0px}
	 

	@media screen and (max-width: 600px) {
	.keybox {width:90%; border:solid 0px #e2433b; padding:20px; margin-top:20px; border-top:4px #e2433b   solid;}
	.addbox {width:90%; border:solid 0px #70cbff; padding:20px;  margin-top:20px; border-top:4px #70cbff  solid;}
	.half {width:100%; margin:1%; float:left }
	}
		

/* DOTTED BREAK */

	.breakline {border-bottom:2px #ddd dashed; clear:both; margin:20px 0 20px 0;}
	.breaklinered {border-bottom:2px #e2433b  dashed; clear:both; margin:20px 0 20px 0;}
	.breaklineblue {border-bottom:2px #70cbff  dashed; clear:both; margin:20px 0 20px 0;}



		
/* Pop out Text box */
	
.tooltip {  position: relative;  display: inline-block;  border-bottom: 1px dotted black;}
.tooltip .tooltiptext {  visibility: hidden;  background-color: black;  color: #fff;  text-align: left;  border-radius: 6px;  padding:10px; width:200%;  position: absolute;   z-index:99; }
.tooltip:hover .tooltiptext {visibility: visible;}
	
.creditpopup {  position: relative;  display: inline-block;  border-bottom: 1px dotted black; font-size:11px; padding:0; margin-top:-25px; float:left;}
.creditpopup .creditpopuptext { border-top: 1px dotted black; visibility: hidden;  background-color: #FFF; font-size:11px;   color: #000;  text-align: left;  padding:10px; width:600%;  position: absolute;  margin:17px 0 0 1px;  z-index:99;}
.creditpopup:hover .creditpopuptext {	visibility: visible;}


	
/* Expand & Collapse  [ Read More ... ]   */

input.read-more {display: none; }
p.read-more-target {font-size: 0; max-height: 0;   opacity: 0;   transition: .25s ease;  padding:0 25px }
input.read-more:checked ~ div.read-more-wrap p.read-more-target {font-size: inherit;  max-height: 999em;   opacity: 1; }
input.read-more ~ label.read-more-trigger:before { content: 'More...';  border:1px solid #666; border-radius:5px; padding:5px; margin:0  20px; }
input.read-more:checked ~ label.read-more-trigger:before { content: 'Collapse';  border-radius:5px; padding:5px; margin:0  20px; }
.read-more-trigger:hover {color:#0099ff }
label.read-more-trigger {cursor: pointer; display: inline-block;   margin:0 }


/* EDUCATION ADDS */

	.kidthumb {float:left; width:200px; padding:0 20px 20px 20px;}

	.edu-container {  width: 100%; margin:0; padding:0; }
	.edutrio {width:33.3%;  margin:0; padding:0; display:table-cell;}
	.edutrio h1{  text-align:center; float:left; margin:0px; padding:20px 0px 20px 0px;  width:100%; height:30px; margin-bottom:20px; line-height:18px;  border-radius:10px; background-image: linear-gradient(#70cbff, #dbfeff);   font-variant-caps: all-small-caps;  }
	.eduinner { width:80%; margin:10px auto; padding:0;}	

	.example {font-variant-caps: all-small-caps; border-bottom:1px solid #00276b; color:#00276b;} 
	.link {border-left:solid 2px  #A3D4FF; border-radius:10px; }
	.faqlink {border-left:solid 2px red; border-radius:10px; padding-left:5px;}

	img.thumbnail {width:100%; border:2px solid white; margin:auto;}
	img.thumbnail:hover {border:2px solid red;}
	
		@media(max-width:1200px){
		 .edutrio h1{ font-size:24px } }
				
		@media(max-width:900px){
		.edutrio {width:100%;  float:left; margin:0; padding:0;}
		.edutrio h1{ padding:20px 0px 20px 0px; height:30px	}
				img.thumbnail {width:50%; float:left; padding:0px; margin-right:20px} }
			




/* Jump to Top  */
	
			
#TopBtn {display: none; position: fixed;  bottom: 10px; right: 10px;  z-index: 99; border: none; outline: none; background-color: #e2433b;  color: white; cursor: pointer; padding: 15px;  border-radius: 10px; font-size: 18px; font-variant-caps: all-small-caps}
#TopBtn:hover {background-color: #555; }



/* FOOTER */


		.footerwrap {  color:#FFF; width:100%; border-top:solid 2px #00276b; padding-top:50px; }


		.footerwrap a:link {text-decoration: none; color: #fff; font-weight:600}
		.footerwrap a:visited {text-decoration: none; color: #fff;  font-weight:600}
		.footerwrap a:hover {text-decoration: underline;}
		.footerwrap a:active {text-decoration: none; color:#e2433b;}
		
		.ssdWfirstFooter { 	display:flex; flex-flow: row; justify-content: space-around; align-content:center; align-items: center; 
			max-width: 1000px; margin:0 auto; color:#FFF; 	}
		.ssdWfirstFooterColumn { width:25%; margin:0 3% 3% 5% ; color:#FFF; } 
		 .ssdWfirstFooter img {  width:100%; height:auto; max-width: 100%; 	} 

			@media (max-width:820px)	{
			.ssdWfirstFooter { flex-flow: column;}
			.ssdWfirstFooterColumn { width:95%; } }

		.socialfooter{max-width:120px; float:left;}
		.socialfooter img{width:50px; }
		.social{padding:4px; float:left; border-bottom:solid 2px transparent }
		.social:hover {border-bottom:solid 2px #e2433b;}

		 .footersubhead { font-variant-caps: all-small-caps; font-size:20px; line-height:16px; color:#70cbff ; text-align:center; padding-bottom:10px }

		.partners{width:31%; padding:1%; margin:auto; float:left}
		.partners img {padding:0; margin:0; width:100%; float:left;  border:2px solid #FFF}
		.partners img:hover {border:2px solid #e2433b;}
		.partners p {padding:20px}


			@media screen and (max-width: 600px) {
		.partners{padding-top:5%; margin:auto; width:96%}
		.partners img {padding:0; width:100%; margin:auto; float:none;  border:2px solid #FFF}
		.partners img:hover {border:2px solid #e2433b;} }





/* LINK ARROW  */


		.arrow-right-circle {color:#e2433b}	
		.arrow-right-circle :hover{color:darkred}	









/* SUB DROPDOWN MENUS  */


.subdropbtn { background-color:#00276b; color: white;  padding: 16px; font-size: 16px; margin:5px 10px 0px 0; border-radius:3px;  border:solid 1px #000 }
.subdropdown { position: relative; display: inline-block; float:right; margin:0px;  }
.subdropdown-content { display: none; position: absolute; background-color:#00276b; float:right; z-index: 1; padding: 16px; margin-top:1px; font-size:14px; border-radius:3px}
.subdropdown-content a { color:#FFF; text-decoration: none; float:left; font-weight:400}
.subdropdown-content a:hover {background-color:#00276b; color:#FFF;  text-decoration: underline;  }
.subdropdown:hover .subdropdown-content {display: block; }
.subdropdown:hover .subdropbtn {background-color:#000;  border:solid 1px #00276b }
	

	@media(max-width:600px){
		.subdropbtn  { clear:both;      }
		.subdropdown {  width:100%;  margin-bottom:60px;   }					}