@charset "utf-8";
/* ssdInternalPage2.0 css */


/* fonts */

/* Page subtitle display font (h2) and also used in blockquotes: serif italic with style like garamond. Testing shows this is best family hierarchy:

cssTarget {font-family: Garamond, "adobe garamond", "adobe garamond pro",  serif;}

-- this way the web browser will first check if native garamond if installed then native Adobe Garamonds (different but nice) and if not, default serif. All were tested on PC and look ok (no major size diffs as there were mixing these with google fonts, none of which looked better then defaults ) NOTE: Google EB Garamond there's no ITALIC in EB Garamond, so if italic style is applied it doesnt work, therefore, cant use it */


/* reset STYLES */
BODY, HEADER, FOOTER, SECTION, ARTICLE {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
line-height:160%;
padding:0;
margin:0;
}

/*
H1,H2,H3,H4,H5,H6 {
 	font-family: Garamond, "adobe garamond", "adobe garamond pro",  serif;
	font-style:italic;
	font-weight:bold;
}
*/

/* reset BG image and other overrides on page wrapper */
.jwstContentWrapper {  padding-top:0; margin-top:0;  background:#ffffff url(../../widgets/widgetImageCache/hexagonGridFullMirror1000pxLiteTan.png) no-repeat 270px -660px;; }

/* FOR TESTING ONLY!!! -- setting a page wrapper width */
.ssdPageContentWrapper {
	width:100%;

/* this is set on jwstContentWrapper 
	background:#ffffff url(../../widgets/widgetImageCache/hexagonGridHalfMirrorMediumLiteGrey.png) 180px -170px no-repeat ;		/*background:url(../../widgets/widgetImageCache/hexagonGridHalfMirrorMediumLiteGrey.png) 100% -2.5% no-repeat ;	
	*/

}


.ssdPageContentWrapper SECTION {  /* since entire page wrapped in section, set nice wide whitespace margins */
margin:0 3%; /* !!! set over all margins on article instead of sections which may vary */
}

.ssdPageContentWrapper SECTION h3 { /* used as body content paragraph subheadings */

margin-top:20px;
margin-left:-1.5%;  /* width is half that of left margin above,  - outdented align with  "science" title */
color: #A16912;
}


.ssdPageContentWrapper HEADER  {
	margin:0;
	padding:0;	
	padding-top: 10px;
	
	position:relative;
	z-index:98; /* needs to be one less than in-page anchor menu since it overlaps due to relative offsetting layout */
	

}


/**** ARTICLE HEADER CALLOUT CLUSTER:  h1/h2/icon: */
/* wrap the h1/h2 callout to isolate/local relative positioning and height issues */
.ssdPageContentWrapper HEADER .ssdPageCalloutWrap {
	margin:0;
	padding:0;
	margin-top:13px;
	margin-left:1.5%; /* same as body content subtitles */
	margin-bottom:45px; /*create space for h2/icon to live in since they are out of flow and needed gutter below that */
	padding-bottom:20px;  /* create space gutter before content begins. */	

	
/*	height:115px; /* forces a fixed height on this element, else the relative shifted up h2 unsightly margin gap below */
	
	position:relative;	
	
	white-space:nowrap;  /* dont allow contained elements, yellow-line, text and icon to wrap if gets too long */
}

.ssdPageContentWrapper HEADER .ssdPageCalloutWrap H1 {
	font-family:"Arial Black", Arial, sans-serif;
	font-weight:900;
	font-size:76px;
	color:#CFD3DE; /* slate blues lite to darkest  #A0A8B2; #7391B2 darker #536A82; */
	
	margin:0;
	padding:0;	
	line-height:76px;
	opacity: 0.6;
		
}

.ssdPageContentWrapper HEADER .ssdPageCalloutWrap H2 {
	font-family:  Garamond, "adobe garamond", "adobe garamond pro", times, serif;	
	font-style: italic;
	font-weight:600;
	font-size:30px;
	color:#000;
	
	text-transform: none;  /* override any text transform from content.css or other includes. */
	
	letter-spacing:0.004em;
	
	margin:0;
	padding:0;

	margin-left: 6%; 
	
	line-height: 32px;
	position: absolute; /* take out of flow */
	top: 35px;
	width: 95%;
}



.ssdPageContentWrapper HEADER .ssdPageCalloutWrap H2 div.yellowLine{
	height:8px;
	width: 20%;
	background-color: #FC3;
	margin-right: 4px;
	display: inline-block;
	vertical-align:baseline;

}

.ssdPageContentWrapper HEADER .ssdPageCalloutWrap H2 div.icon { /* wraps/constrainst and postions resp icon */
	height:75px;
	width: 75px;
	display: inline-block;
	vertical-align:middle;
	margin:0;
	padding:0;
}

.ssdPageContentWrapper HEADER .ssdPageCalloutWrap H2 img { /* icon */
	width: 100%;  /* resp image, width pri */
	height: auto;
	min-width:100%;
	vertical-align:middle;
	margin:0;
	padding:0;
}

.ssdPageContentWrapper HEADER .ssdPageCalloutWrap H3 { /* poss SUB SUB title */
	font-family: Garamond, "adobe garamond", "adobe garamond pro",  serif;
	font-style: normal;
	font-weight:bold;
	font-size:14px;
	color:#999;
		
	margin:0;
	padding:10px 0 0 0;

	margin-left: 6%; 
	
	line-height: 24px;
	

}


.ssdPageContentWrapper HEADER DIV.quoteWrap  {
	text-align:right;  /* aligns the inline-block to right */
	min-height: 20px; /* for the case where there is no QUOTE on page, adds whitespace to top of page */
}

.ssdPageContentWrapper HEADER DIV.quoteWrap BLOCKQUOTE {
	display:inline-block;
	text-align:left;
	width:70%;
	
	font-family: garamond, times, serif; /* note these were all tested at 600 italic to render at roughly the same size, where as "adobe garamond pro", and noto serif where way to big and heavy */
	font-style:italic;
	font-weight:600;
	font-size:16px;
	line-height: 20px;
	color:#444;  /* was color:#444444; 6B757D */
	letter-spacing:0.03em; /* makes it more ledgible */  
	
	margin:0;
	padding:0;
	margin-left:10px;
	margin-right:-10px; /* tighten up right side, too much gap */
	
	vertical-align:top;
	
}


.ssdPageContentWrapper HEADER DIV.quoteWrap div.leftQuote,
.ssdPageContentWrapper HEADER DIV.quoteWrap div.rightQuote { 
	
	display:inline-block;
	width:21px;
	height:20px;
	
}

.ssdPageContentWrapper HEADER DIV.quoteWrap div.leftQuote {
	vertical-align:top;
	background: url(../../widgets/widgetImageCache/quoteCharRndLeft.png) no-repeat 0 0 ;

}
.ssdPageContentWrapper HEADER DIV.quoteWrap div.rightQuote { 
	vertical-align:bottom;
	background: url(../../widgets/widgetImageCache/quoteCharRndRight.png) no-repeat 0 0 ;
}


/**** ICON PANELS: 
 panels used on sci landing page and else where to set an icon, title, short desc, more link */
.ssdIconPanel {
float:left;
width:22%;
margin-right:3%;

}


.ssdIconPanel H2 {
	font-family: Garamond, "adobe garamond", "adobe garamond pro",  serif;
	font-style: Italic;
	font-weight:600;
	font-size:20px;
	text-align:center;
	color: #6B757D;           /* was #6B757D; hover 134F80 */
	
	letter-spacing:0.009em;
	
	margin:0 0 10px 0;
	padding:0;
	
	line-height:90%;
	
	height: 160px;

}


.ssdIconPanel H2 div.yellowLine{
	height:3px;
	width: 44%;
	margin: 0px auto 10px auto;
	background-color: #fc3;  /* was fc3 CEB44D   #a78910; */
}


.ssdIconPanel p { /* icon description */
	font-family: arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight:normal;
	font-size:11px;
	text-align:justify;
	color:#000;
	line-height:130%;

}


.ssdIconPanel H2 div.icon { /* wraps/constrainst and postions resp icon */
	width:75px;
	height:75px;
	margin:0px auto;
	
}
.ssdIconPanel H2 img { /* icon */
	width: 100%;  /* resp image, width pri */
	height: auto;
	min-width:100%;
	vertical-align:middle;
	margin:0px 0 0px 0 ;
	padding:0;
	
}

.ssdIconPanel A {
text-decoration:none;
}

.ssdIconPanel A.readMore {
font-weight:bold;
color:#6B757D;
padding: 0 16px 0 0;
background: url(../../widgets/widgetImageCache/rightArrowGoldTrans50per.png) right  center no-repeat;
text-decoration:none;
}

.ssdIconPanel:hover A.readMore, .ssdIconPanel A:hover.readMore { /* hover over link OR any hover over entire panel will kick this rule */
color:#134F80;
padding: 0 16px 0 0;
background:url(../../widgets/widgetImageCache/rightArrowGold.png) right  center no-repeat;
}

.ssdIconPanel:hover H2 { /* any hover over entire panel will kick this */
	color:#000;  /* was #134F80;	*/
}

.ssdIconPanel:hover H2 div.yellowLine{
	height:4px;
	width: 48%;
	background-color: #fc3;

}



/**** ssdInPageNav :  OPTIONAL section - adds jump links to diff parts of long pages */
UL.ssdInPageNav {
	padding: 0;
	margin: 0 0 30px 0;
	
	position:relative;
	z-index:99; /* needs to be one MORE than "science" header  since it overlaps due to relative offsetting layout */

	list-style-image: url(../../widgets/widgetImageCache/hexagonBullet11w13hDarkGold.png) ;
	list-style-position: inside;	
	list-style-type:rectangle;
} /* shorthand =  type,image,position */

.ssdInPageNav LI {
	padding:2px 0 2px 0;
	margin:0;	
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
}

.ssdInPageNav LI:hover {
	list-style-image: url(../../widgets/widgetImageCache/hexagonBullet11w13hBriteGold.png) ;
}

.ssdInPageNav LI A{
	color:#000;
	text-decoration:none;
}

.ssdInPageNav LI A:hover {
	color:#33F;
	text-decoration:underline;
	
}


/* ssdImagePanel: wrap all images in one of these - float right in text, offer functionality beyond normal image - panels and images are also responsive  */
.ssdImagePanel { /* wrapper that contains and controls size and loc of panel */
	width:30%;
	height:auto;	
				
	clear:right;/* clear any OTHER image panel, so they dont overlap horozontally */
	float:right;
	margin:10px 0 10px 30px; /* margin-left: 30px; is room for outdented H1 title */
	padding:0;
	
	position:relative; /* so children (h1 title and zoom control can be abs positioned ) */

}


.ssdImagePanel  img { /* note not requireing direct descendant so img tags can be wrapped in A tag if needed to link to high rez image or other page etc*/
	width: 99%;  /* responsive in container, 99% to leave some room for borders/pad/margin */
	height: auto;
	max-width:99%;

	/* this is for loading, force a min-width and show loader. be sure min<= min set size = exsmall qualifier class
	background: url(../../widgets/widgetImageCache/loadingAnims/131-50x50White.GIF) center center no-repeat;
    */
	
	position:relative;  /* set this UNDER the h title */
	z-index:100;	
	
	border: 4px solid #cccccc;
	border-radius:4px;	
}

.ssdImagePanel > p { /* this is CAPTION */
	margin:0;
	padding:5px 0 0 0;
	
	/* commenting out wide left margin until popmenu implemented
	margin-left: 40px;  /* room for popmenu icon later */
	margin-left: 10px;
	
	font-family:Arial, Helvetica, sans-serif;
	font-style:italic;
	font-weight:600;
	font-size:12px;
	line-height: 16px;
	
	color:#536A82;  		
}

.ssdImagePanel > p > span { /* this is always and ONLY the CREDIT */	
	color:#333333;  		
}


/* WIDTH "qualifier" classes for imagePanels - NOTE LEAD OFF panel should be LARGER than others, large works best, then others should be medium = default or small and in special cases exLarge or fullWidth */
.ssdImagePanel.fullWidth { 
	width:100%;
}
.ssdImagePanel.exLarge { 
	width:75%;
}
.ssdImagePanel.large { 
	width:60%;
}
.ssdImagePanel.medium { 
	width:45%;
}
.ssdImagePanel.small { 
	width:30%;
}
.ssdImagePanel.exSmall { 
	width:20%;
}

.ssdImagePanel.zoomed { /* zoomed class is toggled by zoomControl - */
	width:100%;
}

.ssdImagePanel.inFlow { /* dont float image, allow to exist inFlow of document normally */
	float:none;
	clear:both;
}

.ssdImagePanel.sideBySide { /* dont float image, allow to exist inFlow of document normally */
	display:inline-block;
	float:none;
	margin-left:0;
	margin-right:10px;
	vertical-align:top;
}

.ssdImagePanel.centered { /* dont float image, CENTER in document Flow of document normally */
	float:none;
	margin:0 auto;
}


/* these are generic float clearing substyles, can be applied anywhere, clearBoth is def needed at end of all section wrappers (inDepth, Related, etc to ensure floated elements are encapsulated withing wrapper, else might break out the bottom. ) */

.clearRightFloat {
	clear:right;
}

.clearLeftFloat {
	clear:left;
}

.clearBothFloats {
	clear:both;
}




.ssdImagePanel > .rightArrowBoxTransBg {
	position:absolute;  /* NOTE! assumes the h tag is created in flow immediately before the img */
	z-index:101;
	top:12px;  /* shift down over image */
	left: -20px;
}


.ssdImagePanel > .ssdZoomControl {
	position:absolute;  /* NOTE! assumes the tag is created in flow immediately after tag and before the img */
	z-index:101;
	top:12px;  /* shift down over image */
	right: 2.5%;
	
	border: 2px #fff solid;
	border-radius: 14px;
	background-color:#aaa;
	opacity:0.8;
	
	color:#fff;
	font-size:28px;
	line-height:22px; /* this line height combie with text-align: center is what centers the +/- */
	font-weight:900;
	font-family:"Arial Black", arial, sans-serif;
	
	padding:1px;
	margin: 0;
	
	text-align:center;
	vertical-align:middle;
	
	min-width: 24px; 
	min-height: 24px;
	max-width: 24px; /* force sz */
	max-height: 24px;	
}


.ssdImagePanel > .ssdZoomControl:hover {
	background-color:#000;
	font-size:30px;

}




/* Arrow Boxes:  used in various widgets */
.rightArrowBoxOnWhite {

/* SIMPLE BOX, 1 LAYER: since the arrow has white bg (non trans), AND the page BG is WHITE, the white part of the BG image blocks out the gold BG fill - so this can be built all in one class, no wrapper. For trans (IE place over images etc - need wrapper to achieve same effect.  See next. */
	display: inline-block;
	
	margin:0;
	padding: 4px 6px 4px 6px;
	padding-right:20px; /* make room for arrow point to exist in and some open right space */
	
	background:url(../../widgets/widgetImageCache/arrowTipRightDarkGoldOnWhite.png) #86622D center right no-repeat;

	min-width: 20px;
	border-radius:3px;
	
	color: #FFF;
	font-family:"Arial Black", arial, sans-serif;
	font-weight:800;
	font-size: 14px;
	
}

/* TRANS BG right ARROW BOX - can float over ANY BG, but requires 2 layers */
.rightArrowBoxTransBg { /* this is the wrapper div */
	display: inline-block;	
	margin:0;
	padding:0;
	padding-right:14px; /* adjust as needed based on hieght, purpose: make room for arrow point to exist in and some open right space - must be <= width of arrowTip graphic */
	
	background:url(../../widgets/widgetImageCache/arrowTipRightDarkGoldOnTrans.png) transparent center right no-repeat;

}

.rightArrowBoxTransBg > H1 { /* using H1 because this functions as a TITLE for the widget/section/aside */

	display: inline-block;
	min-height: 16px; 
	max-height:22px;  /* max height should be no taller than arrowTipRightDarkGoldOnWhite height */

	padding: 4px 3px 4px 6px;
	margin:0;
	
	background-color:#86622D;
	min-width: 20px;
	border-radius:3px;
		
	color: #FFF;
	font-family:"Arial Black", arial, sans-serif;
	font-weight:800;
	font-size: 13px;
}



/* IN DEPTH is a FULL WIDTH wrapper for a page section that will contain DEEPER or EXPANDED info on the topics in the basic/top section of the page. 

PURPOSE: The idea is this content COULD be removed without changing the meaning of the page. its ADDITIONAL, DEEPER LEVEL info.

STYLE: This box styles it in a consistent way across all CONTENT pages so the the user starts to learn/know that this box style contains a certain TYPE of content where ever it appears on our site.  */

.ssdInDepthPanel { /* wrapper that contains and controls size and loc of panel */
/* this is MAYBE full width, clear all floats if so, else adjust as needed */	
	width:85%;  /* 85% matches the main section width with wide gutters */
	 
	clear:both;  /* clear any floats above */
	
	margin-top:50px !important;
	padding:2.5% 5% 2.5% 5%; /* some room for H1 title and general gutters -- for TOTAL width = 100% -> width + 2x vert padding = 100% */
	
	border: 2px solid #cccccc;
	border-radius:4px;
	
	background-color: #eeeeee;
	
	/* background:url(../../widgets/widgetImageCache/hexagonGridHalfMirrorMediumLiteGrey.png) 110% -8% no-repeat ;	*/
	
	
}

.ssdInDepthPanel > .rightArrowBoxTransBg {
	position:relative;  /* NOTE: this is defined IN FLOW and WITHIN the BOX, so it takes up vert space intentionally*/
	left: -9%; /* note top is control by top padding and margin, this simply outdents to left */
}


.ssdInDepthPanel > h2, .ssdInDepthPanel > h3, .ssdInDepthPanel > h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	line-height:120%
	padding:0;
	margin:0;
	margin-top:20px;
}

