/* 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 */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 3, 2010 */
@font-face {
font-family: 'TheSerifLLPSemiLight';
src: url('../fonts/theserifllp-semilight-webfont.eot');
src: local('TheSerif LLP'), local('TheSerifLLPSemiLight'), url('../fonts/theserifllp-semilight-webfont.woff') format('woff'), url('../fonts/theserifllp-semilight-webfont.svg#webfontGFhrj7TS') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TheSerifLLPPlain';
src: url('../fonts/theserifllp-plain-webfont.eot');
src: local('TheSerif LLP'), local('TheSerifLLPPlain'), url('../fonts/theserifllp-plain-webfont.woff') format('woff'), url('../fonts/theserifllp-plain-webfont.svg#webfontAUegklz6') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TheSerifLLPSemiBold';
src: url('../fonts/theserifllp-semibold-webfont.eot');
src: local('TheSerif LLP'), local('TheSerifLLPSemiBold'), url('../fonts/theserifllp-semibold-webfont.woff') format('woff'), url('../fonts/theserifllp-semibold-webfont.svg#webfontaenlIWHt') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TheSerifLLPBold';
src: url('../fonts/theserifllp-bold-webfont.eot');
src: local('TheSerif LLP'), local('TheSerifLLPBold'), url('../fonts/theserifllp-bold-webfont.woff') format('woff'), url('../fonts/theserifllp-bold-webfont.svg#webfontTnrlSEy7') format('svg');
font-weight: normal;
font-style: normal;
}
/* reset elements */
body { padding: 0; margin: 0; }
img { border: 0; }
body {
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: 'TheSerifLLPSemiLight', serif;
font-size: 2.25em;
font-weight: normal;
}
#primary-content h1 {
width: 80%;
}
h2,
#comments-count {
margin: 0 0 1px 0;
color: #000;
font-family: 'TheSerifLLPPlain', serif;
font-size: 1.25em;
font-weight: normal;
}
.section h2,
#search-filter h2 {
margin: 0 0 14px 0;
padding: 1px 10px 0;
color: #0083c5;
font-size: 1.6em;
line-height: 1.25;
}
#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 ul,
#footer-navigation 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 ul li,
#footer-navigation 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: 954px;
padding: 0 15px;
margin: auto;
}
/* header */
#header {
margin-bottom: 9px;
}
/* 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: 'TheSerifLLPPlain', serif, 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: 'TheSerifLLPSemiLight', serif;
}
#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.166em;
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;
}
/* content */
#content {
margin-bottom: 15px;
}
/* secondary navigation */
#secondary-navigation {
position: relative;
float: left;
width: 228px;
padding: 15px 0px 200px;
background: #00a3da;
color: #fff;
font-family: 'TheSerifLLPSemiLight', serif;
}
#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-size: 1.5em;
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.167em;
}
#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: 'TheSerifLLPPlain', 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 {
float: right;
width: 228px;
}
/* footer navigation */
#footer-navigation {
clear: both;
margin-bottom: 65px;
padding: 20px;
background: url(../images/generic-dotted-hr.gif) repeat-x;
}
#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 */
#footer {
border-top: 1px solid #d1d1d1;
padding: 20px;
font-size: 0.916em;
}
#footer ul {
float: left;
}
#footer ul li {
float: left;
margin: 0 25px 0 0;
}
#footer 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 {
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 .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;
}
/* 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;
right: 0px;
width: 178px;
padding: 25px;
background: url(../images/generic-hero-caption-bg.png) top left repeat;
color: #333;
font-family: 'TheSerifLLPPlain', sans-serif;
}
.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;
}
.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: 'TheSerifLLPSemiLight', sans-serif;
font-size: 2.4em;
line-height: 1;
}
#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: 'TheSerifLLPPlain', 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: 'TheSerifLLPSemiBold', 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: 'TheSerifLLPPlain', 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;
}
/* 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: 'TheSerifLLPPlain', 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: 'TheSerifLLPPlain', 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: 'TheSerifLLPPlain', 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: 16px;
text-align: center;
}
#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.googleplus,
#share-buttons li a.linkedin,
#share-buttons li a.pinterest,
#share-buttons li a.tumblr,
#share-buttons li a.twitter {
display: block;
height: 16px;
width: 16px;
font-size: 0;
text-indent: -2000px;
}
#share-buttons li a.facebook {
background-image: url(../images/share-facebook.png);
}
#share-buttons li a.googleplus {
background-image: url(../images/share-googleplus.png);
}
#share-buttons li a.linkedin {
background-image: url(../images/share-linkedin.png);
}
#share-buttons li a.pinterest {
background-image: url(../images/share-pinterest.png);
}
#share-buttons li a.tumblr {
background-image: url(../images/share-tumblr.png);
}
#share-buttons li a.twitter {
background-image: url(../images/share-twitter.png);
}
/* Text Editor Styles */
.blueText {
color: #3399CC;
}
.brownText {
color: #8C6637;
}
.greenText {
color: #009966;
}
.magentaText {
color: #AE2F95;
}
.orangeText {
color: #FF5900;
}
.purpleText {
color: #9C7DA1;
}