@charset "utf-8";
/* Pop Menu WIDGET CSS Document */
/* minimize to multistate menu icon, pops menu that is 100% width constrained by
   external container */

/* USAGE:  wrap this in a container with a unique id and bind the click event to it.  see the associated .js file  */

/* in THIS usage, the menu WRAPPER box EXPANDs when the menu is DISPLAYED instead of a POP UP/Down */
.ssdPopMenuWrap { /* wraps the icon and menu */
position:absolute; /* this is going to be floating over webcam image */
top: 0px;
left: 0px;

background-color:transparent;
width:100%;
height:auto;  /* to only consume the title area - leaving the webcamm image as clickable */

/* testing...  border: 1px solid #ff0000; */

/* no border
border: 2px solid #cccccc; 
border-radius: 				6px;			
-webkit-border-radius: 	6px;
*/
}
 
.ssdPopMenuWrap.open {  
/* background:url(../../widgetImageCache/blackTrans90.png) repeat; */
background-color:#000000;
width:100%;
height:100%; /* to cover webcamm image fully - NOTE somewhere up chain of containers, there must be a container that sets a HEIGHT or BG image will have no height and not show up */ 

}


.ssdPopMenuTitleWrap  {  /* wraps pop icon and title text */
margin:0px;
padding:4px 0 0 8px ;  
}


.ssdPopMenuTitle  {  
margin:0px;
padding:0;  
padding-left: 4px;

/* for this fork, hidden title is revealed on icon rollover */
visibility:hidden;  /* using this so it DOES take up space in flow for hover target as opposed to display:none */


/* future mod, remove abs pos and build icon into title padding left as bg img */
position:absolute;
top: 9px;
left:44px;  /* to the right of icon with some margin 6px */

/* for menu title next to icon */
font-family:arial black, arial, helvetica, san-serif; 
font-weight:900;
font-size: 1.1em;  /* was 1.5 */
line-height:100%;

text-transform:none;  /* was uppercase */
color:#ffffff;  
text-decoration:none;
}

.ssdPopMenuTitleWrap:hover .ssdPopMenuTitle  {  
/* for this fork, hidden title is revealed on icon rollover */
visibility:visible;  /* using this so it DOES take up space in flow for hover target as opposed to display:none */


}

.ssdPopMenuTitleWrap.open .ssdPopMenuTitle  {  
/* for this fork, hidden title is revealed on icon rollover */
visibility:visible;  /* using this so it DOES take up space in flow for hover target as opposed to display:none */

color:#cccccc;

}

.ssdPopMenuTitleWrap.open:hover .ssdPopMenuTitle  {  
/* for this fork, hidden title is revealed on icon rollover */
visibility:visible;  /* using this so it DOES take up space in flow for hover target as opposed to display:none */

color:#ffffff;

}


.ssdPopMenuTitleWrap .ssdPopMenuIcon {  /* ICON as BG image for css manip of states  */
display:inline-block; /* so titles can be put Next to it with no break */
margin:0;
padding:0;

width:37px;  /*  icon triState graphic is 33px per state wide - but that is accomodated in left padding. width auto to accomodate title */
height:37px; /* menu part of the ALL state graphic is at bottom and 24px tall */

/* server and local test paths here - comment out one */
/*
background-image:url(widgets/widgetImageCache/widgetControlsGroup3StateOnWhite.png);
background-image:url(../../widgetImageCache/widgetControlsGroup3StateOnWhite.png);
background-repeat:no-repeat;
background-position: -0px -136px;  /* 4 rows 34px high, using row 5 top is 136px */


background-image:url(../../widgetImageCache/iconInfoGrey.png);

}

.ssdPopMenuTitleWrap:hover .ssdPopMenuIcon {
/* server and local test paths here - comment out one */
/*
background-image:url(widgets/widgetImageCache/widgetControlsGroup3StateOnWhite.png);
background-image:url(../../widgetImageCache/widgetControlsGroup3StateOnWhite.png);
background-repeat:no-repeat;
background-position: -34px -136px;  /* nasa icon triState graphic is 114px per state */

background-image:url(../../widgetImageCache/iconInfoBriteGold.png);

/*
background-image:url(widgets/widgetImageCache/iconPopMenuMedRoyalBlue.png);
background-image:url(../../widgetImageCache/iconPopMenuMedRoyalBlue.png);
*/
}

.ssdPopMenuTitleWrap.open .ssdPopMenuIcon { 
/* set this with JQUERY, position so CLOSE X is showing with ICON */
/*background-image:url(widgets/widgetImageCache/widgetControlsGroup3StateOnWhite.png);
background-image:url(../../widgetImageCache/widgetControlsGroup3StateOnWhite.png);
background-repeat:no-repeat;
background-position: -68px -136px;
*/


background-image:url(../../widgetImageCache/iconInfoDullGoldX.png);


/*
background-image:url(widgets/widgetImageCache/iconPopMenuMedGrey.png);
background-image:url(../../widgetImageCache/iconPopMenuMedGrey.png);
*/
}

.ssdPopMenuTitleWrap.open:hover .ssdPopMenuIcon { 
/* set this with JQUERY, position so CLOSE X is showing with ICON */
/*background-image:url(widgets/widgetImageCache/widgetControlsGroup3StateOnWhite.png);
background-image:url(../../widgetImageCache/widgetControlsGroup3StateOnWhite.png);
background-repeat:no-repeat;
background-position: -68px -136px;
*/


background-image:url(../../widgetImageCache/iconInfoBriteGoldX.png);


/*
background-image:url(widgets/widgetImageCache/iconPopMenuMedRedXClose.png);
background-image:url(../../widgetImageCache/iconPopMenuMedRedXClose.png);
*/
}





/*  MENU *************************************/

.ssdPopMenu {
	
display:none;  /* starts out hidden */

background-color:#000000;

/* in THIS usage, the menu WRAPPER box EXPANDs when the menu is DISPLAYED instead of a POP UP/Down */
/* so no positioning
position:absolute;
left:40px;
*/
/* to pop menu UPWARD, set the bottom property, top pop menu DOWNward, set the TOP property */
/* top: 0px;  /* will slide downward if top postion is set */
/* bottom:34px; /* will slide upward if bottom pos set.  -4px to cancel out bottom border of asset wrapper */
/*z-index: 201;  /* be sure this is on top to get clicks*/

width:90%;
margin:auto; /* center the element */

color:#ffffff; 

padding: 10px 10px 15px 15px;
 
/*
width:800px;
max-height:350px;
*/

/* curved bottom  */
/* no border on popmenu in this version 
background-color:#ffffff;
border-top: none; 
border-left: solid 3px #47a3da;
border-right: solid 3px #47a3da;
border-bottom: solid 3px #47a3da;

-webkit-border-bottom-left-radius: 		12px;	
-webkit-border-bottom-right-radius: 	12px;
-moz-border-radius-bottomleft: 			12px;		
-moz-border-radius-bottomright: 		12px;
border-bottom-left-radius: 				12px;			
border-bottom-right-radius: 			12px;
*/

/* curved top
background-color:#ffffff;
border-top: solid 3px #47a3da;
border-left: solid 3px #47a3da;
border-right: solid 3px #47a3da;
border-bottom: solid 3px #ffffff;

 
-webkit-border-top-left-radius: 		12px;	
-webkit-border-top-right-radius: 	12px;
-moz-border-radius-topleft: 			12px;		
-moz-border-radius-topright: 		12px;
border-top-left-radius: 				12px;			
border-top-right-radius: 			12px;
*/

/*
background-image:url(images/homeFooterBgGLowTrans.png);
background-repeat: repeat-x;
background-position: top;
*/

}

.ssdPopMenu a {
color:#0066FF;
}

.ssdPopMenu a:hover {
color:#0099FF;
	
}

/* these styles override default - should be applied to submenu ULs to make them into diff column configs - apply directly to ULs */
.ssdPopMenuOneColumn {
width:96% !important;
}

.ssdPopMenuTwoColumn {
width:48% !important;
}

.ssdPopMenuThreeColumn {
width:32% !important;
}

.ssdPopMenu h2 {  /* menu subtitle-  should be place only in FIRST LI */

font-family:arial black, arial, helvetica, san-serif; 
font-weight:900;
font-size: 1.1em; 
line-height:120%;
text-transform:uppercase;
color:#eeeeee;

margin:0;
padding:14px 0 10px 0;
}

.ssdPopMenu h3 {  /* menu subtitle-  should be place only in FIRST LI */

font-family:arial black, arial, helvetica, san-serif;  
font-weight:900;
font-size: .8em; 
line-height:120%;
text-transform:none;
color:#eeeeee;

margin:0;
padding:0;
}

.ssdPopMenu h4 {  /* menu subtitle-  should be place only in FIRST LI */

font-family:arial black, arial, helvetica, san-serif;  
font-weight:900;
font-size: .7em; 
line-height:120%;
text-transform:none;
color:#eeeeee;

margin:0;
padding:0;
}


.ssdPopMenu p {  /* menu short desc - optional - should be place only in FIRST LI if used  */
color:#cccccc;  /* deemph from title for easier title scanning */
font-size: 80%;
line-height: 120%;  /* tighten up a bit here, short lines and only 1-3 */
padding: 0 !important;
margin: 0 0 12px 0 !important;; /* assumes there is ONE paragraph immed preceding the nav block */
}





.ssdPopMenu a {
	/*display: block;*/
	color:#0099bb;
	font-size: 100%;
	/* width: 80%;  /* need room for margins and hightlight character */
	line-height:120%;
	margin-bottom:2px;
	text-decoration:none;
}
.ssdPopMenu a:link {
}

.ssdPopMenu a:hover {
text-decoration:underline;
}

.ssdPopMenu a:active {

}

.ssdPopMenu a:visited {
	color:#0099bb;  /* same color as a, to keep it simple visually */
}


/* ================================================================================================*/

/* media query examples */

@media screen and (min-width: 1300px) {  /* adjustments for super large monitors */

}



@media screen and (max-width: 50em) {  /* base body font=14px=1em 60em=700px */

.ssdPopMenuTitle   {
font-size: 1.2em;
}
} 

@media screen and (max-width: 40em) { /* ~20% less than prev width query = ~ 560px */
.ssdPopMenuTitle     {
font-size: 1.1em;
}


}

@media screen and (max-width: 25em) { /* 20% less ~ 350px */

.ssdPopMenuTitle     {
font-size: 1.0em;
}


}