@import url(font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600);

	

@-ms-viewport {
  width: device-width; }
body {
  -ms-overflow-style: scrollbar; }

@media screen and (max-width: 480px) {
  html, body {
    min-width: 320px; } }


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


/*  MAIN PAGE DEFINITIONS */

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


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;  background:#000; }


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; }




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

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

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

/* Search*/

.search { float:right; padding: 0px 15px 0px 15px ;  opacity:1;   border-left:1px solid #FFF ;  }
.search img { opacity:1; }


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

nav{position:relative; margin:0 auto; float:right; padding: 20px 5px 0px 0px;    }
#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: "Raleway",  sans-serif; background:transparent;  }
#cssmenu > ul > li{float:left; border:1px;  text-align:left; }
#cssmenu > ul > li > a{padding:20px 12px 20px 12px; font-size:13px;  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:#003399!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease; text-decoration:none; }
#cssmenu > ul > li.has-sub > a{padding-right:20px;  }
#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; min-width:100% }
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#003366;transition:all .25s ease; width:100% }
#cssmenu ul ul li:hover{background:#003399; width:100% }
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:40px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{padding:11px 15px; text-decoration:none;color:#ddd; min-width:100%}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:1}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff; text-decoration:none;}
#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:#003399;}
#cssmenu ul ul ul li.active a{border-left:0px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:1000px){
nav{width:100%; }
#cssmenu{width:100%; background:#000 ; padding:0px;  }
#cssmenu ul{width:100%; display:none}
#cssmenu ul li{width:100%;border:0px solid #444; margin:0  }
#cssmenu ul li:hover{background:#003399; }
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:transparent;}
#cssmenu ul ul li:hover{background:transparent}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#ddd;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff; text-decoration:underline;}
#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; }
	
	/* changed the top -50 to margin -50  */
	
.button{width:55px;height:46px;position:absolute;right:10px; margin-top:-50px;cursor:pointer;z-index: 12399994; }
.button:after{position:absolute;top:22px;right:29px;display:block;height:7px;width:40px;border-top:5px solid #dddddd;border-bottom:5px solid #dddddd;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:10px;right:29px;display:block;height:5px;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:5px;width:40px;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:40px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
	
	
/*   use this to fix spacing issue after merging other files
.button{width:55px;height:46px;position:absolute;right:10px;top:-50px;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:22px;right:29px;display:block;height:18px;width:40px;border-top:5px solid #dddddd;border-bottom:5px solid #dddddd;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:10px;right:29px;display:block;height:5px;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:5px;width:40px;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:40px;-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:#003399}
#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}
	
.search { float:center; padding:0px ;  opacity:0;  width:0px; visibility: collapse }
.search img { opacity:0;  }	
  }





/* NASA FOOTER */
.footcellwrap {   max-width: 1300px;  padding:20px; margin:auto;    }

.footcellleft { width: 420px;  padding: 10px; margin-top: 30px; float: left ; background:#000; height:100px; }
.footcellleft img  { padding:20px; float:left; position:relative; opacity:1 ;}
.footcellleft img:hover { opacity:.6;}

.footcellright { width: 320px;    padding: 10px;   float: right ; color:#CCC; background:#000;  height:100px;  margin:30px; border-left: 1px solid #aaa; }
.footcellright  img {float:right; padding-top:15px; padding-right:40px;  width:50px;  opacity:1 ;}
.footcellright  img:hover { opacity:1}
.footcellright { list-style:none;  }
.footcellright   a:link, ul li  a:visited { text-decoration:none; color:#CCC; font-size:15px; line-height:23px}
.footcellright   a:hover { text-decoration:underline; color:#CCC;}
.footcellright h1{ position:relative; color:#666;  font-size:28px; padding-top:0px; padding-left:0px; padding-bottom:0px; font-weight:200;}

@media screen and (max-width: 900px)   { 
	
.footcellwrap {  max-width: 320px;  padding:20px; margin:auto;  }
.footcellleft img  { padding:10px; float:left; position:relative;  }
.footcellleft img:hover { opacity:.6;}
.footcellleft { width: 320px;  margin:auto;  background:#000; height:120px; clear:both;  float: right  }
.footcellright {  width: 260px; float: right ; margin:auto; border:0;   clear:both; }
	
}




/* variations */

.papertop { margin-top:90px; }
.pagewrapwhite {background:#FFF;  color:#000; width:100%; padding:50px 0 0 0;  margin:auto;  }
 
.innerspace  { width:100%; max-width:1500px;  margin: auto;  }
.innerspace   img { border:1px solid #666   }
.innerspace  a img:hover { border:1px solid blue; }
	
@media screen and (max-width: 1600px)   { 
.innerspace  { width:90%;  margin: auto;  }	
}

.pagewrapwhite   ul {list-style-type: none; margin: 20px 70px 20px 50px; }
.pagewrapwhite   li { margin: 0px;  border-left: 1px solid #aaa;  padding: 15px 5px 5px 20px; font-size:18px; 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; }



	
@media screen and (max-width: 1500px)   { 
	
.pagewrapwhite {padding:50px 0 0 0 ; margin:auto; width:100%}
.pagewrapwhite   ul {list-style-type: none; margin: 10px; }
.pagewrapwhite   li { margin: 0px;  border-left: 1px solid #aaa;  padding: 5px; font-size:13px; color: #666;  }
.pagewrapwhite ul ul li { margin: 0px;  border: 0px;  padding:5px ; font-size:13px; color: #666;  }
.pagewrapwhite ol ul {list-style-type:square; margin-left:10px ; }
.pagewrapwhite ol ul li { margin: 0px;  border: 0px;  padding:5px ; font-size:13px; color: #666;  }

.quarter { padding:5px; float:left; margin:10px 11px 11px 0px;  border:0px;    width:22% ;  }
.half{ display: block; padding:20px; float:left; margin:5px;  border:0px; width:40% ;}
	
}


.quarter { padding:16px; float:left; margin:10px 11px 11px 0px;  border:0px;    width:20% ;  }
 
.quarter  img { float:left; width:100%;   }
.quarter  img:hover {  opacity:1;}
.quarter  p, h1, h2, h3, h4, h5 { padding-left:0 }
.full { background:#FFF; padding:10px; float:left; margin: auto; border:0px;   width:100%;   }

.fullcenterhighlight {max-width:926px; margin:auto; padding:0px; text-align:center}
.fullcenterhighlight img {width:100%;}


.half{ display: block; padding:10px; float:left; margin:5px;  border:0px; width:45% ;}
.half img{ width:100% } 

.trio {width:30%;  padding: 0px 0px 10px 10px; float:left}






@media screen and (max-width: 900px)   { 
 
.quarter { display: block; padding:10px; float:left; margin:5px;  border:0px; width:42% ;   }

.full { padding:0px; float:left; margin: auto;  border:0px;  width:100%;  }
	
.trio {width:30%;  padding: 0px 0px 10px 10px; float:left}
	
}

@media screen and (max-width: 666px) {
	
.pagewrapwhite {padding-left:0px;  padding-top:30px;  }
 
.quarter  { width:100%;  margin:2px; padding:0px;  float:left}	
.quarter  img { float:left; width:100%; padding-right:0px }	

.half  { width:100%;  margin:2px; padding:10px;  float:left}
.full {width:100%; padding:0; margin:0 }

.trio {width:90%;  padding: 0px 0px 30px 30px; float:left}
}

 

/*TABLES Basic */

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

.table{  display: table; padding: 0px; margin: 20px ;  text-align: center;  width:96%;}
.row{  display: table-row; vertical-align: center; padding:0px; border-left: 0px;}
.row:nth-child(2n) {  background:#F0F0F0;}
.cell{  display: table-cell; vertical-align: top; padding:5px;  text-align: left; margin: 1px; border: 0px  ;}
.celltop{  display: table-cell; vertical-align: top; padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 2px; text-align: center;  margin: 1px; background:#DCDCDC;}

.darktable { display: table; font-size:12px; margin-bottom:10px;   width:100%;  font-family: Arial; color: #ffffff; background: #333;  border: 1px solid #000;}
.darkrow { display: table-row;}
.darkcell1 { display: table-cell; padding:10px; border-right: 1px solid #000;  border-top: 1px solid #333;  background: #444; font-family: Arial; color: #ffffff;}
.darkcell2 { display: table-cell; padding:10px; border-right: 1px solid #000;  border: 0px solid #333; background: #333;  font-family: Arial; 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: Arial; color: #ffffff;}
.darkcell4 { display: table-cell; padding:10px;  border:0px;  border-top: 0px solid white;  border-bottom: 0px solid white; background: #333;  font-family: Arial; color: #ffffff;}
.darkcell5 { display: table-cell; padding:10px;  border:0px;  border-top: 0px solid white;  border-bottom: 0px solid white; background: #333;  font-family: Arial; color: #ffffff;  width:100%  }


@media screen and (max-width: 800px) {
	.table   p {margin:0; font-size:10px; line-height:12px; padding:0; }
 
}

/* CONTENT */


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

h1 {  font-family: "Raleway", Arial,Helvetica,sans-serif; color:#000; padding: 20px  15px 0px 5px; font-size:38px; line-height:39px; font-weight: 500;  }
h2 {  font-family: "Raleway", Arial,Helvetica,sans-serif; color:#000;  padding: 20px 15px 0px 5px; font-size:24px; line-height:29px;  font-weight: 600;   }
h3 {  font-family: "Raleway", Arial,Helvetica,sans-serif; color:#003399;  padding: 20px  25px 0px 5px; font-size:24px; line-height:28px;    float:left; font-weight: 500;  }
h4 {  font-family: "Raleway", Arial,Helvetica,sans-serif; color:#003399;   padding: 20px 5px 5px 5px; font-size:22px; line-height:26px; font-weight: 600;   }
h5 {  font-family: "Raleway", Arial,Helvetica,sans-serif; color:#000;   padding: 20px 5px 5px 5px; font-size:18px; line-height:22px; font-weight: 500;   }
h6 {  font-family: "Raleway",  Arial,Helvetica,sans-serif; color:#ccc; padding: 20px 5px 5px 5px; font-size:15px; line-height:16px; font-weight: 500;  }


p { font-size:16px; line-height:19px;  padding:15px 15px 5px 5px;  color:#666; }

	

header{position:fixed; top:0; left:0; width:100%; background:#000; z-index:99;  padding-top:6px;  height:100px;     }

.headerbox {max-width:1600px;   padding-top:0px;  margin:auto; height:100px; background:#000; }

.nasahead  img { opacity:1; padding:10;   float:left; width:100px;   }
.nasahead  img:hover { opacity:1;} 
.titleimage {width:850px;  float:left; margin: 0 5px 0 5px;  padding:10px 0 0 0; }
.titleimage h1 {  font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px 0px 0px 0px; font-size:30px; line-height:64px; font-weight: 400; float:left;  }
.titleimage img{ width:140px; margin-right:10px; padding-right:5px; float:left; }	


@media screen and (max-width: 1600px)  
	
{ 
header { height: auto;  width:100%; margin:auto;   }
.titleimage {width:330px;  float:left; margin-right:0px;   }
.titleimage img{ width:100px; margin-right:5px; padding:0px; float:left}	
.titleimage h1 {  font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:0;  font-size:14px; line-height:18px; font-weight: 400;   } 
.nasahead  img { opacity:1; padding:0; float:left; width:100px; }
.nasahead  img:hover { opacity:1;} 
}

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

header { height:auto; width:100% }
.titleimage img {width:100px;  float:left; margin-right:20px ; }
.nasahead  img { opacity:1; padding:20px 0 0 0; float:left; width:80px; }
.nasahead  img:hover { opacity:1; } 
	
h1 {  font-family: "Raleway", Arial,Helvetica,sans-serif; color:#000; padding:20px 5px 5px 5px; font-size:24px; line-height:28px; font-weight:600   }
h2 {  font-family: "Raleway", Arial,Helvetica,sans-serif; color:#000;    padding: 20px 25px 10px 5px; font-size:18px; line-height:21px;  font-weight:600    }
h3 {  font-family: "Raleway",  Arial,Helvetica,sans-serif; color:#003399;  padding: 20px 25px 20px 5px; size:14px; font-size:20px;  line-height:22px;  font-weight:600;  float:left;  }
h4 {  font-family: "Raleway",  Arial,Helvetica,sans-serif; color:#003399;   padding:20px 5px 5px 5px; font-size:16px; line-height:20px;  font-weight:600  }
h5 {  font-family: "Raleway", Arial,Helvetica,sans-serif; color:#000;   padding:5px;  font-size:16px; line-height:20px; font-weight: 600;   }
	
p { font-size:14px; line-height:16px;  padding:5px;  color:#666; }
	
}


@media screen and (max-width: 450px)   {
	
.header { height:50px;  width:100%; }

	/*.nasahead  img { opacity:1; padding:10;   float:left; width:50px;   }
		.nasahead  img:hover { opacity:1;}  */
		
.titleimage {width:150px;  float:left; margin: 10px 5px 0 5px;  padding:10px 0 0 0; }

.titleimage h1 { font-size:0px; visibility:hidden; line-height:0; }
.nasahead  img { opacity:1; padding:20px 0 0 10px; float:left; width:60px; }
.nasahead  img:hover { opacity:1;} 
	
}



/*
.nasahead  img { opacity:1; padding:10;   float:left; width:100px;   }
.nasahead  img:hover { opacity:1;} 
.titleimage {width:650px;  float:left; margin: 0 5px 0 5px;  padding:10px 0 10px 0; }
.titleimage h1 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px 20px 0px 0px; font-size:40px; line-height:40px; font-weight: 400; float:left;  }
.titleimage h2 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif;  color:steelblue;  padding: 15px 25px 0px 5px; font-size:17px; line-height:22px; font-weight: 500;  }
.titleimage img{ width:140px; margin-right:10px; padding-right:5px; float:left; }	


@media screen and (max-width: 1300px)  
	
{ 
header { height: auto;  width:100%; margin:auto;   }
.titleimage {width:500px;  float:left; margin: 0 5px 0 5px;  padding:10px 0 10px 0;  }
.titleimage h1 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:5px 20px 0px 0px; font-size:35px; line-height:40px; font-weight: 400; float:left;  }
.titleimage h2 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif;  color:steelblue;  padding: 5px 25px 0px 5px; font-size:15px; line-height:20px; font-weight: 500;  }
.nasahead  img { opacity:1; padding:0; float:left; width:100px; }
.nasahead  img:hover { opacity:1;} 
}

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

header { height:auto;  width:100% }
.titleimage {width:150px;  float:left; margin: 0 5px 0 5px;  padding:10px 0 0 0; }
.titleimage h1 { font-family: "Raleway", "helvetica neue", Arial,Helvetica,sans-serif; color:#ccc; padding:25px 20px 0px 0px; font-size:30px; line-height:30px; font-weight: 400; float:left;  }
.titleimage h2 { font-size:1px; visibility: hidden }
.nasahead  img { opacity:1; padding:20px 0 0 0; float:left; width:80px; }
.nasahead  img:hover { opacity:1;} 

*/


.btn  { background:#003366; padding: 25px; margin-left:15px; text-decoration: none; margin-bottom:10px; margin-right:0px; width:150px;  float:left;}
.btn a  { text-decoration:none;  color: #ffffff;}
.btn:hover { color: #ffffff;  background:#336699;  text-decoration: none;}



.btn2  { background:#003366; padding: 10px; margin:20px; text-decoration: none;   float:left;}
.btn2 a  { text-decoration:none;  color: #ffffff;}
.btn2:hover { color: #ffffff;  background:#336699;  text-decoration: none;}



.btn3  { background:#003366; width:80%; padding: 20px;   text-decoration: none; text-align:center;   margin:auto;}
.btn3 a  { text-decoration:none;  color: #ffffff;}
.btn3:hover { color: #ffffff;  background:#336699;  text-decoration: none;}



/* whats new gallery */

.lgfeature { position:relative;  margin: 10px  10px 50px 10px ; padding:0;  text-align:left;}
.lgfeature img { margin:0; float:left;  padding:0px 20px 15px 0px; width:270px;}
.lgfeature dl { padding:10px 10px 10px 10px; margin:0px 35px 0px 110px; color:#000; text-align:left;}
.lgfeature dt { padding:0; margin:0; font-weight:bold;}
.lgfeature dd { padding:0; margin:0;}
.lgfeature dd a { color:#004d93; text-decoration:none; display:inline;} 
.lgfeature dd  a:visited { color: #004d93; text-decoration:none; display:inline;} 
.lgfeature dd  a:hover { color:#668CC2;  text-decoration:underline; display:inline;}

/* newsroom listing */

.newsitem { position:relative;  margin: 10px  10px 10px 10px ; padding:0;  text-align:left;}
.newsitem img { margin:0; float:left;  padding:0px 10px 10px 0px; width:30px; border:0;}
.newsitem dl { padding:10px 10px 10px 10px; margin:0px 35px 0px 110px; color:#000; text-align:left;}
.newsitem dt { padding:0; margin:0; font-weight:bold;}
.newsitem dd { padding:0; margin:0;}
.newsitem dd a { color:#004d93; text-decoration:none; display:inline;} 
.newsitem dd  a:visited { color: #004d93; text-decoration:none; display:inline;} 
.newsitem dd  a:hover { color:#668CC2;  text-decoration:underline; display:inline;} 

/* gallery */

.gallery { margin:6px;padding:6px; border:0px solid #cccccc; height:auto; width:auto; float:left; text-align:left;}
.gallery img { display:inline; margin:6px;padding:0px; border:1px solid #ffffff;}
.gallery  a:hover img { border:1px solid #000000;   }
.desc { text-align:center; font-weight:normal; width:280px; margin:0px;}

/* team gallery */

.team { background-color:#FFFFFF; margin:6px; padding:20px;   border:1px solid #cccccc;   float:left;   width:220px; height:340px;  }
.team  img { display:inline;   border:1px solid #ffffff; width:215px; float:right; padding:0px}
.team  img  a:hover  { background-color:#336699; border:1px solid #000000;  /* For IE8 and earlier */ }
.teamdesc { text-align:center; font-weight:normal; width:110px; margin:0px; }



/* POP UP BOX*/

.modalDialog  { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8);  z-index:999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none;  overflow-y:scroll; padding-top:100px; }

.modalDialog:target { opacity:1; pointer-events: auto;  }
.modalDialog > div { width: 80%; position: relative; margin: 2% auto; padding: 25px; border-radius: 0px; background:#FFF; }

.close { background: #606061; color: #FFFFFF; line-height: 45px; position: absolute; right: -12px; text-align: center; top: -10px; width: 44px; height: 44px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; }

.close:hover { background: #336699; }





blockquote {border-left: 3px solid purple ; color: purple; padding: 0px 15px 0px 20px; font-size:22px; line-height:28px; font-weight:400; margin:20px 80px 20px 15px;   }

@media screen and (max-width: 600px)   { 
blockquote {border-left: 3px solid  purple ; color: purple; padding: 30px 15px 30px 20px; font-size:16px; line-height:22px; font-weight:400; margin:15px  }
}

/* photos with nested captions  */

.leftfloat {float: left; padding:20px;   width:330px;  color:#666;    }
.leftfloat  img {width: 100%;   opacity:1;  filter:alpha(opacity=100);}

.leftfloatlarge {float: left;  padding:20px;  margin: 0;  width:50%; min-width:300px;  color:#666;    }
.leftfloatlarge img {width: 100%;    opacity:1;  filter:alpha(opacity=100); }

.leftfloatsmall {float: left; padding:0 0 20px 20px;  margin-right:10px;  width:20%; max-width:200px;  color:#666;}
.leftfloatsmall  img {width: 100%;   opacity:1;  filter:alpha(opacity=100);}

.leftfloathalf {float: left; padding:20px; width:45%;  color:#666; min-width: 200px;  }
.leftfloathalf  img {width: 100%;   opacity:1;  filter:alpha(opacity=100);}


.rightfloatlarge {float: right;  padding:20px;  margin: 0;  width:45%; min-width: 200px;  color:#666;  }
.rightfloatlarge  img {width: 100%;  opacity:1;  filter:alpha(opacity=100); }
.rightfloathlarge   p {font-size:12px; padding:0}

.rightfloat { float: right;  padding:20px;  margin: 0;   width:330px;  color:#666; }
.rightfloat  img {width: 100%;  opacity:1;  filter:alpha(opacity=100);}

.rightfloatsmall {float: right; padding:20px;  margin: 0;  width:26%; color:#666;  }
.rightfloatsmall  img {width: 100%;  padding:0px;  opacity:1;  filter:alpha(opacity=100); }

 
@media screen and (max-width: 620px) {
	
.rightfloat, .leftfloatlarge, .rightfloatlarge, .rightfloatsmall, .leftfloathalf, .leftfloatsmall, .leftfloat, .leftfloathalf {width:90%; padding:10px 20px 10px 20px ; margin:auto; float:left;  }
.rightfloat, .rightfloatlarge, .rightfloatsmall, .leftfloathalf, .leftfloatsmall, .leftfloat, .leftfloathalf  img {width:100%;  padding:20px; margin:auto; }	}
		

p.caption { font-size:13px;  line-height:16px;  text-align:left; font-style:italic;  color:#666666; border-left: 1px solid #666 ; left-margin:0; padding:10px}
p.right {  float:right;}


.social {width:100%}
.social  img { opacity:1; margin:20px 3px 3px 0px; padding:0; float:left; width:50px;   }
.social  img:hover { opacity:.6;   }



 /* Dropdown Search*/

.search { float:right; padding: 0px  0px  0px  0px ;  opacity:1;     } 
.dropbtn {  background:transparent;  color: white;   font-size: 16px;   border-left:1px solid #FFF ; border-right:0; border-top:0; border-bottom:0; cursor: pointer;  padding: 0 10px 0 10px;}
.dropbtn:hover, .dropbtn:focus {  }
#myInput {   box-sizing: border-box;  background-position: 14px 12px;
  background-repeat: no-repeat;  font-size: 16px;  padding: 10px;  }
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {  position: relative;  display: inline-block;}
.dropdown-content {  display: none;  position: absolute; right:0px;    background-color: #f6f6f6;  border: 1px solid #ddd;  z-index: 1;}
.dropdown-content a {  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}