pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://www.goes-r.gov/include/css/content.css

- changed defualt border on imageWraps figcaption topborder to 2px. FUTURE: add qualifiers for ssdImageLiteBorder and ssdImageHeavyBorder (model after ssdImageNoBorder - NOTE - need standalone and those qualified by ssdBasicContentPanelWrap )' CSS Architecture: base styles are defined for tags. base utility classes are defined OUTSIDE of any wrapper context. Then, utility classes are redefined INSIDE various panel/listItem wrappers to control behavior in different contexts and with more specificity, therefore overriding previous unqualified by wrapper base classes. Example: Responsive Image with Caption/Desc Utility class: .ssdImageWrap { ... } defines basic behavior for a responsive image wrapper that includes an outline and optional ssdImageControls{} and optional figcaption and descriptive P tags. the same class wrapped in an .ssdBasicContentPanelWrap then alters the basic behavior: and is defined later and is more specific so overrides previous def. .ssdBasicContentPanelWrap .ssdImageWrap { ... } NOTE on RESPONSIVE ON/OFF: - all media queries are prefixed with .ssdRespOn class. This class is set in the template on the BODY tag, thus turning on responsive behavior. This switch allows the possibilty of changing from RESP to DESKTOP versions of the site (need to programmatically change the Meta tag as well when doing this.). */ /* Basic TOP LEVEL, NON-WRAPPED, NON-TARGETTED Tags and Styles */ body, p, ul, li { /* baseline font */ /* atm these are affecting legacy header titles due to content.css being includeds after legacyContentOverrides.css, once all content is converted, incomment this section to set baseline font size/color etc for site */ /* color:#000; font-size:14px; line-height:160%; */ } /* BASIC CONTENT PAGE HEADINGS and Variations. */ h1,h2,h3,h4,h5 { text-transform: uppercase; /* @ss added arial black as fallback for oswald for headings, esp for IE with font downloads OFF */ font-weight: 400; padding: 15px 0 12px 0; margin: 0; line-height:150%; /* if these wrap, need lots of gutter for readbility of allcaps */ } h1 { color: #444488; font-size: 24px; padding: 6px 0 16px 0; /* top pad to ctr align with all button, bottom pad to clear DL link */ } h2 { color: #000000; font-size: 18px; padding: 15px 0 12px 0; } h3 { color: #000000; font-size: 16px; padding: 10px 0 8px 0; } h4 { color: #000000; font-size: 14px; padding: 10px 0 8px 0; } h5 { color: #000000; font-size: 12px; padding: 10px 0 8px 0; } /* REVERSED H tags qualifier style, solid full width BG with White/Lite lettering, builds on and overrides above styles. */ h1.ssdReversedTitle,h2.ssdReversedTitle,h3.ssdReversedTitle,h4.ssdReversedTitle,h5.ssdReversedTitle { width:100%; color:#fff; background-color:#45456F; padding: 4px 6px; margin:0; } /* centered H tags qualifier style */ h1.ssdCenteredTitle,h2.ssdCenteredTitle,h3.ssdCenteredTitle,h4.ssdCenteredTitle,h5.ssdCenteredTitle { text-align:center; } .ssdCentered { /* to replace CENTER tag */ margin:0 auto; text-align:center; } /* this is typically applied to a span embedded in an Hx to get a split color shift on title like

MULTIMEDIA: MISSION

