tags to spread out the approved comments 8/7/2020 Add "field--name-comment-body" so only impacts comments since "div.field--label-inline" is also used for "blog date/authors(s)/Tags" on the blogs. */ .page-node-type-blog-sosassociates article .field--name-comment-body div.field--label-inline, /* 5/5/2020 padding above "Comment" and "Twitter Name" */ .page-node-type-blog-sosassociates article .field--name-comment-body div.field--label-above /* 5/5/2020 padding above "Website" */ { padding: 10px 0 0 0; } /* END Full Blogging pages Class="page-node-type-blog-sosassociates" */ /* =================================================================================================== END - JULY 22, 2020 - ALL =================================================================================================== */ /* =================================================================================================== START - JULY 22, 2020 - MOBILE smaller than or equal to 768 px @media all and (max-width: 768px) { } =================================================================================================== */ @media all and (max-width: 768px) { /* 7/22/2020 Changed the "Terminal-Tower-Mobile.gif" image so attached to "body" instead of "breadcrumb" */ body { margin: 0 0 -280px -10px; padding: 0 0 10px 10px; background-image: url(images/Terminal-Tower-Mobile.gif); background-repeat: no-repeat; background-position: 0px 200px; /* x y -- x = 0 so on edge. y = 170px from the top */ height: 390px; /* position: relative; z-index: 200; Must make relative if use z-index per: http://www.w3schools.com/cssref/pr_pos_z-index.asp */ } /* 8/7/2020 Need to remove the navbar for top margin for mobile view. */ body.navbar-is-fixed-top { margin-top: 0; } /* 7/22/2020 Hide the main menu block that contains the "superfish-main" navigation for mobile view < 768 px. */ #block-mainmenu, #navbar /* 8/7/2020 since moved everything out of the navigation block in mobile view, display none. */ { display: none; } /* 7/23/2020 For the home page the "Terminal-Tower-Mobile.gif" image move up higher. */ body.sosAssociates-home-page { margin: 0 0 -280px -10px; padding: 0 0 10px 10px; background-image: url(images/Terminal-Tower-Mobile.gif); background-repeat: no-repeat; background-position: 0px 175px; /* x y -- x = 0 so on edge. y = 170px from the top */ height: 390px; /* position: relative; z-index: 200; Must make relative if use z-index per: http://www.w3schools.com/cssref/pr_pos_z-index.asp */ } /* START OF Mobile Top Navigation 7/22/2020 */ /* 7/22/2020 Format the top menu (in new block headersosAssociates created 8/6/2020) I created "menu--sosassociates-mobile-top-navigat" only for mobile view < 768 px. */ .headersosAssociates.col-sm-12 { /* 8/6/2020 Need to overwrite class "col-sm-12" from grid.less */ padding-right: 0; padding-left: 0; /* 8/7/2020 Need to overwrite ".container" that is around it. */ margin-right: -15px; margin-left: -15px; } .menu--sosassociates-mobile-top-navigat{ background-color: #000; color: #FFF; font-size: 20px; padding: 5px 0 10px 0; margin: 0 0 10px 0; } .menu--sosassociates-mobile-top-navigat a:link, .menu--sosassociates-mobile-top-navigat a:visited, .menu--sosassociates-mobile-top-navigat a:active, .menu--sosassociates-mobile-top-navigat a:hover { color: #FFF; padding: 0px; margin: 0px; display: block; text-align: center; line-height: 28px; /* 7/22/2020 change from "20" to "28" */ } .menu--sosassociates-mobile-top-navigat a:link.is-active, .menu--sosassociates-mobile-top-navigat a:visited.is-active { color: #A9A9A9; /* 7/22/2020 For Drupal 9 site change from black "#000" to dark gray "#A9A9A9". */ background-color: #000; /* in Drupal 7 site MUST NOT USE FOR MESS UP ACTIVE FOR LARGER PAGES but 7/20/2020 add and worked great in Drupal 9 */ background-image: url(images/Nav-Active-Mobile.gif); background-repeat: no-repeat; background-position: center center; padding: 0px; margin: 0px; line-height: 28px; } /* END OF Mobile Top Navigation */ /* START OF SPECIAL INLINE CSS - TYPE INTO DRUPAL BODY - Created 5/25/12 */ .TwitterWidth {padding:0px; margin:0 0 0 -30px;} /* Use for scroll area for tweets */ /* END OF SPECIAL INLINE CSS - TYPE INTO DRUPAL BODY */ } /* END OF "@media all and (max-width: 768px)" */ /* =================================================================================================== END - JULY 22, 2020 - MOBILE =================================================================================================== */ /* =================================================================================================== START - JULY 22, 2020 - NARROW larger than 768 px @media all and (min-width: 768px) and (min-device-width: 768px), (max-device-width: 800px) and (min-width: 768px) and (orientation:landscape) { } =================================================================================================== */ @media all and (min-width: 768px) and (min-device-width: 768px), (max-device-width: 800px) and (min-width: 768px) and (orientation:landscape) { /* Scale Background image to browser size. In order for it also to work in all current versions of IE one would have to include the IEFilter using: http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html */ body { background: url(images/Terminal-Tower-1024x500.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sos/sites/all/themes/sosAssociates/css/images/Terminal-Tower-1024x500.jpg', sizingMethod='scale'); /* The path for the image when using filter is relative to the HTML page and not the CSS file. */ -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sos/sites/all/themes/sosAssociates/css/images/Terminal-Tower-1024x500.jpg', sizingMethod='scale')"; /* The path for the image when using filter is relative to the HTML page and not the CSS file. */ width: 100%; height: 100%; } /* 8/16/2020 Julie said to remove "h1" so that the top of every page "class=page-header" will have the font: "Aclonica,Georgia,'Times New Roman',serif" */ h1.page-header { font-family: Aclonica, Georgia, 'Times New Roman', serif; /* Drupal 7 had FontYourFace module, but 7/22/2020 I add "Aclonica" Google font to Drupal 9 custom block "Google Font CSS Custom Block Add html" */ } h1, h2, h3, h4, h5, h6 { font-family: 'Gudea', Georgia, 'Times New Roman', serif; /* Add Google font with FontYourFace module. 2/26/12 start using Gudea bold (must pick font-weight bold to use.) */ font-weight: bold; /* Installed Gudea bold so can have all headers bold. */ } /* START Undo mobile */ h1 {font-size: 36px;} /* Need to change back to default size of 36px to over-ride mobile size. */ #block-sosassociatesmobiletopnavigation-2 /* 7/26/2020 hide mobile top navigation */ { display: none; } /* 8/7/2020 ".headersosAssociates" class holds both the search (#block-searchform) and the breadcrumbs. Need to move it below the top nav */ .headersosAssociates { margin-top: 70px; } /* 7/26/2020 Move the Search area to the right. */ #block-searchform { float: right; } /* START "superfish-main" top most row of the mega menu style navigation. */ #superfish-main { background-color: #000; color: #FFFFFF; font-size: .9em; /* 7/26/2020 change rom .8em to .9em */ height: 65px; /* 7/26/2020 change rom 50px to 65px */ line-height: 30px; /* 7/26/2020 change rom 50px; to 30px; */ /* Align text vertically by set line height to ul height. */ -moz-border-radius: 10px; border-radius: 10px; } /* 7/26/2020 Need to over ride "scaffolding.less" "float: left;" so black bar at top navigation area is all the way across. */ .navbar-header { float: none; } /* 7/26/2020 "sf-depth-1" controls that only for two row of the super fish navigation. First, set area size. */ #superfish-main .sf-depth-1 a:link, #superfish-main .sf-depth-1 a:visited { text-decoration: none; padding: 16px 20px 16px 20px; color: #FFF; margin: 0px; } /* 7/26/2020 Can apply multiple background images to one element. "CSS Basics: Using Multiple Backgrounds" via @chriscoyier on @css. https://css-tricks.com/css-basics-using-multiple-backgrounds/ */ #superfish-main .sf-depth-1 a:active, #superfish-main .sf-depth-1 a:hover { text-decoration: none; background-image: url(images/Nav-roll-over-right.gif), url(images/Nav-roll-over-left.gif); background-repeat: no-repeat; background-position: center right, center left; } /* When the link is active (i.e., on top tier page) */ #superfish-main .sf-depth-1 a:link.is-active, #superfish-main .sf-depth-1 a:visited.is-active { text-decoration: none; padding: 16px 20px 16px 20px; margin: 0px; color: #8A0808; /* sosAssociates Red */ /* font-weight: bold; 7/26/2020 Remove "Bold" for "is-active" */ margin: 0px; text-decoration: none; background-image: url(images/Nav-Active-right.gif), url(images/Nav-Active-left.gif); background-repeat: no-repeat; background-position: center right, center left; } /* START Home Logo 92x92 - remove the default roll-over and active gifs and replace with sosAssociates.com logo for link at #main-menu-link-content115cfd97-f129-420e-8a90-0a6283619ede */ #main-menu-link-content115cfd97-f129-420e-8a90-0a6283619ede a:link, #main-menu-link-content115cfd97-f129-420e-8a90-0a6283619ede a:visited, /* When the link is active (i.e., on top tier page) */ #main-menu-link-content115cfd97-f129-420e-8a90-0a6283619ede a:link.is-active, #main-menu-link-content115cfd97-f129-420e-8a90-0a6283619ede a:visited.is-active, #main-menu-link-content115cfd97-f129-420e-8a90-0a6283619ede a:active, #main-menu-link-content115cfd97-f129-420e-8a90-0a6283619ede a:hover { text-indent: -9999px; float:left; /* Must have float left for image to show and text-indent */ width: 92px; height: 92px; padding: 0px!important; /* IMPORTANT: Must make "!important" to override "#superfish-main .sf-depth-1 a:link" settings. */ margin: 20px 20px -50px 20px!important; /* IMPORTANT: Must make "!important" to override "#superfish-main .sf-depth-1 a:link" settings. Make bottom margin "-50px" so that area not interfers with items below it. */ background-image:url(images/sosAsssociates-Logo.gif)!important; /* IMPORTANT: Must make "!important" to override "#superfish-main .sf-depth-1 a:link" settings. */ background-repeat: no-repeat!important; /* IMPORTANT: Must make "!important" to override "#superfish-main .sf-depth-1 a:link" settings. */ background-position: center right!important; /* IMPORTANT: Must make "!important" to override "#superfish-main .sf-depth-1 a:link" settings. */ } /* END Home Logo */ /* .sf-multicolumn */ #superfish-main .sf-multicolumn, #superfish-main .sf-multicolumn a, #superfish-main .sf-multicolumn a:link, #superfish-main .sf-multicolumn a:visited, #superfish-main .sf-multicolumn a:hover, #superfish-main .sf-multicolumn a:active { background-image: none; /* background-color: #FFF; 7/26/2020 Remove background color. */ text-align: left; height: auto; color: #009; /* menu links default blue. */ padding: 0; margin: 5px 15px 10px 0; text-decoration: none; line-height:normal; /* 11/22/13 Add to two places in sosAssociates-alpha-default.css to improve spacing of MegaMenu */ font-size: 1em; } #superfish-main .sf-multicolumn a:link.is-active, #superfish-main .sf-multicolumn a:visited.is-active { text-align: left; height: auto; text-decoration:none; color: #009; /* menu links default blue. */ font-weight: bold; margin: 5px 5px 5px 0; padding: 0 0 0 12px; /* Pad left for bullet.gif */ background-image: url(images/Bullet.gif); background-repeat: no-repeat; background-position: top left; color: #8A0808; /* sosAssociates Red */ } #superfish-main .sf-multicolumn a:hover {color: #8A0808;} /* sosAssociates Red */ /* .sf-multicolumn */ #superfish-main .sf-multicolumn { z-index:-1; margin-top: 18px; line-height:2em; color: #000; border: #8A0808 solid 2px; -moz-border-radius: 30px; border-radius: 30px; -moz-box-shadow: 5px 5px 3px #555; /* Firefox */ -webkit-box-shadow: 5px 5px 3px #555; /* Safari and Chrome */ box-shadow: 5px 5px 3px #555; padding: 25px; background-color: #FFF; width: inherit!important; /* 8/7/2020 Set to force inherit width -- before content larger then it. */ } /* 8/7/2020 since locked the top navigation to the top of the page I need to make the mega-menu itms scrollable. */ #superfish-main .sf-multicolumn .sf-multicolumn-wrapper { overflow-y: auto; overflow-x: hidden; height: 400px; } /* 7/26/2020 Make top of each row uppercase and larger font and blue. NOTE: Use "Double Class Selector. Target an element that has all of multiple classes." https://css-tricks.com/multiple-class-id-selectors/#double-class-selector */ #superfish-main a.sf-depth-2.menuparent { color: #009; /* menu links default blue. */ font-weight:bold; font-weight: 600; /* Change from "bold" to "600" */ text-transform:uppercase; font-size: 1em; } /* END "superfish-main" top most row of the mega menu style navigation. */ /* START page */ .sosAssociates-home-page .row { width: 400px; /* 7/26/2020 Change from 310px; */ float:right; clear:both; margin-top:318px; margin-right:30px; } /* 8/16/2020 This "" holds the "h1.page-header" so needs to be made larger than the graphic width of 320px. */ .sosAssociates-home-page .col-sm-12 .region-header { width: 325px; } .sosAssociates-home-page .row h1.page-header { margin: -350px 30px 0 0; background-image: url(images/Home-Page-H1.gif); background-repeat:no-repeat; width: 320px; /* 7/26/2020 change from 300px; */ /* Width of graphic is 320 but remove some of padding left/right */ height: 318px; /* 7/26/2020 change from 218px; */ /* Height of graphic is 318 but remove padding top/bottom */ padding: 90px 10px 75px 10px; position:relative; /* VERY IMPORTANT TO ADD THIS FOR IE. Tested with IE9 2/9/12 See http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/ */ font-size:1.6em; text-align:center; border-bottom: 0; /*7/26/2020 Overwrite "1px solid #eeeeee" which comes from "type.less" */ } /* START 7/29/2020 of sosAssociatesToolTip shown when hover over sosAssociatesToolTipLink on page (NOTE: On the Drupal 7 website used the "cluetip" module, but covert to all CSS solution on Drupal 9 site.)*/ /* 7/29/2020 First must hide "sosAssociatesToolTip" div */ div.sosAssociatesToolTip { display: block; /* 8/7/2020 Above make "sosAssociatesToolTip" div display none, so need to bring back as block here, before make "visibility: hidden;" */ visibility: hidden; /* Notice that the hidden

still takes up space on the page.*/ background-image: url(images/Home-Page-H1.gif); background-repeat:no-repeat; margin: -240px 0 0 -400px; padding: 0; width: 320px; /* Width of graphic is 320 */ /* Make height of inner content area so fits in all browsers. */ height: 318px; /* Height of graphic is 318 */ /* Make width of inner content area so fits in all browsers. */ border: none; /* From Drupal 7 design - Hide border showing in one FireFox version. */ background-color: transparent; position: absolute; } a:hover.sosAssociatesToolTipLink + div.sosAssociatesToolTip /* 7/29/2020 Created using these three: 1) Used this article “Display div element on hovering over tag using CSS” to solve: https://www.geeksforgeeks.org/display-div-element-on-hovering-over-a-tag-using-css/ 2) for "+" information see: “Adjacent Sibling Selector” at: https://www.w3schools.com/css/css_combinators.asp 3) Decide to use CSS "visibility: visible;" instead of "display: none;" Remember that the "visibility: hidden;"

still takes up space on the page. */ { visibility: visible; } div.sosAssociatesToolTip p { width: 320px; /* Width of graphic is 320 */ height: 318px; /* Height of graphic is 318 */ position:relative; /* VERY IMPORTANT TO ADD THIS FOR IE. Tested with IE9 2/9/12 See http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/ */ /* font-size: not work here, must control at div.ui-cluetip */ margin: 0px; padding: 80px 20px; border: none; /* From Drupal 7 design - Hide border showing in one FireFox version. */ text-align:justify; overflow:hidden; /* Hides text past height. */ font-size: 0.8em; /* This sets the parent size for all and thus also controls size in .cluetip-default */ } a.sosAssociatesToolTipLink p { margin: 3px 3px 6px 3px; padding: 3px; border: solid #DCBCBC 1px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } a:link.sosAssociatesToolTipLink, a:visited.sosAssociatesToolTipLink, a:active.sosAssociatesToolTipLink, a:hover.sosAssociatesToolTipLink { width: 320px; display:block;} /* Set link width and display:block so that floating Home-Page-H1.gif same (Drupal 7 site width was 290, but Drupal 9 site change to 320)*/ a:hover.sosAssociatesToolTipLink p { border: solid #8A0808 1px; /* sosAssociates Red */ background-color: #DCBCBC; /* Faded sosAssociates Red */ color: #009; /* Dark Blue */ } /* END page */ /* START make default thumbnail images have shadow and delayed hover effect. 8/2/12 - 7/29/2020 Still works on Drupal 9 website! */ img.image-thumbnail { padding:0px; margin: 5px; -moz-box-shadow: 5px 5px 0px 0px #DCBCBC; /* horizontal offset; vertical offset; blur radius; spread radius; color */ -webkit-box-shadow: 5px 5px 0px 0px #DCBCBC; /* Faded sosAssociates Red */ box-shadow: 5px 5px 0px 0px #DCBCBC; -webkit-transition: all 2s; -moz-transition: all 2s; transition: all 2s; } img.image-thumbnail:hover { -moz-box-shadow: 5px 5px 0px 0px #8A0808; /* horizontal offset; vertical offset; blur radius; spread radius; color */ -webkit-box-shadow: 5px 5px 0px 0px #8A0808; /* sosAssociates Red */ box-shadow: 5px 5px 0px 0px #8A0808; -moz-transform: scale(1.32); -moz-transform-origin: center top; -webkit-transform: scale(1.32); -webkit-transform-origin: center top; transform: scale(1.32); transform-origin: center top; -webkit-transition: all 2s; -moz-transition: all 2s; transition: all 2s; } /* END make default thumbnail images have shadow and delayed hover effect. 8/2/12 */ } /* END OF @media all and (min-width: 768px) */ /* =================================================================================================== END - JULY 22, 2020 - NARROW =================================================================================================== */ /* =================================================================================================== START - JULY 22, 2020 - NORMAL larger than 992 px @media all and (min-width: 992px) and (min-device-width: 992px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) { } =================================================================================================== */ @media all and (min-width: 992px) and (min-device-width: 992px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) { } /* END OF @media all and (min-width: 992px) */ /* =================================================================================================== END - JULY 22, 2020 - NORMAL =================================================================================================== */ /* =================================================================================================== START - JULY 22, 2020 - WIDE larger than 1200px @media all and (min-width: 1200px) { } =================================================================================================== */ @media all and (min-width: 1200px) { /* 8/15/2020 for NORMAL width "@media (min-width: 992px) .container {width: 970px;}" but "grid.less" has it jump to ".container {width: 1170px;}" which I think does not look good, so I change to stay at 970px. */ .container { width: 970px; } /* START OF SPECIAL INLINE CSS - TYPE INTO DRUPAL BODY - Created 5/25/12 On 2/22/13 discover not works on iPad, so move out of sosAssociates-alpha-default.css and put in the following so only on larger screens: sosAssociates-alpha-default-wide.css */ .TwitterWidth { width:450px; height:450px; overflow:scroll; padding:5px; margin:10px auto 10px auto;} /* Use for scroll area for tweets */ /* END OF SPECIAL INLINE CSS - TYPE INTO DRUPAL BODY */ /* START Full Blogging pages Class="node-type-blog-sosassociates" */ form.comment-form { /* Comments for Full Blogging. 3/17/12 make only in large so iPad can see comments. */ opacity:0.2; filter:alpha(opacity=20); /* For IE8 and earlier */ height: 200px; margin: 5px; /* Make top margin negative to move unter date & author */ border: solid #DCBCBC 1px; /* Faded sosAssociates Red */ /* See border-radius.com */ -webkit-border-radius: 30px; /* Safari and Chrome */ -moz-border-radius: 30px; /* Firefox */ border-radius: 30px; -moz-box-shadow: 5px 5px 3px #555; /* Firefox */ -webkit-box-shadow: 5px 5px 3px #555; /* Safari and Chrome */ box-shadow: 5px 5px 3px #555; padding: 25px 60px 10px 100px; /* 7/29/2020 Make padding on left, right and bottom more so wider area for hover as fill in content. Used to be "25px" on all sides. */ overflow: hidden; } form.comment-form:hover { /* Hover for Comments for Full Blogging */ opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */ height: auto; margin: 5px; /* Make top margin negative to move unter date & author */ border: solid #DCBCBC 1px; /* Faded sosAssociates Red */ /* See border-radius.com */ -webkit-border-radius: 30px; /* Safari and Chrome */ -moz-border-radius: 30px; /* Firefox */ border-radius: 30px; -moz-box-shadow: 5px 5px 3px #555; /* Firefox */ -webkit-box-shadow: 5px 5px 3px #555; /* Safari and Chrome */ box-shadow: 5px 5px 3px #555; padding: 25px 60px 200px 100px; /* 7/29/2020 Make padding on left, right and bottom more so wider area for hover as fill in content. Used to be "25px" on all sides. */ background-color: #FFF; } /* END Full Blogging pages Class="node-type-blog-sosassociates" */ /* START of footer items. WIDE VIEW AND ABOVE */ footer { background-color: #5A0303; /* Dark Red */ color: #000; font-size: 0.9em; } .sosAssociates-home-page footer #block-footer-menu h2, .sosAssociates-home-page footer h2.block-title {font-size: 1.5em;} footer:hover { background-color: #8A0808; /* sosAssociates Red hover for hover */ color: #EEE; opacity:0.95; filter:alpha(opacity=95); /* For IE8 and earlier */ } footer a, footer a:link, footer a:visited, footer a:hover footer a:active {color: #000;} footer:hover a, footer:hover a:link,footer:hover a:visited, footer:hover a:hover footer:hover a:active {color: #FFF;} footer:hover a:hover {color: #EEE;} /* 7/29/2020 Make smaller: Copyright © 2001-2020 Stuart O. Smith, Jr. & Associates. All rights reserved. [date:html_year] = current year. “Replaces global and entity tokens with their values” in Full HTML settings. */ #block-copyrightfootercustomblockhtml p { padding-top: 30px; font-size: 0.8em; } .footer {padding: padding: 20px 50px 30px 50px;} /* 7/29/2020 Must do to class "footer" to add more padding to footer. */ /* 7/29/2020 Block for Footer navigation */ #block-footer { width: 400px; padding-left: 40px; height: 150px; } #block-footer .menu--footer.nav { margin: 0 0 0 50px; } #block-socialmediafootercustomblockhtml { width: 250px; float: right; height: 150px; margin: -170px 0 0 0; } #sosAssociates-Social-Media li {list-style-type: none;list-style-image: none; display: inline;} #sosAssociates-Social-Media li a {background-image:url('images/Social-Media.gif');background-repeat: no-repeat;overflow: hidden;height: 43px;width: 43px; text-indent:-9999px; float:left; padding:0px; margin:5px; opacity:0.5; filter:alpha(opacity=50); /* For IE8 and earlier */} #sosAssociates-Social-Media li a.twitter {background-position:0px 0px;margin-left:50px; opacity:0.5; filter:alpha(opacity=50);} #sosAssociates-Social-Media li a.facebook {background-position:0px -47px; opacity:0.5; filter:alpha(opacity=50);} #sosAssociates-Social-Media li a.google {background-position:0px -97px; clear:left;margin-left:75px; opacity:0.5; filter:alpha(opacity=50);} #sosAssociates-Social-Media li a.delicious {background-position:0px -145px;clear:left;margin-left:50px; opacity:0.5; filter:alpha(opacity=50);} #sosAssociates-Social-Media li a.linkedin {background-position:0px -193px; opacity:0.5; filter:alpha(opacity=50);} #sosAssociates-Social-Media li a.flickr {background-position:0px -240px;clear:left;margin-left:50px; opacity:0.5; filter:alpha(opacity=50);} #sosAssociates-Social-Media li a.youtube {background-position:0px -287px; opacity:0.5; filter:alpha(opacity=50);} /* HOVER! */ #sosAssociates-Social-Media li a:hover.twitter {background-position:0px 0px; opacity:1.0; filter:alpha(opacity=100);} #sosAssociates-Social-Media li a:hover.facebook {background-position:0px -47px;opacity:1.0; filter:alpha(opacity=100);} #sosAssociates-Social-Media li a:hover.google {background-position:0px -97px;opacity:1.0; filter:alpha(opacity=100);} #sosAssociates-Social-Media li a:hover.delicious {background-position:0px -145px;opacity:1.0; filter:alpha(opacity=100);} #sosAssociates-Social-Media li a:hover.linkedin {background-position:0px -193px;opacity:1.0; filter:alpha(opacity=100);} #sosAssociates-Social-Media li a:hover.flickr {background-position:0px -240px;opacity:1.0; filter:alpha(opacity=100);} #sosAssociates-Social-Media li a:hover.youtube {background-position:0px -287px;opacity:1.0; filter:alpha(opacity=100);} /* END of SocialMedia in Footer sosAssociates-Social-Media WIDE VIEW AND ABOVE */ } /* END OF @media all and (min-width: 1200px) */ /* =================================================================================================== END - JULY 22, 2020 - WIDE =================================================================================================== */