.ssdInDepthPanel > h3 {
	font-size:13px;	
}

.ssdInDepthPanel > h4 {
	font-size:12px;	
}

.ssdInDepthPanel > p {
	margin: 10px 30px 10px 40px; 
	line-height:180%; 
	
}

.ssdInDepthPanel  ul  {
	margin: 10px 30px 10px 55px;  /* 15px indent from paragraph */	
}

.ssdInDepthPanel  ul li  {
	font-weight:bold; 	
}




/* RELATED PANEL:

 is a FULL WIDTH wrapper for a page section to contain RELATED info to the page, images, text, video, links. 

PURPOSE: The idea is this content its ADDITIONAL info, not critical, and COULD be removed without changing the meaning of the page. 

STYLE: This box styles it in a consistent way across all CONTENT pages so the the user starts to learn/know that this box style contains a certain TYPE of content where ever it appears on our site. */

.ssdRelatedPanel { /* wrapper that contains and controls size and loc of panel */
/* this is MAYBE full width, clear all floats if so, else adjust as needed */	
	width:85%;  /* 85% matches the main section width with wide gutters */
	 
	clear:both;  /* clear any floats above */
	
	margin: 0 auto;
	
	margin-top:50px !important;
	
	padding:2.5% 5% 2.5% 5%; /* some room for H1 title and general gutters -- for TOTAL width = 100% -> width + 2x vert padding = 100% */
	
	border: 2px solid #cccccc;
	border-radius:4px;
	
	background-color: #000000;
	
	color: #aaaaaa;
	
	/* background:url(../../widgets/widgetImageCache/hexagonGridHalfMirrorMediumLiteGrey.png) 110% -8% no-repeat ;	*/
	
	
}