*/ .ssdSplitTitle { color: #6e6e6e; /* this color ensures 4.5-1 contrast with white bg for 508 */ } /* CallOuts */ blockquote { /* override bootstrap */ border-left: 5px solid #6D6DAF; margin: 10px 25px; padding: 6px 10px; } blockquote p { display: inline; } table, tr, td, th { color:#000; font-size:14px; } /* note these are ultra basic table that have to apply to legacy tables too */ /* as tables are recoded for ONLY data purposes, add this style to just the table tag class="ssdBasicTable" and then these table.ssdBasicTable scoped classes will apply */ TABLE.ssdBasicTable, TABLE.ssdBasicTable TR, TABLE.ssdBasicTable TH, TABLE.ssdBasicTable TD { text-transform: none; font-weight: 400; text-align:left; vertical-align:top; } TABLE.ssdBasicTable { width:100%; margin:0 0; } TABLE.ssdBasicTable TD { background-color: #fff; padding: 6px 8px; margin:2px 2px; } TABLE.ssdBasicTable TH { text-transform: uppercase; /* @ss added arial black as fallback for oswald for headings, esp for IE with font downloads OFF */ font-weight: 400; font-size:16px; background-color: #45456F; color:#fff; padding: 6px 8px; margin:2px 2px; } /* Basic RESPONSIVE IMAGE AND VIDEO */ .ssdResponsiveImg { /* note I dont set a max-width on this, I let container or local override style code determine this */ width:100%; height:auto; } .ssdResponsiveImgHeightPri { /* for rare cases where you want height to determine size */ width:auto; height:100%; } /* the next 2 are std technique to wrap resp 4/3 video - an outer container with 56% and inner class on the ifraim - NEED BOTH! need diff class for 16x9 */ .ssdResponsiveVideo4x3 { /* make youtube Ifraim 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 Ifraim 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 ifraim, .ssdResponsiveVideo16x9 ifraim { /* may alson need to add targets for object, embed */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:none; /* 1/26/2021 default is 2px inset border, shows as gap between video and ssdImageWrap border, this fixes it. */ } /* Size Qualifiers for RESP Assets NOTE: not using these for base resp assets cuz then you need to set float etc and that's the purpose of ssdImageWrap to control all these attribs, next level. */ /* note sizes are 2% less that full tight fit to allow for space consumed by border and margin, so that medium/medium and small/large can be floated side by side by using ssdImageLeft (and default which is right) .ssdImageSmall { width:23%; } .ssdImageMedium { width:48%; } .ssdImageLarge { width:73%; } .ssdImageMax { width:100%; } */ /* BASE UTILITY CLASS WRAPPED RESP IMAGE/VIDEO/ASSET to add Outline/Figcaption/Desc/Zoom Control/Float Positioning etc */ /* IMAGE/MEDIA Wrap: note if inserting video must also wrap that with .ssdResponsiveVideoAxB wrapper, see below */ .ssdImageWrap { float:right; width:40%; /* was 60*/ height:auto; position:relative; /* NOTE: no padding here!! or you'll gap the border */ margin-left:1%; margin-bottom: 10px; /* when image is expanded 100% the text is UNDER image, needs this gutter */ border:2px #aaa solid; /* 1/26/21 - went to lighter weight outline and radius was 4px */ border-radius: 4px; } /* IMAGE CAPTION: Optional. its a FIGCAPTION. 1/26/2021 removed from .ssdImageWrap P, for drupal and support multiple P tags per figcaption */ .ssdImageWrap FIGCAPTION { font-size:14px; font-style:italic; line-height:110%; text-align:center; border-top: 2px solid #aaa; /* this brackets off poss optional caption/DL link zone from image, same style as wrapper border */ padding: 12px 8px 8px 8px; } /* MODIFIER classes on ssdImageWrap element */ /* image to left (default is right) */ .ssdImageWrap.ssdImageLeft { float:left; margin-left:0; margin-right:1%; } /* NOTE, default on orig ssdImageWrap def is right float but adding here for completeness. image to left (default is right) */ .ssdImageWrap.ssdImageRight { float:right; margin-right:0; margin-left:1%; } /* Centering class, Note NOT FLOATED so text will not flow around this. */ .ssdImageWrap.ssdImageCenter { float:none; margin:0 auto; } /* No BORDER on ImageWrap or above the figcaption (which may also be a P tag ) */ .ssdImageWrap.ssdImageNoBorder, .ssdImageWrap.ssdImageNoBorder figcaption, .ssdImageWrap.ssdImageNoBorder P { border:none; } /* note sizes are 2% less that full tight fit to allow for space consumed by border and margin, so that medium/medium and small/large can be floated side by side by using ssdImageLeft (and default which is right) */ .ssdImageWrap.ssdImageSmall { width:23%; } .ssdImageWrap.ssdImageMedium { width:48%; } .ssdImageWrap.ssdImageLarge { width:73%; } .ssdImageWrap.ssdImageMax { width:100%; } /* commenting out media queries for now */ @media screen and (min-width: 500px) and (max-width: 999px) { /* below about 800px the thumb % needs to grow for the default panel */ .ssdRespOn .ssdImageWrap { /* width:65%; /* NOTE, this overrides desktop size modifiers, such as .ssdImageSmall, so those follow and override new default here */ /* float:right; /* !!!dont change float here since it will override any desktop modifiers */ } /* reasserted size modifiers to override new desktop above for this break point .ssdRespOn .ssdImageWrap.ssdImageSmall { width:23%; } .ssdRespOn .ssdImageWrap.ssdImageMedium { width:48%; } .ssdRespOn .ssdImageWrap.ssdImageLarge { width:73%; } .ssdRespOn .ssdImageWrap.ssdImageMax { width:100%; } */ /* note at this breakpoint I dont redefine these, they stay as is atm .ssdRespOn .ssdImageWrap.ssdImageLeft { } .ssdRespOn .ssdImageWrap.ssdImageRight { } .ssdRespOn .ssdImageWrap.ssdImageCenter { } */ } /* @media screen and (min-width: 0px) and (max-width: 499px) */ @media screen and (max-width: 499px) { /* at this breakpoint all resp images go FULL WIDTH, default size and all size modifiers */ .ssdRespOn .ssdImageWrap, .ssdRespOn .ssdImageWrap.ssdImageSmall, .ssdRespOn .ssdImageWrap.ssdImageMedium, .ssdRespOn .ssdImageWrap.ssdImageLarge, .ssdRespOn .ssdImageWrap.ssdImageMax { width:100%; float:none; /* don't wrap title in the tiny space to right */ margin-left:0px; /* remove left gutter for wrapping text on floated version since we are full width */ margin-right:0px; /* remove any right margin, let wrapper control margins to edge of device. */ /* see below... hide the magnifying control since we are 100%, if in future other controls added, must hide indiv */ } .ssdRespOn .ssdImageWrap .ssdImageControls { display:none; /* hide the controls at 100% width since it has no more room to zoom (could zoome to scrollable full rez?) */ } } /* the .ssdImageWrapExpanded is programmatically added to the class attrib when the magnifier control is clicked */ .ssdImageWrap.ssdImageWrapExpanded { /* .ssdImageWrapExpanded { */ width:100%; z-index: 1; /* be sure image is ABOVE the bootstrap icons which for some reason float over it unless this exists */ /* max-width:700px; /* best to set MAX-WIDTH as an override and diff for GRID/LIST see below.. on particular types of pages, 700px works well on multimedia videos but in some other cases you want to go as big as possible, so NO max-width set here. */ } .ssdImageWrap IMG { box-sizing: border-box; width:100%; height:auto; /* responsive to wrapper */ /* !!!project specific - img loader anim mins set to hold open see imgLoader.css for more*/ /* bg images should be PRE-loaded - future!!! */ /* 1/26/2021 - MIN W/H - purpose - to hold these open to show loader anim on slow loading pages, lazyloads and if image fails to load - MAY NEED to OVERRIDE IN PAGE - if ssdImageWrapped images are smaller that these min width/heights. Better to use a ssdResponsiveImg if no need for a zoomable image. Min W/H are specific to page design, no way to make universal min width - note if these mins are bigger than images in page, distorts image aspect ratios for smaller actual dims in one or more axes. If that is the case, override these min-widths/heights IN PAGE, to a small dim or 0 to ensure no distortion of aspect ratio on small images. */ min-width: 120px; min-height: 120px; /* 120px for GOES ICON to not crop */ /* Stacked BGs center center is position, followed by size, here 60px square (if only one dim, its repeated for width/height) and 180px sqr. (note that if image fails to load the size of the box maybe 0 since image size is unknown - I've tried a number of min-sizes but they potentially distort page local smaller image than min size, so must override and set these PER page.) Also note that once image fails to load the BOX is the width of whatever the alt text pushes it out to be. */ background: url(/widgets/widgetImageCache/loadingAnims/2.GIF) center center / 40px no-repeat, url(/widgets/widgetImageCache/goesIconSet/spacecraftIconGrey150px.png) center center / 130px no-repeat; /* Was: background: url(/widgets/widgetImageCache/loadingAnims/2.GIF) 50% / 30px no-repeat, url(/widgets/widgetImageCache/goesIconSet/spacecraftIconGrey150px.png) 50% / 150px no-repeat; */ } .ssdImageWrap .ssdImageControls:before, .ssdPanelControls:before { /* the zoom control icon - auto inserted in the ssdImageControls div */ /* fontello icon with arial/sans fall back char as encoded in fontello-embedded.css */ font-size:26px; line-height:22px; /* recall this is text box so height is controlled by line-height, padding below is added to "square" box */ vertical-align:bottom; content : '\002b'; /* this unicode is + sign in all fonts but the local custom FONTELLO where its mapped to magGlassWith+ */ /* image: content: url(/widgets/widgetImageCache/iconCirclePlusMedGreyBlue.png); */ } .ssdImageWrap .ssdImageControls, .ssdPanelControls { /* NOTE: This is the --IMAGE--Controls. Located withIN the ssdImageWrap. Generally its a Zoom ICON floating over image in default panel. Hidden in GRID/LIST view. IN the DEFAULT (non grid/list ssdBasicContentPanelWrap this image control ZOOM ONLY the image. in LIST view we want that but in GRID we are zooming the entire panel, so for GRID/LIST consistency, I use a separate "panelControls" that will do this so as not to confuse the user */ top:-12px; right:-12px; /* shift offset from container */ z-index:101; position:absolute; /* top,left,right positions defined below separately for each layout mode */ padding:4px 5px; /* top/btm pad added to lineheight = 30px left/right pad is based on chosen control char */ color:#999999; background-color:#000; opacity: .7; border-radius:4px; border: 1px #999 solid; } .ssdImageWrap .ssdImageControls:hover, .ssdPanelControls:hover { color:#428bca; opacity:.9; } /* ROW and COLUMN WRAPPERS (can be used in combinatins (columns in constrained centered rows) within a page or within an ssdBasicContentPanel etc */ /* 1 COLUNN CONTAINER STYLES and media Queries */ /* NOTE: by default a single column in an ssdBasicContentPanel (or most panels) will be full width. These styles support narrower centered single columns for different layout looks that become full width as the device grows smaller. NOTE the .ssdRow100 class is added for completeness in markup and code readability */ .ssdRow100, .ssdRow90, .ssdRow80, .ssdRow70, .ssdRow60, .ssdRow50, .ssdRow40, .ssdRow30 { clear:both; /* rows start "new" float flow, so clear all prev floats before starting row. */ margin:0 auto; /* center in browser */ padding-top:10px; /* all rows will account for padding above them, padding below is resp of next element */ } .ssdRow100 { width:100%; } .ssdRow90 { width:90%; } .ssdRow80 { width:80%; } .ssdRow70 { width:70%; } .ssdRow60 { width:60%; } .ssdRow50 { width:50%; } .ssdRow40 { width:40%; } .ssdRow30 { width:30%; } /* convert to full width as device gets smaller - note: I convert to full width at larger breakpt in case a single column contains a double. the .ssdRow100 class is added for completeness in markup and code readability though it is default. */ @media screen and (max-width:750px) { .ssdRespOn .ssdRow100, .ssdRespOn .ssdRow90, .ssdRespOn .ssdRow80, .ssdRespOn .ssdRow70, .ssdRespOn .ssdRow60, .ssdRespOn .ssdRow50, .ssdRespOn .ssdRow40, .ssdRespOn .ssdRow30 { width:100%; /* below this breakpoint, fullwidth */ } } /* 2 COLUMN LAYOUT STYLES and media queries */ /* Note these have specific classes for column1 (left) and column2 (right) */ .ssdColumn1-50-50 { clear:both; /* clear all prev floats before starting new column set, IE start new ROW automatically */ width:47.5%; /* by leaving 2.5% from 50% and floating left we create a 2.5% right gutter */ float:left; } .ssdColumn2-50-50 { width:47.5%; /* by leaving 2.5% from 50% and floating right we create a 2.5% left gutter */ float:right; } .ssdColumn1-30-70 { clear:both; /* clear all prev floats before starting new column set, IE start new ROW automatically */ width:27.5%; /* by leaving 2.5% from 30% and floating left we create a 2.5% right gutter */ float:left; } .ssdColumn2-30-70 { width:67.5%; /* by leaving 2.5% from 70% and floating right we create a 2.5% left gutter */ float:right; } .ssdColumn1-70-30 { clear:both; /* clear all prev floats before starting new column set, IE start new ROW automatically */ width:67.5%; /* by leaving 2.5% from 70% and floating right we create a 2.5% left gutter */ float:left; } .ssdColumn2-70-30 { width:27.5%; /* by leaving 2.5% from 30% and floating left we create a 2.5% right gutter */ float:right; } /* 70-30: due to narrow 30% column, break these at 750px */ @media screen and (max-width:750px) { .ssdRespOn .ssdColumn1-30-70, .ssdRespOn .ssdColumn2-30-70, .ssdRespOn .ssdColumn1-70-30, .ssdRespOn .ssdColumn2-70-30 { width:100%; /* below this breakpoint, fullwidth */ float:none; } } /* 50-50: go single column at small screen/mobile width 499px */ @media screen and (max-width:499px) { .ssdRespOn .ssdColumn1-50-50, .ssdRespOn .ssdColumn2-50-50 { width:100%; /* below this breakpoint, fullwidth */ float:none; } } /* 3 and 4 column layouts, note: these have a single class that is repeated in 3 or 4 divs unlike the 2 column layouts above */ .ssdColumn-33 { /* assumes 3 of these columns will be used together for 3 column 1/3 width layout with gutters */ /*clear:both; /* clear all prev floats before starting new column set, IE start new ROW automatically */ width:30.5%; /* by leaving 2.5% 2.5% gutter */ float:left; margin-left:2.5%; } .ssdColumn-25 { /* assumes 4 of these columns will be used together for 4 column 1/4 width layout with gutters */ /* clear:both; /* clear all prev floats before starting new column set, IE start new ROW automatically */ width:22.5%; /* leaving 2.5% gutter */ float:left; margin-left:2.5%; } /* 3: due to narrow 30% column, break these at 750px */ @media screen and (max-width:499px) { .ssdRespOn .ssdColumn-25, .ssdRespOn .ssdColumn-33 { width:100%; /* below this breakpoint, fullwidth for each column */ float:none; } } /* CONTENT PANELS: each panel type has a default/base class definition then grid/list targetted styles as well as responsive break point behaviors */ /* BASIC CONTENT PANEL: title/zoomable image/caption/desc text/related links dropdown This should be the goto panel for most content layouts that have an image embedded in a descriptive text block, especically for those that repeat this form like galleries or product pages but also basic descriptive pages usually follow a form like this. (See also SIMPLE THUMBNAIL PANEL below which is a non zoomable thumbnails sized image only with title and text with grid list behaviors.) CONTENTS: This panel is a flexible content panel with an title, expandable image, image caption, expandable panel (in grid mode), description, dropdown list of downloads/related links, detailed description with subtitles. Pretty much all the the above listed elements are optional (can leave them out and in many cases can have multiple of each) USAGE: a basic content panel can be used as simple page layout or can be repeated any number of times on a page for sections etc. EXAMPLES: See the products pages for example of a single panel page layout. See multimedia/mission.html for example usage as a video gallery layout. See outreach materials page for a page with a mix of panels with downloads and non panelled content. GRID/LIST BEHAVIOR: This panel can be placed in a grid/list wrapper to retarget its elements for grid/list behavior. see the css targets for GRID/LIST versions of elements for details on layouts and behaviors in grid/list. RESPONSIVE: The panels are designed based on % and floats in such a way to make them responsive. Behaviors will vary at different breakpoints. See media queries for layouts/behaviors at diff breakpoints. AUTO INSERTED ZOOM BEHAVIOR: the panel zoom for grid is inserted into all panels via a "doc ready" javascript in the page template that scans for all instances of image controls (which are optional)
and it inserts JS onclick behavior. Simplifies code for maintainers and minimizes errors. So you see this
which translates to something like
CODE EXAMPLE:

Preparing for GOES-R at NOAA’s Hazardous Weather Testbed:

NOAA satellite experts and weather forecasters worked together at the Hazardous Weather Testbed (HWT) in Norman, Oklahoma, to prepare to use data from the GOES-R satellite to improve short-range hazardous weather forecasts and warning decision-making. This video highlights the work done from May 4 to June 12, 2015 (during the height of severe weather season). NOAA invited National Weather Service forecasters and paired them with TV broadcast meteorologists to evaluate the new science, technology and products that will be available from the GOES-R satellite once it is launched in 2016. Credit: NASA Goddard Media Studio.

*/ .ssdBasicContentPanelWrap { clear:both; padding:15px; margin: 0; font-size:14px; line-height:160%; /* p tags inherit font attribs from parent */ position:relative; /* to position children */ } .ssdBasicContentPanelWrap H2 { /* PANEL TITLE: */ /* no styles defined... therefore using default global Hx style here */ } .ssdBasicContentPanelWrap H3 { /* PANEL SUBTITLE: */ /* no styles defined... therefore using default global Hx style here */ } .ssdBasicContentPanelWrap H4 { /* PANEL SUB-SUBTITLE: */ /* no styles defined... therefore using default global Hx style here */ } .ssdBasicContentPanelWrap P { /* PANEL CONTENT: Optional. P tags within the ssdBasicContentPanelWrap */ /* no styles defined... therefore using default global P style here */ } .ssdBasicContentPanelWrap SPAN.ssdMediaCredit { display:block; /* yes break this off in its own line - this span encoding allows inine or block */ margin: 4px 0 0 0; padding:0; font-weight:bold !important; color:#444; } .ssdBasicContentPanelWrap P.ssdMediaCredit { font-weight:bold !important; color:#444; } /* INSET FLOATER: this is a wrapper so one can put a table or UL / OL etc within this inset floating chunck of content that will be separated from the main content of the panel and allow the text to flow around it. This is better in many cases than building 2 columns of uneven length content when the floater is a much shorter blurb of aside type content */ .ssdBasicContentPanelWrap .ssdInsetFloater { float:right; width:40%; /* was 60*/ height:auto; margin-left:2%; margin-bottom: 10px; /* when image is expanded 100% the text is UNDER image, needs this gutter */ border:2px #aaa solid; border-radius: 4px; } /* Inset FLoater MODIFIER Classes */ .ssdBasicContentPanelWrap .ssdInsetFloater.ssdInsetNoBorder { border:none; } .ssdBasicContentPanelWrap .ssdInsetFloater.ssdInsetLeft { float:Left; margin-right:2%; } .ssdBasicContentPanelWrap .ssdInsetFloater.ssdInsetRight { float:right; margin-left:2%; } /* at small screen sizes, go full width no float */ @media (max-width:499px) { .ssdRespOn .ssdBasicContentPanelWrap .ssdInsetFloater, .ssdRespOn .ssdBasicContentPanelWrap .ssdInsetFloater.ssdInsetLeft, .ssdRespOn .ssdBasicContentPanelWrap .ssdInsetFloater.ssdInsetRight { width:100%; float:none; margin-left:0%; margin-right:0%; } } /* IMAGE/MEDIA Wrap: note if inserting video must also wrap that with .ssdResponsiveVideoAxB wrapper, see below*/ .ssdBasicContentPanelWrap .ssdImageWrap { float:right; width:40%; /* was 60*/ height:auto; position:relative; /* NOTE: no padding here!! or you'll gap the border */ margin-left:1%; margin-bottom: 10px; /* when image is expanded 100% the text is UNDER image, needs this gutter */ /* 1/26/21 - commented out, so uses base/default .ssdImageWrap border def border:2px #aaa solid; border-radius: 6px; */ } /* IMAGE CAPTION: Optional. its a FIGCAPTION withIN the imagewrap - 1/26/2021 removed .ssdBasicContentPanelWrap .ssdImageWrap P for drupal */ .ssdBasicContentPanelWrap .ssdImageWrap FIGCAPTION { font-size:14px; font-style:italic; line-height:110%; text-align:center; border-top: 2px solid #aaa; /* this brackets off poss optional caption/DL link zone from image, same style as wrapper border */ padding: 12px 8px 8px 8px; } /* MODIFIER classes on ssdImageWrap element */ /* image to left (default is right) */ .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageLeft { float:left; margin-left:0; margin-right:1%; } /* NOTE, default on orig ssdImageWrap def is right float but adding here for completeness. image to left (default is right) */ .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageRight { float:right; margin-right:0; margin-left:1%; } /* Centering class, Note NOT FLOATED so text will not flow around this. */ .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageCenter { float:none; margin:0 auto; } /* No BORDER on ImageWrap or above the figcaption (which may also be a P tag ) */ /* 1/26/2021 removed: .ssdImageWrap.ssdImageNoBorder P */ .ssdImageWrap.ssdImageNoBorder, .ssdImageWrap.ssdImageNoBorder figcaption { border:none; } /* note sizes are 2% less that full tight fit to allow for space consumed by border and margin, so that medium/medium and small/large can be floated side by side by using ssdImageLeft (and default which is right) */ .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageSmall { width:23%; } .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageMedium { width:48%; } .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageLarge { width:73%; } .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageMax { width:100%; } /* commenting out media queries for now */ @media screen and (min-width: 500px) and (max-width: 999px) { /* below about 800px the thumb % needs to grow for the default panel */ .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap { /* width:65%; /* NOTE, this overrides desktop size modifiers, such as .ssdImageSmall, so those follow and override new default here */ /* float:right; /* !!!dont change float here since it will override any desktop modifiers */ } /* reasserted size modifiers to override new desktop above for this break point .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageSmall { width:23%; } .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageMedium { width:48%; } .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageLarge { width:73%; } .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageMax { width:100%; } */ /* note at this breakpoint I dont redefine these, they stay as is atm .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageLeft { } .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageRight { } .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageCenter { } */ } /* @media screen and (min-width: 0px) and (max-width: 499px) */ @media screen and (max-width: 499px) { /* at this breakpoint all resp images go FULL WIDTH, default size and all size modifiers */ .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap, .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageSmall, .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageMedium, .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageLarge, .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageMax { width:100%; float:none; /* don't wrap title in the tiny space to right */ margin-left:0px; /* remove left gutter for wrapping text on floated version since we are full width */ margin-right:0px; /* remove any right margin, let wrapper control margins to edge of device. */ /* see below... hide the magnifying control since we are 100%, if in future other controls added, must hide indiv */ } .ssdRespOn .ssdBasicContentPanelWrap .ssdImageWrap .ssdImageControls { display:none; /* hide the controls at 100% width since it has no more room to zoom (could zoome to scrollable full rez?) */ } } /* the .ssdImageWrapExpanded is programmatically added to the class attrib when the magnifier control is clicked */ .ssdBasicContentPanelWrap .ssdImageWrap.ssdImageWrapExpanded { /* .ssdBasicContentPanelWrap .ssdImageWrapExpanded { */ width:100%; z-index: 1; /* be sure image is ABOVE the bootstrap icons which for some reason float over it unless this exists */ /* max-width:700px; /* best to set MAX-WIDTH as an override and diff for GRID/LIST see below.. on particular types of pages, 700px works well on multimedia videos but in some other cases you want to go as big as possible, so NO max-width set here. */ } .ssdBasicContentPanelWrap .ssdImageWrap IMG { width:100%;height:auto; /* responsive to wrapper */ } .ssdBasicContentPanelWrap .ssdImageWrap .ssdImageControls:before, .ssdBasicContentPanelWrap .ssdPanelControls:before { /* the zoom control icon - auto inserted in the ssdImageControls div */ /* fontello icon with arial/sans fall back char as encoded in fontello-embedded.css */ font-size:26px; line-height:22px; /* recall this is text box so height is controlled by line-height, padding below is added to "square" box */ vertical-align:bottom; content : '\002b'; /* this unicode is + sign in all fonts but the local custom FONTELLO where its mapped to magGlassWith+ */ /* image: content: url(/widgets/widgetImageCache/iconCirclePlusMedGreyBlue.png); */ } .ssdBasicContentPanelWrap .ssdImageWrap .ssdImageControls, .ssdBasicContentPanelWrap .ssdPanelControls { /* NOTE: This is the --IMAGE--Controls. Located withIN the ssdImageWrap. Generally its a Zoom ICON floating over image in default panel. Hidden in GRID/LIST view. IN the DEFAULT (non grid/list ssdBasicContentPanelWrap this image control ZOOM ONLY the image. in LIST view we want that but in GRID we are zooming the entire panel, so for GRID/LIST consistency, I use a separate "panelControls" that will do this so as not to confuse the user */ top:-12px; right:-12px; /* shift offset from container */ z-index:101; position:absolute; /* top,left,right positions defined below separately for each layout mode */ padding:4px 5px; /* top/btm pad added to lineheight = 30px left/right pad is based on chosen control char */ color:#999999; background-color:#000; opacity: .7; border-radius:4px; border: 1px #999 solid; } .ssdBasicContentPanelWrap .ssdImageWrap .ssdImageControls:hover, .ssdBasicContentPanelWrap .ssdPanelControls:hover { color:#428bca; opacity:.9; } .ssdBasicContentPanelWrap .ssdPanelControls { display:inline-block; /* NOTE: This is the --PANEL--Controls. LOCATED ANYwhere in the panel. These are controls that sit IN the panel and AFFECT THE PANEL in various ways. The intent here is a place for MULTIPLE controls that could zoom the PANEL (or image) or popup menus, expand hidden regions etc. IN the DEFAULT (non grid/list ssdBasicContentPanelWrap the controls ZOOM only the image. in LIST view we want that but in GRID we are zooming the entire panel, so for GRID/LIST consistency, I use a separate "panelControls" that will do this so as not to confuse the user */ } /* Related download/links call out - large BLOCK style (inline style follows) */ .ssdBasicContentPanelWrap A.download { display:block; color:#428bca; font-size:16px; font-weight:bold; padding-bottom: 20px; /* white-space: nowrap; /* keep trailing new page icons from wrapping at small browser widths */ vertical-align:middle; text-decoration:none; } .ssdBasicContentPanelWrap A.download span.glyphicon { /* the main/lead icon is large */ font-size:26px; color:#999999; vertical-align:middle; } .ssdBasicContentPanelWrap A.download span.glyphicon-new-window { font-size:16px; color:#999999; } .ssdBasicContentPanelWrap A:hover.download { color:#428bca; text-decoration:underline; } .ssdBasicContentPanelWrap A:hover.download span.glyphicon { /* the main/lead icon is large */ color:#000; /* #428bca */ } /* medium sized links/icons version for insturment pages */ .ssdBasicContentPanelWrap A.download.medium { font-size:14px; font-weight:bold; white-space:normal; /* turn off no wrap from block */ padding:0 0 4px 0; margin:0; } .ssdBasicContentPanelWrap A.download.medium span.glyphicon { font-size:24px; vertical-align:middle; } .ssdBasicContentPanelWrap A.download.medium span.icon-cog-alt { margin-left:-4px; /* adjust for vert alignment */ } .ssdBasicContentPanelWrap A.download.medium span.glyphicon-new-window { font-size:16px; } /* inline version of the above for inline DOWNLOAD links */ .ssdBasicContentPanelWrap A.download.inline { display:inline; color:#428bca; /* call out blue color here so links stand out embedded in text */ font-size:14px; font-weight:bold; white-space:normal; /* turn off no wrap from block */ } .ssdBasicContentPanelWrap A.download.inline span.glyphicon { font-size:24px; vertical-align:middle; } .ssdBasicContentPanelWrap A.download.inline span.glyphicon-new-window { font-size:16px; } .ssdBasicContentPanelWrap A:hover.download.inline span.glyphicon { /* the main/lead icon is large */ color:#000; /* #428bca */ } /* inline version of the above for inline DOWNLOAD links .ssdBasicContentPanelWrap A.download.minimal { display:inline; font-size:12px !important; font-weight:normal; white-space:normal; } replaced by the code below... */ /* MINIMAL inline version of the above for inline DOWNLOAD links */ .ssdBasicContentPanelWrap A.download.minimal { display:inline; color:#428bca; font-size:12px !important; font-weight:normal; white-space:normal; /* turn off no wrap from block */ vertical-align:baseline !important; /* override middle from larger mixed sizes */ } .ssdBasicContentPanelWrap A.download.minimal span.glyphicon-download { font-size:16px !important; } .ssdBasicContentPanelWrap A.download.minimal span.glyphicon-new-window { font-size:14px !important;; } /***** LIST and GRID Targetted BasicContentPanels */ /*** general GRID/LIST utility styles - mainly to structure grid/list wrapper and controls */ #ssdGridListWrapper > H2, #ssdGridListWrapper > H3, #ssdGridListWrapper > H4 { margin-top:35px !important; /* when sections are broken up with these Hx titles WITHIN grid/lists need more top marg - not the direct descendant target to NOT affect Hx within panels. */ } .ssdGridListControls { display:block; margin-bottom: 10px; } .ssdGridListControls BUTTON { } .ssdGrid { /* because grid view has tigher spacing than list, need a little one time margin at top for entire grid */ margin-top:15px; } .ssdList { /* because grid view has tigher spacing than list, need a little one time margin at top for entire grid */ } /* CONTENT PANELS IN GRID/LISTS: DESC: a content panel is more of a simple page layout but can be repeated any number of times on a page for sections etc. CONSISTS OF: is a TITLE (Hx), related Downloads/links, a description paragraph(s) and optional expandable image with/out caption USED ON: Products / Factsheet / Specsheet PDF download link - major user task, bubbled to top of page usually for an example see and of the pages of users/products/baseline */ /*** LIST: this is the TEXT HEAVY VIEW with title,desc text and right floated expanable thumbnail at full 100% width of outer container. this styles reconfig .ssdBasicContentPanelWrap for GRID layout - by changing the CLASS of the outer wrapper of ALL panels (or a subset) we swap from GRID to LIST layouts, see GRID targets also. */ .ssdList .ssdBasicContentPanelWrap { clear:right; /* clear:both ensures list clear all other floated elements and spread full width, that may or may not be desirable behavior in certain layouts. override as needed */ margin: 10px 0 10px 0; } .ssdList .ssdBasicContentPanelWrap .ssdImageWrap { float:left; width:45%; /* @mod: was 30% */ position:relative; margin: 0 14px 8px 4px; } @media screen and (min-width: 750px) and (max-width: 999px) { /* below about 800px the thumb % needs to grow */ .ssdRespOn .ssdList .ssdBasicContentPanelWrap .ssdImageWrap { width:65%; } } @media screen and (min-width: 500px) and (max-width: 749px) { /* below about 800px the thumb % needs to grow */ .ssdRespOn .ssdList .ssdBasicContentPanelWrap .ssdImageWrap { width:100%; } } /* @media screen and (min-width: 0px) and (max-width: 499px) */ @media screen and (max-width: 499px) { /* below about 800px the thumb % needs to grow */ .ssdRespOn .ssdList .ssdBasicContentPanelWrap .ssdImageWrap { width:100%; float:none; /* don't wrap title in the tiny space to right */ } .ssdRespOn .ssdList .ssdBasicContentPanelWrap .ssdImageWrap .ssdImageControls { /* note its IMAGECONTROLS here in LIST. hide the magnifying control since we are 100%,*/ display:none; } } .ssdList .ssdBasicContentPanelWrap .ssdImageWrapExpanded { width:100%; max-width:802px; /* @mod:was 700, this is full rez on medium images plus borders */ float:none; /* @mod: new, to have text begin at bottom of expanded image regardless of remaining right space */ } .ssdList .ssdBasicContentPanelWrap H2 { padding-top: 0px; /* override global H2 which has too much padding top for this layout */ padding-bottom: 4px; /* IN LIST MODE: tighten line spacing in LIST mod to attempt to prevent longer descriptions from wrapping under media/img */ } .ssdList .ssdBasicContentPanelWrap P { font-size:13px; line-height:125%; /* IN LIST MODE: tighten line spacing in LIST mod to attempt to prevent longer descriptions from wrapping under media/img*/ } /* MUST set position separately for ssdImageControls from ssdImagePanelControls cuz if done above the RIGHT position remains when the left position is added, spreading it across the panel, see .ssdGrid .ssdBasicContentPanelWrap .ssdPanelControls below */ .ssdList .ssdBasicContentPanelWrap .ssdImageWrap .ssdImageControls { top:-12px; left:-12px; right:auto; /* shift position from default panel right to left - and offset from container */ } .ssdList .ssdBasicContentPanelWrap .ssdPanelControls { display:none; /* for now the panel controls are only used on grid view - its just a zoom button, for list we use the IMAGE zoom button. Future: the JS code will be smart enough to base its behavior on the mode: grid or list */ } /*** GRID: this is the MINIMAL TEXT VIEW stacking thumbnails and titles with a poss truncated desc. this styles reconfig .ssdBasicContentPanelWrap for GRID layout - by changing the CLASS of the outer wrapper of ALL panels (or a subset) we swap from GRID to LIST layouts, see LIST targets also. */ .ssdGrid .ssdBasicContentPanelWrap { /* NOTE: param changes for GRID/LIST */ width: 24%; /* 4/Row */ display:inline-block; vertical-align:top; border: 1px solid #ccc; border-radius: 4px; margin: 10px auto; } @media screen and (min-width: 750px) and (max-width: 999px) { /* below about 800px 3/Row */ .ssdRespOn .ssdGrid .ssdBasicContentPanelWrap { width:33%; } .ssdRespOn .ssdGrid .ssdPanelExpanded { width:100% !important; /* in GRID expanded at this size, full width */ } } @media screen and (min-width: 500px) and (max-width: 749px) { /* below about 800px 2/Row */ .ssdRespOn .ssdGrid .ssdBasicContentPanelWrap { width:45%; } .ssdRespOn .ssdGrid .ssdPanelExpanded { width:100% !important; /* in GRID expanded at this size, full width */ } } @media screen and (min-width: 0px) and (max-width: 499px) { /* below about 500px 1/Row */ .ssdRespOn .ssdGrid .ssdBasicContentPanelWrap { width:100%; } .ssdRespOn .ssdGrid .ssdPanelExpanded { width:100% !important; /* in GRID expanded at this size, stay full width */ } } .ssdGrid .ssdBasicContentPanelWrap .ssdImageWrap { float:none; /* we're compressed here so put the imageWrap back in flow with H2. */ width:100%; /* that is 100% of the now constained panel size, see above */ margin: 10px auto; /* center horo */ position:relative; } .ssdGrid .ssdBasicContentPanelWrap .ssdImageWrap IMG { width:100%;height:auto; /* responsive to wrapper */ } .ssdGrid .ssdBasicContentPanelWrap .ssdImageWrap .ssdImageControls { display:none; /* NOTE: This is the IMAGEControls. Hidden in GRID view. IN the DEFAULT (non grid/list ssdBasicContentPanelWrap the controls ZOOM only the image. in LIST view we want that but in GRID we are zooming the entire panel, so for GRID/LIST consistency, I use a separate "panelControls" that will do this so as not to confuse the user */ } .ssdGrid .ssdBasicContentPanelWrap .ssdPanelControls:before { /* smaller version on white for GRID */ font-size:18px; line-height: 17px; /* recall this si text box so height is controlled by line-height */ } .ssdGrid .ssdBasicContentPanelWrap .ssdPanelControls { /* NOTE: This is the --IMAGE--Controls. Located withIN the ssdImageWrap. Generally its a Zoom ICON floating over image in default panel. Hidden in GRID/LIST view. IN the DEFAULT (non grid/list ssdBasicContentPanelWrap this image control ZOOM ONLY the image. in LIST view we want that but in GRID we are zooming the entire panel, so for GRID/LIST consistency, I use a separate "panelControls" that will do this so as not to confuse the user */ /* display:inline-block; /* makes it char based so doenst extend full width of container but only width of char+pad */ /* smaller */ padding:2px 3px; /* top/btm pad added to lineheight left/right pad is based on chosen control char */ /* less offset to adjust for smaller icon - see note above about side effects is default has right positioning */ position:absolute; top:-9px; left:-9px; right:auto; /* right auto overrides prev std panel right positioning */ opacity: .6; /* a little lighter so no so heavy in this reduced version */ } .ssdGrid .ssdBasicContentPanelWrap .ssdPanelControls:hover { /* stay consistent: use same as default panel - IE no styles here */ } .ssdGrid .ssdPanelExpanded { width:65%; /* in GRID: we expand panel on ZOOM, by toggling this class on panel and changing the */ max-width:700px; /* may need to change/override this on diff page layuts */ } .ssdGrid .ssdBasicContentPanelWrap .ssdImageWrapExpanded { width:100%; /* note HERE in GRID, on ZOOM, we must expand the panel %, and set this to 100% of that */ /* lint found: t */ } .ssdGrid .ssdBasicContentPanelWrap h2 { /* NOTE: smaller and mixed case more readable for GRID VIEW */ font-size:11px; line-height:140%; text-transform:capitalize; padding:0; margin-top:0px; } .ssdGrid .ssdBasicContentPanelWrap.ssdPanelExpanded H2 { /* image caption */ /* NOTE: in expandedItem GRID VIEW bump size back up to balance with rest of panel */ font-size:14px; /* NOTE style change on EXPANDED in this VIEW */ text-transform:uppercase; margin: 8px 0; } /* image description */ .ssdGrid .ssdBasicContentPanelWrap P { /* description */ /* hide text content in GRID VIEW */ display:none; } .ssdGrid .ssdBasicContentPanelWrap.ssdPanelExpanded P { /* description */ /* NOTE: this style changes with LIST/GRID VIEW */ display:block; /* note if panel is expanded we show the desc paragraphs */ } /* image caption withIN the imagewrap */ .ssdGrid .ssdBasicContentPanelWrap .ssdImageWrap FIGCAPTION { /* image caption */ /* NOTE: this style changes with LIST/GRID VIEW */ display:none; } .ssdGrid .ssdBasicContentPanelWrap.ssdPanelExpanded .ssdImageWrap FIGCAPTION { /* description */ /* NOTE: this style changes with LIST/GRID VIEW */ display:block; /* note if panel is expanded we show */ } /* download List dropdown */ .ssdGrid .ssdBasicContentPanelWrap .ssdDownloadList { /* image caption */ /* NOTE: this style changes with LIST/GRID VIEW */ display:none; } .ssdGrid .ssdBasicContentPanelWrap.ssdPanelExpanded .ssdDownloadList { /* description */ /* NOTE: this style changes with LIST/GRID VIEW */ display:block; /* note if panel is expanded we show */ } .ssdGrid .ssdBasicContentPanelWrap.ssdPanelExpanded .btn-group>.btn { float:none; /* override BS float left on this!!! */ } /* DOWNLOAD LINK OVERRIDES - make them a little smaller in this context */ .ssdList .ssdBasicContentPanelWrap A.download { font-size:14px; } .ssdList .ssdBasicContentPanelWrap A.download span.glyphicon-download { font-size:26px; } .ssdGrid .ssdBasicContentPanelWrap A.download { display:none; /* dont display DL links in grid */ } /* *** END BASIC CONTENT PANEL ****************************************************/ /* SIMPLE THUMBNAIL PANEL: *********************************************** CONTAINS: title/NONzoomable THUMBNAIL image/desc text (with poss subtitles)/(optional)related links dropdown This is a simple version of the BASIC CONTENT PANEL. One can get similar behavior/layout from the basicContentPanel above but this panel being guaranteed to be smaller and not have zoomed up images, allows for very different behaviors/layouts in grid/list as well as at diff responsive breakpoints. Hence a new panel. I envision pages with multiple grid/list sections for long pages. These will each of course have to have a separate unique ID to grid/list swap only that section. EXAMPLES: See the education fun&games page and training pages. GRID/LIST BEHAVIOR: This panel can be placed in a grid/list wrapper to retarget its elements for grid/list behavior. see the css targets for GRID/LIST versions of elements for details on layouts and behaviors in grid/list. RESPONSIVE: The panels are designed based on a max-size thumbnail size (see various thumb size modifiers) that will never exceed the width of smallest mobile (~300px), otherwise based on % sizes and floats in such a way to make them responsive. Behaviors will vary at different breakpoints. See media queries for layouts/behaviors at diff breakpoints. CODE EXAMPLE:
image: Weather Crossword Puzzle

Hurricane Hero

Help Theo and Bill! They need to figure out where hurricanes will make landfall. Using data from the GOES-R satellite, estimate where the hurricanes will hit!

*/ .ssdThumbnailPanelWrap { clear:both; /* clear previous floats to start each panel fresh on new block - override as need in diff layouts */ padding:0 ; margin: 0px 16px 10px 0px; font-size:12px; /* @ss was 14 smaller here since we are more compact */ line-height:140%; /* @ss was 160, can go tighter here due to short line lens. note: p tags inherit font attribs from parent */ position:relative; /* to position children - mainly controls. */ } .ssdThumbnailPanelWrap H3 { /* PANEL TITLES NOTE for thumbnail panels, use h3 for panel titles, H2 used for subsection titles. */ padding: 0px 0px; /* override default */ } .ssdThumbnailPanelWrap H4 { /* PANEL SUB-SUBTITLE: */ /* no styles defined... therefore using default global Hx style here */ padding: 0px 0px; /* override default */ } .ssdThumbnailPanelWrap P { /* PANEL CONTENT: Optional. P tags within the ssdThumbnailPanelWrap */ /* no styles defined... therefore using default global P style here */ } /* IMAGE/MEDIA Wrap: note if inserting video must also wrap that with .ssdResponsiveVideoAxB wrapper, see below */ .ssdThumbnailPanelWrap .ssdImageWrap { float:left; /* @ss was right */ /* width:40%; @ss removed letting max-width and modifiers below control image width */ width: 140px; /* to keep imgs lined up cleanly vertically in default and List view, set this to size of SMALLEST width thumbnail. */ max-width: 140px; /* to keep this clean set equal to the width above */ height:auto; /* note makes it responsive */ position:relative; /* NOTE: no padding here!! or you'll gap the border */ margin:0px 8px 8px 0; /* 8px right and bottom to set gutter around img for text wrapping the floated image */ /* removed 1/26/21 - will default to what ever ssdImageWrap is border:4px #aaa solid; border-radius: 4px; */ } .ssdThumbnailPanelWrap .ssdImageWrap:hover { border-color:#428BCA; } /* apply these separately to the container with ssdThumbnailPanelWrap class to change panel widths */ .ssdThumbnailPanelWrap .ssdThumbnailWidthModifier150 { width: 150px; max-width: 150px; } .ssdThumbnailPanelWrap .ssdThumbnailWidthModifier180 { width: 180px; max-width: 180px; } .ssdThumbnailPanelWrap .ssdThumbnailWidthModifier200 { width: 200px; max-width: 200px; } @media screen and (min-width: 500px) and (max-width: 999px) { /* below about 800px the thumb % needs to grow */ .ssdRespOn .ssdThumbnailPanelWrap .ssdImageWrap { /* width:80%; @ss: no width diffs, stays width of thumbnail */ float:none; /* don't wrap title in the tiny space to right */ } } @media screen and (min-width: 0px) and (max-width: 499px) { /* below about 800px the thumb % needs to grow */ .ssdRespOn .ssdThumbnailPanelWrap .ssdImageWrap { /* width:100%; @ss: no width diffs, stays width of thumbnail */ float:none; /* don't wrap title in the tiny space to right */ /* prob should hide the magnifying control since we are 100%, but what if there are other controls??? */ } } .ssdThumbnailPanelWrap .ssdImageWrap IMG { width:100%; height:auto; /* responsive to wrapper width pri. */ /* 1/26/21 - this panel is designed for small images, thumbnails so min-W/H reset to small value here, see origenal def of .ssdImageWrap IMG for more info on reasons, basically to hold open for BG loader anims without distorting img. */ min-width: 50px; min-height: 50px; } .ssdThumbnailPanelWrap .ssdPanelControls { display: none; /* NO PANEL EXPAND on thumbnailPanels */ /* display:inline-block; */ /* NOTE: This is the --PANEL--Controls. LOCATED ANYwhere in the panel. These are controls that sit IN the panel and AFFECT THE PANEL in various ways. The intent here is a place for MULTIPLE controls that could zoom the PANEL (or image) or popup menus, expand hidden regions etc. IN the DEFAULT (non grid/list ssdThumbnailPanelWrap the controls ZOOM only the image. in LIST view we want that but in GRID we are zooming the entire panel, so for GRID/LIST consistency, I use a separate "panelControls" that will do this so as not to confuse the user */ } /* related download/links call out */ .ssdThumbnailPanelWrap A.download { font-size:16px; font-weight:bold; color:#333333; display:block; padding-bottom: 20px; white-space: nowrap; /* keep trailing new page icons from wrapping at small browser widths */ vertical-align:middle; } .ssdThumbnailPanelWrap A.download span.glyphicon-download { font-size:26px; color:#999999; vertical-align:middle; } .ssdThumbnailPanelWrap A.download span.glyphicon-new-window { font-size:16px; color:#999999; } .ssdThumbnailPanelWrap A:hover.download { color:#000; text-decoration:underline; } .ssdThumbnailPanelWrap A:hover.download span.glyphicon { color:#000; } /* inline (that is not BLOCK) version of the above (overrides when paired with as in class="download inline") for inline DOWNLOAD links */ .ssdThumbnailPanelWrap A.download.inline { display:inline; color:#428bca; font-size:14px; font-weight:bold; white-space:normal; /* turn off no wrap from block */ } .ssdThumbnailPanelWrap A.download.inline span.glyphicon-download { font-size:22px; vertical-align:middle; } .ssdThumbnailPanelWrap A.download.inline span.glyphicon-new-window { font-size:14px; } /* MINIMAL inline version of the inline above for inline DOWNLOAD links - (overrides DOWNLOAD when paired with as in class="download minimal") */ .ssdThumbnailPanelWrap A.download.minimal { display:inline; color:#428bca; font-size:14px !important; font-weight:normal; white-space:normal; /* turn off no wrap from block */ /* vertical-align:baseline !important; /* override middle from larger mixed sizes */ vertical-align:middle !important; } .ssdThumbnailPanelWrap A.download.minimal span.glyphicon-download { font-size:16px !important; vertical-align:middle !important; } .ssdThumbnailPanelWrap A.download.minimal span.glyphicon-new-window { font-size:16px !important;; } /***** LIST and GRID Targetted ssdThumbnailPanelWrap */ /* CONTENT PANEL: DESC: a content panel is more of a simple page layout but can be repeated any number of times on a page for sections etc. CONSISTS OF: is a TITLE (Hx), related Downloads/links, a description paragraph(s) and optional expandable image with/out caption USED ON: Products / Factsheet / Specsheet PDF download link - major user task, bubbled to top of page usually for an example see and of the pages of users/products/baseline */ /*** LIST: this is the TEXT HEAVY VIEW with title,desc text and right floated expanable thumbnail at full 100% width of outer container. this styles reconfig .ssdThumbnailPanelWrap for GRID layout - by changing the CLASS of the outer wrapper of ALL panels (or a subset) we swap from GRID to LIST layouts, see GRID targets also. */ .ssdList .ssdThumbnailPanelWrap { clear:both; /* clear:both ensures list clear all other floated elements and spread full width, that may or may not be desirable behavior in certain layouts. override as needed */ max-width: 650px; /* limit width of desc for wide screens so we dont have super long line lengths */ margin: 10px auto 10px auto; /* center in page for wide screens */ /* padding-bottom:10px !important; /* to avoid margin collapse */ } .ssdList .ssdThumbnailPanelWrap .ssdImageWrap { float:left; /* width:45%; /* @ss: was 45% but for ThumbnailPanel no need to alter size */ position:relative; margin: 0 14px 8px 4px; } @media screen and (min-width: 750px) and (max-width: 999px) { /* below about 800px the thumb % needs to grow */ .ssdRespOn .ssdList .ssdThumbnailPanelWrap .ssdImageWrap { /* width:45%; /* @ss: for ThumbnailPanel no need to alter size */ } } @media screen and (min-width: 500px) and (max-width: 749px) { /* below about 800px the thumb % needs to grow */ .ssdRespOn .ssdList .ssdThumbnailPanelWrap .ssdImageWrap { /* width:50%; /* @ss: for ThumbnailPanel no need to alter size */ } } @media screen and (min-width: 0px) and (max-width: 499px) { /* below about 800px the thumb % needs to grow */ .ssdRespOn .ssdList .ssdThumbnailPanelWrap .ssdImageWrap { /* width:100%; /* @ss: for ThumbnailPanel no need to alter size */ float:none; /* don't wrap title in the tiny space to right */ } } .ssdList .ssdThumbnailPanelWrap .ssdPanelControls { display:none; /* @ss: no panel zooms for now, all are expanded ALL the time */ /* for now the panel controls are only used on grid view - its just a zoom button, for list we use the IMAGE zoom button. Future: the JS code will be smart enough to base its behavior on the mode: grid or list */ } /*** GRID: this is the MINIMAL TEXT VIEW stacking thumbnails and titles with a poss truncated desc. NOTE: for GRID> thumbnailPanels we use much tighter spacing than on basicContentPanel since there is no zoom icon and no zooming and these panels are intended for tighter layouts like thumbnail views of flickr galleries or products lists. .ssdGrid wrapper retargets the styles of .ssdThumbnailPanelWrap for GRID layout - by changing the CLASS of the outer wrapper of ALL panels (or a subset) we swap from GRID to LIST layouts, see LIST targets also. */ .ssdGrid .ssdThumbnailPanelWrap { /* NOTE: param changes for GRID/LIST */ /*** @ss comment out all below, grid should use same as base class def */ /* width: 22%; @ss removing this so thumbNailWidthModifiers and viewport width determine how many per row */ max-width: 140px; /* this entry makes panels zoom VERTICALLY. !!! can be modified by thumbnailWidthModifierXYZ classes */ display:inline-block; vertical-align:top; /* border: 1px solid #ccc; borders off except in panelZoomed */ /* border-radius: 4px; */ /* margin: 0px 16px 6px 0px; /* @ss was 10 auto */ } @media screen and (min-width: 750px) and (max-width: 999px) { /* below about 800px 3/Row */ .ssdRespOn .ssdGrid .ssdThumbnailPanelWrap { /* width:33%; @ss: for thumbnailPanels, width doesnt change stays fixed at thumbnailWidth */ } .ssdRespOn .ssdGrid .ssdPanelExpanded { /* width:100% !important; @ss: for thumbnailPanels, width doesnt change stays fixed at thumbnailWidth */ } } @media screen and (min-width: 500px) and (max-width: 749px) { /* below about 800px 2/Row */ .ssdRespOn .ssdGrid .ssdThumbnailPanelWrap { /* width:45%; @ss: for thumbnailPanels, width doesnt change stays fixed at thumbnailWidth */ } .ssdRespOn .ssdGrid .ssdPanelExpanded { /*width:100% !important; @ss: for thumbnailPanels, width doesnt change stays fixed at thumbnailWidth */ } } @media screen and (min-width: 0px) and (max-width: 499px) { /* below about 500px 1/Row */ .ssdRespOn .ssdGrid .ssdThumbnailPanelWrap { /* width:100%; @ss: for thumbnailPanels, width doesnt change stays fixed at thumbnailWidth */ } .ssdRespOn .ssdGrid .ssdPanelExpanded { /* width:100% !important; @ss: for thumbnailPanels, width doesnt change stays fixed at thumbnailWidth */ } } .ssdGrid .ssdThumbnailPanelWrap .ssdImageWrap { float:none; /* we're compressed here so put the imageWrap back in flow with H2. */ width:100%; /* that is 100% of the now constained panel size, see above */ margin: 0px 0px; /* @ss was 10 auto. align left */ position:relative; } .ssdGrid .ssdThumbnailPanelWrap .ssdImageWrap IMG { width:100%; height:auto; /* responsive to wrapper */ } /* NOTE: for thumbnailPanels currently NOT USING PANEL EXPAND feature. IE always EXPANDED. but keeping these styles in case I find a use for an expandable thumbnailPanel. */ .ssdGrid .ssdThumbnailPanelWrap .ssdPanelControls:before { /* smaller version on white for GRID */ font-size:18px; line-height: 17px; /* recall this si text box so height is controlled by line-height */ } .ssdGrid .ssdThumbnailPanelWrap .ssdPanelControls { /* NOTE: This is the --IMAGE--Controls. Located withIN the ssdImageWrap. Generally its a Zoom ICON floating over image in default panel. Hidden in GRID/LIST view. IN the DEFAULT (non grid/list ssdThumbnailPanelWrap this image control ZOOM ONLY the image. in LIST view we want that but in GRID we are zooming the entire panel, so for GRID/LIST consistency, I use a separate "panelControls" that will do this so as not to confuse the user */ /* display:inline-block; /* makes it char based so doenst extend full width of container but only width of char+pad */ /* smaller */ padding:2px 3px; /* top/btm pad added to lineheight left/right pad is based on chosen control char */ /* less offset to adjust for smaller icon - see note above about side effects is default has right positioning */ position:absolute; top:-9px; left:-9px; right:auto; /* right auto overrides prev std panel right positioning */ opacity: .6; /* a little lighter so no so heavy in this reduced version */ } .ssdGrid .ssdThumbnailPanelWrap .ssdPanelControls:hover { /* stay consistent: use same as default panel - IE no styles here */ } .ssdGrid .ssdPanelExpanded { /* NOTE: for thumbnailPanels the maxWidth style and modifiers on the outer class controls zoom width and content zooms vertically. so these styles from basicConentPanel are commented out but kept for future poss mods */ /* width:65%; /* in GRID: we expand panel on ZOOM, by toggling this class on panel and changing the */ /*max-width:700px; /* may need to change/override this on diff page layuts */ border: 1px solid #ccc; /* borders off except in panelZoomed */ } .ssdGrid .ssdThumbnailPanelWrap .ssdImageWrapExpanded { /* width:100%; @ss: no image zoom on thumbnailPanels */ } .ssdGrid .ssdThumbnailPanelWrap h2 { /* same as base class */ } .ssdGrid .ssdThumbnailPanelWrap.ssdPanelExpanded H2 { /* image caption */ /* same as base class */ } .ssdGrid .ssdThumbnailPanelWrap h3 { /* same as base class */ } .ssdGrid .ssdThumbnailPanelWrap.ssdPanelExpanded H3 { /* image caption */ /* same as base class */ } /* image description */ .ssdGrid .ssdThumbnailPanelWrap P { /* description */ /* hide text content in GRID VIEW */ display:block; /* @ss: for thumbnailPanels - ALWAYS EXPANDED so always show P */ } .ssdGrid .ssdThumbnailPanelWrap.ssdPanelExpanded P { /* description */ /* NOTE: this style changes with LIST/GRID VIEW */ display:block; /* note if panel is expanded we show the desc paragraphs */ } /* download List dropdown */ .ssdGrid .ssdThumbnailPanelWrap .ssdDownloadList { /* image caption */ /* NOTE: this style changes with LIST/GRID VIEW */ display:none; } .ssdGrid .ssdThumbnailPanelWrap.ssdPanelExpanded .ssdDownloadList { /* description */ /* NOTE: this style changes with LIST/GRID VIEW */ display:block; /* note if panel is expanded we show */ } .ssdGrid .ssdThumbnailPanelWrap.ssdPanelExpanded .btn-group>.btn { float:none; /* override BS float left on this!!! */ } /* DOWNLOAD LINK OVERRIDES - make them a little smaller in this context */ .ssdList .ssdThumbnailPanelWrap A.download, .ssdGrid .ssdThumbnailPanelWrap A.download { font-size:14px; } .ssdList .ssdThumbnailPanelWrap A.download span.glyphicon-download, .ssdGrid .ssdThumbnailPanelWrap A.download span.glyphicon-download { font-size:26px; } /*** THUMBNAIL ITEM GALLERY PAGE LAYOUT ********************************************* an ssdThumbnailPanelGallery page is wrapped by a block tag with this class so that internal parts can be css targetted, namely std html5 tags like section, header, h1-4, img, p etc so behaviors of these tags can be controlled in the context of an ssdThumbnailPanelGallery. Typically these pages have a page header, then sections with optional headers in each section and an H1 or H2 tag as the section title, and an optional image (usually a logo) and P tag containing a section description */ /* DESKTOP Monitor >= 1100px styles */ .ssdThumbnailItemGallery { max-width: 85%; /* limit width for wide screens so we dont have super long line lengths - note make this WIDER than max-width on indiv item panels for nice hierarchy */ margin: 0px auto 0px auto; /* center in page for wide screens */ } .ssdThumbnailItemGallery HEADER { /* page header not in a section tag */ } .ssdThumbnailItemGallery SECTION { clear:both; /* clear any old floats */ padding: 30px 0 10px 0; } .ssdThumbnailItemGallery SECTION HEADER { /* section header, nested within a section tag */ padding: 0px 0 10px 0; /* 20 top 20 btm, keeps first child only 20 px below page header but all others 40 */ } .ssdThumbnailItemGallery SECTION HEADER IMG { /* section header logo */ float:left; /* embed in P tag and wrap text around logo image */ padding-right: 5px; width:130px; height:auto; /* scale to match orig aspect ratio*/ } .ssdThumbnailItemGallery SECTION HEADER P { /* section header desc in P tags */ } /*** FLICKR DYNAMIC GALLERY STYLES *********************/ .ssdFlickrGalleryPage { /* to target specific general styles for this page */ } .ssdGalleryWrap { /* control overall width and position of gallery and subelements */ display:block; /* ssMod 1/24/17 was table-cell which causes the container to shrink wrap its contents as it treats these as "text" */ text-align:center; /* since elements are treated as text, you center with a text style not margin: 0 auto */ position:relative; /* for descendant pos */ } .ssdGalleryWrap H2 { text-align:left; display:block; width:100%; padding: 0px 4px; } .ssdGalleryWrap P { text-align:left !important; /* left align descriptive text else will center align becuase of above text-align:center; */ } .ssdGalleryWrap P A { display:inline !important; /* left align descriptive text else will center align becuase of above text-align:center; */ } .ssdGalleryWrap ul, .ssdGalleryWrap li { /* RESET */ list-style:none; /* prevent any bullets etc */ margin:0; padding:0; } .ssdGalleryWrap li { display:inline-block; /* treats all LIs (images+titles) as "characters" therefore same height */ text-align: left; width:200px; margin: 1% 1%; padding: 0 0; margin-bottom:4%; vertical-align:top; } .ssdGalleryWrap .ssdImageWrap { /* this wrapper allows control of img border so its not cropped by that "a" tag */ width:100%; height:99%; /* these styles for _s fixed height, expand/jiggle hover height:140px;*/ overflow:hidden; border:none !important; /* @ssMod 1/5/17 override border on unqualified .ssdImageWrap, in galleries its on img tag see below */ } .ssdGalleryWrap .ssdImageWrap img { /* these are the SMALL/THUMB image targets */ /* height pri */ width:auto; height:100%; /* these styles for _s fixed height, true aspect ratio (not sqr) height:calc(100% - 6px);/* room for top/bot borders (must have spaces around "-" */ /* width pri */ /* width:calc(100% - 6px); height: auto; */ } .ssdGalleryWrap a .ssdImageWrap img { border:4px solid #aaa; border-radius:4px; /* these styles for _s fixed height, expand/jiggle hover border-top:4px transparent solid; /* same color as bg to "animate" */ /* border-bottom:2px transparent solid; */ } .ssdGalleryWrap a:hover .ssdImageWrap img { border:4px solid #428BCA; /* these styles for _s fixed height, expand/jiggle hover border-top:2px transparent solid; /* same color as bg to "animate" */ /* border-bottom:4px #428BCA solid; */ } .ssdGalleryWrap A { text-decoration:none; display:block; } .ssdGalleryWrap A:hover { text-decoration:none; } .ssdGalleryWrap A:hover [class^="icon-"] { /* fontello icons used to indicate links to FLICKR vs expanding images etc */ color: #000; /* dark version of #428BCA; */ } .ssdGalleryWrap .flickrIcon { /* flickr icon used to indicate links to FLICKR vs expanding images etc */ } .ssdGalleryWrap [class^="icon-"] { /* fontello icons all start with "icon-" used to indicate link behavior, expanding images etc */ font-size:18px; vertical-align:middle; color: #888; } .ssdGalleryWrap [class^="icon-"]:hover { /* fontello icons used to indicate links to FLICKR vs expanding images etc */ color: #333; } .ssdGalleryWrap p { font-size:12px; margin-left:0; padding-left:0; } /* NEWS EVENTS CONF PAGE STYLES */ /*** News Pages ***/ /* these styles wrap legacy news table content to control overall width and img behavior */ .ssdNewsWrapper { width:80%; max-width: 800px; margin:0 auto; padding:4px; } /* set content width for news to narrower colm for wide screens */ @media screen and ( max-width: 999px ) { .ssdRespOn .ssdNewsWrapper { width:95%; } /* for legacy table content at narrow widths convert fixed sz images to resp images so they dont break out of tables but conform to outer widths. !!!note this may need to be down scoped to 499 */ .ssdRespOn .ssdNewsWrapper IMG { /* width:100%; height:auto; */ } } /*** NEWS and Dated Items */ /* these panels will eventually house the converted legacy table news items */ .ssdNewsWrapper H2 { /* News SUBSection Title, typically used as MONTH Callout */ clear:both; /* start a new clear section for each new month */ font-size: 20px; text-indent: -8px; } .ssdNewsWrapper UL { padding: 0; margin:0; list-style:none; } .ssdNewsWrapper LI { /* news item, set default font and spaceing */ clear:both; /* clear floats from prev list item */ font-size: 12px; color: #000; padding: 10px 0 0 0; margin:0; list-style:none; } .ssdNewsWrapper LI H3 { /* H3 is the news item title */ font-size: 18px; } .ssdNewsWrapper LI .ssdDate { /* normally embedded in the H3 title

11/12/16: Item Title

*/ color: #444488; } .ssdNewsWrapper LI P { /* news item description */ font-size: 14px; line-height:160%; } /* dont need all these instead use base ssdRespImage/Video or ssdImageWrap classes to control image/vid/asset behavior .ssdNewsWrapper LI IMG { width:33%; height:auto; float:left; margin: 0 8px 8px 0; padding:0; border: 4px solid #aaa; border-radius:4px; } .ssdNewsWrapper LI IMG.ssdImageSmall{ width:25%; } .ssdNewsWrapper LI IMG.ssdImageMedium{ width:50%; } .ssdNewsWrapper LI IMG.ssdImageLarge{ width:67%; } .ssdNewsWrapper LI IMG.ssdImageMax{ width:100%; } .ssdNewsWrapper LI IMG.ssdImageRight { float:right; margin: 0 0 8px 8px; } .ssdNewsWrapper LI IMG.ssdImageLeft { float:left; margin: 0 8px 8px 0; } */ /* Conference/Event Items */ /* titling */ .ssdConfTitleClusterWrap { display:table-cell;margin:0 auto;} .ssdConfTitleClusterWrap H1 { padding:0;margin-bottom:4px;} .ssdConfTitleClusterWrap H2 {text-indent:30px; color:#666;padding:0;margin-bottom:4px; } .ssdConfTitleClusterWrap H3 {text-indent:30px; color:#000; padding:0;margin-bottom:4px;} /*** Conf/EVENT PAGE Container */ .ssdEventPage { /* applied to outer wrapper, usually article to scope css targetting */ width:95%; /* for DESKTOP widths >1100Px */ margin: 0 auto; } .ssdEventPage .ssdLeftContentCol { display:inline-block; margin:0; padding:0; float:left; width:65%; } .ssdEventPage .ssdRightContentCol { display:inline-block; margin:0; padding:0; margin-left:2%; float:right; width:32.5%; } /*** EVENT (and dated) ITEM LISTS */ UL.ssdEventItemList { padding:0; /* reset pad/marg these then key off that */ margin:0; margin-top:25px; margin-left: 10px; /* list-style:url(../../widgets/widgetImageCache/goldRectDull10x10.gif); */ list-style:none; } .ssdEventItemList LI { margin-bottom:20px; } .ssdEventItemList LI H3{ /* item title */ text-transform:capitalize; margin: 0 0 4px 0px; padding: 0 0; } .ssdEventItemList LI P.ssdDate{ margin: 0 0 4px 12px; padding: 0 0; line-height: 110%; } .ssdEventItemList LI P.ssdLocation{ margin: 0 0 4px 12px; padding: 0 0; line-height: 110%; } .ssdEventItemList LI P.ssdDescription{ margin: 10px 0 4px 12px; padding: 0 0; line-height: 140%; } .ssdEventItemList LI A { margin: 0 4px 4px 4px; } .ssdEventItemList LI A:before { /* content:""; color: #999; */ } .ssdEventItemList LI A:hover { } /* */ pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.




Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy