/* shared.css
Cross-site "granular" css that can be used to make up most standard elements, especially buttons, borders, grid, etc.

Granular CSS naming conventions:

    .<class> { <default-attributes> }
    .<attribute>-<modifier>-<version>

For example:

    .btn { <default-attributes> }
    .line-blue {}
    .line-blue-2 {}
    .background-orange {}
    .radius-20

Things to verify before "check-in":
    1) line-height is not fixed, but a percentage (e.g. 125%) to allow for override of font size:
    2)

*/

/* ------------- JAVASCRIPT EXAMPLES ------------- */
/* (not sure where to put these, but adding here for now) */
/**
    @Name       more link (click shows more text)
    @Tags       more, show, hide
    @Authors    Eric Joe
    @Example    <p>Sentence is here <a href="#" onclick="return Util.moreLinkShowNext(this)">more...</a><span style="display:none;">and continues after clicking more link.</span></p>  
    @Comments   When the "more..." link is clicked, the link hides itself and shows the next span of text.
*/


/* ------------- LAYOUT AND SPACING ------------- */

/**
    @Name       clearfix
    @Tags       layout, clearfix
    @Example    <div class="clearfix">This DIV is clearfixed, which means it expands to the size of the floated elements it contains.</div>
    @Comments   IE6 has weird hack where clearfix sets height=1%, which will conflict with other classes on the same element that set a specific height.
*/
.clearfix:after                 {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix                   {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix                {height: 1%;}
.clearfix                   {display: block;}
/* End hide from IE-mac */



/**
    @Name       left, right, nofloat
    @Tags       layout, left, right, float, nofloat
    @Authors    Leslie Chan, Stephen Kaiser
    @Example    <div class="left">Left floated element</div><br><div class="right">Right floated element</div><br><div class="nofloat">Non-floated element</div>
*/
.left    {float:left !important;}
.right   {float:right !important;}
.nofloat {float: none !important;}


/**
    @Name       flush, flush-all, flush-top, flush-padding
    @Tags       layout, flush, margin, padding
    @Authors    Josh West
    @Example    <div class="flush">This DIV has margins removed.</div><div class="flush-padding">This DIV has padding removed.</div><div class="flush-all">This DIV has margins and padding removed.</div><div class="flush-top">This DIV has top margin removed.</div>
    @Comments   All these classes to styles to remove margin or margin/padding from an existing class.  Classes: flush, flush-top, flush-all
*/
.flush      {margin: 0 !important;}
.flush-top  {margin-top: 0 !important;}
.flush-all  {margin: 0 !important; padding: 0 !important;}
.flush-padding  {padding: 0 !important;}

/**
    @Name       block, show, hide
    @Tags       layout, display, block, show, hide
    @Authors    Leslie Chan
    @Example    <span class="block">This span is set to display BLOCK style</span><br>Two DIVs below, one is shown and one is hidden<div class="show">SHOWN</div><div class="hide">HIDDEN</div>
*/
.block, .show   {display:block !important;}
.hide       {display:none !important;}

/**
    @Name       visible, hidden
    @Tags       visibility, visible, hidden, show, hide
    @Authors    Leslie Chan
    @Example    <span class="visible">This span is set to be visible. The next one won't be visible</span><br><span class="hidden">This span is set to be hidden.</span>
*/
.visible	{visibility:visible !important;}
.hidden		{visibility:hidden !important;}

/**
    @Name       inline-block, inline, inline-block-polite
    @Tags       layout, display, inline-block, inline, polite
    @Authors    Leslie Chan, Stephen Kaiser
    @Example    <span class="inline-block">Span with display as <br>INLINE-BLOCK (important)</span><span class="inline-block">Span with display as <br>INLINE-BLOCK</span><span class="inline-block-polite">Span with display as <br>INLINE-BLOCK-POLITE (no important tag)</span>
    @Comments	inline-block-polite is usually used for RWD designs.
*/
.inline-block   {display:inline-block !important; *display: inline !important;/* IE6&7 */ zoom: 1;/* Trigger hasLayout in IE6&7 to emulate inline-block */}
.inline-block-polite	{display:inline-block;}	/* polite means not !important forced */
.inline     {display:inline !important;}

/**
    @Name       nowrap
    @Tags       text, nowrap
    @Authors    Tom Kyauk
    @Example    <span class="nowrap">This very long sentence has the class NOWRAP on it</span>
*/
.nowrap     {white-space:nowrap;}

/**
    @Name       relative, absolute, fixed, static
    @Tags       layout, position, relative, absolute, rel, abs, fixed, static
    @Authors    Leslie Chan, Tom Kyauk
    @Example    <div class="relative">Div with RELATIVE<div class="absolute" style="top:30px; left:30px;">Div with ABSOLUTE inside the relative div</div></div><div class="relative">Div with FIXED</div><div class="relative">Div with STATIC</div>
*/
.rel,.relative  {position: relative;}
.abs,.absolute  {position: absolute;}
.fixed      {position: fixed; z-index:1000;}
.static     {position: static;}
.abs-top-0  {top:0;}
.abs-right-0    {right:0;}
.abs-bottom-0   {bottom:0;}
.abs-left-0 {left:0}

.abs-right-10   {right:10px;}


/**
    @Name       padding, top-{#}, bottom-{#}, left-{#}, right-{#}
    @Tags       layout, padding, indent
    @Example    <div class="top-20">TOP PADDING 20px</div><div class="bottom-20">BOTTOM PADDING 20px</div><div class="left-20">LEFT PADDING 20px</div><div class="right-20">RIGHT PADDING 20px</div>
    @Comments   Also available indent numbers are 5, 10, 15, 20, 25, 30, 40, 60, 100 (plus special ones top-80)
*/
.left-5     {padding-left:5px !important;}
.left-10    {padding-left:10px !important;}
.left-15    {padding-left:15px !important;}
.left-20    {padding-left:20px !important;}
.left-25    {padding-left:25px !important;}
.left-30    {padding-left:30px !important;}
.left-40    {padding-left:40px !important;}
.left-60    {padding-left:60px !important;}
.left-100   {padding-left:100px !important;}
.right-5    {padding-right:5px !important;}
.right-10   {padding-right:10px !important;}
.right-15   {padding-right:15px !important;}
.right-20   {padding-right:20px !important;}
.right-25   {padding-right:25px !important;}
.right-30   {padding-right:30px !important;}
.right-40   {padding-right:40px !important;}
.right-60   {padding-right:60px !important;}
.right-100  {padding-right:100px !important;}
.top-5      {padding-top:5px !important;}
.top-10     {padding-top:10px !important;}
.top-15     {padding-top:15px !important;}
.top-20     {padding-top:20px !important;}
.top-25     {padding-top:25px !important;}
.top-30     {padding-top:30px !important;}
.top-40     {padding-top:40px !important;}
.top-60     {padding-top:60px !important;}
.top-80     {padding-top:80px !important;}
.top-100    {padding-top:100px !important;}
.bottom-5   {padding-bottom:5px !important;}
.bottom-10  {padding-bottom:10px !important;}
.bottom-15  {padding-bottom:15px !important;}
.bottom-20  {padding-bottom:20px !important;}
.bottom-25  {padding-bottom:25px !important;}
.bottom-30  {padding-bottom:30px !important;}
.bottom-40  {padding-bottom:40px !important;}
.bottom-60  {padding-bottom:60px !important;}
.bottom-100 {padding-bottom:100px !important;}

/**
    @Name       margin-{top}-{#} 
    @Tags       layout, margin, indent, margin-left, margin-right, margin-top, margin-bottom
    @Authors    Howard Newman, Tom Kyauk    
    @Example    <div class="border margin-top-10">MARGIN TOP 10px</div><div class="border margin-bottom-10">MARGIN BOTTOM 10px</div><div class="border margin-left-10">MARGIN LEFT 10px</div><div class="border margin-right-10">MARGIN RIGHT 10px</div><div class="border margin-all">MARGIN ALL SIDES 10px</div>
    @Comments   Available margin numbers are margin-{top}-10, margin-{top}-15, margin-{top}-20, margin-{top}-30, margin-{top}-40 
*/

.margin-all     {margin:10px;}

.margin-left-10     {margin-left:10px !important;}
.margin-right-10    {margin-right:10px !important;}
.margin-top-10      {margin-top:10px !important;}
.margin-bottom-10   {margin-bottom:10px !important;}

.margin-left-15     {margin-left:15px !important;}
.margin-right-15    {margin-right:15px !important;}
.margin-top-15      {margin-top:15px !important;}
.margin-bottom-15   {margin-bottom:15px !important;}

.margin-left-20     {margin-left:20px !important;}
.margin-right-20    {margin-right:20px !important;}
.margin-top-20      {margin-top:20px !important;}
.margin-bottom-20   {margin-bottom:20px !important;}

.margin-left-30 {margin-left:30px !important;}
.margin-right-30 {margin-right:30px !important;}
.margin-top-30 {margin-top:30px !important;}
.margin-bottom-30 {margin-bottom:30px !important;}

.margin-left-40     {margin-left:40px !important;}
.margin-right-40    {margin-right:40px !important;}
.margin-top-40      {margin-top:40px !important;}
.margin-bottom-40   {margin-bottom:40px !important;}

.clear-both {clear:both;}


/* ------------- HEIGHT AND WIDTH ------------- */

/**
    @Name       width-auto, width-100, width-80, width-60, width-50, width-25 
    @Tags       layout, width, auto, 100, 80, 60, 50, 25
    @Authors    Leslie Chan, Stephen Kaiser 
    @Example    <div class="width-auto border inline-block">DIV with auto width</div><br><span class="width-100 border inline-block">SPAN with width 100%</span><br><div class="width-80 border inline-block">DIV with 80% width</div><br><div class="width-60 border inline-block">DIV with 60% width</div><br><div class="width-50 border inline-block">DIV with 50% width</div><br><div class="width-25 border inline-block">DIV with 25% width</div>
*/
.width-auto {width:auto !important;}
.width-100  {width:100% !important;}
.width-80   {width:80% !important;}
.width-60   {width:60% !important;}
.width-50   {width:50% !important;}
.width-25   {width:25% !important;}

/**
    @Name       height-{#} 
    @Tags       layout, height, auto
    @Authors    Leslie Chan 
    @Example    <div class="height-50 border">DIV with height-50</div><div class="height-70 border">DIV with height-70</div>
    @Comments   Available height numbers are 0px, 50px, 70px.
*/
.height-0   {height:0px !important;}
.height-50  {height:50px !important;}  /* useful for CTAs */
.height-70  {height:70px !important;}  /* useful for CTAs */
.height-100 {height:100px !important;}


/**
    @Name       ir 
    @Tags       accessibility, images
    @Authors    Stephen Kaiser
    @Example    <a class="ir" title="This link text is offscreen. Use a background image." style="background:url(/system/shared/common/assets/img/fake-twitter.png) no-repeat;">Tweet!</a>
    @Comments   Allows text to be replaced with an image, but still be visible to screen readers. You would use a background image with this.
*/
.ir         {background-repeat: no-repeat; direction: ltr; display: block; overflow: hidden; text-align: left; text-indent: -999em;}



/* ------------- GRID ------------- */
/**
    @Name       grid 2 column, 50-50
    @Tags       grid, columns, rows, 50
    @Authors    Leslie Chan
    @Example    <div class="grid-row"><div class="grid-cell grid-50 cell-first"><div class="cell-content gutter-right">COLUMN 50% (with gutter-right)</div></div><div class="grid-cell grid-50 cell-last"><div class="cell-content gutter-left">COLUMN 50% (with gutter-left)</div></div></div>
    @Comments   Remove gutters if desired.  Many other variants available. For 'grid-#', '#' can be 100, 75, 67, 66, 60, 55, 50, 45, 40, 34, 33, 30, 25, 20
*/
/**
    @Name       grid 2 column, 75-25
    @Tags       grid, columns, rows, 75, 25
    @Authors    Leslie Chan
    @Example    <div class="grid-row"><div class="grid-cell grid-75 cell-first"><div class="cell-content gutter-right">COLUMN 75% (with gutter-right)</div></div><div class="grid-cell grid-25 cell-last"><div class="cell-content gutter-left">COLUMN 25% (with gutter-left)</div></div></div>
    @Comments   Remove gutters if desired.  Many other variants available. For 'grid-#', '#' can be 100, 75, 67, 66, 60, 55, 50, 45, 40, 34, 33, 30, 25, 20
*/
/**
    @Name       grid 3 column, 33-33-33
    @Tags       grid, columns, rows, 33
    @Authors    Leslie Chan
    @Example    <div class="grid-row"><div class="grid-cell grid-33 cell-first"><div class="cell-content gutter-right">COLUMN 33% (with gutter-right)</div></div><div class="grid-cell grid-34"><div class="cell-content gutter-lr">COLUMN 33% (with gutter-lr)</div></div><div class="grid-cell grid-33 cell-last"><div class="cell-content gutter-left">COLUMN 33% (with gutter-left)</div></div></div>
    @Comments   Remove gutters if desired.  Many other variants available. For 'grid-#', '#' can be 100, 75, 67, 66, 60, 55, 50, 45, 40, 34, 33, 30, 25, 20
*/
/**
    @Name       grid 4 column, 25-25-25-25
    @Tags       grid, columns, rows, 25
    @Authors    Leslie Chan
    @Example    <div class="grid-row"><div class="grid-cell grid-25 cell-first"><div class="cell-content gutter-right">COLUMN 25% (with gutter-right)</div></div><div class="grid-cell grid-25"><div class="cell-content gutter-lr">COLUMN 25% (with gutter-lr)</div></div><div class="grid-cell grid-25"><div class="cell-content gutter-lr">COLUMN 25% (with gutter-lr)</div></div><div class="grid-cell grid-25 cell-last"><div class="cell-content gutter-left">COLUMN 25% (with gutter-left)</div></div></div>
    @Comments   Remove gutters if desired.  Many other variants available. For 'grid-#', '#' can be 100, 80, 75, 67, 66, 60, 55, 50, 45, 40, 34, 33, 30, 25, 20
*/
/* row (contains clearfix) */
.grid-row:after                 {content:".";display:block;height:0;clear:both;visibility:hidden;}
.grid-row                   {display: inline-block;}
/* Hides from IE-mac \*/
* html .grid-row                {height: 1%;}
.grid-row                   {display: block;}


/* columns */
.grid-cell      { } /* no styles now, but maybe needed later */
.grid-100       {width:100%}
.grid-90        {float:left;width:90%;}
.grid-80        {float:left;width:80%;}
.grid-75        {float:left;width:75%;}
.grid-70        {float:left;width:70%;}
.grid-67        {float:left;width:67%;}
.grid-66        {float:left;width:66%;} 
.grid-60        {float:left;width:60%;} 
.grid-55        {float:left;width:55%} 
.grid-50        {float:left;width:50%} 
.grid-45        {float:left;width:45%} 
.grid-40        {float:left;width:40%} 
.grid-34        {float:left;width:34%;} 
.grid-33        {float:left;width:33%;} 
.grid-30        {float:left;width:30%;} 
.grid-25        {float:left;width:25%;} 
.grid-20        {float:left;width:20%;} 
.grid-10        {float:left;width:10%;} 
/* last column styles that change the total width to be exactly 100%, e.g. 33-67, 66-34, 33-33-34.  Must be listed after all grid column styles. */
.grid-33-last       {float:left;width:34%}
.grid-66-last       {float:left;width:67%}

.grid-row .cell-first,
.grid-row .first-col    { } /* no styles now, but maybe needed later */
.grid-row .cell-last,
.grid-row .last-col {*zoom:1;_left:-3px;_margin-right:-3px;*left:-3px;*margin-right:-3px;}

/**
    @Name       gutter-all
    @Tags       gutters, padding
    @Author     Leslie Chan
    @Example    gutter-rl<br>gutter-lr<br>gutter-tb<br>gutter-right<br>gutter-left<br>gutter-top<br>gutter-bottom<br>gutter-right-none<br>gutter-left-none<br>gutter-top-none<br>gutter-bottom-none<br>gutter-all<br>gutter-rl-5<br>gutter-lr-5<br>gutter-tb-5<br>gutter-right-5<br>gutter-left-5<br>gutter-top-5<br>gutter-bottom-5<br>gutter-all-5<br>gutter-all-20<br>gutter-all-30<br>gutter-5em-1em
    @Comments   Examples are possible options, not implementations
*/
.gutter-rl,
.gutter-lr      {padding-left:10px; padding-right:10px;}
.gutter-tb          {padding-top:10px; padding-bottom:10px;}
.gutter-right       {padding-right:10px;}
.gutter-left        {padding-left:10px;}
.gutter-top     {padding-top:10px;}
.gutter-bottom      {padding-bottom:10px;}
.gutter-right-none  {padding:10px 0 10px 10px;}
.gutter-left-none   {padding:10px 10px 10px 0;}
.gutter-top-none    {padding:0 10px 10px;}
.gutter-bottom-none {padding:10px 10px 0;}
.gutter-all     {padding:10px;}
.gutter-rl-5,
.gutter-lr-5        {padding-left:5px; padding-right:5px;}
.gutter-tb-5            {padding-top:5px; padding-bottom:5px;}
.gutter-tb-20       {padding:20px 0;}
.gutter-right-5     {padding-right:5px;}
.gutter-left-5      {padding-left:5px;}
.gutter-top-5       {padding-top:5px}
.gutter-bottom-5    {padding-bottom:5px}
.gutter-all-5       {padding:5px;}
.gutter-all-20      {padding:20px;}
.gutter-all-30      {padding:30px;}
.gutter-5em-1em     {padding: 0.5em 1em !important;}


/* ------------- ALIGN ------------- */
/**
    @Name       valign-top, valign-middle, valign-bottom
    @Tags       layout, vertical, alignment
    @Example    <img class="valign-top" src="/common/assets/images/icons/icon_se_sales-30x30.png">Icon is valign-top to this text<br/><img class="valign-middle" src="/common/assets/images/icons/icon_se_sales-30x30.png">Icon is valign-middle to this text<br><img class="valign-bottom" src="/common/assets/images/icons/icon_se_sales-30x30.png">Icon is valign-bottom to this text
    @Comments   Also available indent numbers are 5, 10, 15, 25, 30 (plus special ones left-60, right-60)
*/
.valign-bottom  {vertical-align:bottom !important;} 
.valign-middle  {vertical-align:middle !important;} 
.valign-top {vertical-align:top !important;} 

/**
    @Name       center, center-div, center-elem, text-left, text-right
    @Tags       layout, horizontal, alignment, center, left, right
    @Authors    Stephen Kaiser
    @Example    <p class="center">This text is centered</p><br><div class="center-div border width-80">This element is centered within its parent:</div><br><p class="text-left">This text is left</p><br><p class="text-right">This text is right</p>
*/
.center         {text-align:center;}
.center-div,
.center-elem        {margin-left:auto !important; margin-right:auto !important;}
.text-left      {text-align:left;}
.text-right     {text-align:right;}

/**
    @Name       center-div-800, center-div-850, center-div-980
    @Tags       layout, center
    @Authors    Leslie Chan, Benjamin Steyaert
    @Example    <div class="center-div-800">center-div-800 centers an 800px width DIV</div><br><div class="center-div-850">center-div-850 centers an 850px width DIV</div><br><div class="center-div-980">center-div-980 centers an 980px width DIV</div>
    @Comments   Usually used in conjunction with full page widths to center content (see also page-width-100)
*/
.center-div-800     {margin:0 auto; width:800px;}
.center-div-850     {margin:0 auto; width:850px;}
.center-div-980     {margin:0 auto; width:980px;}

/**
    @Name       bg-pos-center
    @Tags       background, position, top, center
    @Authors    Leslie Chan
    @Example    <div class="bg-pos-center border" style="height:75px; width:75px; background:url(/common/assets/images/icons/icon_se_sales-30x30.png)">&nbsp;</div>
    @Comments   Pin the background image to the top center
*/
.bg-pos-center      {background-position:center top !important; background-repeat:no-repeat !important;}    /* usually a centered image is not repeated */


/* ------------- TEXT ------------- */
@font-face {
	font-family: 'ProximaNovaRegular';
	src: url('/system/shared/common/assets/fonts/ProximaNova/proximanova-reg-webfont.eot');
	src: url('/system/shared/common/assets/fonts/ProximaNova/proximanova-reg-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-reg-webfont.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-reg-webfont.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-reg-webfont.svg#ProximaNovaRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'ProximaNovaLight';
	src: url('/system/shared/common/assets/fonts/ProximaNova/proximanova-light-webfont.eot');
	src: url('/system/shared/common/assets/fonts/ProximaNova/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-light-webfont.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-light-webfont.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'ProximaNovaSemiBold';
	src: url('/system/shared/common/assets/fonts/ProximaNova/proximanova-sbold-webfont.eot');
	src: url('/system/shared/common/assets/fonts/ProximaNova/proximanova-sbold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-sbold-webfont.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-sbold-webfont.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/ProximaNova/proximanova-sbold-webfont.svg#ProximaNovaSemiBold') format('svg');
	font-weight: normal;
	font-style: normal;
}
/* ------------- SalesforceSans ------------- */
@font-face {
	font-family: 'SalesforceSansBold';
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Bold.eot');
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Bold.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Bold.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Bold.woff2') format('woff2'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Bold.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Bold.svg#SalesforceSansBold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SalesforceSansBoldItalic';
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.eot');
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.woff2') format('woff2'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.svg#SalesforceSansBoldItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SalesforceSansItalic';
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Italic.eot');
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Italic.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Italic.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Italic.woff2') format('woff2'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Italic.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Italic.svg#SalesforceSansItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SalesforceSansLight';
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Light.eot');
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Light.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Light.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Light.woff2') format('woff2'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Light.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Light.svg#SalesforceSansLight') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SalesforceSansLightItalic';
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.eot');
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.woff2') format('woff2'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-BoldItalic.svg#SalesforceSansLightItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SalesforceSansRegular';
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.eot');
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.woff2') format('woff2'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.svg#SalesforceSansRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SalesforceSansThin';
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Thin.eot');
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Thin.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Thin.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Thin.woff2') format('woff2'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Thin.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Thin.svg#SalesforceSansThin') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SalesforceSansThinItalic';
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-ThinItalic.eot');
	src: url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-ThinItalic.eot?#iefix') format('embedded-opentype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-ThinItalic.woff') format('woff'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-ThinItalic.woff2') format('woff2'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-ThinItalic.ttf') format('truetype'),
		 url('/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-ThinItalic.svg#SalesforceSansThinItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}

/**
    @Name       font-family-lucida, font-family-arial
    @Tags       text, font family, lucida, arial
    @Example    <div class="font-family-lucida">This text is in "font-family-lucida" (Lucida Grande or Lucida Sans Unicode for Windows).</div><br><div class="font-family-arial">This text is in "font-family-arial"</div>
    @Comments   Font family classes.  For Lucida, it will either be Lucida Grande (Mac) or Lucida Sans Unicode (Windows), and defaults to Arial if neither found
*/
/* turn off lucida hardcoded classes - need to remove those classes in the HTML later with Mark R's script
.font-family-lucida {font-family:Lucida Grande,Lucida Sans Unicode,Arial,sans-serif !important;letter-spacing:-0.5px;} 
*/
.font-family-arial  {font-family:Arial,Helvetica,Verdana,sans-serif;}   /* sometimes necessary to match app fonts */
.font-family-proxima{font-family:ProximaNovaRegular,Arial,sans-serif;}
.font-family-proxima-light, .font-family-proxima-thin	{font-family:ProximaNovaLight,Arial,sans-serif;}
.font-family-proxima-bold				{font-family:ProximaNovaSemiBold,Arial,sans-serif;}


/**
    @Name       bold, normal, italic, smaller, larger, cap
    @Tags       text, font, bold, em, normal, italic, smaller, larger, uppercase, capitalization
    @Example    <div class="bold">Text with BOLD style</div><div class="normal">Text with NORMAL style</div><div class="italic">Text with ITALIC style</div><div class="cap">Text is uppercased with CAP style</div>
*/
/* For ProximaNova font change where <a> tags use ProximaNovaSemibold and can't be bolded.  Can remove when we remove all "bold" classes from <a> tags. */
/* .bold       {font-weight:bold !important;} */
b, strong, .bold       {font-family:ProximaNovaSemibold, Arial, sans-serif !important; font-weight:normal !important;} 

.normal     {font-weight:normal !important; font-style:normal !important;}
.italic     {font-style:italic !important;}
.cap        {text-transform: uppercase;}

/**
    @Name       letter-spacing-{tight|normal|loose} 
    @Tags       letter, spacing, tight, loose
    @Example    <div class="letter-spacing-normal">Text with letter-spacing-normal</div><div class="letter-spacing-tight">Text with letter-spacing-tight (-0.5px)</div><div class="letter-spacing-loose">Text with letter-spacing-loose (0.5px)</div>
    @Comments   Classes: letter-spacing-tight, letter-spacing-normal, letter-spacing-loose
*/
.letter-spacing-tight   {letter-spacing: -0.5px !important;}
.letter-spacing-normal  {letter-spacing: 0px !important;}
.letter-spacing-loose   {letter-spacing: 0.5px !important;}


/**
    @Name       font-{#}, smaller, larger
    @Tags       text, font, bold, em, normal, italic, smaller, larger
    @Example    <div class="font-35">font-35</div><div class="font-25">font-25</div><div class="font-22">font-22</div><div class="font-18">font-18</div><div class="font-16">font-16</div><div class="font-14">font-14</div><div class="font-12">font-12</div><div class="font-10">font-10</div><div class="smaller">smaller by 0.85em</div><div class="larger">larger by 1.15em</div>
    @Comments   Add the font classes to change existing H1, H2, btn and other styles.  Also available font sizes are 65, 56, 52, 48, 44, 42, 40, 35, 33, 32, 30, 26, 25, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, smaller (0.85em), larger (1.15em).
*/
/* line-heights needed because inherited line-heights don't apply to !important font-size */
.font-65    {font-size:65px !important; line-height:100%;}  
.font-56    {font-size:56px !important; line-height:100%;}  
.font-52    {font-size:52px !important; line-height:100%;}  
.font-48    {font-size:48px !important; line-height:100%;}
.font-44    {font-size:44px !important; line-height:100%;}
.font-42    {font-size:42px !important; line-height:100%;}
.font-40    {font-size:40px !important; line-height:100%;}
.font-35    {font-size:35px !important; line-height:100%;}
.font-33    {font-size:33px !important; line-height:100%;}
.font-32    {font-size:32px !important; line-height:100%;}
.font-30    {font-size:30px !important; line-height:125%;}
.font-26    {font-size:26px !important; line-height:125%;}
.font-25    {font-size:25px !important; line-height:125%;}
.font-22    {font-size:22px !important; line-height:125%;}
.font-21    {font-size:21px !important; line-height:125%;}
.font-20    {font-size:20px !important; line-height:125%;}
.font-19    {font-size:19px !important; line-height:125%;}
.font-18    {font-size:18px !important; line-height:125%;}
.font-17    {font-size:17px !important; line-height:125%;}
.font-16    {font-size:16px !important; line-height:150%;}
.font-15    {font-size:15px !important; line-height:150%;}
.font-14    {font-size:14px !important; line-height:150%;}
.font-13    {font-size:13px !important; line-height:150%;}
.font-12    {font-size:12px !important; line-height:150%;}
.font-11    {font-size:11px !important; line-height:150%;}
.font-10    {font-size:10px !important; line-height:150%;}
.smaller    {font-size:.85em !important;}
.larger     {font-size:1.15em !important;}

/**
    @Name       lineheight-{0}
    @Tags       text, font, line, height
    @Authors    Leslie Chan 
    @Example    <p class="lineheight-100">Text with<br>line-height-100.</p><p class="lineheight-125">Text with<br>line-height-125.</p><p class="lineheight-150">Text with<br>line-height-150.</p>
    @Comments   Use to override line heights of existing styles.  Available line height are 0, 1, 100, 125, 150, 200, 225.  Class names are: lineheight-0, lineheight-1, lineheight-100, lineheight-125, line-height-150
*/
.lineheight-0   {line-height:0 !important;}
.lineheight-1   {line-height:1 !important;}
.lineheight-100 {line-height:100% !important;}
.lineheight-125 {line-height:125% !important;}
.lineheight-150 {line-height:150% !important;}
.lineheight-200 {line-height:200% !important;}
.lineheight-225 {line-height:225% !important;}

.lineheight-35px    {line-height:35px !important;}

h1.small        {font-size:1.6em;}
h1.big          {font-size:2.1em;}
h2.small        {font-size:1.28em;}
h2.big          {font-size:1.72em;}
h3.small        {font-size:.92em;}
h3.big          {font-size:1.24em;}

p           {margin:0 0 10px 0; /*margin-bottom:10px;*/}

/**
    @Name       font-{color} (font-black, font-gray, font-red, font-white)
    @Tags       text, color, font
    @Authors    Howard Newman, Leslie Chan  
    @Example    <div class="font-black">Text has font-black</div><div class="font-gray">Text has font-gray</div><div class="font-gray-2">Text has font-gray-2</div><div class="font-gray-3">Text has font-gray-3</div><div class="font-red">Text has font-red</div><div class="bg-gray font-white">Text has font-white with bg-gray</div>
    @Comments   Colors: font-black, font-gray, font-gray-2, font-gray-3, font-red, font-white 
*/
.font-black     {color:#000 !important;}
.font-gray      {color:#333 !important;}
.font-gray-2        {color:#666 !important;}
.font-gray-3        {color:#808080 !important;}
.font-red       {color:#f10000 !important;}
.font-white     {color:#fff !important;}

/**
    @Name       tel
    @Tags       phone, telephone, link, call
    @Authors    Leslie Chan
    @Example    Telephone link <a class="tel" href="tel:8001234567">(800) 123-4567</a>
    @Comments   Shows up as text on a desktop, but is really a link which mobile browsers can handle as phone number on click.    
*/
.desktop .tel, .desktop .tel:hover  {cursor:default; color:inherit;}
.mobile .tel        {/*different styling needed?*/}
.ie8 .tel        {display: none; opacity:inherit; filter:inherit;}

/* ------------- BULLETS ------------- */
/**
    @Name       bullet, bullet-red, list-disc
    @Tags       ul, bullet, disc, pdf
    @Authors    Howard Newman, Leslie Chan, Benjamin Steyaert, Anne Winterbottom
    @Example    List<br><ul><li>Item 1</li><li>Item 2</li></ul><br/>
            List with "bullet"<br><ul class="bullet"><li>Item 1</li><li>Item 2</li></ul><br/>
            List with "flush bullet"<br><ul class="flush bullet"><li>Item 1</li><li>Item 2</li></ul><br/>
            List with "bullet-red"<br><ul class="bullet-red"><li>Item 1</li><li>Item 2</li></ul><br/>
            List with "bullet-pdf"<br><ul class="bullet-pdf"><li>Item 1</li><li>Item 2</li></ul><br/>
*/
ul              {list-style: none outside none; margin:10px; padding-left:15px;}
ul.bullet-red li        {list-style: none outside url("/system/shared/common/assets/img/bullet-red.gif") !important;}
ul.list-disc li, ul.bullet li   {list-style: disc outside none !important;}
ul.no-bullet li         {list-style:none !important;}
ul.bullet-pdf                   {padding-left: 18px;}
ul.bullet-pdf li                {list-style: none outside url("/system/shared/common/assets/img/icon_pdf2.gif");}

/**
    @Name       vertical, horizontal
    @Tags       list, ul, horizontal, vertical
    @Example    <ul class="vertical"><li>LIST ITEM </li><li>LIST ITEM </li><li>LIST ITEM </li></ul>
*/
ul.horizontal, ul.vertical, ul.horizontal li, ul.vertical li {list-style:none outside none; margin:0; padding:0;}
ul.horizontal li    {display:inline; float:left;}

/* ------------- BUTTONS and BORDERS ------------- */

/**
    @Name       btn, btn-round
    @Tags       button, gray, base, simple
    @Authors    Howard Newman
    @Example    <a class="btn">base class button, no skin</a><br/>
            <br/><a class="btn-round">base class round button, no skin</a><br/>
            <br/><a class="btn right-30 center"><em>base class button</em><br/>two lines</a><br/>
            <br/><a class="btn right-30">With icon-arrow<span class="btn-arrow">&nbsp;</span></a><br/>
            <br/><a class="btn right-30">With icon-new-window<span class="btn-new-window">&nbsp;</span></a><br/>
            <br/><a class="btn center right-30">center, with icon-new-window<br/>and two lines<span class="btn-new-window">&nbsp;</span></a><br/>
            <br/><a class="btn width-100"><span class="btn-text">width-100, with icon-new-window<br/>and two lines</span><span class="btn-new-window">&nbsp;</span></a>
    @Comments   Supports multiple colors, multiple lines, shadow and icons (new window, arrow, etc) 
*/

.btn,
.btn-round          {background-color:#ccc;color:#fff; display:inline-block; padding:0.5em 1em; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; height:auto; line-height:100%; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}
.btn.width-100, 
.btn-round.width-100        {padding:0;}    /* line must appear after .width-100 definition. Width 100% buttons need to be created a differently with no padding in container and .btn-text has padding, otherwise padding extends over 100% of parent. */
.btn.width-100 .btn-text, 
.btn-round.width-100 .btn-text  {display:block; padding:0.5em 1em;} /* .btn-text only necessary around label if using width 100% buttons */

.btn-arrow  {background: url("/common/assets/img/cta-sprite.png") repeat scroll 0 0 transparent !important;height: 12px;margin-top: -6px;position: absolute;right: 9px;top: 50%;width: 7px;}
.btn-arrow-black    {background: url("/common/assets/img/cta-sprite.png") repeat scroll 0 -115px transparent !important;height: 12px;margin-top: -6px;position: absolute;right: 9px;top: 50%;width: 7px;}
.btn-new-window {background: url("/common/assets/img/cta-sprite.png") repeat scroll 0 -13px transparent !important;height: 12px; margin-top: -6px;position: absolute;right: 9px;top: 50%;width: 11px;}

.externalLink-flush {background: url("/common/assets/img/intl/linkbar_xlink.gif") no-repeat scroll right 5px rgba(0, 0, 0, 0);}

.cta-white {color: #00a1e0 !important; border-radius: 3px; padding: 10px 30px; background-color: #FFF; text-transform: uppercase; border: 1px solid #ddd;display:inline-block;}
.cta-white:hover {color: #16325c; background-color: #EEE; -webkit-box-shadow: 0 0 6px 0px rgba(100,100,100,0.3); box-shadow: 0 0 6px 0px rgba(100,100,100,0.3);}

.cta-blue {background-color: #16325c; border-radius: 3px; color: #FFF; padding: 10px 30px; text-transform: uppercase;display:inline-block;}
.cta-blue:hover {background-color: #1d4076; color: #FFF; -webkit-box-shadow: 0 0 2px 1px rgba(100,100,100,0.5); box-shadow: 0 0 2px 1px rgba(100,100,100,0.5);}


/**
    @Name       play-button, play-button-round, play-button-round-black, play-button-round-small, stop-button
    @Tags       play, button, frame, stop, cancel
    @Authors    Tom Kyauk, Leslie Chan
    @Example    <div class="inline-block border-3 radius-flat-all border-white shadow-surround-dark-3 relative"><a href="#"><img src="/common/assets/images/spacer.gif" height="100" width="100"><span class="play-button">&nbsp;</span></a></div>
            <br/><div class="inline-block border-3 radius-flat-all border-white shadow-surround-dark-3 relative"><a href="#"><img src="/common/assets/images/spacer.gif" height="100" width="100"><span class="play-button-round">&nbsp;</span></a></div>
            <br/><div class="inline-block border-3 radius-flat-all border-white shadow-surround-dark-3 relative"><a href="#"><img src="/common/assets/images/spacer.gif" height="100" width="100"><span class="play-button-round-black">&nbsp;</span></a></div>
            <br/><div class="inline-block border-3 radius-flat-all border-white shadow-surround-dark-3 relative bg-black"><a href="#"><img src="/common/assets/images/spacer.gif" height="100" width="100"><span class="play-button-round-small">&nbsp;</span></a></div>
            <br/><div class="bg-black"><a href="#"><span class="play-button-round-small-left">&nbsp;</span> simple left aligned arrow play-button-round-small-left</a></div>
	    <br/><div class="inline-block border-3 radius-flat-all border-white shadow-surround-dark-3 relative"><a href="#"><img src="/common/assets/images/spacer.gif" height="100" width="100"><span class="stop-button">&nbsp;</span></a></div>
*/
.play-button {background: url("/system/shared/common/assets/img/play-button-sprite.png") no-repeat scroll 0px -114px transparent;display: block;height: 37px;left: 50%;margin-left: -28px;margin-top: -18px;position: absolute;top: 50%;width: 56px;}
.no-touch a:hover .play-button {background-position: 0px -152px;}
.play-button-round {background: url("/system/shared/common/assets/img/play-button-sprite.png") no-repeat scroll 0px 0px transparent;display: block;height: 56px;left: 50%;margin-left: -28px;margin-top: -28px;position: absolute;top: 50%;width: 57px;}
.no-touch a:hover .play-button-round {background-position: 0px -57px;}
.play-button-round-black {background: url("/system/shared/common/assets/img/play-button-sprite.png") no-repeat scroll 0px -244px transparent;display: block;height: 56px;left: 50%;margin-left: -28px;margin-top: -28px;position: absolute;top: 50%;width: 57px;}
.no-touch a:hover .play-button-round-black {background-position: 0px -301px;}
.play-button-round-small {background: url("/system/shared/common/assets/img/play-button-sprite.png") no-repeat scroll 0px -190px transparent;display: block;height: 27px;left: 50%;margin-left: -13px;margin-top: -14px;position: absolute;top: 50%;width: 28px;}
.no-touch a:hover .play-button-round-small {background-position: 0px -217px;}
.play-button-round-small-left {background: url("/system/shared/common/assets/img/play-button-sprite.png") no-repeat scroll 0px -190px transparent; display:inline-block; height: 27px; width: 28px; vertical-align:middle;}
.no-touch a:hover .play-button-round-small-left {background-position: 0px -217px;}
.stop-button {background: url("/system/shared/common/assets/img/play-button-sprite.png") no-repeat scroll 0px -358px transparent;display: block; height: 27px; top:0px; right:0px; position: absolute; width: 27px;}
.no-touch a:hover .stop-button {background-position: 0px -385px;}


/**
    @Name       border, border-3
    @Tags       border
    @Authors    Howard Newman
    @Example    <div class="border">border</div><br/><div class="border-3">border-3</div>
    @Comments   Border with radius.  If you don't want radius use border-all.
*/
.border     {border:1px solid #bcbcbc;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;position:relative;behavior: url(/common/assets/css/pie/PIE.htc);}
.border-3   {border:3px solid #bcbcbc;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;position:relative;behavior: url(/common/assets/css/pie/PIE.htc);}

/**
    @Name       border-{top} (.border-top, .border-right, .border-bottom, .border-left, .border-all)
    @Tags       border
    @Authors    Howard Newman   
    @Example    <div class="border-all">DIV has border-all</div><br><div class="border-top">DIV has border-top</div><br><div class="border-bottom">DIV has border-bottom</div><br><div class="border-right">DIV has border-right</div><br><div class="border-left">DIV has border-left</div>
    @Comments   If you want curved corners, try "border".
*/
.border-all     {border:1px solid #bcbcbc;}
.border-top     {border-top:1px solid #bcbcbc;}
.border-right       {border-right:1px solid #bcbcbc;}
.border-bottom      {border-bottom:1px solid #bcbcbc;}
.border-left        {border-left:1px solid #bcbcbc;}

/**
    @Name       border-{top}-none
    @Tags       border, remove
    @Authors    Howard Newman, Benjamin Steyaert    
    @Example    <div class="border border-top-none">DIV has border with top removed</div><br/><div class="border border-bottom-none">DIV has border with bottom removed</div><br/><div class="border border-left-none">DIV has border with left removed</div><br/><div class="border border-right-none">DIV has border with right removed</div><br/><div class="border border-all-none">DIV has all borders removed</div>
    @Comments   Removes the border from the top, bottom, left or right.  Class names: border-top-none, border-bottom-none, border-left-none, border-right-none, border-all-none.
*/
.border-top-none    {border-top:none;}
.border-bottom-none {border-bottom:none;}
.border-left-none   {border-left:none;}
.border-right-none  {border-right:none;}
.border-all-none    {border:none !important;}

/**
    @Name       border-width-{#}
    @Tags       border width, thickness
    @Authors    Howard Newman
    @Example    <div class="border border-width-1">border border-width-1</div><br/><div class="border border-width-2">border border-width-2</div><br/><div class="border border-width-3">border border-width-3</div><br/>
    @Comments   Class names: border-width-1, border-width-2, border-width-3
*/
.border-width-1 {border-width:1px !important;}
.border-width-2 {border-width:2px !important;}
.border-width-3 {border-width:3px !important;}
.border-width-5 {border-width:5px !important;}

/**
    @Name       radius-{#} (radius-3, radius-5, radius-7, radius-10, radius-15)
    @Tags       border,radius
    @Example    <div class="border radius-3">RADIUS 3</div><br/><div class="border radius-5">RADIUS 5</div><br/><div class="border radius-7">RADIUS 7</div><br/><div class="border radius-10">RADIUS 10</div><br/><div class="border radius-15">RADIUS 15</div>
*/
.radius-3   {border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}
.radius-5   {border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}
.radius-7   {border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}
.radius-10  {border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}
.radius-15  {border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}

/**
    @Name       radius-flat-{top} (radius-flat-top, radius-flat-right, radius-flat-bottom, radius-flat-left)
    @Tags       border,radius
    @Authors    Howard Newman       
    @Example    <br/><div class="border radius-flat-top">RADIUS FLAT TOP</div><br/><div class="border radius-flat-bottom">RADIUS FLAT BOTTOM</div><br/><div class="border radius-flat-right">RADIUS FLAT RIGHT</div><br/><div class="border radius-flat-left">RADIUS FLAT LEFT</div>
*/
.radius-flat-top {border-radius:0 0 8px 8px; -moz-border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px;}
.radius-flat-bottom {border-radius:8px 8px 0 0; -moz-border-radius:8px 8px 0 0; -webkit-border-radius:8px 8px 0 0;}
.radius-flat-left {border-radius:0 8px 8px 0; -moz-border-radius:0 8px 8px 0; -webkit-border-radius:0 8px 8px 0;}
.radius-flat-right {border-radius:8px 0 0 8px; -moz-border-radius:8px 0 0 8px; -webkit-border-radius:8px 0 0 8px;}
.radius-flat-all {border-radius:0 0 0 0!important; -moz-border-radius:0 0 0 0!important; -webkit-border-radius:0 0 0 0!important;}

.radius-flat-top-5 {border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px;}
.radius-flat-bottom-5 {border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0;}
.radius-flat-left-5 {border-radius:0 5px 5px 0; -moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0;}
.radius-flat-right-5 {border-radius:5px 0 0 5px; -moz-border-radius:5px 0 0 5px; -webkit-border-radius:5px 0 0 5px;}



/* ------------- SHADOWS and SHADING ------------- */
/**
    @Name       shadow-surround-3, shadow-surround-5, shadow-surround-10, drop-shadow-5
    @Tags       shadow, surround
    @Authors    Howard Newman, Josh West, Leslie Chan, David Waclo, Tom Kyauk
    @Example    <div class="border drop-shadow-5">DIV with drop-shadow-5</div>
            <br/><div class="border shadow-surround-5">DIV with shadow-surround-5</div>
            <br/><div class="border shadow-surround-10">DIV with shadow-surround-10</div>
            <br/><a class="btn bg-red font-white shadow-surround-5 ">btn bg-red font-white<br/>shadow-surround-5</a>
            <br/><a class="btn bg-red font-white shadow-surround-3 ">btn bg-red font-white<br/>shadow-surround-3</a>
            <br/>product screenshot usage: **<br/>border-3 radius-flat-all border-white shadow-surround-dark-3<br/><img src="/common/assets/images/resource_center/thumb_sales_8keyPlays_120x90.gif" class="border-3 radius-flat-all border-white shadow-surround-dark-3" />
            
    @Comments   Adds a surround shadow. Used around borders and buttons.
*/
.shadow-surround-3      {margin:5px;box-shadow: 0 0 3px 1px #d7d6d5; -moz-box-shadow: 0 0 3px 1px #d7d6d5; -webkit-box-shadow: 0 0 3px 1px #d7d6d5; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}
.shadow-surround-5      {margin:5px;box-shadow: 0 0 5px 2px #d7d6d5; -moz-box-shadow: 0 0 5px 2px #d7d6d5; -webkit-box-shadow: 0 0 5px 2px #d7d6d5; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}
.shadow-surround-10     {margin:10px;box-shadow: 0 0 10px 5px #d7d6d5; -moz-box-shadow: 0 0 10px 5px #d7d6d5; -webkit-box-shadow: 0 0 10px 5px #d7d6d5; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}
.drop-shadow-5          {box-shadow: 3px 3px 5px 0px #D7D6D5; -moz-box-shadow: 3px 3px 5px 0px #D7D6D5; -webkit-box-shadow: 3px 3px 5px 0px #D7D6D5; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}  /* need -5 spread to make background shading not be too dark */
.shadow-surround-dark-3     {margin:5px;box-shadow: 0 0 3px 1px #bbbbbb; -moz-box-shadow: 0 0 3px 1px #bbbbbb; -webkit-box-shadow: 0 0 3px 1px #bbbbbb; position:relative; behavior:url(/common/assets/css/pie/PIE.htc);}

/**
    @Name       shadow-inset
    @Tags       vignette, inset, shadow
    @Authors    Leslie Chan
    @Example    <span class="shadow-inset font-10"><img src="/common/assets/images/spacer.gif" height="100" width="100"></span>
            <br/><span class="shadow-inset font-22"><img src="/common/assets/images/spacer.gif" height="100" width="100"></span>
    @Comments   Only in modern browsers.  To increase the inset shadow depth, add class "font-xx", since depth is based on EMs.  Note: links inside vignette may need higher z-index to be clickable.  
*/
.shadow-inset           {position: relative; display:block;}
.shadow-inset img       {display: block;}
.shadow-inset:after         {-moz-box-shadow: inset 0 0 3em #444;  -webkit-box-shadow: inset 0 0 3em #444; box-shadow: inset 0 0 3em #444; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; content: "";}
 
/**
    @Name       opacity-{#} (opacity-85, opacity-65, opacity-10)
    @Tags       opacity, fade
    @Authors    Howard Newman
    @Example    <div class="bg-blue opacity-85">opacity-85 on a blue background</div>
            <br/><div class="bg-blue opacity-65">opacity-65 on a blue background</div>
            <br/><div class="bg-blue opacity-10">opacity-10 on a blue background</div>
    @Comments   Adds an opacity filter to the text and background.
*/
.opacity-10     {opacity:0.10; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); /*-ms-filter must come before filter*/ filter: alpha(opacity=10);}
.opacity-65     {opacity:0.65; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); /*-ms-filter must come before filter*/ filter: alpha(opacity=65);}
.opacity-85     {opacity:0.85; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); /*-ms-filter must come before filter*/ filter: alpha(opacity=85);}


/**
    @Name       box-sizing-border
    @Tags       layout, box-sizing, border-box, box-model, stupid-box-model
    @Authors    Stephen Kaiser
    @Example    <div class="width-80"><label for="box-sizing-example1">Input</label><input id="box-sizing-example1" class="box-sizing-border width-100" /><br><label for="box-sizing-example2">Select</label><select id="box-sizing-example2" class="box-sizing-border width-100"><option>First option</option><option>Second option</option></select></div>
    @Comments   Makes box sizes display at the size you set on the container. I.e., width=50px means content+padding+border=50px and not content=50px + padding + border. Useful for making inputs and selects be equal sizes, for example.
*/
.box-sizing-border  {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}


/* ------------- BACKGROUNDS ------------- */
/* Note: for background and border colors to work with PIE, they can't have the !important tag.  Define "bg-<color>" styles at bottom of "shared-<site>.css" so that PIE works for most overrides */
/**
    @Name       no-bg
    @Tags       no background
    @Authors    Leslie Chan, Tom Kyauk
    @Example    <div class="bg-blue no-bg">Background originally blue, but no-bg added</div>
            
    
    @Comments   Hide background.
*/
.no-bg            {background:none !important;}



/* ------------- BOXES ------------- */

/**
    @Name       media box
    @Tags       box, media box, icon
    @Authors    Eric Joe
    @Example    <div class="media top"><div class="media-hdr"><img alt="" src="/common/assets/images/icons/icon_se_sales-30x30.png"><span class="media-title"><h4 class="">Heading</h4></span></div><div class="media-bd"><div>Content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></div><br>
            <div class="media left"><div class="media-hdr"><img alt="" src="/common/assets/images/icons/icon_se_sales-30x30.png"></div><div class="media-bd"><span class="media-title"><h4 class="">Heading</h4></span><div>Content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></div><br>
            <div class="media right"><div class="media-hdr"><img alt="" src="/common/assets/images/icons/icon_se_sales-30x30.png"></div><div class="media-bd"><span class="media-title"><h4 class="">Heading</h4></span><div>Content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></div>   
    @Comments   The location of the icon/image can be moved to the top, right or left by adding 'top', 'left', or 'right' to the media box class. The width on .media-bd is set to 75% width by default - this should be overridden for each implementation if the default value doesn't suit your needs.
*/
/**
    @Name       media box (no heading), rwd
    @Tags       box, media box, icon, rwd
    @Authors    Eric Joe
    @Example    <div class="media left"><div class="media-hdr"><img alt="" src="/common/assets/images/icons/icon_se_sales-30x30.png"></div><div class="media-bd"><div>Content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></div><br>
            <div class="media right"><div class="media-hdr"><img alt="" src="/common/assets/images/icons/icon_se_sales-30x30.png"></div><div class="media-bd"><div>Content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></div> 
    @Comments   RWD-friendly version of media box without heading.  Icon will stack to top at lower breakpoints in both versions, whether originally on the left or right.  The width on .media-bd is set to 75% width by default - this should be overridden for each implementation if the default value doesn't suit your needs.
*/

/* default layout for media module */
.media {overflow:hidden;_overflow:visible;margin-bottom:10px; width:100%;}
.media .media-title h3, .media .media-title h4 {display:inline;}
.media-bd h4, .media-bd p {margin-top:0;}
.media-hdr img {margin-right: 10px; vertical-align:top;}
.media-hdr {width: auto}
.media-bd {width:75%}
.media-bd-66 {width:66%} /* 60% width, additive to .media-bd */
.media-bd-50 {width:50%} /* 50% width, additive to .media-bd */

.media.top .media-bd {width:auto}

/* use child selectors so that the media module can be nested */        
.media-hdr, .media.top > .media-hdr {display:block;margin: 0 0 10px 0;}
/*.media-bd > .media-title, .media.top > .media-title {display:none;}*/
/*.media-bd, .media.top > .media-bd {margin: 0 10px;}*/
.media-title, .media.top > .media-title {}

.media.left > .media-hdr, .media.right > .media-hdr {border:none;}
.media.left > .media-hdr > .media-title, .media.right > .media-hdr > .media-title {display:none} 
.media.left > .media-bd > .media-title, .media.right > .media-bd > .media-title {display:inherit} 

.media.left > .media-hdr, .media.left > .media-bd {display: inline; float: left;}
.media.right> .media-hdr, .media.right > .media-bd  {display: inline; float: right;}

.media.left > .media-bd {margin-left: 0px}
.media.right > .media-bd {float:left; margin-right:0px;}


/* ------------- QUOTES ------------- */

/**
    @Name       quotes
    @Tags       quote
    @Authors    Leslie Chan
    @Example    <span class="font-quote font-35">&ldquo;</span>&nbsp;<span class="quote-text font-vag font-25">Single line<span class="font-quote font-35">&rdquo;</span></span><div class="margin-left-20">&mdash; <span class="inline-block valign-top">First Last Name<br>Title<br>Company</span></div><br/><br><span class="font-quote font-35">&ldquo;</span><span class="quote-text font-vag font-25">Multiline<br>quoted<br>text<span class="font-quote font-35">&rdquo;</span></span><div class="margin-left-20">&mdash; <span class="inline-block valign-top">First Last Name<br>Title<br>Company</span></div><br/>
    @Comments   For multiline quotes, add the BR tag where necessary to wrap
*/
.font-quote     {display:inline-block; line-height:50% !important; vertical-align:top;} /* for cufon "font-quote" left and right quotes */
.quote-text     {display:inline-block; vertical-align:top;}

/* ------------- GRAPHICS ------------- */

/**
    @Name       translate-z
    @Tags       translate-z, translate-z
    @Authors    Leslie Chan
    @Example    <div class="translate-z">translate-z tells the graphics processing engine to promote this layer separately</div>
    @Comments   This sometimes helps with rendering issues. 
*/
.translate-z	{-webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}


/* ------------- LINES ------------- */


/**
    @Name       horizontal-line
    @Tags       line, horizontal
    @Authors    Leslie Chan
    @Example    <br><div class="horizontal-line">&nbsp;</div><br><div class="horizontal-line border-width-3">&nbsp;</div><br><div class="horizontal-line border-blue">&nbsp;</div><br><div class="horizontal-line border-blue border-width-3">&nbsp;</div><br>
    @Comments   
*/
.horizontal-line    {height:0; border-bottom:1px solid #dddddd; line-height:0; font-size:0;}