@charset "utf-8";
/* JWST WIDGET CSS Document */


#jwstIntro {
color:#cccccc;

width:650px; 		/* size to not create scrolls */
height:250px;

/* border: solid 1px #ff0000;
background-color:#CC99FF;
*/

padding:0;
margin:0;

overflow:hidden;
}


.jwstIntroPanel {
width:100%;
height:100%;

background-color:transparent;
padding:0;
margin:0;
position:relative; /* to position children */
}

/* full width headline */
.jwstIntroPanel h2 {
/* text-transform:capitalize; */
font-size: 120%;
font-weight:900;
font-family: Arial-Black, arial-black, Arial Black, Arial, sans-serif;
margin: 50px 0px 0 30px; /* assumes there is ONE paragraph immed preceding the nav block */
padding:8px 8px 8px 30px;
width:100%;
background:url(../../pageTemplates/baseline/code/images/blackTrans50.png) repeat;
border: 1px solid #333333; 
-webkit-border-radius: 	16px;	/* webkit for old safari/chrome */
-moz-border-radius: 	16px;		/* old gecko engine - ffox etc */
border-radius: 			16px;			/* stds compliant css 3 */
}

/* this is bottom layer but NO a BG Image so easy to code/maintain */
/* this panel underlies entire widget */
.jwstIntroPanelImage  {
position:absolute;   /* relative to  container */
top: 0px;
left: 0px;
z-index:-1;
}

.jwstIntroPanelImage img {
margin: 0px;
padding:0;
width: 100%;  /* this is dynamic scaling, most efficient if image is properly sized but this gives some flexibility.  min size 650px x 250px, so these images MUST be at least 250PX. */
}

.jwstIntroPanelColumn {
width:35%;
height:100%;
padding: 14px 9px 9px 14px;
color:#bbbbbb;  /* h, p  and desc text will inherit this. */

/* this panel floats on top of image */
position:absolute;   /* relative to  container */
top: 60px;
left: 45px;
background:url(../../pageTemplates/baseline/code/images/blackTrans50.png) repeat;
overflow:auto;

display:none;
}



.jwstIntroPanelColumn p {
font-size: 80%;
}

.jwstIntroPanelColumn a {
	color: #0099FF;
	text-decoration:none;
}


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

/* read more link */
.jwstIntroPanelColumn p a {
color:#0099FF;
padding: 0 16px 0 0;
background: url(/Build2/widgets/faqLite/code/images/rightArrowGold.png) right  center no-repeat;
}


.jwstIntroPanelColumn ul {
width:95%;
margin:0 0 0 0;
padding:0;
list-style: none;
}

.jwstIntroPanelColumn ul li:first-child{
	border-top:solid #444444 1px;

}
.jwstIntroPanelColumn ul li{
	border-bottom:solid #444444 1px;

}


.jwstIntroPanelColumn ul li:hover, .jwstIntroPanelColumn ul li .selected {

}

.jwstIntroPanelColumn ul li a {
	display: block;
	color: #0099cc;
	font-size: 85%;
	/* width: 80%;  /* need room for margins and hightlight character */
	padding: 3px 6px 3px 6px;
	line-height:18px;
	margin-bottom:2px;
	text-decoration:none;
}
.jwstIntroPanelColumn ul li a:link {
}

.jwstIntroPanelColumn ul li a:hover {
color: #00bbff;
}

.jwstIntroPanelColumn ul li a:active {

}

.jwstIntroPanelColumn ul li a:visited {

}

/* turn off all panels except first - JS then flips panels */
#jwstIntro.jwstIntroPanel {
display:none;
}

#jwstIntro.jwstIntroPanel:first-child {
display:block;
}