.ssdRelatedPanel > .rightArrowBoxTransBg {
	position:relative;  /* NOTE: this is defined IN FLOW and WITHIN the BOX, so it takes up vert space intentionally*/
	left: -9%; /* note top is control by top padding and margin, this simply outdents to left */
}


.ssdRelatedPanel > h2, .ssdRelatedPanel > h3, .ssdRelatedPanel > h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	line-height:120%
	padding:0;
	margin:0;
	margin-top:20px;
	
	color:#cccccc;
}

.ssdRelatedPanel > h3 {
	font-size:13px;	
}

.ssdRelatedPanel > h4 {
	font-size:12px;	
}

.ssdRelatedPanel > p {
	margin: 10px 10px 10px 10px; 
	line-height:140%;
	
	color:#aaaaaa; 
	
}

.ssdRelatedPanel  ul  {
	margin: 10px 10px 10px 25px;  /* 15px indent from paragraph */	
}

.ssdRelatedPanel  ul li  {
	font-weight:bold; 	
}


.ssdRelatedPanel iframe { /* wrap iframes (usually utube vids) in std border */

margin:8px auto; /* center horozontally */

	border: 4px solid #cccccc;
	border-radius:4px;	
	
}


.ssdRelatedPanel > img { /* wrap non-ssdImagePanel img tags (note direct descendants only )  in std border */

	border: 4px solid #cccccc;
	border-radius:4px;	
}


