@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 */
.ssdIconBarAndPopLayerWrap { /* wraps the icon and menu */
position:absolute; /* this is going to be floating over webcam image */
top: 0px;
left: 0px;

display: block; /* create icon bar */

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

}
 
.ssdIconBarAndPopLayerWrap.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 */ 

}


.ssdIconBarWrap  {  /* wraps icons and title text zone */
margin:0;
padding:4px 0 0 8px ; 
position:relative;  /* to position children */

width:100%; /* create an overlay BG for titles */
height: 52px;  /* 52px ends this just above image timestamp on the "-600px" version used in homePage widget. Fixed height to keep info layers from jumping if this were to autosize to content. */

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

.ssdIconBarWrap:hover  { 
background:url(../../widgetImageCache/blackTrans50.png) repeat; 
}


.ssdMenuIconTitleZone  {
/* testing...  
border: 1px solid #00ff00;  
*/

margin:0;
padding: 0px 0px 3px 13px;
color:#ffffff;
width:100%; /* create an overlay BG for titles */
height: 18px;  /* mainly fixed height to keep info layers from jumping if this were to autosize to content. */

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

position:absolute;
top: 40px;   
left:0px;  


/* for text content that explains icon purpose */
font-family:arial, helvetica, san-serif; 
font-weight:normal;
font-size: .7em;  /* was 1.1 */
letter-spacing:1px;
line-height:100%;

text-transform:none;  /* was uppercase */  
}

.ssdMenuIconTitleZone B { 
/* BOLD for TITLE KEYWORDS */
font-family:arial black, arial, helvetica, san-serif; 
font-weight:bold;
font-size: .8em;  /* was 1.1 */
line-height:100%;
}

.ssdMenuIconTitleZone STRONG { 
/* BOLD for TITLE KEYWORDS */
font-family:arial black, arial, helvetica, san-serif; 
font-weight:bold;
font-size: .8em;  /* was 1.1 */
line-height:100%;
}


.ssdMenuIconTitleZone .bold { 
/* BOLD for TITLE KEYWORDS */
font-family:arial black, arial, helvetica, san-serif; 
font-weight:bold;
font-size: .8em;  /* was 1.1 */
line-height:100%;
}




.ssdIconBarWrap:hover .ssdMenuIconTitleZone  {  
/* 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 */
}


.ssdIconBarWrap .ssdMenuIcon1 {  /* 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;  
height:37px; 
background-image:url(../../widgetImageCache/iconInfoGrey.png);
}

.ssdIconBarWrap .ssdMenuIcon1:hover {
background-image:url(../../widgetImageCache/iconInfoWhite.png);
}

.ssdIconBarWrap .ssdMenuIcon1.open { 
background-image:url(../../widgetImageCache/iconInfoBriteGold.png);
}

/*
.ssdIconBarWrap .ssdMenuIcon1.open:hover { 
background-image:url(../../widgetImageCache/iconInfoBriteGoldX.png);
}
*/

.ssdIconBarWrap .ssdMenuIcon2 {  /* 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;  
height:37px; 
background-image:url(../../widgetImageCache/iconPlayGrey.png);
}

.ssdIconBarWrap .ssdMenuIcon2:hover {
background-image:url(../../widgetImageCache/iconPlayWhite.png);
}

.ssdIconBarWrap .ssdMenuIcon2.open { 
background-image:url(../../widgetImageCache/iconPlayBriteGold.png);
}

/*
.ssdIconBarWrap .ssdMenuIcon2.open:hover { 
background-image:url(../../widgetImageCache/iconPlayWhite.png);
}
*/


.ssdIconBarWrap .ssdMenuIcon3 {  /* 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;  
height:37px; 
background-image:url(../../widgetImageCache/iconReloadGrey.png);
}

.ssdIconBarWrap .ssdMenuIcon3:hover {
background-image:url(../../widgetImageCache/iconReloadWhite.png);
}

.ssdIconBarWrap .ssdMenuIcon3.open { 
background-image:url(../../widgetImageCache/iconReloadBriteGold.png);
}

/*
.ssdIconBarWrap .ssdMenuIcon3.open:hover { 
background-image:url(../../widgetImageCache/iconReloadWhite.png);
}
*/

.ssdIconBarWrap .ssd2ndTierControls3 {  /* secondary control form for icon 3 - revealed onclick */
visibility:hidden; /* note I use visiblilty here and toggle it in code so that I can use inline-block for display to achieve desired layout. Needed since jquery.toggle() changes display to block|none and therefore messes up layout. */
display:inline-block;
margin: 0;
padding: 0;
height:37px; 
position:relative;  /* center align with icons 37px high */
bottom: 12px;  
left:0px;  

}


.ssd2ndTierControls3 FORM, .ssd2ndTierControls3 SELECT, .ssd2ndTierControls3 BUTTON {
display: inline-block;/* line em up in a row */
}


.ssdIconBarWrap .ssd2ndTierControls3 SELECT {
color: #fff;
border-radius: 4px;
padding: 2px;
border: 1px solid #aaaaaa;
background-image: url();
background-color: #333;

}

.ssd2ndTierControls3 BUTTON {  /* go button */
color: #FC3;
border-radius: 4px;
padding:3px 6px 3px 6px;
margin-left: 8px;
border: 1px solid #aaaaaa;
background-image: url();
background-color: #333;
}

.ssd2ndTierControls3 BUTTON:hover {  /* go button */
color: #FC3;
border: 1px solid #FC0;
background-color:#000;
}


.ssdIconBarWrap .ssd2ndTierControls3 OPTION {

}


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

.ssdPopMenu, .ssdPopMenu1, .ssdPopMenu2, .ssdPopMenu3 {
	
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*/

margin:auto; /* center the element */

color:#ffffff; 

padding: 20px 10px 15px 15px;
 
/* width:90%;

width:800px;
max-height:350px;
*/

}

.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:10px 0 0 0;
padding:0;
}

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

font-family:arial, helvetica, san-serif;  
font-weight:bold;
font-size: 12px; 
line-height:120%;
text-transform:none;
color:#888;

margin:0;
padding:0;
}

.ssdPopMenu ul.relatedLinks { /* related links embedded in descriptions */
	margin: 5px 0 5px 15px;
	list-style-position:inside;
	font-size:12px;
}

.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 */

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

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


}

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

.ssdMenuIconTitleZone     {
font-size: 1.0em;
}


}