/* SHARED ELEMENTS ACROSS SALESFORCE.COM SITE */
/* ------------------ Theme1 styles changed to Lucida and sizes------------ */
.theme1 body, .theme1 div,.theme1 td,.theme1 th,.theme1 form,.theme1 h1,.theme1 h2,.theme1 h3,.theme1 h4,.theme1 h5, .theme1 p, .theme1 a, .theme1 li{font-family:ProximaNovaRegular, Arial, sans-serif; font-weight:normal; color:#333;}
.theme1 h1, .theme1 h2, .theme1 h3, .theme1 h4, .theme1 h5, .theme1 h6 {font-family: ProximaNovaLight, Arial, sans-serif;}
.theme1 h1 {font-size:32px;margin:0 0 10px 0;line-height:115%;}
.theme1 h2 {font-size:32px;line-height:115%;margin:0 0 20px 0;}
.theme1 h3 {font-size:26px;line-height:125%;margin:0 0 20px 0;}
.theme1 h4 {font-size:22px;line-height:28px;line-height:25px;margin:0;padding:0;}
.theme1 h5 {font-size:18px;line-height:24px;}
.theme1 h6 {font-size:14px;line-height:19px;font-weight:bold;}
.theme1 p {font-size:16px;line-height:140%;color:#666666;margin: 0 0 26px;}
.theme1 a, .theme1 a:visited {font-family: ProximaNovaSemiBold;font-size:16px;line-height:20px;color:#00a1e0;}
.theme1 ul {list-style: disc outside none;margin: 0 0 32px;}
.theme1 li {font-size:16px;line-height:22px;color:#666666;}
body {font-family: ProximaNovaLight, Arial, sans-serif; font-size:16px;color:#333;line-height:140%;}
/* body {font-size:12px;color:#464646;line-height:20px} */
a, a:visited {color:#00a1e0; text-decoration:none;}
a:hover, .theme1 a:hover {color:#f10;}
.color-link {color:#00a1e0;}
/* ---------------- PAGE LAYOUT ---------------- */
/**
@Name page-width-100
@Tags layout, width, pagewrap, content-wrap
@Authors Leslie Chan
@Example For full width page without padding, add "page-width-100" to "bodyCSS" in the "jsoncfg"
@Comments Special class added to BODY to make change DIVS so "content" DIV is 100% wide (#pagewrap, #content-wrap and .content). Add to "bodyCSS" on "jsoncfg" file property.
*/
.page-width-100 #pagewrap {width:100%; padding:0; margin:0;}
.page-width-100 #content-wrap {width:100%; padding:0; margin:0;}
.page-width-100 #content-wrap .content {width:100%; padding:0; margin:0;}
/* ---------------- BUTTON SPECIFIC BACKGROUNDS (with linear gradients) ---------------- */
/**
@Name btn bg-gradient-blue-light
@Tags button, promo
@Authors Howard Newman
@Example btn bg-gradient-blue-light
btn bg-gradient-blue-light
two lines
bg-gradient-blue-light font-16
two lines
@Comments Supports multiple colors, multiple lines, shadow and icons (new window, arrow, etc)
*/
.bg-gradient-blue-light{
background: #daedf7; /* Old browsers */
background: -moz-linear-gradient(top, #daedf7 0%, #f2f8fc 6%, #fcfeff 12%, #ecf6fc 62%, #e6f3fb 74%, #daedf9 87%, #cae5f6 94%, #b3d9f0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daedf7), color-stop(6%,#f2f8fc), color-stop(12%,#fcfeff), color-stop(62%,#ecf6fc), color-stop(74%,#e6f3fb), color-stop(87%,#daedf9), color-stop(94%,#cae5f6), color-stop(100%,#b3d9f0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #daedf7 0%,#f2f8fc 6%,#fcfeff 12%,#ecf6fc 62%,#e6f3fb 74%,#daedf9 87%,#cae5f6 94%,#b3d9f0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #daedf7 0%,#f2f8fc 6%,#fcfeff 12%,#ecf6fc 62%,#e6f3fb 74%,#daedf9 87%,#cae5f6 94%,#b3d9f0 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #daedf7 0%,#f2f8fc 6%,#fcfeff 12%,#ecf6fc 62%,#e6f3fb 74%,#daedf9 87%,#cae5f6 94%,#b3d9f0 100%); /* IE10+ */
background: linear-gradient(top, #daedf7 0%,#f2f8fc 6%,#fcfeff 12%,#ecf6fc 62%,#e6f3fb 74%,#daedf9 87%,#cae5f6 94%,#b3d9f0 100%); /* W3C */
-pie-background: linear-gradient(#fcfeff, #b3d9f0); /* for IE because filter doesn't work with PIE, only two colors */
}
/**
@Name btn bg-gradient-gold
@Tags button
@Authors Howard Newman
@Example btn bg-gradient-gold
btn bg-gradient-gold
two lines
btn bg-gradient-gold font-16
two lines
@Comments Supports multiple colors, multiple lines, shadow and icons (new window, arrow, etc)
*/
.bg-gradient-gold{
background: #f5de82; /* Old browsers */
background: -moz-linear-gradient(top, #cccccc 0%, #f5de82 2%, #ffe26e 5%, #ffe168 12%, #ffdb4c 28%, #ffcf0d 51%, #ffcd05 56%, #ffcc00 65%, #ffcc00 98%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(2%,#f5de82), color-stop(5%,#ffe26e), color-stop(12%,#ffe168), color-stop(28%,#ffdb4c), color-stop(51%,#ffcf0d), color-stop(56%,#ffcd05), color-stop(65%,#ffcc00), color-stop(98%,#ffcc00), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cccccc 0%,#f5de82 2%,#ffe26e 5%,#ffe168 12%,#ffdb4c 28%,#ffcf0d 51%,#ffcd05 56%,#ffcc00 65%,#ffcc00 98%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cccccc 0%,#f5de82 2%,#ffe26e 5%,#ffe168 12%,#ffdb4c 28%,#ffcf0d 51%,#ffcd05 56%,#ffcc00 65%,#ffcc00 98%,#cccccc 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #cccccc 0%,#f5de82 2%,#ffe26e 5%,#ffe168 12%,#ffdb4c 28%,#ffcf0d 51%,#ffcd05 56%,#ffcc00 65%,#ffcc00 98%,#cccccc 100%); /* IE10+ */
background: linear-gradient(top, #cccccc 0%,#f5de82 2%,#ffe26e 5%,#ffe168 12%,#ffdb4c 28%,#ffcf0d 51%,#ffcd05 56%,#ffcc00 65%,#ffcc00 98%,#cccccc 100%); /* W3C */
-pie-background: linear-gradient(#f5de82, #ffcc00); /* for IE because filter doesn't work with PIE, only two colors */
}
.bg-gradient-gold:hover{
background: #f5de82; /* Old browsers */
background: -moz-linear-gradient(top, #cccccc 0%, #f5de82 2%, #ffeeac 5%, #ffeda4 16%, #ffe991 28%, #ffe478 35%, #ffd21c 53%, #ffcf0e 58%, #ffcd05 63%, #ffcc00 70%, #ffcc00 98%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(2%,#f5e7b2), color-stop(5%,#ffeeac), color-stop(16%,#ffeda4), color-stop(28%,#ffe991), color-stop(35%,#ffe478), color-stop(53%,#ffd21c), color-stop(58%,#ffcf0e), color-stop(63%,#ffcd05), color-stop(70%,#ffcc00), color-stop(98%,#ffcc00), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cccccc 0%,#f5e7b2 2%,#ffeeac 5%,#ffeda4 16%,#ffe991 28%,#ffe478 35%,#ffd21c 53%,#ffcf0e 58%,#ffcd05 63%,#ffcc00 70%,#ffcc00 98%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cccccc 0%,#f5e7b2 2%,#ffeeac 5%,#ffeda4 16%,#ffe991 28%,#ffe478 35%,#ffd21c 53%,#ffcf0e 58%,#ffcd05 63%,#ffcc00 70%,#ffcc00 98%,#cccccc 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #cccccc 0%,#f5e7b2 2%,#ffeeac 5%,#ffeda4 16%,#ffe991 28%,#ffe478 35%,#ffd21c 53%,#ffcf0e 58%,#ffcd05 63%,#ffcc00 70%,#ffcc00 98%,#cccccc 100%); /* IE10+ */
background: linear-gradient(top, #cccccc 0%,#f5e7b2 2%,#ffeeac 5%,#ffeda4 16%,#ffe991 28%,#ffe478 35%,#ffd21c 53%,#ffcf0e 58%,#ffcd05 63%,#ffcc00 70%,#ffcc00 98%,#cccccc 100%); /* W3C */
-pie-background: linear-gradient(#f5e7b2, #ffcc00); /* for IE because filter doesn't work with PIE, only two colors */
}
/**
@Name btn bg-gradient-orange
@Tags button
@Authors Howard Newman
@Example btn bg-gradient-orange
btn bg-gradient-orange
two lines
bg-gradient-orange with icon-arrow
bg-gradient-orange icon-new-window
bg-gradient-orange w/ icon
and two lines
@Comments Supports multiple colors, multiple lines, shadow and icons (new window, arrow, etc)
*/
.bg-gradient-orange{
background: #f2c426; /* Old browsers */
background: -moz-linear-gradient(top, #f2c426 0%, #eeb111 13%, #eeb111 85%, #eba90f 90%, #e08906 98%, #efc282 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2c426), color-stop(13%,#eeb111), color-stop(85%,#eeb111), color-stop(90%,#eba90f), color-stop(98%,#e08906), color-stop(100%,#efc282)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2c426 0%,#eeb111 13%,#eeb111 85%,#eba90f 90%,#e08906 98%,#efc282 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2c426 0%,#eeb111 13%,#eeb111 85%,#eba90f 90%,#e08906 98%,#efc282 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f2c426 0%,#eeb111 13%,#eeb111 85%,#eba90f 90%,#e08906 98%,#efc282 100%); /* IE10+ */
background: linear-gradient(top, #f2c426 0%,#eeb111 13%,#eeb111 85%,#eba90f 90%,#e08906 98%,#efc282 100%); /* W3C */
-pie-background: linear-gradient(#f2c426, #e08906); /* for IE because filter doesn't work with PIE, only two colors */
behavior: url(/common/assets/css/pie/PIE.htc);
}
.bg-gradient-orange:hover{
background: #f2c52b; /* Old browsers */
background: -moz-linear-gradient(top, #f2c52b 0%, #f2c332 4%, #f0bb29 13%, #f1bc2c 19%, #f0bb2a 85%, #efb926 88%, #edb220 90%, #e08a07 98%, #efc282 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2c52b), color-stop(4%,#f2c332), color-stop(13%,#f0bb29), color-stop(19%,#f1bc2c), color-stop(85%,#f0bb2a), color-stop(88%,#efb926), color-stop(90%,#edb220), color-stop(98%,#e08a07), color-stop(100%,#efc282)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2c52b 0%,#f2c332 4%,#f0bb29 13%,#f1bc2c 19%,#f0bb2a 85%,#efb926 88%,#edb220 90%,#e08a07 98%,#efc282 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2c52b 0%,#f2c332 4%,#f0bb29 13%,#f1bc2c 19%,#f0bb2a 85%,#efb926 88%,#edb220 90%,#e08a07 98%,#efc282 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f2c52b 0%,#f2c332 4%,#f0bb29 13%,#f1bc2c 19%,#f0bb2a 85%,#efb926 88%,#edb220 90%,#e08a07 98%,#efc282 100%); /* IE10+ */
background: linear-gradient(top, #f2c52b 0%,#f2c332 4%,#f0bb29 13%,#f1bc2c 19%,#f0bb2a 85%,#efb926 88%,#edb220 90%,#e08a07 98%,#efc282 100%); /* W3C */
-pie-background: linear-gradient(#f2c52b, #e08a07); /* for IE because filter doesn't work with PIE, only two colors */
behavior: url(/common/assets/css/pie/PIE.htc);
}
/**
@Name btn bg-gradient-green
@Tags button
@Authors Howard Newman
@Example btn bg-gradient-green
btn bg-gradient-green
two lines
bg-gradient-green with icon-arrow
bg-gradient-green icon-new-window
bg-gradient-green w/ icon
and two lines
@Comments Supports multiple colors, multiple lines, shadow and icons (new window, arrow, etc)
*/
.bg-gradient-green{
background: #96b432; /* Old browsers */
background: -moz-linear-gradient(top, #96b432 0%, #92b42a 3%, #8fb429 9%, #8eb12f 12%, #8db12b 15%, #88ad29 24%, #7fa629 41%, #759d23 56%, #679320 79%, #64911a 85%, #648e22 88%, #638d1d 91%, #5e8d1d 97%, #64891f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96b432), color-stop(3%,#92b42a), color-stop(9%,#8fb429), color-stop(12%,#8eb12f), color-stop(15%,#8db12b), color-stop(24%,#88ad29), color-stop(41%,#7fa629), color-stop(56%,#759d23), color-stop(79%,#679320), color-stop(85%,#64911a), color-stop(88%,#648e22), color-stop(91%,#638d1d), color-stop(97%,#5e8d1d), color-stop(100%,#64891f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #96b432 0%,#92b42a 3%,#8fb429 9%,#8eb12f 12%,#8db12b 15%,#88ad29 24%,#7fa629 41%,#759d23 56%,#679320 79%,#64911a 85%,#648e22 88%,#638d1d 91%,#5e8d1d 97%,#64891f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #96b432 0%,#92b42a 3%,#8fb429 9%,#8eb12f 12%,#8db12b 15%,#88ad29 24%,#7fa629 41%,#759d23 56%,#679320 79%,#64911a 85%,#648e22 88%,#638d1d 91%,#5e8d1d 97%,#64891f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #96b432 0%,#92b42a 3%,#8fb429 9%,#8eb12f 12%,#8db12b 15%,#88ad29 24%,#7fa629 41%,#759d23 56%,#679320 79%,#64911a 85%,#648e22 88%,#638d1d 91%,#5e8d1d 97%,#64891f 100%); /* IE10+ */
background: linear-gradient(top, #96b432 0%,#92b42a 3%,#8fb429 9%,#8eb12f 12%,#8db12b 15%,#88ad29 24%,#7fa629 41%,#759d23 56%,#679320 79%,#64911a 85%,#648e22 88%,#638d1d 91%,#5e8d1d 97%,#64891f 100%); /* W3C */
-pie-background: linear-gradient(#96b432, #5e8d1d); /* for IE because filter doesn't work with PIE, only two colors */
behavior: url(/common/assets/css/pie/PIE.htc);
}
/**
@Name btn bg-gradient-blue
@Tags button
@Authors Howard Newman
@Example btn bg-gradient-blue
btn bg-gradient-blue
two lines
bg-gradient-blue with icon-arrow
bg-gradient-blue icon-new-window
bg-gradient-blue w/ icon
and two lines
@Comments Supports multiple colors, multiple lines, shadow and icons (new window, arrow, etc)
*/
.bg-gradient-blue{
background: #00b4e5; /* Old browsers */
background: -moz-linear-gradient(top, #00b4e5 0%, #00a1e0 13%, #00a1e0 85%, #009ad9 88%, #0091cf 90%, #00629c 98%, #7fadca 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b4e5), color-stop(13%,#00a1e0), color-stop(85%,#00a1e0), color-stop(88%,#009ad9), color-stop(90%,#0091cf), color-stop(98%,#00629c), color-stop(100%,#7fadca)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b4e5 0%,#00a1e0 13%,#00a1e0 85%,#009ad9 88%,#0091cf 90%,#00629c 98%,#7fadca 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b4e5 0%,#00a1e0 13%,#00a1e0 85%,#009ad9 88%,#0091cf 90%,#00629c 98%,#7fadca 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #00b4e5 0%,#00a1e0 13%,#00a1e0 85%,#009ad9 88%,#0091cf 90%,#00629c 98%,#7fadca 100%); /* IE10+ */
background: linear-gradient(top, #00b4e5 0%,#00a1e0 13%,#00a1e0 85%,#009ad9 88%,#0091cf 90%,#00629c 98%,#7fadca 100%); /* W3C */
-pie-background: linear-gradient(#00b4e5, #0091cf); /* for IE because filter doesn't work with PIE, only two colors */
behavior: url(/common/assets/css/pie/PIE.htc);
}
.bg-gradient-blue:hover{
background: #0ab5e5; /* Old browsers */
background: -moz-linear-gradient(top, #0ab5e5 0%, #18b5e5 2%, #20b3e4 4%, #25aee2 8%, #21aae0 10%, #26abe0 19%, #26abe0 81%, #23aae0 85%, #1fa6dc 88%, #199bd2 90%, #118cc3 92%, #02649d 98%, #7fadca 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0ab5e5), color-stop(2%,#18b5e5), color-stop(4%,#20b3e4), color-stop(8%,#25aee2), color-stop(10%,#21aae0), color-stop(19%,#26abe0), color-stop(81%,#26abe0), color-stop(85%,#23aae0), color-stop(88%,#1fa6dc), color-stop(90%,#199bd2), color-stop(92%,#118cc3), color-stop(98%,#02649d), color-stop(100%,#7fadca)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0ab5e5 0%,#18b5e5 2%,#20b3e4 4%,#25aee2 8%,#21aae0 10%,#26abe0 19%,#26abe0 81%,#23aae0 85%,#1fa6dc 88%,#199bd2 90%,#118cc3 92%,#02649d 98%,#7fadca 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0ab5e5 0%,#18b5e5 2%,#20b3e4 4%,#25aee2 8%,#21aae0 10%,#26abe0 19%,#26abe0 81%,#23aae0 85%,#1fa6dc 88%,#199bd2 90%,#118cc3 92%,#02649d 98%,#7fadca 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #0ab5e5 0%,#18b5e5 2%,#20b3e4 4%,#25aee2 8%,#21aae0 10%,#26abe0 19%,#26abe0 81%,#23aae0 85%,#1fa6dc 88%,#199bd2 90%,#118cc3 92%,#02649d 98%,#7fadca 100%); /* IE10+ */
background: linear-gradient(top, #0ab5e5 0%,#18b5e5 2%,#20b3e4 4%,#25aee2 8%,#21aae0 10%,#26abe0 19%,#26abe0 81%,#23aae0 85%,#1fa6dc 88%,#199bd2 90%,#118cc3 92%,#02649d 98%,#7fadca 100%); /* W3C */
-pie-background: linear-gradient(#0ab5e5, #199bd2); /* for IE because filter doesn't work with PIE, only two colors */
behavior: url(/common/assets/css/pie/PIE.htc);
}
/**
@Name btn bg-gradient-darkblue
@Tags button
@Authors Josh West
@Example btn bg-gradient-darkblue
btn bg-gradient-darkblue
two lines
bg-gradient-darkblue with icon-arrow
bg-gradient-blue icon-new-window
bg-gradient-darkblue w/ icon
and two lines
@Comments Supports multiple colors, multiple lines, shadow and icons (new window, arrow, etc)
*/
.bg-gradient-darkblue{
background: #0482b7; /* Old browsers */
background: -moz-linear-gradient(top, #0482b7 0%, #047db3 18%, #02619c 74%, #025895 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0482b7), color-stop(18%,#047db3), color-stop(74%,#02619c), color-stop(100%,#025895)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0482b7 0%,#047db3 18%,#02619c 74%,#025895 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0482b7 0%,#047db3 18%,#02619c 74%,#025895 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0482b7 0%,#047db3 18%,#02619c 74%,#025895 100%); /* IE10+ */
background: linear-gradient(top, #0482b7 0%,#047db3 18%,#02619c 74%,#025895 100%); /* W3C */
-pie-background:linear-gradient(top, #047db3 0%, #025895); /* for IE because filter doesn't work with PIE, only two colors */
behavior:url(/common/assets/css/pie/PIE.htc);
}
.bg-gradient-darkblue:hover{
background: #1e8ebe; /* Old browsers */
background: -moz-linear-gradient(top, #1e8ebe 0%, #1c699e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e8ebe), color-stop(100%,#1c699e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e8ebe 0%,#1c699e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e8ebe 0%,#1c699e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e8ebe 0%,#1c699e 100%); /* IE10+ */
background: linear-gradient(top, #1e8ebe 0%,#1c699e 100%); /* W3C */
-pie-background:linear-gradient(top, #1e8ebe 0%, #1c699e); /* for IE because filter doesn't work with PIE, only two colors */
behavior:url(/common/assets/css/pie/PIE.htc);
}
.bg-gradient-graphite{
background: #7a7a7a; /* Old browsers */
background: -moz-linear-gradient(top, #7a7a7a 0%, #727272 26%, #5a5a5a 76%, #525252 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(26%,#727272), color-stop(76%,#5a5a5a), color-stop(100%,#525252)) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7a7a7a 0%,#727272 26%,#5a5a5a 76%,#525252 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7a7a7a 0%,#727272 26%,#5a5a5a 76%,#525252 100%) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7a7a7a 0%,#727272 26%,#5a5a5a 76%,#525252 100%) !important; /* IE10+ */
background: linear-gradient(top, #7a7a7a 0%,#727272 26%,#5a5a5a 76%,#525252 100%) !important; /* W3C */
/*FIXME - test these vals in IE8*/
-pie-background: linear-gradient(#5a5a5a, #525252); /* for IE because filter doesn't work with PIE, only two colors */
}
.bg-gradient-black{
background: #404040; /* Old browsers */
background: -moz-linear-gradient(top, #404040 0%, #3a3a3a 29%, #292929 85%, #272727 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(29%,#3a3a3a), color-stop(85%,#292929), color-stop(100%,#272727)) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #404040 0%,#3a3a3a 29%,#292929 85%,#272727 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #404040 0%,#3a3a3a 29%,#292929 85%,#272727 100%) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #404040 0%,#3a3a3a 29%,#292929 85%,#272727 100%) !important; /* IE10+ */
background: linear-gradient(top, #404040 0%,#3a3a3a 29%,#292929 85%,#272727 100%) !important; /* W3C */
/*FIXME - test these vals in IE8*/
-pie-background: linear-gradient(#292929, #272727); /* for IE because filter doesn't work with PIE, only two colors */
}
/* vertical fade from transparent to white at 50% mark */
/**
@Name bg-gradient-white-fade
@Tags white gradient fade gray radial
@Authors Leslie Chan, Ben Steyaert
@Example Blue background fades to white.
Classes used:
bg-blue-light-5 bg-gradient-white-fade radius-10
gray background fades to white.
Classes used:
bg-gradient-gray-radial
gray background fades to white.
Classes used:
bg-gradient-gray-light
@Comments Fades from transparent to white. Usually used in conjunction with a background color.
*/
.bg-gradient-white-fade {background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,1) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0.5)), color-stop(50%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 25%,rgba(255,255,255,1) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 25%,rgba(255,255,255,1) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 25%,rgba(255,255,255,1) 50%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 25%,rgba(255,255,255,1) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
.bg-gradient-gray-radial,
.gray-radial-gradient {background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,255,255,1) 2%, rgba(246,246,246,1) 10%, rgba(238,238,238,1) 52%, rgba(246,246,246,1) 91%, rgba(255,255,255,1) 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(2%,rgba(255,255,255,1)), color-stop(10%,rgba(246,246,246,1)), color-stop(52%,rgba(238,238,238,1)), color-stop(91%,rgba(246,246,246,1)), color-stop(97%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 2%,rgba(246,246,246,1) 10%,rgba(238,238,238,1) 52%,rgba(246,246,246,1) 91%,rgba(255,255,255,1) 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 2%,rgba(246,246,246,1) 10%,rgba(238,238,238,1) 52%,rgba(246,246,246,1) 91%,rgba(255,255,255,1) 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 2%,rgba(246,246,246,1) 10%,rgba(238,238,238,1) 52%,rgba(246,246,246,1) 91%,rgba(255,255,255,1) 97%); /* IE10+ */
background: linear-gradient(left, rgba(255,255,255,1) 2%,rgba(246,246,246,1) 10%,rgba(238,238,238,1) 52%,rgba(246,246,246,1) 91%,rgba(255,255,255,1) 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 */}
.bg-gradient-gray-light{ background: #fefefe; /* Old browsers */
background: -moz-linear-gradient(top, #fefefe 0%, #fbfbfb 20%, #ececec 70%, #d6d6d6 98%, #dedede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(20%,#fbfbfb), color-stop(70%,#ececec), color-stop(98%,#d6d6d6), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefefe 0%,#fbfbfb 20%,#ececec 70%,#d6d6d6 98%,#dedede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefefe 0%,#fbfbfb 20%,#ececec 70%,#d6d6d6 98%,#dedede 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fefefe 0%,#fbfbfb 20%,#ececec 70%,#d6d6d6 98%,#dedede 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */}}
/**
@Name bg-gradient-red
@Tags red gradient
@Authors Eric Joe
@Example btn bg-gradient-red
btn bg-gradient-red
two lines
bg-gradient-red with icon-arrow
bg-gradient-red icon-new-window
bg-gradient-red w/ icon
and two lines
@Comments Supports multiple colors, multiple lines, shadow and icons (new window, arrow, etc)
*/
.bg-gradient-red {
background: #d60000; /* Old browsers */
background: -moz-linear-gradient(top, #d60000 0%, #d60000 26%, #d20001 41%, #b00002 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d60000), color-stop(26%,#d60000), color-stop(41%,#d20001), color-stop(100%,#b00002)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d60000 0%,#d60000 26%,#d20001 41%,#b00002 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d60000 0%,#d60000 26%,#d20001 41%,#b00002 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d60000 0%,#d60000 26%,#d20001 41%,#b00002 100%); /* IE10+ */
background: linear-gradient(to bottom, #d60000 0%,#d60000 26%,#d20001 41%,#b00002 100%); /* W3C */
-pie-background: linear-gradient(#d60000, #b00002); /* for IE because filter doesn't work with PIE, only two colors */
}
/* ---------------- FONT COLOR ---------------- */
/**
@Name font-{color}
@Tags font
@Example Text has font-red
Text has font-blue
Text has font-gray-med
Text has font-gray-light
@Comments generic font colors. Styles: font-red, font-blue, font-gray-med
*/
/* generic font colors begin */
.font-red {color:#ff1100 !important;}
.font-blue {color:#00a1e0 !important;}
.font-dark-blue {color:#336699 !important;}
.font-gray-med {color:#808080 !important;}
.font-gray-light {color:#bbbbbb !important;}
.font-orange {color:#ff9900 !important;}
/* generic font colors end */
/* ---------------- BUTTON ARROWS ---------------- */
.btn-arrow-blue-large {background: url("/common/assets/img/cta-sprite.png") repeat scroll 0 -133px transparent !important;height: 18px;margin-top: -9px;position: absolute;right: 9px;top: 50%;width:12px;}
.btn-arrow-black-large {background: url("/common/assets/img/cta-sprite.png") repeat scroll 0 -156px transparent !important;height: 18px;margin-top: -9px;position: absolute;right: 9px;top: 50%;width:12px;}
.btn-arrow-white-large {background: url("/common/assets/img/cta-sprite.png") repeat scroll 0 -179px transparent !important;height: 18px;margin-top: -9px;position: absolute;right: 9px;top: 50%;width:12px;}
.btn-arrow-red-large {background: url("/common/assets/img/cta-sprite.png") repeat scroll 0 -225px transparent !important;height: 18px;margin-top: -9px;position: absolute;right: 9px;top: 50%;width:12px;}
/* ---------------- PROMO BUTTON EXAMPLES ---------------- */
/**
@Name promo / cta examples
@Tags button, promo, cta, examples, red arrow, blue arrow
@Authors Howard Newman
@Example btn bg-gradient-blue-light width-100 (with arrow)
btn bg-gradient-blue width-100 (with arrow)
view demo
Chatter
@Comments Some promo and cta button examples. Keep building on this example when we create commonly used promo and ctas.
*/
/* ---------------- SOCIAL SHARING STYLES ---------------- */
#fb-root {background:transparent; display:none;}
.right .social-icons {float:right;}
.social-icons .social {position:relative; height:20px; margin:2px 0 2px 15px;}
.top-count .social {height:70px;}
.follow-icons .social {width:31px; height:30px; margin-left:5px; background:transparent url('/common/assets/img/social-icons.png') no-repeat top left;}
.follow-icons .social.left {margin-left:0; margin-right:5px;}
.follow-icons .facebook {background-position:-42px -268px;}
.follow-icons .twitter {background-position:-5px -268px;}
.follow-icons .googleplus {background-position:-127px -312px;}
.follow-icons .linkedin {background-position:-155px -268px;}
.follow-icons .youtube {background-position:-8px -312px;}
.follow-icons .flickr {background-position:-48px -311px;}
.follow-icons .blog {background-position:-80px -268px;}
.follow-icons.bw .facebook {background-position:-40px -533px;}
.follow-icons.bw .twitter {background-position:-5px -533px;}
.follow-icons.bw .linkedin {background-position:-75px -533px;}
.follow-icons.bw .youtube {background-position:-145px -533px}
.follow-icons.bw .googleplus {background-position:-110px -533px;}
.follow-icons.bw .blog {background-position:-180px -533px;}
.follow-icons.bw .salesforce {background-position:-213px -533px}
.left .social-icons .social {margin:2px 15px 2px 0px;}
.social-icons .email {width:29px; height:21px; background:transparent url('/common/assets/img/social-icons.png') no-repeat -143px -372px;}
.social-icons .email a {width:29px; height:21px; float:left;}
.top-count .email {margin-top:44px; height:21px;}
.top-count .googleplus {margin-top:4px;}
body.social-iframe {background-image:none !important;}
iframe.social-iframe {border:0px none; overflow:hidden;}
.social-iframe #content-wrap,
.social-iframe .content {padding:0; margin:0; min-height:auto; height:auto;}
/* --------------- Products/Features Redesign ----------------*/
/* ---------------- Gray divider used in the like campaign brought over ---------------------------- */
.gray-section-divider {background: url("/common/assets/css/images/gray-section-divider.png") no-repeat scroll center top transparent;height:5px;}
/* hold for a possible IE PIE fix
pie-background: linear-gradient(0, rgba(246,246,246,1) 10%, transparent 10%) 0 0 / 2px,#026873;
behavior: url(/common/assets/css/pie/PIE.htc); }
*/
/* ---------------- BACKGROUND AND BORDER COLORS (KEEP AT END SO THAT PIE WORKS) ---------------- */
/**
@Name bg-{color}
@Tags background, color
@Authors Howard Newman, Tom Kyauk
@Example bg-blue
bg-blue-med
bg-blue-light
bg-blue-light-2
bg-blue-light-3
bg-blue-light-4
bg-blue-light-5
bg-blue-light-6
bg-red
bg-gray
bg-gray-light
bg-gray-dark
bg-black
Background graphite
@Comments generic background colors (without gradients). Styles: bg-white, bg-blue, bg-blue-med, bg-blue-light, bg-blue-light-2, bg-blue-light3, bg-red, bg-gray, bg-graphite
*/
/* Background colors, do not add !important so it works with PIE. Kept some old -pie styles for backward compatibility. */
.bg-white, .bg-white-pie {background-color:#fff;}
.bg-blue {background-color:#59acd7;}
.bg-blue2 {background-color:#336cb7;}
.bg-blue3 {background-color:#133651;}
.bg-blue4 {background-color:#0064a3;}
.bg-blue-med {background-color:#a5cfe7;}
.bg-blue-light {background-color:#d4eff6;}
.bg-blue-light-2 {background-color:#f0f8fc;}
.bg-blue-light-3 {background-color:#f7fafd;}
.bg-blue-light-4 {background-color:#F0F8FC;}
.bg-blue-light-5 {background-color:#D8ECF8;}
.bg-blue-light-6 {background-color:#eff6fb;}
.bg-green {background-color:#7ca93b;}
.bg-orange {background-color:#e68000;}
.bg-pink {background-color:#b257c2;}
.bg-red {background-color:#f10;}
.bg-red2 {background-color:#ff3619;}
.bg-yellow {background-color:#fbc51d;}
.bg-gray {background-color: #ccc;}
.bg-gray-light {background-color: #e5e5e5;}
.bg-gray-dark {background-color:#333;}
.bg-graphite {background-color: #525252;}
.bg-black {background-color:#000;}
/**
@Name border-{color}
@Tags border, color
@Authors Howard Newman (dwaclo added white)
@Example border border-blue
border border-blue-med
border border-blue-light
border border-gray
border border-gray-dark
border border-gray-med
border border-gray-light
border border-red
border border-white
@Comments generic border colors. Styles: border-blue, border-blue-med, border-blue-light, border-gray, border-gray-med, border-gray-light, border-red
*/
/* Border colors, do not add !important so it works with PIE. Kept some old -pie styles for backward compatibility. */
.border-blue, .border-blue-pie {border-color:#59acd7;}
.border-blue-med, .border-blue-med-pie {border-color:#A5CFE7;}
.border-blue-light, .border-blue-light-pie {border-color:#D4EFF6;}
.border-gray {border-color:#BCBCBC;}
.border-gray-dark {border-color:#666666;}
.border-gray-med {border-color:#CCCCCC;}
.border-gray-light {border-color:#E5E5E5;}
.border-red {border-color:#ff1100;}
.border-white {border-color:#FFFFFF;}
/* ---------------- end BACKGROUND AND BORDER COLORS (KEEP AT END SO THAT PIE WORKS) ---------------- */
/* NOTE: FOR NEW STYLES PLEASE ADD ABOVE "BACKGROUND AND BORDER COLORS" SECTION SO THAT PIE WORKS FOR MOST OVERRIDES */
/** video CTAs **/
.video-cta-large {max-width:392px; max-height:246px;}
.video-cta-large img {max-width:392px; max-height:246px;}
.video-cta-large .video-text,
.video-cta-large .video-time {width:100%; bottom:0; color:#fff;}
.video-cta-large .video-time {right:10px;}
.video-cta-large .video-text {left:0; background-color:#525252; color:#fff; opacity:0.85;filter: alpha(opacity=85);}
.video-cta-large .play-button {position:absolute; top:50%; left:50%; display:block; width:56px; height:37px; margin-top:-18px; margin-left:-28px; background:url("/common/assets/img/rwd/play-button.png") no-repeat left top transparent;}
.video-cta-large a:hover .play-button {background: url("/common/assets/img/rwd/play-button-over.png");}
.video-cta-small {max-width:94px;}
.video-cta-small img {max-width:94px; max-height:56px; display:block;}
.video-cta-small .video-text,
.video-cta-small .video-time {display:block; padding:1px 0 0 3px; color:#666;}
/** end video CTAs **/
/** Google autocomplete */
table.gsc-completion-container {border:1px solid #ccc; margin-top:1px;}
.gsc-completion-container td {font-size:12px; white-space:nowrap; padding:2px; cursor:pointer; color:#333;}
.gsc-completion-selected {background:#00a1e0 !important;}