.ssdRelatedPanel .ssdImagePanel > p > span { /* this is always and ONLY the CREDIT */	
	color:#bbbbbb;  		
}



/* ssdInPageBox -  like IN DEPTH and RELATED but simpler application to wrap any content in a box can contain all sorts of stuff */

.ssdInPageBox { /* wrapper that contains and controls size and loc of box - apply to DIV, SECTION, ARTICLE, ASIDE
SUBCLASSES:  use the width and alignment subclasses that follow to vary layouts */


	width:85%; /* defualt width - altered by subclasses that follow */	
	 
	clear:both;  /* clear any floats above */
	
	margin-top:40px;
	padding:2.5%; /* width + 2x vert padding = 100% */
	
	border: 2px solid #cccccc;
	border-radius:4px;
	
	background-color: #eeeeee;
}

/* QUALIFIER CLASSES to APPLY to BOX WRAPPER */
.ssdInPageBox.floatRight {
	float:right;
}

.ssdInPageBox.floatLeft {
	float:left;
}

.ssdInPageBox.center {
	margin-left:auto;
	margin-right:auto;
}

.ssdInPageBox.width3-3rd {
	width:100%;
}

.ssdInPageBox.width2-3rd {
	width:55%;  /* 55 gives room for margins to add to 60 or 66 */
}

