@charset "utf-8";
/* JWST HEADER WIDGET CSS Document */


#jwstHeader {
width:100%;
height:70px;  			/* logo and callout slices are 65px so a little buffer here */
overflow:hidden;

border-bottom:solid 2px #444444;
background-image:url(images/homeHeaderBgGLowTrans.png);
background-repeat: repeat-x;
background-position: bottom;

position:relative;
z-index:200; /* above mask layer which is 150 */
}

#jwstHeaderPageWidth {  /* this inner wrapper constrains  and centers header content to page width while BG spreads to browser width */
width:950px;
height:70px;  			/* logo and callout slices are 65px so a little buffer here */
overflow:hidden;
margin: 0 auto; 
}


#jwstJumpMenu {  /* header is first div on page, this is VERY first DIV in the header. hidden links for assistive technologies to JUMP over stuff to main nav and content - !!! should be a bunch of 1px images trans */
font-size: 1px;
color:#000000;
/* visibility:hidden; /* NOTE- hiding this with 1px sz and link color */
position:absolute; /*  take it OUT of the header flow  so it doesnt mess with the layout of the visible part of header for sighted users */
z-index:100000;  /*   float above the rest of the header so it 
/* make ONE of the links, SERIALIZE page show all divs */
}

#jwstJumpMenu a { /* make this blend into BG to visually hide it.*/
color:#000000;  /* black to blend into bg */.
text-decoration:none;
}

#jwstNasaMenuIcon {
width:114px;
height:65px;
background-image:url(images/moreNasaButton.gif);
background-repeat:no-repeat;
background-position: -228px 0px;  /* nasa icon triState graphic is 114px per state */

margin-left: 10px;
margin-right: 0;
}

#jwstNasaMenuIcon:hover {
background-image:url(images/moreNasaButton.gif);
background-repeat:no-repeat;
background-position: -114px 0px;  /* nasa icon triState graphic is 114px per state */
}

#jwstNasaMenuIcon.open { 
/* set this with JQUERY, position so CLOSE X is showing with ICON */
background-image:url(images/moreNasaButton.gif);
background-repeat:no-repeat;
background-position: -0px 0px;
}



#jwstMoreMenuIcon {
width:96px;
height:65px;
background-image:url(images/moreJwstButton.gif);
background-repeat:no-repeat;
background-position: -206px 0px;

margin-left: 0px;
margin-right: 10px;
}

#jwstMoreMenuIcon:hover {
background-image:url(images/moreJwstButton.gif);
background-repeat:no-repeat;
background-position: -103px 0px;
}

#jwstMoreMenuIcon.open { 
/* set this with JQUERY, position so CLOSE X is showing with ICON */
background-image:url(images/moreJwstButton.gif);
background-repeat:no-repeat;
background-position: -0px 0px;
}



#jwstMoreMenu {
width:800px;
max-height:440px;
background-color:#000000; 
border-left: solid 4px #444444;
border-right: solid 4px #444444;
border-bottom: solid 5px #444444;

background-image:url(images/homeFooterBgGLowTrans.png);
background-repeat: repeat-x;
background-position: top;

-webkit-border-bottom-left-radius: 		12px;	/* webkit for old safari/chrome */
-webkit-border-bottom-right-radius: 	12px;
-moz-border-radius-bottomleft: 			12px;		/* old gecko engine - ffox etc */
-moz-border-radius-bottomright: 		12px;
border-bottom-left-radius: 				12px;			/* stds compliant css 3 */
border-bottom-right-radius: 			12px;

padding-top: 15px;  /* a little extra on left for extra open gutter on left edge of content */
padding-left: 15px;  /* a little extra on left for extra open gutter on left edge of content */


position:absolute;
left:50%;
top: 70px;
z-index: 201;  /* be sure this is above mask layer and header */

overflow:auto;

margin: 0px -400px; /* -3px to cover using 50% negative margin method  */
display:none;
}

.jwstMoreMenuBgImageWrapper {
width:100%;
height:100%;
overflow:hidden;
background-image:url(images/jwstvector_1k_right.png);
background-repeat: no-repeat;
background-position: 200px  -170px;
}
.jwstMoreMenuColumn {
width:30%;
margin: 1.5%;
margin-top: 20px;  /* a little open breating room at top */
color:#bbbbbb;  /* h, p  and desc text will inherit this. */
}

.jwstMoreMenuColumn h2 {
font-size: 140%;
font-weight:900;
font-family: Arial, sans-serif;
margin:0;
padding:0;
}

