/* Global CSS for Gap Inc */ /* Development Notes Check all changes into SVN For readability and maintainibility please follow the following structure for this CSS document. It can be minimised on release. - Framework of Global CSS 1. Default syles: Html elements and text components. 2. Layout Styles: Styles for all the unique elements that are found on every page within the site. Order in the same structure as the html page. 3. Shared Modules: Modules used throughout the site - order alphabetically 4. Page Specific: Styles that are only used on one page - order by sitemap - Class and ID naming convention 1. Classes and ids are lowercase with each word separated by a hyphen. 2. Classes and ids must always add semantic meaning to the page. - Conditional comments and hacks 1. Conditional comments are used to include a less than or equal to IE 7 style sheet. 2. CSS hacks are not permitted. 3. IE specific stylesheet to follow comment hierarchy of the main css file. - CSS Readability 1. To ease readability during development order the CSS attributes as follows: #header #primary-navigation, #header #seconday-navigation { display: inline; visibility: hidden; overflow: hidden; position: absolute; left: 0; top: 10px; vertical-align: top; z-index: 1; clear: value; float: value; height: 10px; max-height: 500px; min-height: 100px; min-width: 5px width: 10px; border: 1px solid #fff; margin: 0 10px; padding: 0 10px 0 10px; background: #000fgd url("../assets/images/generic-header-bg.png") no-repeat left top; color: #455hgg; font: arial, san-serif 1.2em; line-height: 1.3; text-decoration: underline; text-transform: uppercase; cursor: pointer; list-style: bullet; } - Clearing Method 1. Use overflow hidden on containing div. 2. If content / popup needs to overflow div then use clearfix - Font Replacement To be decided - @font-face embedded fonts if license allows, cufon or sifr - Target Browsers 1. IE 7, 8 2. FF 2.0, 3.0, 3.5 3. Opera 9.0, 10.0 4. Safari 3.0, 4.0 5. Chrome 3.0 - Javascript 1. All JS funtionality to be unobtrusive with non js fallback where possible 2. Standardised on jQuery 3. Follow jQuery coding standards (e.g. naming conventions + best-practise plug-in authoring). 4. Use jQuery plugins where available (e.g. "Thickbox" for modal) - Validation and Accessibility 1. Validate html with W3C validator (http://validator.w3.org/) 2. Site to meet AA accessibility standard (http://www.w3.org/TR/2008/REC-WCAG20-20081211/) - Assest naming convention 1. Use Lowercase. 2. --. e.g. generic-header-bg.png */ /* Default Styles */ /* fonts */ @font-face { font-family: 'Avenir Next Regular'; src: url('../fonts/avenir-next-regular.eot?#iefix'); src: url('../fonts/avenir-next-regular.eot?#iefix') format('eot'), url('../fonts/avenir-next-regular.woff2') format('woff2'), url('../fonts/avenir-next-regular.woff') format('woff'), url('../fonts/avenir-next-regular.ttf') format('truetype'), url('../fonts/avenir-next-regular.svg#52a192b1-bea5-4b48-879f-107f009b666f') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Avenir Next Italic'; src: url('../fonts/avenir-next-italic.eot?#iefix'); src: url('../fonts/avenir-next-italic.eot?#iefix') format('eot'), url('../fonts/avenir-next-italic.woff2') format('woff2'), url('../fonts/avenir-next-italic.woff') format('woff'), url('../fonts/avenir-next-italic.ttf') format('truetype'), url('../fonts/avenir-next-italic.svg#1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585') format('svg'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Avenir Next Bold'; src: url('../fonts/avenir-next-bold.eot?#iefix'); src: url('../fonts/avenir-next-bold.eot?#iefix') format('eot'), url('../fonts/avenir-next-bold.woff2') format('woff2'), url('../fonts/avenir-next-bold.woff') format('woff'), url('../fonts/avenir-next-bold.ttf') format('truetype'), url('../fonts/avenir-next-bold.svg#0fde1539-69df-4e3d-83ef-ae23d10dd2a5') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Avenir Next Bold Italic'; src: url('../fonts/avenir-next-bold-italic.eot?#iefix'); src: url('../fonts/avenir-next-bold-italic.eot?#iefix') format('eot'), url('../fonts/avenir-next-bold-italic.woff2') format('woff2'), url('../fonts/avenir-next-bold-italic.woff') format('woff'), url('../fonts/avenir-next-bold-italic.ttf') format('truetype'), url('../fonts/avenir-next-bold-italic.svg#6d75d4b0-a48c-4544-9584-52d2fcdfe34b') format('svg'); font-weight: bold; font-style: italic; } /* reset elements */ body { padding: 0; margin: 0; } img { border: 0; } body { background: #ffffff; color: #4e4e4e; font: 75% Helvetica,Arial,sans-serif; line-height: 1.5; } /* headers */ h1, .blog h2 { margin: 0 0 2px 0; color: #333; font-family: 'Avenir Next Bold', sans-serif; font-size: 2.25em; font-weight: normal; text-transform: uppercase; } #primary-content h1 { width: 80%; } h2, #comments-count { margin: 0 0 1px 0; color: #000; font-family: 'Avenir Next Regular', sans-serif; font-size: 1.25em; font-weight: normal; text-transform: uppercase; } .section h2, #search-filter h2 { margin: 0 0 14px 0; padding: 1px 10px 0; color: #0083c5; font-size: 1.6em; line-height: 1.1; } #search-filter h2 { background: url(../images/generic-header-bg.gif) repeat left top; } #homepage .shopnow h2 { background-image: url(../images/generic-featured-header-bg.gif); color: #fff; } #homepage .shopnow h2 a { color: #fff; } .section .alert h2 { background-image: url(../images/generic-alert-header-bg.gif); color: #fff; } .section .alert h2 a { color: #fff; } #search-filter h2 { background-image: url(../images/generic-header-secondarynav.png); color: #fff; font-size: 1.334em; } h2 a { text-decoration: none; } h2 a:hover { text-decoration: underline; } h2.copy { margin-bottom: 1px!important; padding: 0!important; background: none!important; color: #000!important; font-size: 1.25em; } h3 { color: #717070; font-size: 1.25em; font-weight: normal; } /* text components */ p { margin: 0 0 12px 0; } b, strong { color: #000; font-weight: bold; } /* blockquote */ blockquote { margin-left: 0; color: #000; font-size: 1.584em; line-height: 1.3; } blockquote span { padding-left: 4px; background: url(../images/generic-quote-open.gif) no-repeat left top; } blockquote span span { padding-right: 6px; background: url(../images/generic-quote-close.gif) no-repeat bottom right; } /* hr */ hr { height: 2px; border: 0; margin: 0 0 12px 0; background: url(../images/generic-hr.gif) repeat-x left top; } /* links */ a, a b { color: #0083c5; } /* more arrow link */ .navigator .prev a { padding-left: 11px; color: #0083c5!important; font-weight: bold; background: url(../images/generic-back-arrow.gif) no-repeat left center; } p.more a, a.more, .findPagesByTag strong a, ul.our-brands li a, .press-releases h3 a, .navigator .next a { padding-right: 11px; color: #0083c5!important; font-weight: bold; background: url(../images/generic-more-arrow.gif) no-repeat right center; } /* lists */ ul { margin: 0 0 12px 0; } #primary-content ol, #primary-content ul { padding: 0; } #primary-content li { margin-bottom: 6px; list-style-position: inside; } #primary-content ol ol, #primary-content ul ul, #primary-content ol ul, #primary-content ul ol { margin: 0 0 0 24px; } /* remove bullets from lists */ ul.blog-actions, ul.connect-with-us, ul.image-list, ul.our-brands, ul.page-actions, .archive ul, .blog .entrylist ul, .findPagesByTag ul, .hero ul, .job-search ul, .section.imageGallery ul, .search ul, .social-media ul, #cboxLoadedContent .downloads, #footer-navigation ul, #footer-links ul, #homepage ul.brand-navigator, #primary-navigation ul, #secondary-navigation ul, #share-buttons ul { padding: 0; } ul.blog-actions li, ul.connect-with-us li, ul.image-list li, ul.our-brands, ul.page-actions li, .archive ul li, .blog .entrylist ul li, .findPagesByTag ul li, .hero ul li, .job-search ul li, .section.imageGallery li, .search li, .social-media ul li, #cboxLoadedContent .downloads li, #footer-navigation ul li, #footer-links ul li, #header #brands li, #homepage ul.brand-navigator li, #primary-navigation ul li, #secondary-navigation ul li, #share-buttons ul li { list-style-type: none!important; list-style-position: outside!important; } /* data tables */ table { border-collapse:collapse; margin-bottom: 12px; } th { margin: 0 0 1px 0; padding: 1px 5px 0; color: #0083c5; font-size: 1.5em; font-weight: normal; text-align: left; } thead tr { background: url(../images/generic-header-bg.gif) repeat left top; } td { padding: 14px 5px 16px; background: url(../images/generic-hr.gif) repeat-x left bottom; vertical-align: top; } /* global classes */ /* clearfix */ .brand-navigator, .cq-colctrl-lt4, .findPagesByTag, .imageGallery ul, .job-search ul, .social-media, #content, #footer-navigation, #header, #searchImageGallery ul, #searchVideoGallery ul, #primary-navigation { display: block; } .brand-navigator:after, .cq-colctrl-lt4:after, .findPagesByTag:after, .imageGallery ul:after, .job-search ul:after, .social-media:after, #content:after, #footer-navigation:after, #header:after, #searchImageGallery ul:after, #searchVideoGallery ul:after, #primary-navigation:after { content : "."; display : block; height : 0px; clear : both; visibility : hidden; } /* Layout Styles */ #wrapper { width: 100%; margin: auto; } #wrapper-narrow { width: 954px; margin: auto; padding: 0 15px; } /* header */ #header { max-width: 1360px; margin: 0px auto 9px auto; } #wrapper-narrow #header { max-width: 954px; width: 100%; margin: 0px 0px 9px 0px; } /* logo */ #header #logo { float: left; padding-left: 10px; padding-top: 25px; } /* brands */ #header #brands { float: right; padding-top: 30px; } #header #brands li { float: left; margin: 5px 25px 0 0; } #header #brands li a { display: block; height: 19px; background: url(../images/icons-brands.gif) no-repeat left top; font-size: 0; text-indent: -2000px; } #header #brands li a.gap { width: 19px; } #header #brands li a.bananarepublic { width: 59px; background-position: -19px 0; } #header #brands li a.oldnavy { width: 46px; background-position: -78px 0; } #header #brands li a.athleta { width: 41px; background-position: -124px 0; } #header #brands li a.intermix { width: 56px; background-position: -165px 0; } #header #brands li a.gap:hover { background-position: left -19px; } #header #brands li a.bananarepublic:hover { background-position: -19px -19px; } #header #brands li a.oldnavy:hover { background-position: -78px -19px; } #header #brands li a.athleta:hover { background-position: -124px -19px; } #header #brands li a.intermix:hover { background-position: -165px -19px; } /* search */ #header #search { float: right; padding-top: 30px; } #header #search .text { float: left; height: 20px; width: 158px; border: 0; padding: 4px 18px; background: url(../images/generic-header-search.gif) no-repeat left top; color: #646363; font-family: 'Avenir Next Regular', sans-serif; } #header #search .submit { height: 28px; width: 35px; border: 0; background: url(../images/generic-header-search.gif) no-repeat right top; cursor: pointer; font-size: 0; text-indent: -2000px; } /* primary navigation */ #primary-navigation { margin-bottom: 12px; background: #007DBB; font-family: 'Avenir Next Regular', sans-serif; text-transform: uppercase; } #primary-nav-narrow { max-width: 1360px; margin: 0px auto 12px auto; } #primary-navigation ul { float: left; margin: 0; padding-left: 1px; } #primary-navigation .secondary { float: right; } #primary-navigation li { float: left; margin: 0; background: url(../images/generic-primarynav-divider.gif) no-repeat right center; } #primary-navigation li.last { background: none; } #primary-navigation a { display: block; padding: 2px 18px 0; color: #fff; font-size: 1.167em; line-height: 35px; text-decoration: none; } #primary-navigation a.selected { background: url(../images/generic-primarynav-selected.gif) no-repeat center top; color: #fff; } #primary-navigation a:hover { margin-left: -1px; padding-left: 19px; background: #0071A9; } /* pull down menus */ #navbar { height: 1em; margin: 0; padding: 0; } #navbar li { float: left; list-style: none; } #navbar li ul { display: none; z-index: 99; width: 180px; border: 1px solid #CFCFCF; border-bottom: 0; padding-left: -1px; } #navbar li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0 0 0 -1px; padding: 0; } #navbar li:hover li, #navbar li.hover li { float: none; font-size: 0.851em; } #navbar li:hover li a, #navbar li.hover li a { border-bottom: 1px solid #CFCFCF; background-color: #FFFFFF; color: #444444; line-height: 25px; } #navbar li li a:hover { margin-left: 0px; padding-left: 18px; background-color: #DDDDDD; } /* mobile functionality - hidden by default */ #nav, #mobile-icons, #mobile-search, #searchnav, .mobile-search-filter-open, #mobile-content { display: none; } /* content */ #content { width: 954px; margin: 0px auto 15px auto; } #wrapper-narrow #content { width: 100%; margin: 0px 0px 15px 0px; } /* secondary navigation */ #secondary-navigation { position: relative; float: left; width: 228px; padding: 15px 0px 200px; background: #00a3da; color: #fff; font-family: 'Avenir Next Regular', sans-serif; text-transform: uppercase; } #secondary-navigation img.gradient { position: absolute; z-index: 1; bottom: -1px; left: 0px; height: 33%; width: 228px; } #secondary-navigation h3 { border-bottom: 1px solid #80d2ed; margin: 0 20px; padding-bottom: 2px; color: #fff; font-family: 'Avenir Next Bold', sans-serif; font-size: 1.167em; font-weight: normal; } #secondary-navigation h3 a { color: #fff; text-decoration: none; } #secondary-navigation ul { position: relative; z-index: 10; margin: 0; } #secondary-navigation li { background: url(../images/generic-secondarynav-hr.gif) no-repeat center bottom; font-size: 1.083em; } #secondary-navigation li li { background: none!important; font-size: 1em; } #secondary-navigation li a { display: block; margin-top: -1px; padding: 8px 20px 7px 32px; color: #fff; text-decoration: none; } #secondary-navigation li ul { padding-bottom: 6px; } #secondary-navigation li li ul { padding-bottom: 0; } #secondary-navigation li li a { padding: 0px 20px 0px 47px; } #secondary-navigation li li li a { padding: 0px 20px 0px 62px; } #secondary-navigation li a.breadcrumb, #secondary-navigation li a.selected { background: url(../images/generic-bullet.png) no-repeat 20px center; font-family: 'Avenir Next Regular', sans-serif; } #secondary-navigation li li a.breadcrumb, #secondary-navigation li li a.selected { background-position: 35px center; } #secondary-navigation li li li a.breadcrumb, #secondary-navigation li li li a.selected { background-position: 50px center; } #secondary-navigation li a:hover { background-color: #0090c9; } /* grey option overides */ #secondary-navigation.utility { background: #757676; /* darkened advised to meet aa contrast standard */ } #secondary-navigation.utility h3 { border-color: #dedede; } #secondary-navigation.utility li { background-image: url(../images/generic-secondarynavu-hr.gif); } #secondary-navigation.utility li a:hover { background-color: #595A5A; } /* wide content */ #wide-content { display: none; /* the wide-content element is not needed on non-home pages */ } #homepage #wide-content { display: inline; float: left; width: 954px; } /* primary content */ #primary-content { float: left; width: 712px; margin-left: 14px; } /* cms generated column layouts */ .cq-colctrl-lt0, .cq-colctrl-lt1, .cq-colctrl-lt2, .cq-colctrl-lt3, .cq-colctrl-lt4, .cq-colctrl-lt5 { clear: both; } .cq-colctrl-lt0 .section, .cq-colctrl-lt1 .section, .cq-colctrl-lt2 .section, .cq-colctrl-lt3 .section, .cq-colctrl-lt4 .section, #secondary-content .section { clear: both; margin-bottom: 15px; } /* 2 Col */ .cq-colctrl-lt1-c0 { float: left; width: 470px; } .cq-colctrl-lt1-c1 { float: left; width: 228px; margin-left: 14px; } /* 3 Col */ .cq-colctrl-lt2-c0 { float: left; width: 228px; } .cq-colctrl-lt2-c1, .cq-colctrl-lt2-c2 { float: left; width: 228px; margin-left: 14px; } /* Mix */ .cq-colctrl-lt3-c0 { float: left; width: 470px; } .cq-colctrl-lt3-c1 { float: right; width: 228px; margin-left: 14px; } .cq-colctrl-lt3-c2 { float: left; width: 228px; } .cq-colctrl-lt3-c3 { float: left; width: 228px; margin-left: 14px; } /* Split */ .cq-colctrl-lt4-c0 { float: left; width: 349px; } .cq-colctrl-lt4-c1 { float: left; width: 349px; margin-left: 14px; } /* secondary content */ #secondary-content { display: inline; float: right; width: 228px; } /* footer */ #footer { border-top: 1px dotted #d1d1d1; } /* footer navigation */ #footer-navigation { clear: both; float: left; margin-bottom: 65px; padding: 20px; } #footer-navigation ul li { float: left; width: 135px; margin: 0 10px 0 0; padding-right: 5px; font-size: 1.166em; } #footer-navigation ul li li { font-size: 0.786em; } #footer-navigation ul li a { color: #58595b; line-height: 2.4em; text-decoration: none; } #footer-navigation ul li a:hover { text-decoration: underline; } #footer-navigation ul li li a { text-decoration: underline; } /* footer icons */ #footer-icons { float: right; margin-top: 20px; padding: 10px; } /* footer links */ #footer-links { clear: both; border-top: 1px solid #d1d1d1; padding: 20px; font-size: 0.916em; } #footer-links ul { float: left; } #footer-links ul li { float: left; margin: 0 25px 0 0; } #footer-links ul li a { color: #58595b; } /* Shared Modules */ /* bordered modules */ .section.social-media, ._archive, ._categories, ._shopnow, ._findjob, ._contactus, ._contentfeature, ._findpagesbytag, .job-search, .navigator { min-height: 10px; border: 1px solid #e4e3e3; padding: 4px 12px 8px 12px; } .stockticker ._contentfeature iframe { height: 185px; width: 214px; margin-left: -6px; } .section.social-media h2, ._archive h2, ._categories h2, ._shopnow h2, ._findjob h2, ._contactus h2, ._contentfeature h2, ._findpagesbytag h2, .job-search h2, .stockticker h2, .navigator h2 { margin-bottom: 8px; margin-left: -10px; } /* back links */ .back, .backtotop, .linkback { display: block; margin-bottom: 12px; font-weight: bold; text-align: right; } .back a { padding-left: 11px; background: url(../images/generic-back-arrow.gif) no-repeat left center; } /* blog */ #primary-content .findPagesByTag li { margin-bottom: 20px; } .findPagesByTag h3 { margin: 0 0 1px 0; font-size: 1em; } .blog-summaries h3 { color: #000; font-weight: normal; } .blog-summaries h3 a { color: #000; text-decoration: none; } .blog-summaries h3 a:hover { text-decoration: underline; } .findPagesByTag .date { margin-bottom: 1px; color: #2b2b2b; font-size: 0.916em; text-transform: uppercase; } .findPagesByTag p { margin-bottom: 1px; } /* brand highlights */ .brand-highlight img { float: left; margin-right: 5px; } .brand-highlight p { margin-bottom: 0px; color: #424242; } /* connect with us / image list */ ul.connect-with-us, ul.image-list { margin: 0; } ul.connect-with-us li, #primary-content ul.connect-with-us li, #primary-content ul.image-list li { clear: both; margin: 0 0 12px 0; } ul.connect-with-us li img, ul.image-list li img { float: left; margin: 0 8px 10px 0; } ul.connect-with-us h3, ul.image-list li h3 { margin: 0; color: #000; font-size: 1em; } ul.connect-with-us li h3 { font-weight: normal; } ul.connect-with-us li img, ul.our-brands li img, ul.image-list li img { vertical-align: middle; } /* content feature - flexible image / copy module */ .contentfeature img { margin: -4px 0px 3px -12px; } .contentfeature .icon { float: left; max-height: 50px; max-width: 50px; margin-bottom: 5px; margin-left: 0px; margin-right: 5px; } .contentfeature .video { position: relative; padding-top: 170px; } .contentfeature .video a, .contentfeature .video img { position: absolute; top: 0px; left: 0px; } .contentfeature .video a { height: 153px; width: 214px; } .contentfeature .video a img { left: 85px; top: 50px; } /* video feature - constrain video preview image size */ .videofeature .video .previewimage { height: 158px; width: 226px; margin: -4px 0px 3px -12px; } .videofeature .video .play-button { position: absolute; top: 52px; left: 80px; } /* gallery */ #primary-content .imageGallery ul { margin: 0; } #primary-content .imageGallery li { float: left; margin: 0 13px 13px 0; list-style-position: outside; } /* .imageGallery img { border: 1px solid #fff; width: 102px; }*/ .imageGallery img.light { border: 1px solid #dcddde; } .imageGallery span { display: block; } /* .cq-colctrl-lt0 .section.imageGallery img, .cq-colctrl-lt1 .section.imageGallery img, .cq-colctrl-lt2 .section.imageGallery img, .cq-colctrl-lt3 .section.imageGallery img, .cq-colctrl-lt4 .section.imageGallery img { height: 45px; width: 63px; }*/ #primary-content .cq-colctrl-lt0 .imageGallery li, #primary-content .cq-colctrl-lt1 .imageGallery li, #primary-content .cq-colctrl-lt2 .imageGallery li, #primary-content .cq-colctrl-lt3 .imageGallery li, #primary-content .cq-colctrl-lt4 .imageGallery li { margin: 0 7px 7px 0; } .imageGallery strong a { clear: both; text-decoration: underline; } .imageGallery a { font-weight: bold; text-decoration: none; } .imageGallery span { text-decoration: underline; } .imageGallery .downloads { display: none; } /* hero banner */ .heroBanner { margin-left: -14px; } #homepage .heroBanner { margin-left: 0px; } .hero { overflow: hidden; position: relative; height: 323px; width: 726px; margin: 0 0 15px 0; } #wide-content .hero { width: 954px; } .hero .tagline, .hero .tagline-right { position: absolute; top: 15px; width: 178px; padding: 25px; background: url(../images/generic-hero-caption-bg.png) top left repeat; color: #333; font-family: 'Avenir Next Regular', sans-serif; text-transform: uppercase; } .hero .tagline p, .hero .tagline-right p { font-size: 1.667em; line-height: 1.3; } .hero .tagline strong a, .hero .tagline-right strong a { padding-right: 10px; background: url(../images/generic-bullet-blue.png) no-repeat right center; font-size: 1.167em; font-weight: normal; text-decoration: none; } .hero .tagline { left: 0px; } .hero .tagline-right { right: 0px; } /* transitional extras */ .hero-transitional { position: default; } #homepage .hero-transitional { height: 378px; } #primary-content .hero-transitional li { position: relative; height: 323px; margin-bottom: 0; } /* navigation icons */ .hero-transitional .tagline, .hero-transitional .tagline-right { padding-bottom: 50px; } .hero-navigation { position: absolute; bottom: 20px; left: 25px; height: 9px; } .hero-navigation a { display: block; float: left; height: 9px; width: 10px; margin: 0 4px 0 0; background: no-repeat top left; background-image: url(../images/generic-hero-icon.png)!important; font-size: 0; text-indent: -2000px; } .hero-navigation .activeSlide { background-position: bottom left; } /* homepagestyle overides */ #homepagestyle .hero { height: 378px; width: 954px; } #homepagestyle #primary-content .hero-transitional li { height: 378px; } #homepagestyle .hero .tagline, #homepagestyle .hero .tagline-right { left: 727px; top: 0!important; height: 378px; width: 198px; padding: 15px; background: #eeeeee; color: #000000; } #homepagestyle .hero .tagline h2, #homepagestyle .hero .tagline-right h2 { margin-bottom: 8px; padding: 0; background: none; color: #000000; font-family: 'Avenir Next Bold', sans-serif; font-size: 2.4em; line-height: 1; text-transform: uppercase; } #nonhomepagestyle .hero .tagline h2, #nonhomepagestyle .hero .tagline-right h2 { font-size: 1.667em; line-height: 1.3; padding-left: 0px; color: #333333; background: none repeat scroll 0 0 transparent; } #homepagestyle .hero .tagline p, #homepagestyle .hero .tagline-right p { font-size: 1.084em; font-family: 'Avenir Next Regular', sans-serif; } #homepagestyle .hero .tagline a, #homepagestyle .hero .tagline-right a { background-image: none; color: #000000; } #homepagestyle .hero-navigation { left: 15px; top: 360px; } /* video hero */ #video-hero a.video-hero { position: absolute; left: 340px; top: 138px; } /* Job Search */ .job-search li { margin-bottom: 12px; } .job-search li select { width: 100%; } .job-search li p { margin-bottom: 3px; } .cq-colctrl-lt3-c0 .job-search li, .cq-colctrl-lt1-c0 .job-search li { float: left; width: 144px; margin-right: 10px; } .cq-colctrl-lt3-c0 .job-search li p, .cq-colctrl-lt1-c0 .job-search li p { margin-bottom: 6px; } .cq-colctrl-lt3-c0 .job-search .selector, .cq-colctrl-lt1-c0 .job-search .selector { width: 96px; background-image: url(../images/form-select-bg-140.gif); } .cq-colctrl-lt3-c0 .job-search select, .cq-colctrl-lt1-c0 .job-search select { width: 140px; } .job-search li.country { margin-right: 0; } .job-search .search-button { border: 1px solid #CCCCCC; margin: -6px 0px 10px 0px; padding: 4px 8px; background: #007DBB; color: #FFFFFF; font-family: 'Avenir Next Bold', sans-serif; font-size: 1.2em; text-decoration: none; cursor: pointer; border-radius: 5px; } /* modal */ /* ColorBox Core Style */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} #cboxOverlay{ background:#000; } #cboxLoadedContent { overflow: hidden!important; height: 340px; width: 535px; padding: 55px 20px 70px 20px; text-align: center; } #cboxLoadedContent img { display: inline; max-height: 340px; max-width: 535px; } #cboxContent { background: #4c4d4f; } #cboxTitle { position: absolute; left: 20px; top: 20px; color: #fff; font-size: 1.5em; } #video-container { position: absolute; left: 20px; top: 50px; } #cboxClose { position: absolute; top: 5px; right: 5px; height: 16px; width: 16px; background: url(../images/generic-modal-close.gif); color: #fff; font-size: 0; text-indent: -2000px; } #cboxPrevious { position: absolute; top: 400px; right: 60px; padding-left: 10px; background: url(../images/icon-modal-prev.gif) no-repeat left center; color: #cecece; } #cboxNext { position: absolute; top: 400px; right: 20px; padding-right: 10px; background: url(../images/icon-modal-next.gif) no-repeat right center; color: #cecece; } #cboxLoadedContent .downloads { position: absolute; top: 400px; left: 20px; } #cboxLoadedContent .downloads a { color: #cecece; } /* navigator */ .navigator p { margin-bottom: 4px; } .navigator .navigation { position: relative; width: 192px; padding: 0 12px; font-weight: bold; text-align: center; } .navigator .prev { position: absolute; left: 0; } .navigator .next { position: absolute; right: 0; } /* our brands */ ul.our-brands li { clear: both; } ul.our-brands img { float: left; margin: 0 8px 10px 0; } /* page actions */ ul.page-actions { display: none; /* Hide page actions now that there are new share buttons */ clear: both; position: relative; left: 20px; top: -30px; z-index: 10; } #homepage ul.page-actions { top: 0; } #primary-content ul.page-actions { position: static; left: 0; top: 0; clear: none; float: right; } .page-actions li { position: relative; float: left; margin: 0 0 0 3px; } .page-actions li a.calendar, .page-actions li a.print, .page-actions li a.share { display: block; height: 19px; width: 19px; background: url(../images/icons-pageactions.gif) no-repeat left top; font-size: 0; text-indent: -2000px; } .page-actions li a.datadashboard { display: block; height: 19px; width: 104px; background: url(../images/icons-pageactions.gif) no-repeat left top; font-size: 0; text-indent: -2000px; } .page-actions li a.print { background-position: -19px 0; } .page-actions li a.share { background-position: -38px 0; } .page-actions li a.datadashboard { background-position: -57px 0; } .page-actions li a.calendar:hover { background-position: 0 -19px; } .page-actions li a.print:hover { background-position: -19px -19px; } .page-actions li a.datadashboard:hover { background-position: -57px -19px; } .section.title ul.page-actions { margin: 6px 0 10px 0; } /* calendar popup */ #calendar-popup { display: none; position: absolute; top: 36px; left: 0px; width: 170px; padding: 5px; background:url("../images/modal-border.png") repeat scroll 0 0 transparent; -moz-border-radius:4px 4px 4px 4px; } #calendar-popup div.header { border-bottom: 1px solid #E5E5E5; margin: 0; background: #F2F2F2; font-weight: normal; padding: 4px; line-height: 1; text-align: right; } #calendar-popup div.header span { float: left; } #calendar-popup div.header a { color: #4C4C4C; font-weight: bold; text-decoration: none; } #calendar-popup div.header a:hover { text-decoration: underline; } #primary-content #calendar-popup ul { margin: 0; padding: 4px; background: #fff; } #calendar-popup ul li { float: none; margin: 1px; padding: 0; } #calendar-popup ul li a { display: block; border: 1px solid #fff; padding: 2px 3px; color: #4C4C4C; text-decoration: none; } #calendar-popup ul li a:hover { border: 1px solid #E5E5E5; background: #F2F2F2; } /* profiles */ .bios td { vertical-align: bottom; } /* social media */ .twtr-hd { padding: 0 0 5px 0!important; } .twtr-tweet-wrap { padding: 6px 0px!important; } .twtr-ft img { display: none; } #videoBar-bar table { float: left; } #videoBar-bar td { padding: 0 0 6px 0; background: 0; } /* simple form */ .contactus select, .findjob select, .simple-form select, .shopnow select { width: 100%; } #search-filter .keyword, #search-filter .filters { padding: 0 20px; } #search-filter .keyword .text, .simple-form .text { float: left; height: 20px; width: 161px; border: 0; padding: 4px 10px; background: url(../images/generic-search.gif) no-repeat left top; color: #717070; } #search-filter .keyword .submit, .simple-form .submit { height: 28px; width: 35px; border: 0; background: url(../images/generic-search.gif) no-repeat right top; cursor: pointer; font-size: 0; text-indent: -2000px; } /* js ui enhanced */ .selector { overflow: hidden; height: 26px; width: 157px; padding: 0 34px 0 10px; background: url(../images/form-select-bg.gif) no-repeat left top; color: #0083c5; cursor: pointer; font-family: 'Avenir Next Regular', sans-serif; font-size: 1.167em; line-height: 26px; } .selector select { cursor: pointer; } .selector.disabled, .selector.disabled select { cursor: default; } .selector.disabled { background: url(../images/form-select-bg.gif) no-repeat left bottom; } /* uniform plugin - http://pixelmatrixdesign.com/uniform/ */ .selector { display: -moz-inline-box; display: inline-block; vertical-align: middle; zoom: 1; *display: inline; margin: 0; } .selector * { margin: 0; padding: 0; } .selector select:focus { outline: 0; } div.selector { position: relative; overflow: hidden; } div.selector span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } div.selector select { position: absolute; top: 0px; left: 0px; opacity: 0; filter: alpha(opacity:0); height: 25px; border: none; background: none; } /* search results */ .search h2 { padding: 0; background: none; color: #000; font-size: 1.25em; } .search h3 { margin: 0; font-size: 1em; } .search p.more { text-align: right; } .search ul { margin-bottom: 20px; } #primary-content .search li { margin: 0 15px 20px 0; } /* media */ .gallery-name { float: left; margin-top: 0; } .gallery-paging { float: right; } .thumbnails { clear: both; } #searchImageGallery li, #searchVideoGallery li { overflow: hidden; float: left; width: 100px; margin-right: 15px; } #searchImageGallery li img, #searchVideoGallery li img { border: 1px solid #fff; } #searchImageGallery li img.light, #searchVideoGallery li img.light { border: 1px solid #dcddde; } #primary-content .gallery-paging li { margin: 0 0 0 6px!important; } #primary-content .gallery-paging a { text-decoration: underline; } /* pages */ #searchPageResults { color: #717070; } #searchPageResults h3 { font-weight: normal; } #searchPageResults h3 a { text-decoration: none; } #searchPageResults h3 a:hover { text-decoration: underline; } #searchPageResults li { clear: both; } #searchPageResults p { margin: 0; } #searchPageResults p.date { color: #2b2b2b; text-transform: uppercase; } #primary-content .search .tags { margin: 0; color: #3a3a3a; } #searchPageResults .tags li { float: left; clear: none; min-width: 90px; font-weight: bold; } .search .tags a { font-weight: bold; } .searchPaging { clear: both; } .searchPaging ul { float: right; font-weight: bold; } .searchPaging li { display: inline-block; clear: none!important; float: left; margin: 0 0 0 6px!important; } /* search results filter */ #search-filter .keyword { margin-bottom: 12px; } #search-filter .keyword .text { width: 133px; background-image: url(../images/generic-lhs-search.gif); } #search-filter .keyword .submit { background-image: url(../images/generic-lhs-search.gif); } /* checkboxes */ #search-filter fieldset { border: 0; margin: 0; padding: 0; } #search-filter .filters legend { margin-bottom: 2px; font-size: 1.167em; color: #fff; } #search-filter .filters ol { margin: 0 0 15px 0; padding: 0; } #search-filter .filters li { margin: 0; padding: 0 0 0 20px; background: 0; list-style-type: none; } #search-filter .filters li label { position: relative; cursor: pointer; } #search-filter .filters li input { margin: 0 10px 0 0; } #search-filter.js-enabled .filters li label input { position: absolute; left: 0; top: 0; height: 6px; width: 6px; opacity: 0; filter: alpha(opacity:0); } #search-filter.js-enabled .filters li label { padding-left: 20px; background: url(../images/form-checkbox-off.gif) no-repeat left 1px; } #search-filter.js-enabled .filters li label:hover { background-image: url(../images/form-checkbox-hover.png); } #search-filter.js-enabled .filters li label.true { background-image: url(../images/form-checkbox-on.gif); color: #fff; } #search-filter .filters .submit { float: right; height: 15px; width: 33px; border: 0; background: url(../images/form-lhs-go.png) no-repeat right top; cursor: pointer; font-size: 0; text-indent: -2000px; } /* stock ticker */ .ccbnMStockPrice table { margin-bottom: 0px; } .ccbnMStockPrice table.mBody { width: 202px !important; } .ccbnMStockPrice td { padding: 1px 0px; background: none; } .ccbnBgTblOdd td { border-bottom: 1px solid #0083c5; font-size: 0.9375em; } /* css for modified html */ .last-trade { overflow: hidden; width: 202px; border-bottom: 1px solid #0083c5; margin: 0px auto; } .last-trade .amount { float: left; width: 85px; margin: 0px 10px 0px 0px; } .last-trade h3 { margin: 0px; color: #0083c5; font-size: 1em; font-weight: bold; } .last-trade .stock { color: #0083c5; font-family: 'Avenir Next Bold', sans-serif; font-size: 2em; letter-spacing: -1px; } .last-trade .time { float: left; width: 107px; } .last-trade .symbol { display: block; color: #0083c5; font-weight: bold; } .ccbnTblSubTxt { font-size: 0.9375em; } /* Responsive styles */ @media screen and (max-width: 727px) { .ccbnMStockPrice { width: 93.72%; margin: 0px 3.14%; } .ccbnMStockPrice table.mBody { width: 100% !important; } .last-trade { width: 100%; } .last-trade .amount { width: 41.86%; margin: 0 3.14% 0 0; /* 30px */ } .last-trade h3 { font-size: 0.9125em; } .last-trade .stock { font-size: 1.425em; } .last-trade .time { width: 55%; } .last-trade .symbol { font-size: 0.9125em; } } /* title and text */ .section.title { margin-bottom: 0; } /* wysiwyg generated classes */ .image_left { float: left; margin: 0 12px 12px 0; } .image_right { float: right; margin: 0 0 12px 12px; } .image_center { width: 100%; margin-bottom: 12px; text-align: center; } /* Page Specific */ /* homepage */ /* layout overides */ #homepage #primary-content { width: 726px; margin: 0; } #homepagestyle .hero { margin-left: 0; } #homepage .cq-colctrl-lt2-c0, #homepage .cq-colctrl-lt2-c1, #homepage .cq-colctrl-lt2-c2 { margin: 0 14px 0 0; } /* brands */ #homepage .brand-navigator { margin-bottom: 15px; } #homepage .brand-navigator li { position: relative; overflow: hidden; float: left; height: 126px; width: 114px; margin: 0; padding: 0; } #homepage .brand-navigator li a .default, #homepage .brand-navigator li a:hover .hover, #homepage .brand-navigator li a:hover .logo { display: block; } #homepage .brand-navigator li a .hover, #homepage .brand-navigator li a .logo, #homepage .brand-navigator li a:hover .default { display: none; } #homepage .brand-navigator li a .logo { position: absolute; left: 0px; top: 0px; } /* blog */ #primary-content .blog-header { margin: 0 0 30px -14px; width: 640px; padding: 45px 30px 0; background: #00aeef; color: #fff; font-family: 'Avenir Next Regular', sans-serif; font-size: 5.417em; } .blog h2 a { color: #000; } /* archive */ .archive li { margin-bottom: 6px; } .archive li a { padding-left: 12px; background: url(../images/generic-bullet-blue.png) no-repeat left center; font-weight: bold; } /* comments */ /* form */ #comments-form { border-top: 1px solid #a7a7a7; margin-bottom: 50px; padding-top: 20px; font-family: 'Avenir Next Regular', sans-serif; } .comment-text-label { display: block; margin-bottom: 2px; color: #000102; font-weight: bold; } #comments-form textarea.comment-text { width: 535px; } #comments-form .comment-text { width: 170px; border: 0; margin-bottom: 10px; padding: 10px; background-color: #f0f0f0; font-family: 'Avenir Next Regular', sans-serif; font-size: 1em; } #comments-form #comments-submit { border: 1px solid #175f85; padding: 2px 10px 4px; background: #01a4e2; color: #fff; font-size: 1.166em; } .comment .comment-header-meta, .comment cite, .comment-body { margin-bottom: 6px; } /* entries */ .blog .entrylist, .comment, #comments-count, #comments-form { width: 555px; margin-left: 56px; } #primary-content .blog .entrylist .blogentry { overflow: hidden; clear: both; margin-bottom: 50px; } .blog .entrylist .snap_preview img { margin-bottom: 12px; } .blog p.date, .comment .comment-header-meta, .comment cite { margin: 0; color: #0083C5; font-size: 0.916em; } /* blog actions */ .blogentry .read-more { display: block; margin-bottom: 35px; padding-left: 10px; background: url(../images/generic-bullet-blue.png) no-repeat left center; font-weight: bold; } #primary-content .blog-actions { overflow: hidden; clear: both; margin: 0; } .blog-actions li { display: block; float: left; margin-right: 4px; line-height: 20px; } .blog-actions li img { margin-left: 8px; vertical-align: middle; } .blog-actions li.comments a, .blog-actions li.permalink a { border-right: 1px solid #717070; padding-right: 4px; } .blog-actions a { font-weight: bold; } /* tag cloud */ .tagcloud { margin: 0px; padding: 0px; text-align: center; } .tagcloud li { display: inline; padding-left: 5px; text-align: center; white-space: nowrap; } .tagcloud .tag10 { font-size:15pt; } .tagcloud .tag9 { font-size:14pt; } .tagcloud .tag8 { font-size:13pt; } .tagcloud .tag7 { font-size:12pt; } .tagcloud .tag6 { font-size:11pt; } .tagcloud .tag5 { font-size:10pt; } .tagcloud .tag4 { font-size: 9pt; } .tagcloud .tag3 { font-size: 8pt; } .tagcloud .tag2, .tagcloud .tag1, .tagcloud .tag0 { display:none; } /* social media */ .social-media h3 { margin: 0 0 6px 0; color: #000; font-size: 1em; font-weight: normal; } .social-media h4 { margin: 0; } .social-media .feed li { position: relative; min-height: 40px; padding-left: 50px; margin-bottom: 15px; } .social-media .feed li img { position: absolute; top: 0; left: 0; height: 40px; width: 40px; } .twtr-widget, iframe { margin-bottom: 12px; } .pageActions { display: none; /* Hide page actions now that there are new share buttons */ margin-bottom: 0px; float: right; margin-top: -35px; height: 20px } #homepage .pageActions { clear: both; } .cq-colctrl-lt0-c0 { float: left; width: 228px; } .cq-colctrl-lt0-c1 { float: left; width: 228px; margin-left: 14px; } .contentfeature .image { line-height: 15px; } #footer-navigation ul li a { line-height: 2.0em; } ._contentfeature img.light { border: 1px solid #dcddde; } .bios td { background: none; padding: 2px 5px 7px; } .search h3 { margin: 0; font-size: 1.2em; } .search p.more { text-align: left; } .search ul { margin-bottom: 4px; } .search ul li { margin-bottom: 4px; } #primary-content .search #searchVideoGallery li, #primary-content .search #searchImageGallery li { margin-bottom: 5px; } #searchVideoGallery .video a img { left: 40px; top: 25px; border: none; } #searchVideoGallery .video a { height: 100px; width: 150px; } #searchVideoGallery .video { padding-top: 100px; } #searchImageGallery .downloads { display: none; } .cq-colctrl-lt4-c0 .social-media { margin-right: 20px; } .cq-colctrl-lt4-c1 .social-media { margin-left: 20px; } #primary-content .text h1 { width:100%; } #homepage .cq-colctrl-lt0-c0, #homepage .cq-colctrl-lt0-c1 { width: 348px; } .findPagesByTag .video { position: relative; padding-top: 170px; } .findPagesByTag .video a, .findPagesByTag .video img { position: absolute; top: 0px; left: 0px; } .findPagesByTag .video a { height: 153px; width: 214px; } .findPagesByTag .video a img { left: 85px; top: 50px; } .section { min-height: 10px; } .section.text .text h3 { margin-bottom: 0px; } /* Share Button Styles */ #share-buttons { clear: both; height: 31px; } #share-buttons ul { display: inline-block; position: relative; z-index: 10; } #primary-content #share-buttons ul { position: static; left: 0; top: 0; clear: none; float: right; } #share-buttons li { position: relative; float: left; padding-left: 8px; } #share-buttons li a.facebook, #share-buttons li a.instagram, #share-buttons li a.linkedin, #share-buttons li a.twitter, #share-buttons li a.youtube { display: block; height: 31px; width: 31px; font-size: 0; text-indent: -2000px; } #share-buttons li a.facebook { background-image: url(../images/share-facebook.png); } #share-buttons li a.instagram { background-image: url(../images/share-instagram.png); } #share-buttons li a.linkedin { background-image: url(../images/share-linkedin.png); } #share-buttons li a.twitter { background-image: url(../images/share-twitter.png); } #share-buttons li a.youtube { background-image: url(../images/share-youtube.png); } #share-buttons li a.facebook:hover, #share-buttons li a.instagram:hover, #share-buttons li a.linkedin:hover, #share-buttons li a.twitter:hover, #share-buttons li a.youtube:hover { background-position: left -31px; } /* Text Editor Styles */ .blueText { color: #3399CC; } .brownText { color: #8C6637; } .greenText { color: #009966; } .magentaText { color: #AE2F95; } .orangeText { color: #FF5900; } .purpleText { color: #9C7DA1; } /* Responsive styles */ @media screen and (max-width: 727px) { /* Default Styles */ /* headers */ h1, .blog h2 { color: #008CC2; font-family: 'Avenir Next Bold', sans-serif; font-size: 1.67em; line-height: 1.2; } /* links */ a, a b { color: #008CC2; } /* more arrow link */ p.more a, .findPagesByTag strong a, ul.our-brands li a, .navigator .next a { margin: 0px 3.14%; /* 30px */ color: #008CC2; } a.more { color: #008CC2; } .press-releases h3 a { color: #008CC2; } .findPagesByTag li strong a { margin-left: 0px; } /* frames */ iframe { width: 93.72%; height: 185px; margin: 0px 3.14%; /* 30px */ } /* Layout Styles */ #wrapper, #wrapper-narrow { width: 100%; } #wrapper-narrow { padding: 0px; } /* header */ #header { width: auto; margin-top: 9px; padding: 0px 3.14%; /* 30px */ } #wrapper-narrow #header { width: auto; } /* logo */ #header #logo { padding-left: 0px; padding-top: 10px; } #header #logo img { width: 50%; } /* brands */ #header #brands { display: none; } /* search */ #header #search { display: none; float: left; padding-top: 8px; } /* primary navigation - hidden in smaller viewable areas */ #primary-navigation { display: none; } /* content */ #content { width: auto; } #wrapper-narrow #content { width: 100%; } /* secondary navigation - hidden in smaller viewable areas */ #secondary-navigation { display: none; } /* wide content */ #homepage #wide-content { width: 100%; } /* primary content */ #primary-content { width: 100%; margin-left: 0px; } .horizontalRule, .table { padding: 0px 3.14%; /* 30px */ } .text .text, .textimage .text { padding: 0px 3.14%; /* 30px */ } .image img, .text img, .textimage img { height: auto; width: 100%; } /* cms generated column layouts */ /* 2 Col */ .cq-colctrl-lt1-c0 { width: 100%; } .cq-colctrl-lt0-c0, .cq-colctrl-lt0-c1, .cq-colctrl-lt1-c1 { display: none; } /* 3 Col */ .cq-colctrl-lt2-c0, .cq-colctrl-lt2-c1, .cq-colctrl-lt2-c2 { display: none; } /* secondary content */ #secondary-content { display: none; } /* footer navigation */ #footer-navigation { margin: 5px 3.14% 25px 3.14%; /* 30px */ padding: 0px; } /* footer icons */ #footer-icons { float: none; text-align: center; } /* footer links */ #footer-links { padding: 10px 3.14% 0px 3.14%; /* 30px */ } #footer-links .footertoolbar { float: left; width: 60%; } #footer-links ul { width: 100%; } #footer-links ul li { margin-right: 6.28%; /* 60px */ } #footer-links p { float: left; width: 40%; } /* mobile */ /* mobile icons */ #mobile-icons { display: block; float: right; margin-top: 8px; } .search-open { display: inline-block; overflow: hidden; height: 20px; width: 20px; background: url(../images/icon-mobile-search.png) no-repeat; text-indent: -9999px; } .search-open:hover { background-position: 0px -20px; } .nav-open { display: inline-block; overflow: hidden; height: 20px; width: 20px; margin-left: 8px; background: url(../images/icon-mobile-menu.png) no-repeat; text-indent: -9999px; } .nav-open:hover { background-position: 0px -20px; } /* mobile search */ #mobile-search { display: block; overflow-y: hidden; /* Disable vertical scroll */ position: fixed; right: 0px; top: 0px; z-index: 1; height: 0px; width: 100%; margin-top: -14px; background: #FFFFFF; transition: 0.5s; /* 0.5 second transition effect to slide in mobile search */ } #mobile-search form { display: inline-block; float: left; padding: 28px 0px 0px 9.43%; /* 90px */ } #mobile-search .text { border: 0; color: #4E4E4E; font-family: Helvetica, Arial, sans-serif; font-size: 1.18em; } .search-close { display: inline-block; float: right; margin: 16px 9.43% 0px 0px; /* 90px */ color: #4E4E4E; font-family: Helvetica, Arial, sans-serif; font-size: 2.5em; text-decoration: none; } /* mobile navigation */ #nav { display: block; overflow-x: hidden; /* Disable horizontal scroll */ position: fixed; right: 0px; top: 0px; z-index: 1; height: 100%; width: 0px; background: #008CC2; font-family: 'Avenir Next Regular', sans-serif; text-transform: uppercase; transition: 0.5s; /* 0.5 second transition effect to slide in the nav */ } #nav ul { padding: 8px 6.28% 0px; /* 60px */ } #nav li { border-bottom: 1px solid #80D2ED; list-style-type: none!important; list-style-position: outside!important; } #nav li a { padding-top: 2px; color: #FFFFFF; font-size: 1.18em; line-height: 34px; text-decoration: none; } #nav ul.subnav { display: none; margin: -4px 0px 0px 0px; padding: 0px 0px 0px 6.28%; /* 60px */ } #nav ul.subnav li.last { border-bottom: none; } .nav-close { float: right; height: 34px; margin: -6px 6.28% 0px 0px; /* 60px */ color: #80D2ED; font-size: 3em; text-decoration: none; } .toggle-subnav { display: inline-block; float: right; height: 12px; width: 20px; margin: 12px 0px 0px 0px; background: url(../images/icon-mobile-nav-toggle.png) no-repeat; text-indent: -9999px; } /* mobile content */ #mobile-content { display: inline; float: left; width: 93.72%; margin: 0px 3.14%; /* 30px */ -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 12px; -webkit-column-gap: 12px; column-gap: 12px; } /* Shared Modules */ /* bordered modules */ .section.social-media, ._archive, ._categories, ._contentfeature, .dropdownlinks, .findPagesByTag, .navigator { display: inline-block; vertical-align: top; width: 100%; margin-bottom: 12px; padding: 0px 0px 4px 0px; } ._shopnow, ._contactus, ._findjob, ._findpagesbytag { padding: 0px; } .jobsearchdeluxe { display: inline-block; vertical-align: top; width: 46.87%; margin: 0px 1.04% 2.09% 1.04%; /* 10px 20px */ padding: 0px; } .section.social-media h2, ._archive h2, ._categories h2, ._shopnow h2, ._findjob h2, ._contactus h2, ._contentfeature h2, ._findpagesbytag h2, .jobsearchdeluxe h2, .stockticker h2, .navigator h2 { margin: 0 2.09% 4px; /* 20px */ padding: 3px 1.04% 0; /* 10px */ color: #008CC2; font-size: 1.33em; line-height: 1.1; } ._shopnow p, ._findjob p, ._contactus p, ._contentfeature p, ._contentfeature .feature, ._findpagesbytag ul { margin: 0px 3.14%; /* 30px */ } .jobsearchdeluxe ul { margin: 0px 3.14% 6px 3.14%; /* 30px */ } ._contentfeature .feature p { margin: 0px; } /* back links */ .linkback { margin-right: 3.14%; } /* blog */ #mobile-content .findPagesByTag li { margin-bottom: 8px; } /* content feature - flexible image / copy module */ ._contentfeature img { height: auto; width: 100%; margin: 0px; } ._contentfeature .icon { float: left; max-height: 50px; max-width: 50px; width: auto; margin: 0px 3.14% 5px 0px; /* 30px */ } /* video feature */ ._contentfeature .video .play-button { position: absolute; top: 40%; left: 40%; width: 20%; } /* FAQs */ .faqs, .faq { margin: 0px 3.14%; /* 30px */ } .faqtoc { margin: 0px 3.14% 6px 3.14%; /* 30px */ } /* hero banner */ .hero { overflow: visible; height: auto; width: 100%; margin: 0px; } .hero ul { margin-bottom: 0px; } .hero li { margin-bottom: 0px; } .hero a { text-decoration: none; } #wide-content .hero { width: 100%; } .hero .tagline, .hero .tagline-right { position: relative; top: 0px; height: auto; width: auto; padding: 0px 3.14%; /* 30px */ background: #FFFFFF; color: #008CC2; font-family: 'Avenir Next Bold', sans-serif; } .hero .tagline p, .hero .tagline-right p { margin-bottom: 0px; padding-left: 3.14%; font-size: 1.67em; line-height: 1.2; } .hero .tagline strong, .hero .tagline-right strong { display: none; } .hero img { height: auto; width: 100%; } /* transitional extras */ #homepage .hero-transitional { height: auto; } #primary-content .hero-transitional li { height: auto; margin-bottom: 15px; } /* navigation icons */ .hero-navigation { display: none; } /* homepagestyle overides */ #homepagestyle .hero { height: auto; width: 100%; margin-bottom: 15px; } #homepagestyle #primary-content .hero-transitional li { height: auto; } #homepagestyle .hero .tagline, #homepagestyle .hero .tagline-right { position: relative; left: 0px; height: auto; width: auto; padding: 0px 3.14%; /* 30px */ background: #FFFFFF; } #homepagestyle .hero .tagline h2, #homepagestyle .hero .tagline-right h2 { margin-bottom: 0px; color: #008CC2; font-size: 1.67em; line-height: 1.2; } /* Job Search */ .job-search { padding: 0px 0px 8px 0px; } .job-search li { margin-bottom: 6px; } .job-search .selector { margin-left: 0px; } .job-search .search-button { margin: 0px 0px 6px 3.14%; /* 30px */ font-size: 1em; } /* simple form */ /* js ui enhanced */ .selector { margin: 0px 0px 6px 3.14%; /* 30px */ color: #008CC2; } /* search results */ .search { margin: 0px 3.14%; /* 30px */ } .search-results-header { display: none; } .search-title, .mobile-search-filter-open { margin: 0px 3.14%; /* 30px */ } .mobile-search-filter-open { display: inline-block; text-decoration: none; } .mobile-search-filter-open h2 { background: url(../images/icon-mobile-search-filter.png) right center no-repeat; padding-right: 16px; font-family: 'Avenir Next Bold', sans-serif; font-size: 1.33em; } /* search navigation */ #searchnav { display: block; overflow-x: hidden; /* Disable horizontal scroll */ position: fixed; left: 0px; top: 0px; z-index: 1; height: 100%; width: 0px; background: #008CC2; color: #FFFFFF; font-family: 'Avenir Next Regular', sans-serif; font-size: 1.083em; text-transform: uppercase; transition: 0.5s; /* 0.5 second transition effect to slide in the nav */ } #searchnav .header { border-bottom: 1px solid #80D2ED; margin: 10px 6.28%; /* 60px */ font-size: 1.67em; font-family: 'Avenir Next Bold', sans-serif; } #search-filter .keyword { display: none; } #search-filter .filters { padding: 0 6.28%; /* 60 px */ } #search-filter .filters li { padding: 0px 0px 0px 6.28%; /* 60 px */ } #search-filter .filters li label { padding-left: 6.28%; /* 60px */ background: url(../images/form-checkbox-off.gif) no-repeat left 1px; } #search-filter .filters li label:hover { background-image: url(../images/form-checkbox-hover.png); } #search-filter .filters li label.true { background-image: url(../images/form-checkbox-on.gif); color: #FFFFFF; } #search-filter .filters li label input { position: absolute; left: 0; top: 0; height: 6px; width: 6px; opacity: 0; filter: alpha(opacity:0); } /* title and text */ .section.title { margin: 0px 3.14%; } /* Page Specific */ /* homepage */ /* layout overides */ #homepage #primary-content { width: 93.72%; padding: 0px 3.14%; /* 30px */ } #homepage .cq-colctrl-lt2-c0, #homepage .cq-colctrl-lt2-c2 { margin-right: 2.09%; /* 20px */ } #homepage .cq-colctrl-lt2-c1 { margin-right: 0px; } /* Investors (NASDAQ) Content Overrides */ .annual-report img { width: auto; margin: 0px 3.14%; /* 30px */ } .ccbnTblOdd img, .ccbnDisclaimer img { width: auto; } .ccbnBgInput img, .ccbnBgSpacer img { height: 10px; width: 1px; } } @media screen and (max-width: 480px) { /* Layout Styles */ /* footer links */ #footer-links .footertoolbar { width: 100%; } #footer-links p { width: 100%; } /* Shared Modules */ /* simple form */ /* js ui enhanced */ .selector, .selector.disabled { width: 80%; padding: 0 10px; background: url(../images/form-select-bg-140.gif) no-repeat left top; font-size: 1em; } div.selector span { width: 50%; } } /* Styles added to aupport the POP code additions */ .offscreen { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: fixed; width: 1px; } .page-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; min-width: 320px; padding-top: 70px; position: relative; width: 100%; } @media screen and (min-width:900px) { .page-container { padding-top: 95px; } } @media screen and (min-width:900px) and (max-width:1150px) { .page-container { padding-top: 135px; } } .container-fluid, .site-footer, .site-header { position: relative; } .container-fluid::after, .site-footer::after, .site-header::after { clear: both; content: ''; display: table; } .container-fluid { margin: 0 auto; max-width: 1360px; padding: 0 20px; width: auto; } .site-header { background: #fff; left: 0; position: fixed; top: 0; width: 100%; z-index: 99; } .site-header li, .site-header ul { list-style: none; margin: 0; padding: 0; } .site-header--container { padding: 0 20px; } .site-header--logo { background: url("../images/logo.svg") no-repeat center center; background-size: 100%; display: block; position: absolute; text-decoration: none; top: 0; } .site-header--search-toggle .svg-icon { fill: #5e5d5d; } .site-header--search-toggle:focus .svg-icon, .site-header--search-toggle:hover .svg-icon { fill: #333; } .site-header a { color: #5e5d5d; font-family: "Helvetica Neue", Arial, sans-serif; text-decoration: none; } .site-header a .svg-icon { fill: #5e5d5d; margin: -2px 5px 0 0; } .site-header a:focus, .site-header a:hover { color: #333; } .site-header a:focus .svg-icon, .site-header a:hover .svg-icon { fill: #333; } .modal-window.site-header--lang-modal { max-width: calc(1360px - (20px * 2)); -webkit-transform: none; -ms-transform: none; transform: none; } @media screen and (min-width:900px) { .modal-window.site-header--lang-modal { top: calc(75px + 25px); } } @media screen and (max-width:899px) { .modal-window.site-header--lang-modal { height: calc(100vh - 50px); left: 0; top: 50px; width: 100vw; } } .modal-window.site-header--lang-modal .modal-window--icon-close { padding: 8px; right: 20px; top: 10px; } .modal-window.site-header--lang-modal .site-header--lang-modal-content { display: block; padding: 20px 20px 100px; } @media screen and (min-width:1024px) { .modal-window.site-header--lang-modal .site-header--lang-modal-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 40px 10%; } } .modal-window.site-header--lang-modal .site-header--lang-modal-title { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; word-break: normal; color: #333; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 20px; font-weight: 300; margin-bottom: 20px; } @media screen and (min-width:1024px) { .modal-window.site-header--lang-modal .site-header--lang-modal-title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 40px; padding-right: 20%; } } @media screen and (min-width:1024px) { .modal-window.site-header--lang-modal .site-header--lang-modal-col { width: 25%; } } .modal-window.site-header--lang-modal .site-header--lang-modal-col-title { color: #333; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 22px; font-weight: 400; margin-bottom: 10px; } @media screen and (min-width:1024px) { .modal-window.site-header--lang-modal .site-header--lang-modal-col-title { font-size: 24px; } } .modal-window.site-header--lang-modal .site-header--lang-modal-link { color: #333; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 300; } @media screen and (max-width:1023px) { .modal-window.site-header--lang-modal .site-header--lang-modal-link { padding-left: 30px; } } .modal-window.site-header--lang-modal .site-header--lang-modal-link.is-active { font-weight: 700; } .site-header--search input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; border: 1px solid #e4e3e2; border-radius: 3px; color: #333; display: inline-block; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; font-weight: 700; height: 50px; line-height: 1; padding: 0 15px; } @media screen and (min-width:900px) { .site-header { height: 75px; -webkit-transition: -webkit-box-shadow .2s ease-out; transition: -webkit-box-shadow .2s ease-out; -o-transition: box-shadow .2s ease-out; transition: box-shadow .2s ease-out; transition: box-shadow .2s ease-out,-webkit-box-shadow .2s ease-out; } .site-header.nav-shadow { -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.15); box-shadow: 0 2px 4px rgba(0,0,0,.15); } .site-header--logo { height: 75px; width: 115px; } .site-header--nav-mobile { display: none; } .site-header--nav-toggle { display: none; } .site-header--nav { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 75px; margin: 0 0 0 115px; padding: 0 0 0 30px; width: calc(100% - (115px + 50px)); } .site-header--search { display: block; height: 50px; margin: 0; padding: 0 50px 0 0; position: absolute; right: 20px; text-align: right; top: 12.5px; -webkit-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; transition: opacity .5s ease-out; width: 50px; } .search-is-open .site-header--search { background: #fff; width: calc(100% - (115px + 100px)); } .site-header--search input[type=text] { font-weight: 200; min-width: 270px; width: 100%; } .site-header--search-toggle { background: 0 0; border: none; cursor: pointer; display: block; height: 100%; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 50px; } .site-header--search-toggle-close { display: none; } .search-is-open .site-header--search-toggle-close { border-left: 1px solid #e4e3e2; display: block; } .search-is-open .site-header--search-toggle-open { display: none; } .site-header--search-form { display: none; } .site-header--search-form .searchbox input { width: auto; } .search-is-open .site-header--search-form { display: inline-block; } .site-header--search-toggle-open .icon-search { background: url("../images/icon-search.svg") no-repeat 0 0; } .site-header--search-toggle-close .icon-close { background: url("../images/icon-close.svg") no-repeat 0 0; } .primary-CMSListMenuHighlightedUL, .primary-CMSListMenuUL { display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: auto; white-space: nowrap; } .primary-CMSListMenuHighlightedLI, .primary-CMSListMenuLI { display: inline-block; height: 100%; position: relative; text-align: center; vertical-align: middle; } .primary-CMSListMenuHighlightedLI.is-active .secondary-CMSListMenuHighlightedUL, .primary-CMSListMenuHighlightedLI.is-active .secondary-CMSListMenuUL, .primary-CMSListMenuHighlightedLI:hover .secondary-CMSListMenuHighlightedUL, .primary-CMSListMenuHighlightedLI:hover .secondary-CMSListMenuUL, .primary-CMSListMenuLI.is-active .secondary-CMSListMenuHighlightedUL, .primary-CMSListMenuLI.is-active .secondary-CMSListMenuUL, .primary-CMSListMenuLI:hover .secondary-CMSListMenuHighlightedUL, .primary-CMSListMenuLI:hover .secondary-CMSListMenuUL { display: block; } .primary-CMSListMenuLink, .primary-CMSListMenuLinkHighlighted { display: block; font-weight: 400; margin: 0; text-align: center; } .primary-CMSListMenuLink:focus, .primary-CMSListMenuLink:hover, .primary-CMSListMenuLinkHighlighted:focus, .primary-CMSListMenuLinkHighlighted:hover { text-decoration: none; } .primary-CMSListMenuLinkHighlighted { font-weight: 700; } .primary-CMSListMenuLink, .primary-CMSListMenuLinkHighlighted { font-size: 16px; padding: 0 20px; } .primary-CMSListMenuLink::after, .primary-CMSListMenuLinkHighlighted::after { background: url("../images/nav-arrow.svg") center center no-repeat; background-size: contain; content: ''; display: block; height: 100%; position: absolute; right: 5px; top: 0; width: 10px; } .is-active .primary-CMSListMenuLink::after, .is-active .primary-CMSListMenuLinkHighlighted::after, .primary-CMSListMenuHighlightedLI:hover .primary-CMSListMenuLink::after, .primary-CMSListMenuHighlightedLI:hover .primary-CMSListMenuLinkHighlighted::after, .primary-CMSListMenuLI:hover .primary-CMSListMenuLink::after, .primary-CMSListMenuLI:hover .primary-CMSListMenuLinkHighlighted::after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .mobile-nav-arrow { display: none; } .secondary-CMSListMenuHighlightedUL, .secondary-CMSListMenuUL { background: #fff; -webkit-box-shadow: 0 3px 6px 1px rgba(0,0,0,.2); box-shadow: 0 3px 6px 1px rgba(0,0,0,.2); display: none; left: 0; position: absolute; text-align: left; top: 100%; white-space: normal; width: 200px; } .secondary-CMSListMenuLink, .secondary-CMSListMenuLinkHighlighted { display: block; font-size: 14px; font-weight: 400; padding: 10px 15px; } .secondary-CMSListMenuLink:focus, .secondary-CMSListMenuLink:hover, .secondary-CMSListMenuLinkHighlighted:focus, .secondary-CMSListMenuLinkHighlighted:hover { background: #e4e3e2; text-decoration: none; } .secondary-CMSListMenuLinkHighlighted { font-weight: 700; } } @media screen and (min-width:900px) and (max-width:1150px) { .site-header { height: 115px; } .site-header--logo { height: calc(115px - 50px); top: 55px; width: 115px; } .site-header--nav { height: 115px; padding-right: 25px; padding-top: 25px; width: calc(100% - 170px); } .newtopnav { width: 100vw; } .site-header--search { border-bottom: 1px solid #e4e3e2; height: calc(50px - 1px); margin-right: -20px; padding-top: 5px; top: 0; width: 100%; } .search-is-open .site-header--search { width: 100%; } .site-header--search-form { margin-right: 20px; } .site-header--search input { height: calc(50px - (5px * 2)); } .site-header--search-toggle { height: calc(50px - (5px * 2)); margin-right: 20px; top: 8px; } .site-header .searchbox--submit { height: calc(50px - (5px * 2)); vertical-align: top; } .site-header .primary-CMSListMenuHighlightedUL, .site-header .primary-CMSListMenuUL { text-align: right; width: 100%; } .site-header .primary-CMSListMenuHighlightedLI, .site-header .primary-CMSListMenuLI { height: calc(115px - 50px); } .site-header .primary-CMSListMenuLink, .site-header .primary-CMSListMenuLinkHighlighted { line-height: calc(115px - 50px); } } @media screen and (max-width:899px) { .site-header { -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.15); box-shadow: 0 2px 4px rgba(0,0,0,.15); height: 50px; } .site-header--logo { height: 50px; width: 90px; } .site-header--nav-mobile { display: block; height: 30px; padding: 10px 40px 10px 0; position: absolute; right: 20px; text-align: right; top: 0; width: 50%; } .site-header--nav-mobile-flyout { background: #fff; display: none; height: calc(100% - 50px); left: 0; margin: 0; overflow: auto; padding: 70px 0 20px; position: fixed; top: 50px; width: 100%; } .nav-is-open .site-header--nav-mobile-flyout { display: block; } .site-header--nav-toggle { background: 0 0; border: 0; cursor: pointer; display: block; margin: 0; padding: 0; position: absolute; right: 0; top: 15px; vertical-align: baseline; width: 30px; } .site-header--nav-toggle-open .icon-menu { background: url("../images/icon-menu.svg") no-repeat 0 0; } .site-header--nav-toggle-close .icon-close { background: url("../images/icon-close.svg") no-repeat 0 0; } .site-header--nav-toggle-close { display: none; } .nav-is-open .site-header--nav-toggle-close { display: block; } .nav-is-open .site-header--nav-toggle-open { display: none; } .site-header--utility-li-lang { display: none; } .site-header--lang-trigger { font-size: 16px; font-weight: 400; } .site-header--nav { display: block; margin: 0; } .site-header--search { display: block; left: 20px; position: absolute; top: 10px; width: calc(100% - 40px); } .site-header--search-toggle { display: none; } .site-header--search-form { display: block; } .primary-CMSListMenuHighlightedUL, .primary-CMSListMenuUL { display: block; } .primary-CMSListMenuHighlightedLI, .primary-CMSListMenuLI { display: block; } .primary-CMSListMenuHighlightedLI.is-active .secondary-CMSListMenuHighlightedUL, .primary-CMSListMenuHighlightedLI.is-active .secondary-CMSListMenuUL, .primary-CMSListMenuLI.is-active .secondary-CMSListMenuHighlightedUL, .primary-CMSListMenuLI.is-active .secondary-CMSListMenuUL { display: block; } .primary-CMSListMenuLink, .primary-CMSListMenuLinkHighlighted { display: inline-block; font-size: 16px; font-weight: 400; margin: 0; padding: 10px 20px; position: relative; } .primary-CMSListMenuLink:focus, .primary-CMSListMenuLinkHighlighted:focus { font-weight: 700; text-decoration: none; } .primary-CMSListMenuLink:hover, .primary-CMSListMenuLinkHighlighted:hover { text-decoration: none; } .primary-CMSListMenuLinkHighlighted { font-weight: 700; } .mobile-nav-arrow { background: url("../images/nav-arrow.svg") center center no-repeat; background-size: contain; content: ''; display: inline-block; float: right; height: 10px; position: relative; right: 30px; top: 15px; width: 10px; } .is-active .mobile-nav-arrow, .is-active .mobile-nav-arrow, .primary-CMSListMenuHighlightedLI:hover .mobile-nav-arrow, .primary-CMSListMenuHighlightedLI:hover .mobile-nav-arrow, .primary-CMSListMenuLI:hover .mobile-nav-arrow, .primary-CMSListMenuLI:hover .mobile-nav-arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } ul.secondary-CMSListMenuHighlightedUL, ul.secondary-CMSListMenuUL { background: #f2f2f2; display: none; padding: 5px 15px; } .secondary-CMSListMenuLink, .secondary-CMSListMenuLinkHighlighted { display: block; font-size: 14px; font-weight: 400; padding: 10px 20px; } .secondary-CMSListMenuLink:focus, .secondary-CMSListMenuLinkHighlighted:focus { font-weight: 700; text-decoration: none; } .secondary-CMSListMenuLink:hover, .secondary-CMSListMenuLinkHighlighted:hover { text-decoration: none; } .secondary-CMSListMenuLinkHighlighted { font-weight: 700; } } .searchbox { position: relative; width: 100%; } .searchbox input { color: #5e5d5d; font-size: 16px; font-weight: 400; width: calc(100% - 30px - 50px); } @media (min-width:1024px) { .searchbox input { width: 300px; } } .searchbox .searchbox--submit { display: inline-block; vertical-align: middle; } @media (max-width:1023px) { .searchbox .searchbox--submit { height: 100%; position: absolute; right: 0; top: 0; width: 30px; } } @media (min-width:1024px) { .searchbox .searchbox--submit { height: 50px; position: relative; width: 50px; } } .searchbox .searchbox--submit input, .searchbox .searchbox--submit-icon { background: 0 0; border: none; cursor: pointer; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .searchbox .searchbox--submit input { font-size: 16px; font-weight: 400; text-indent: -999999em; width: 100%; z-index: 1; } .searchbox--submit-icon .icon-search { background: url("../images/icon-search.svg") no-repeat 0 0; } .searchbox .searchbox--submit .svg-icon { fill: #5e5d5d; left: 50%; position: absolute; top: 45%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .searchbox .searchbox--submit:focus .svg-icon, .searchbox .searchbox--submit:hover .svg-icon { fill: #333; } footer { background: none; border: 0; display: block; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } .site-footer { background: #000; color: #fff; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 400; text-align: center; } .site-footer .footer-content { margin: 0 auto; max-width: 1000px; padding: 30px 0; } .site-footer .footer-content+.footer-content { border-top: 1px solid rgba(255,255,255,0.5); } .site-footer a { color: #fff; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 400; } .site-footer a:focus, .site-footer a:hover { color: #fff; } .site-footer a:focus .svg-icon, .site-footer a:hover .svg-icon { opacity: 0.5; text-decoration: none; } .site-footer p, .site-footer ul { font-size: 12px; line-height: 1.5; margin: 0 auto; } @media (min-width: 768px) { .site-footer p,.site-footer ul { font-size: 14px; } } .site-footer .svg-icon { fill: #fff; height: 1.5rem; width: 1.5rem; } @media (min-width:768px) { .site-footer .svg-icon { height: 2rem; width: 2rem; } } .site-footer a.logo-wearegapinc { background: url("../images/logo-wearegapinc.svg") no-repeat 0 0; background-size: 100%; display: inline-block; height: 69px; margin-bottom: 20px; width: 305px; } @media (max-width: 767px) { .site-footer a.logo-wearegapinc { height: 46px; margin-bottom: 10px; width: 204px; } } .site-footer a.logo-wearegapinc:hover, .site-footer a.logo-wearegapinc:focus { opacity: 0.5; text-decoration: none; } .site-footer a.logo-gapinc { background: url("../images/logo-gapinc.svg") no-repeat 0 0; background-size: 100%; display: inline-block; height: 34px; margin-bottom: 10px; width: 113px; } @media (max-width: 767px) { .site-footer a.logo-gapinc { height: 23px; margin-bottom: 5px; width: 75px; } } .site-footer a.logo-gapinc:hover, .site-footer a.logo-gapinc:focus { opacity: 0.5; text-decoration: none; } @media (max-width:767px) { .site-footer .footer-nav--list { -webkit-column-count: 2; column-count: 2; text-align: left; } } @media (min-width:768px) { .site-footer .footer-nav--list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .site-footer .footer-nav--list ul { list-style: none; padding: 0; } @media (max-width:767px) { .site-footer .footer-nav--list li { display: block; } } @media (min-width:768px) { .site-footer .footer-nav--list li { display: inline-block; } } .site-footer .footer-nav--list a { display: block; padding: 0 0 20px; text-decoration: none; } .site-footer .footer-nav--list a:hover { text-decoration: underline; } @media (min-width:768px) { .site-footer .footer-nav--list a { padding: 0 15px; } } @media (min-width:1024px) { .site-footer .footer-nav--list a { padding: 0 20px; } } @media (min-width:768px) { .site-footer .footer-nav--list li:not(:first-child) a { border-left: 1px solid; } } /* BEGIN - Old styles used to display social media icons on NASDAQ investors pages */ .site-footer a.social-icon { display: inline-block; font-size: 24px; height: 24px; line-height: 24px; width: 24px; } .site-footer a.social-icon:not(:last-child) { margin-right: 10%; } @media (min-width: 768px) { .site-footer a.social-icon { font-size: 32px; height: 32px; line-height: 32px; width: 32px; } .site-footer a.social-icon:not(:last-child) { margin: 0 4% 0 0; } } .site-footer a.social-icon:hover, .site-footer a.social-icon:focus { opacity: 0.5; text-decoration: none; } /* END - Old styles used to display social media icons on NASDAQ investors pages */ .site-footer .footer-social--logos { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .site-footer .footer-social--title { font-size: 21px; font-weight: 200; margin: 0 4% 0 0; } @media (max-width:767px) { .site-footer .footer-social--title { -ms-flex-preferred-size: 100%; flex-basis: 100%; font-size: 16px; margin-bottom: 15px; margin-right: 0; } } .site-footer .footer-social--logo:not(:last-child) { margin-right: 10%; } @media (min-width:768px) { .site-footer .footer-social--logo:not(:last-child) { margin-right: 4%; } } .site-footer .footer-brands--logos { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .site-footer .footer-brands--logo { background: no-repeat 0 0; background-position: center; background-size: 100%; display: inline-block; height: 30px; margin: 0 auto; width: 50%; } @media (max-width:767px) { .site-footer .footer-brands--logo:nth-last-child(n+3) { margin-bottom: 20px; } } @media (min-width:768px) { .site-footer .footer-brands--logo { height: 44px; } } .site-footer .footer-brands--logo:focus, .site-footer .footer-brands--logo:hover { opacity: 0.5; text-decoration: none; } .site-footer .footer-brands--logo-gap { background-image: url("../images/brand-logo-gap.svg"); width: 40px; } @media (min-width:768px) { .site-footer .footer-brands--logo-gap { width: 45px; } } .site-footer .footer-brands--logo-bananarepublic { background-image: url("../images/brand-logo-bananarepublic.svg"); width: 120px; } @media (min-width:768px) { .site-footer .footer-brands--logo-bananarepublic { width: 138px; } } .site-footer .footer-brands--logo-oldnavy { background-image: url("../images/brand-logo-oldnavy.svg"); width: 60px; } @media (min-width:768px) { .site-footer .footer-brands--logo-oldnavy { width: 87px; } } .site-footer .footer-brands--logo-athleta { background-image: url("../images/brand-logo-athleta.svg"); width: 95px; } @media (min-width:768px) { .site-footer .footer-brands--logo-athleta { width: 105px; } } .site-footer .footer-brands--logo-intermix { background-image: url("../images/brand-logo-intermix.svg"); width: 90px; } @media (min-width:768px) { .site-footer .footer-brands--logo-intermix { width: 92px; } } .site-footer .footer-brands--logo-hillcity { background-image: url("../images/brand-logo-hillcity.svg"); width: 120px; } .site-footer .footer-brands--logo-gapinc { background-image: url("../images/logo-gapinc.svg"); width: 80px; } @media (min-width:768px) { .site-footer .footer-brands--logo-gapinc { width:92px; } } .site-footer .footer-terms--description { font-weight: 200; margin: 0 0 30px; } @media (min-width:1024px) { .site-footer .footer-terms--description { margin: 0 10px 30px; } } .site-footer .footer-terms ul { list-style: none; margin: 0 0 20px; padding: 0; } .site-footer .footer-terms li { border-right: 1px solid; display: inline-block; margin: 0; padding: 0 1.0em; } @media (max-width:767px) { .site-footer .footer-terms li { padding: 0 0.5em; } } @media (max-width:767px) { .site-footer .footer-terms li:first-child { padding-left: 0; } } .site-footer .footer-terms li:last-child { border-right: none; } .site-footer .footer-terms li a { text-decoration: none; } .site-footer .footer-terms li a:hover { text-decoration: underline; } .site-footer .footer-terms p.copyright { font-size: 12px; margin: 0; } .svg-icon { display: inline-block; fill: #000; height: 1rem; line-height: 1rem; -webkit-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; vertical-align: middle; width: 1rem; }