.ssdInPageBox.width1-3rd {
	width:35%; /* 55 gives room for margins to add to 60 or 66 */
}


/* headings */
.ssdInPageBox > .rightArrowBoxTransBg { /* This IS the H1 ! */
	position:relative;  /* assuming the h1 is created in flow just before the img */
	z-index:101;
	top:10px;  /* this is defined withIN the containing DIV */
	left: -6%;
}


.ssdInPageBox > h2 { 
	font-family:Arial, Helvetica, sans-serif;
	font-size:14pt;
	font-weight:bold;
	line-height:120%
	padding:0;
	margin:0;	
}

.ssdInPageBox > h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12pt;
	font-weight:bold;
	line-height:120%
	padding:0;
	margin:0;	
}

.ssdInPageBox > h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12pt;
	font-weight:Normal;
	line-height:120%
	padding:0;
	margin:0;	
}


.ssdInPageBox > p {
	margin: 20px 30px 0 40px; 
	line-height:170%; 
	
}

.ssdInPageBox > img { /* styles for raw img if ssdImagePanel not used */
	width: 90%;  /* responsive in container, 99% to leave some room for borders/pad/margin */
	height: auto;
	max-width:90%;
	
	border: 4px solid #cccccc;
	border-radius:4px;	
}



/* *** MEDIA QUERIES ******************************************/