.jwstMoreMenuColumn p {
font-size: 80%;
margin: 0 0 12px 0; /* assumes there is ONE paragraph immed preceding the nav block */

/* these styles should have been inherited from body, BUT LEGACY jwst.css P {} is ADDING styles will override below. !!! remove when jwst.css is removed */
color:#ffffff; 
font-size: 11px;
text-align: left;
padding-top: 0;
}

.jwstMoreMenuColumn a {
	color: #0099FF;
	text-decoration:none;
	
/* these styles should have been inherited from body, BUT LEGACY jwst.css P {} is ADDING styles will override below. !!! remove when jwst.css is removed */
font-size: 12px;	
}

.jwstMoreMenuColumn a:hover {
	text-decoration:underline;
}



/* NASA MENU *************************************/

#jwstNasaMenu {
color:#cccccc;  

width:800px;
height:355px;
background-color:#000000;
border-left: solid 4px #444444;
border-right: solid 4px #444444;
border-bottom: solid 5px #444444;

background-image:url(images/homeFooterBgGLowTrans.png);
background-repeat: repeat-x;
background-position: top;

-webkit-border-bottom-left-radius: 		12px;	/* webkit for old safari/chrome */
-webkit-border-bottom-right-radius: 	12px;
-moz-border-radius-bottomleft: 			12px;		/* old gecko engine - ffox etc */
-moz-border-radius-bottomright: 		12px;
border-bottom-left-radius: 				12px;			/* stds compliant css 3 */
border-bottom-right-radius: 			12px;

padding-top: 15px;  /* a little extra on left for extra open gutter on left edge of content */
padding-left: 15px;  /* a little extra on left for extra open gutter on left edge of content */

position:absolute;
left:50%;
top: 70px;
z-index: 201;  /* be sure this is above mask layer and header */

overflow:auto;

margin: 0px -400px; /* -3px to cover using 50% negative margin method  */
display:none;
}

#jwstNasaMenu a {
color:#0099cc;
}

#jwstNasaMenu a:hover {
	color: #00bbff;
	
}

.jwstMoreMenuColumn a {
	color: #0099cc;
	text-decoration:none;
	
/* these styles should have been inherited from body, BUT LEGACY jwst.css P {} is ADDING styles will override below. !!! remove when jwst.css is removed */
font-size: 12px;	
}

.jwstMoreMenuColumn a:hover {
	text-decoration:underline;
}



.jwstNasaMenuColumn { /* 5 columns */
width:23%;
margin: 1.0%;
margin-top: 15px;
color:#bbbbbb;  /* h, p  and desc text will inherit this. */
}

.jwstNasaMenuColumn h2 {
color:#cccccc; 
font-size: 120%;
font-weight:900;
font-family: Arial, sans-serif;
margin:0;
padding:0;
}

.jwstNasaMenuColumn p {
font-size: 80%;
margin: 10px 0 15px 0; /* assumes there is ONE paragraph immed preceding the nav block */

/* these styles should have been inherited from body, BUT LEGACY jwst.css P {} is ADDING styles will override below. !!! remove when jwst.css is removed */
color:#ffffff; 
font-size: 11px;
text-align: left;
padding-top: 0;
}


.jwstNasaMenuColumn ul {
width:95%;
margin:0 0 0 0;
padding:0;
list-style: none;
}

.jwstNasaMenuColumn ul li:first-child{
	border-top:solid #222222 1px;

}
.jwstNasaMenuColumn ul li{
	border-bottom:solid #222222 1px;

}


.jwstNasaMenuColumn ul li:hover, .jwstNasaMenuColumn ul li .selected {

}

.jwstNasaMenuColumn ul li a {
	display: block;
	color: #0099cc;
	font-size: 85%;
	/* width: 80%;  /* need room for margins and hightlight character */
	padding: 3px 6px 5px 6px;
	line-height:18px;
	text-decoration:none;
	
/* these styles should have been inherited from body, BUT LEGACY jwst.css P {} is ADDING styles will override below. !!! remove when jwst.css is removed */
font-size: 12px;	
}
.jwstNasaMenuColumn ul li a:link {
}

.jwstNasaMenuColumn ul li a:hover {
color: #00bbff;
background:url(../../widgetImageCache/whiteTrans12.png) repeat;
}

.jwstNasaMenuColumn ul li a:active {

}

.jwstNasaMenuColumn ul li a:visited {

}