/* Resize H1 and H2 for smaller sized screens */
@media screen and (max-width: 1000px) and (min-width: 700px) {
	
/* 20% less than full size */

.ssdPageContentWrapper HEADER H1 {
	font-weight:800;
	font-size:60px;

	line-height:60px;

/* adjust if needed	
	margin-top:25px;
*/	
	
}

.ssdPageContentWrapper HEADER H2 {

	font-weight:800;
	font-size:26px;

/* adjust these if needed 
	letter-spacing:-0.025em;

	margin-left: 60px; 
	
	line-height: 32px;

	top: -62px;
*/	
}

.ssdPageContentWrapper HEADER H2 div.yellowLine{
	height:8px;
	width: 100px;
}

.ssdPageContentWrapper HEADER H2 div.icon {
	height:100px;
	width: 100px;

}

.ssdPageContentWrapper HEADER H2 img { /* icon */

}


.ssdPageContentWrapper HEADER DIV.quoteWrap  {
}

.ssdPageContentWrapper HEADER DIV.quoteWrap BLOCKQUOTE {

	font-size:13px;
	line-height: 16px;
	
}


.ssdPageContentWrapper HEADER DIV.quoteWrap SPAN { /* quotes chars  note real smart quotes are :
 open: &#8220 or &ldquo;  close: &#8221 &rdquo; */

	font-weight:800;
	font-size:64px;

	
}

}


/* responsive video */

/* the next 2 are std technique to wrap resp 4/3 video - an outer container with 56% and inner class on the iframe - NEED BOTH!
   need diff class for 16x9 */
.ssdResponsiveVideo4x3 {  /* make youtube Iframe responsive */
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 75%; /* makes faux %height 3/4 of width */
    padding-top: 0px;
    height: 0;
}

.ssdResponsiveVideo16x9 {  /* make youtube Iframe responsive */
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;  /* makes faux %height 9/16 or the width */
    padding-top: 0px;
    height: 0;
}
.ssdResponsiveVideo4x3 iframe,
.ssdResponsiveVideo16x9 iframe { /* may alson need to add targets for object, embed */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}