/* #####################################################################
 Icon Styles

 Font generated from SVG files with http://icomoon.io/app. To add to or
 modify this font, import the '../fonts/devine-colors-icons.dev.svg' file
 via the import button in the app. Download the updated font, replace the
 font files, and update the list of `content: '\e###';` rules below with
 those from the generated CSS file.

 Settings:
   Font Name:             devine color icons
   CSS Class Prefix:      icn_
   Enable Ligatures:      false (breaks IE <= 9)
   Base64 Encode & Embed: false (breaks IE <= 7, embeds font twice)
   Include Metadata:      false (bloat)
######################################################################## */

@font-face {
    font-family: '3MThemeIconFont';
    src:url('../fonts/3MThemeIconFont/3MThemeIconFont.eot?cwgsp');
    src:url('../fonts/3MThemeIconFont/3MThemeIconFont.eot?#iefixcwgsp') format('embedded-opentype'),
    url('../fonts/3MThemeIconFont/3MThemeIconFont.woff?cwgsp') format('woff'),
    url('../fonts/3MThemeIconFont/3MThemeIconFont.ttf?cwgsp') format('truetype'),
    url('../fonts/3MThemeIconFont/3MThemeIconFont.svg?cwgsp#3MThemeIconFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*doc
---
title: Icons
name: icons
category: Icon Styles
---

The base icons used in the Pattern Library are created using a custom icon font: `3MThemeIconFont`.

While icon styles can be applied to any element, but typically you'll want to use a `<i>`:

```html_example
<i class="MMM--icn MMM--icn_localization"><span class="MMM--icn-text">Localization</span></i>
```

##Icons
There are nearly 40 icons as shown below. Simply apply the modifier class to the icon base class: `MMM--icn`, for the desired icon.

Icon                                                        | Modifier Class                            | Description
----------------------------------------------------------- | ----------------------------------------- | -----------
<i class="MMM--icn MMM--icn_localization"></i>              | `MMM--icn MMM--icn_localization`          | Localization Icon
<i class="MMM--icn MMM--icn_arrowUp"></i>                   | `MMM--icn MMM--icn_arrowUp`               | Up Arrow Icon
<i class="MMM--icn MMM--icn_arrowDown"></i>                 | `MMM--icn MMM--icn_arrowDown`             | Down Arrow Icon
<i class="MMM--icn MMM--icn_home"></i>                      | `MMM--icn MMM--icn_home`                  | Home Icon
<i class="MMM--icn MMM--icn_profile"></i>                   | `MMM--icn MMM--icn_profile`               | User Profile Icon
<i class="MMM--icn MMM--icn_cart"></i>                      | `MMM--icn MMM--icn_cart`                  | Shopping Cart Icon
<i class="MMM--icn MMM--icn_menu"></i>                      | `MMM--icn MMM--icn_menu`                  | Main Menu Icon
<i class="MMM--icn MMM--icn_search"></i>                    | `MMM--icn MMM--icn_search`                | Search Icon
<i class="MMM--icn MMM--icn_basket"></i>                    | `MMM--icn MMM--icn_basket`                | Shopping Basket Icon
<i class="MMM--icn MMM--icn_delete"></i>                    | `MMM--icn MMM--icn_delete`                | Delete Icon
<i class="MMM--icn MMM--icn_email"></i>                     | `MMM--icn MMM--icn_email`                 | Email Icon
<i class="MMM--icn MMM--icn_list"></i>                      | `MMM--icn MMM--icn_list`                  | List View Icon
<i class="MMM--icn MMM--icn_grid"></i>                      | `MMM--icn MMM--icn_grid`                  | Grid View Icon
<i class="MMM--icn MMM--icn_gallery"></i>                   | `MMM--icn MMM--icn_gallery`               | Gallery View Icon
<i class="MMM--icn MMM--icn_filter"></i>                    | `MMM--icn MMM--icn_filter`                | Filter Icon Icon
<i class="MMM--icn MMM--icn_tooltip"></i>                   | `MMM--icn MMM--icn_tooltip`               | Tool Tip Icon
<i class="MMM--icn MMM--icn_checkmark"></i>                 | `MMM--icn MMM--icn_checkmark`             | Check Mark Icon
<i class="MMM--icn MMM--icn_window"></i>                    | `MMM--icn MMM--icn_window`                | Open in New Window Icon
<i class="MMM--icn MMM--icn_close"></i>                     | `MMM--icn MMM--icn_close`                 | Close Icon
<i class="MMM--icn MMM--icn_flag"></i>                      | `MMM--icn MMM--icn_flag`                  | Flag Icon
<i class="MMM--icn MMM--icn_previous"></i>                  | `MMM--icn MMM--icn_previous`              | Previous Icon
<i class="MMM--icn MMM--icn_next"></i>                      | `MMM--icn MMM--icn_next`                  | Next Icon
<i class="MMM--icn MMM--icn_plus"></i>                      | `MMM--icn MMM--icn_plus`                  | Plus Icon
<i class="MMM--icn MMM--icn_minus"></i>                     | `MMM--icn MMM--icn_minus`                 | Minus Icon
<i class="MMM--icn MMM--icn_banner"></i>                    | `MMM--icn MMM--icn_banner`                | Banner Icon
<i class="MMM--icn MMM--icn_chat"></i>                      | `MMM--icn MMM--icn_chat`                  | Chat Icon
<i class="MMM--icn MMM--icn_share"></i>                     | `MMM--icn MMM--icn_share`                 | Share Icon
<i class="MMM--icn MMM--icn_print"></i>                     | `MMM--icn MMM--icn_print`                 | Print Icon
<i class="MMM--icn MMM--icn_gt"></i>                        | `MMM--icn MMM--icn_gt`                    | Standard Greater Than Icon
<i class="MMM--icn MMM--icn_lt"></i>                        | `MMM--icn MMM--icn_lt`                    | Standard Less Than Icon
<i class="MMM--icn MMM--icn_gt2"></i>                       | `MMM--icn MMM--icn_gt2`                   | Stylized Greater Than Icon
<i class="MMM--icn MMM--icn_lt2"></i>                       | `MMM--icn MMM--icn_lt2`                   | Stylized Less Than Icon Icon
<i class="MMM--icn MMM--icn_breadcrumb"></i>                | `MMM--icn MMM--icn_breadcrumb`            | Breadcrumb Icon - Will flip in RTL
<i class="MMM--icn MMM--icn_block"></i>                     | `MMM--icn MMM--icn_block`                 | Block Icon
<i class="MMM--icn MMM--icn_phone"></i>                     | `MMM--icn MMM--icn_phone`                 | Phone Icon
<i class="MMM--icn MMM--icn_circle"></i>                    | `MMM--icn MMM--icn_circle`                | Bullet Icon
<i class="MMM--icn MMM--icn_pin"></i>                       | `MMM--icn MMM--icn_pin`                   | Pin Icon
<i class="MMM--icn MMM--icn_dot"></i>                       | `MMM--icn MMM--icn_dot`                   | Small Bullet Icon - Used on the carousels
<i class="MMM--icn MMM--icn_lock"></i>                      | `MMM--icn MMM--icn_lock`                  | Lock Icon

*/

.MMM--icn {
    display: inline-block;
    *display: inline; /* ie7 support for inline-block */
    *zoom: 1; /* ie7 support for inline-block */
    speak: none;
    font-family: '3MThemeIconFont';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* This class hides content in an accessible way this is still visible to screen
readers. While similar to the .isVisuallyHidden utility class, this class is
specific for use with the .icn object */
.MMM--icn-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    *overflow: visible; /* IE7 */
    *zoom: 1; /* IE7 */
    padding: 0;
    position: absolute;
    width: 1px;
}

.MMM--icn span { /* IE7 */
    margin: 0 .25em;
}

.MMM--icn_localization span,
.MMM--icn_localization:before {
    content: '\e000';
    font-size: 27px;
}

.MMM--icn_arrowUp:before { content: '\e001'; }

.MMM--icn_arrowDown:before {
    content: '\e002';
    padding-left: 5px;
}

.rtl .MMM--icn_arrowDown:before {
    padding-left: 0;
    padding-right: 5px;
}

/* When the icn is in an active button, we want it to point up */
.MMM--navItemList-hasSubNav_isOpen .MMM--icn_arrowDown:before {
    content: '\e001';
}

.MMM--filterList .MMM--isActive .MMM--icn_arrowDown:before,
.MMM--accordionDrawer_isOpen .MMM--icn_arrowDown:before {
    content: '\e001';
    color: #ff0000;
}

@media screen and (max-width: 767px) {
    .MMM--btn_filter_isActive .MMM--icn_arrowDown:before {
        content: '\e001';
        color: #ff0000;
    }
}

.MMM--filterDrawer_isOpen .MMM--icn_arrowDown:before {
    content: '\e001';
    color: #ff0000;
}

.MMM--icn_home:before { content: '\e003'; }

.MMM--icn_profile span,
.MMM--icn_profile:before {
    content: '\e004';
    font-size: 26px;
}

.MMM--icn_cart span,
.MMM--icn_cart:before {
    content: '\e005';
    font-size: 23px;
}

.MMM--icn_menu span,
.MMM--icn_menu:before {
    content: '\e006';
    font-size: 17px;
}

.MMM--icn_search span,
.MMM--icn_search:before {
    content: '\e007';
    font-size: 25px;
}

.MMM--icn_basket:before {
    content: '\e008';
}

.MMM--icn_delete span,
.MMM--icn_delete:before {
    content: '\e009';
    font-size: 10px;
}

.MMM--icn_email span,
.MMM--icn_email:before {
    content: '\e00a';
}

.MMM--icn_gallery span,
.MMM--icn_gallery:before {
    content: '\e00b';
}

.MMM--icn_filter span,
.MMM--icn_filter:before {
    content: '\e00c';
    font-size: 24px;
}

.MMM--icn_tooltip {
    font-size: 13px;
    margin-left: .5em;
    position: relative;
    cursor: pointer;
}

.rtl .MMM--icn_tooltip {
    margin-right: .5em;
    margin-left: 0;
}

.MMM--icn_tooltip span,
.MMM--icn_tooltip:before {
    content: '\e00d';
    font-size: 13px;
}

.MMM--icn_checkmark span,
.MMM--icn_checkmark:before {
    content: '\e00e';
}

.MMM--icn_window span,
.MMM--icn_window:before {
    content: '\e00f';
}

.MMM--icn_grid span,
.MMM--icn_grid:before {
    content: '\e010';
}

.MMM--icn_close span,
.MMM--icn_close:before {
    content: '\e011';
}

.MMM--icn_flag span,
.MMM--icn_flag:before {
    content: '\e012';
}

.MMM--icn_previous span,
.MMM--icn_previous:before {
    content: '\e013';
}

.rtl .MMM--icn_previous span,
.rtl .MMM--icn_previous:before {
    content: '\e014';
}

.MMM--icn_next span,
.MMM--icn_next:before {
    content: '\e014';
}

.rtl .MMM--icn_next span,
.rtl .MMM--icn_next:before {
    content: '\e013';
}

.MMM--icn_plus span,
.MMM--icn_plus:before {
    content: '\e015';
    font-size: .7em;
    vertical-align: 20%;
}

.MMM--icn_minus span,
.MMM--icn_minus:before {
    content: '\e016';
}

.MMM--icn_banner span,
.MMM--icn_banner:before {
    content: '\e017';
}

.MMM--icn_chat span,
.MMM--icn_chat:before {
    content: '\e018';
}

.MMM--icn_share span,
.MMM--icn_share:before {
    content: '\e01a';
    padding-right: 3px;
}

.rtl .MMM--icn_share span,
.rtl .MMM--icn_share:before {
    content: '\e01a';
    padding-right: 0;
    padding-left: 3px;
}

.MMM--icn_print span,
.MMM--icn_print:before {
    content: '\e019';
}

.MMM--icn_gt span,
.MMM--icn_gt:before {
    content: '\e01b';
}

.rtl .MMM--icn_gt span,
.rtl .MMM--icn_gt:before{
    content: '\e01c';
}

.MMM--icn_lt span,
.MMM--icn_lt:before {
    content: '\e01c';
}

.rtl .MMM--icn_lt span,
.rtl .MMM--icn_lt:before {
    content: '\e01b';
}

.MMM--icn_breadcrumb span,
.MMM--icn_breadcrumb:before {
    content: '\e01b';
    padding: 0 .5em;
    *zoom: 1;
}

.rtl .icn_breadcrumb span,
.rtl .icn_breadcrumb:before {
    content: '\e01c';
}

.MMM--icn_block span,
.MMM--icn_block:before {
    content: '\e01d';
}

.MMM--icn_list span,
.MMM--icn_list:before {
    content: '\e01e';
}

.MMM--icn_btt span,
.MMM--icn_btt:before {
    content: '\e01f';
}

.MMM--icn_phone span,
.MMM--icn_phone:before {
    content: '\e020';
}

.MMM--icn_gt2 span,
.MMM--icn_gt2:before {
    content: '\e021';
}

.MMM--icn_lt2 span,
.MMM--icn_lt2:before {
    content: '\e022';
}

.MMM--icn_circle span,
.MMM--icn_circle:before {
    content: '\e023';
    font-size: 14px;
}

.MMM--icn_pin span,
.MMM--icn_pin:before {
    content: '\e024';
}

.MMM--icn_dot span,
.MMM--icn_dot:before {
    content: '\e025';
}

.MMM--icn_lock span,
.MMM--icn_lock:before {
    content: '\e027';
}

.MMM--icn_twistyAction span,
.MMM--icn_twistyAction:before {
    content: '\e015';
    font-size: 10px;
    vertical-align: 10%;
}

.MMM--resourcesList .MMM--isActive .MMM--icn_twistyAction:before {
    content: '\e016';
}

.MMM--icn_twistyAction span {
    font-size: 10px;
    vertical-align: 6px;
    padding-right: 5px;
}

.rtl .MMM--icn_twistyAction span {
    padding-right: 0;
    padding-left: 5px;
}

.MMM--carouselTrigger > .MMM--icn {
    padding: 0;
}

.MMM--icn_carouselTrigger:before {
    display: block;
    padding-top: 5px;
    font-size: 12px;
    font-weight: bold;
}

.MMM--icn_heroCarouselTrigger {
    display: none;
}

/* icn plus to minus changes */
.MMM--addInfoBlockTrigger.MMM--isActive .MMM--icn_plus:before,
.MMM--addInfoBlockTrigger.MMM--isActive .MMM--icn_plus span,
.MMM--disclaimerTrigger.MMM--isActive .MMM--icn_plus:before,
.MMM--disclaimerTrigger.MMM--isActive .MMM--icn_plus span {
    content: '\e016';
}

/* icn active state changes */
.MMM--navItemList-hasSubNav_isOpen .MMM--drawerNavItem .MMM--icn_profile:before,
.MMM--navItemList-hasSubNav_isOpen .MMM--drawerNavItem .MMM--icn_cart:before {
    color: #444444;
}

.MMM--closeTrigger {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background: #000000;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}

.MMM--closeTrigger:hover {
    color: #ffffff;
    background: #ff0000;
}

/* ---------------------------------------------------------------------
 Icon Mix-Ins Styles
------------------------------------------------------------------------ */

/*doc
---
title: Icon Mix-Ins
name: icons_mix-ins
category: Icon Styles
---

Icon Mix-Ins can be used to alter an icon's appearance.

```html_example
<i class="MMM--icn MMM--icn_home mix-MMM--icn_red mix-MMM--icn_lrg"><span class="MMM--icn-text">Home</span></i>
```

##Icon Color Mix-In
There are four (4) color options for icons: Dark grey, medium grey, red and pink. Simply apply the color mix-in class for the desired color.

Icon Mix-In                                                       | Mix-In Class                                        | Description
----------------------------------------------------------------- | --------------------------------------------------- | -----------
<i class="MMM--icn MMM--icn_home mix-MMM--icn_dark"></i>          | `MMM--icn MMM--icn_home mix-MMM--icn_dark`          | #000000
<i class="MMM--icn MMM--icn_home mix-MMM--icn_grey"></i>          | `MMM--icn MMM--icn_home mix-MMM--icn_grey`          | #959595
<i class="MMM--icn MMM--icn_home mix-MMM--icn_red"></i>           | `MMM--icn MMM--icn_home mix-MMM--icn_red`           | #FF0000
<i class="MMM--icn MMM--icn_home mix-MMM--icn_pink"></i>          | `MMM--icn MMM--icn_home mix-MMM--icn_pink`          | #FFE5E5

##Icon Size Mix-Ins
There are three (3) size options for icons: Large, medium and small. Simply apply the size mix-in class for the desired size.

Icon Mix-In                                                       | Mix-In Class                                        | Description
----------------------------------------------------------------- | --------------------------------------------------- | -----------
<i class="MMM--icn MMM--icn_home mix-MMM--icn_sm"></i>            | `MMM--icn MMM--icn_home mix-MMM--icn_sm`            | 10px
<i class="MMM--icn MMM--icn_home mix-MMM--icn_md"></i>            | `MMM--icn MMM--icn_home mix-MMM--icn_md`            | 14px
<i class="MMM--icn MMM--icn_home mix-MMM--icn_lrg"></i>           | `MMM--icn MMM--icn_home mix-MMM--icn_lrg`           | 24px

##Icon Spacer Mix-Ins
There are two (2) spacer options for icons: Left side margin and right side margin. Simply apply the spacer mix-in class for the desired size.

Icon Mix-In                                                       | Mix-In Class                                        | Description
----------------------------------------------------------------- | --------------------------------------------------- | -----------
<i class="MMM--icn MMM--icn_home mix-MMM--icn_leftSpace"></i>     | `MMM--icn MMM--icn_home mix-MMM--icn_leftSpace`     | Adds 5px margin to the left of the icon
<i class="MMM--icn MMM--icn_home mix-MMM--icn_rightSpace"></i>    | `MMM--icn MMM--icn_home mix-MMM--icn_rightSpace`    | Adds 5px margin to the right of the icon

##Icon Vertical Alignment Mix-Ins
There are Four (4) spacer options for icons: Two for subscript and two for superscript. Simply apply the spacer mix-in class for the desired space.

Icon Mix-In                                                       | Mix-In Class                                        | Description
----------------------------------------------------------------- | --------------------------------------------------- | -----------
<i class="MMM--icn MMM--icn_home mix-MMM--icn_subSm"></i>         | `MMM--icn MMM--icn_home mix-MMM--icn_subSm`         | Lowers the icon 2px
<i class="MMM--icn MMM--icn_home mix-MMM--icn_subMd"></i>         | `MMM--icn MMM--icn_home mix-MMM--icn_subMd`         | Lowers the icon 4px
<i class="MMM--icn MMM--icn_home mix-MMM--icn_supSm"></i>         | `MMM--icn MMM--icn_home mix-MMM--icn_supSm`         | Raises the icon 2px
<i class="MMM--icn MMM--icn_home mix-MMM--icn_supMd"></i>         | `MMM--icn MMM--icn_home mix-MMM--icn_supMd`         | Raises the icon 4px
*/

.mix-MMM--icn_dark,
.mix-MMM--icn_dark:before {
    color: #000000;
}

.mix-MMM--icn_grey,
.mix-MMM--icn_grey:before {
    color: #959595;
}

.mix-MMM--icn_red,
.mix-MMM--icn_red:before {
    color: #ff0000;
}

.mix-MMM--icn_pink,
.mix-MMM--icn_pink:before {
    color: #ffe5e5;
}

.mix-MMM--icn_psTheme {
    color: #ffffff;
}

.mix-MMM--icn_sm span,
.mix-MMM--icn_sm:before {
    font-size: 10px;
}

.mix-MMM--icn_md span,
.mix-MMM--icn_md:before {
    font-size: 14px;
}

.mix-MMM--icn_lrg span,
.mix-MMM--icn_lrg:before {
    font-size: 24px;
}

.mix-MMM--icn_leftSpace {
    margin-left: 5px;
}

.rtl .mix-MMM--icn_leftSpace {
    margin-right: 5px;
    margin-left: 0;
}

.mix-MMM--icn_rightSpace {
    margin-right: 5px;
}

.rtl .mix-MMM--icn_rightSpace {
    margin-left: 5px;
    margin-right: 0;
}

.mix-MMM--icn_noSpace:before {
    padding: 0;
}

.mix-MMM--icn_subSm {
    vertical-align: -2px;
}

.mix-MMM--icn_subMd {
    vertical-align: -4px;
}

.mix-MMM--icn_supSm {
    vertical-align: 2px;
}

.mix-MMM--icn_supMd {
    vertical-align: 4px;
}

/*doc
---
title: Image Based Icons
name: icons_specialized
category: Icon Styles
---

These icons are based on background images and image sprites and not the icon font.

##Document Icons
There are four (4) document type icons: PDF, PowerPoint Excel and Word.

Icon                                                              | Mix-In Class                                        | Description
----------------------------------------------------------------- | --------------------------------------------------- | -----------
<i class="MMM--docIcn MMM--docIcn_pdf"></i>                       | `MMM--docIcn MMM--docIcn_pdf`                       | PDF Document
<i class="MMM--docIcn MMM--docIcn_pp"></i>                        | `MMM--docIcn MMM--docIcn_pp`                        | PowerPoint Document
<i class="MMM--docIcn MMM--docIcn_excel"></i>                     | `MMM--docIcn MMM--docIcn_excel`                     | Excel Document
<i class="MMM--docIcn MMM--docIcn_word"></i>                      | `MMM--docIcn MMM--docIcn_word`                      | Word Document

##Social Icons
There are twenty (20) social media icons: Facebook, YouTube, Twitter, LinkedIn, RSS, Blogger, Flickr, Google+, Instagram, Pinterest, 
Quora, Reddit, RenRen, Slideshare, Tudou, Tumblr, Viadeo, Weibo, Wordpress, and Xing

Icon                                                              | Mix-In Class                                        | Description
----------------------------------------------------------------- | --------------------------------------------------- | -----------
<i class="MMM--socialIcn MMM--socialIcn_facebook"></i>            | `MMM--socialIcn MMM--socialIcn_facebook`            | Facebook
<i class="MMM--socialIcn MMM--socialIcn_youtube"></i>             | `MMM--socialIcn MMM--socialIcn_youtube`             | YouTube
<i class="MMM--socialIcn MMM--socialIcn_twitter"></i>             | `MMM--socialIcn MMM--socialIcn_twitter`             | Twitter
<i class="MMM--socialIcn MMM--socialIcn_linkedin"></i>            | `MMM--socialIcn MMM--socialIcn_linkedin`            | LinkedIn
<i class="MMM--socialIcn MMM--socialIcn_rss"></i>                 | `MMM--socialIcn MMM--socialIcn_rss`                 | RSS Feed
<i class="MMM--socialIcn MMM--socialIcn_blogger"></i>             | `MMM--socialIcn MMM--socialIcn_blogger`             | Blogger
<i class="MMM--socialIcn MMM--socialIcn_flickr"></i>              | `MMM--socialIcn MMM--socialIcn_flickr`              | Flickr
<i class="MMM--socialIcn MMM--socialIcn_googleplus"></i>          | `MMM--socialIcn MMM--socialIcn_googleplus`          | Google+
<i class="MMM--socialIcn MMM--socialIcn_instagram"></i>           | `MMM--socialIcn MMM--socialIcn_instagram`           | Instagram
<i class="MMM--socialIcn MMM--socialIcn_pinterest"></i>           | `MMM--socialIcn MMM--socialIcn_pinterest`           | Pinterest
<i class="MMM--socialIcn MMM--socialIcn_quora"></i>               | `MMM--socialIcn MMM--socialIcn_quora`               | Quora
<i class="MMM--socialIcn MMM--socialIcn_reddit"></i>              | `MMM--socialIcn MMM--socialIcn_reddit`              | Reddit
<i class="MMM--socialIcn MMM--socialIcn_renren"></i>              | `MMM--socialIcn MMM--socialIcn_renren`              | RenRen
<i class="MMM--socialIcn MMM--socialIcn_slideshare"></i>          | `MMM--socialIcn MMM--socialIcn_slideshare`          | Slideshare
<i class="MMM--socialIcn MMM--socialIcn_tudou"></i>               | `MMM--socialIcn MMM--socialIcn_tudou`               | Tudou
<i class="MMM--socialIcn MMM--socialIcn_tumblr"></i>              | `MMM--socialIcn MMM--socialIcn_tumblr`              | Tumblr
<i class="MMM--socialIcn MMM--socialIcn_viadeo"></i>              | `MMM--socialIcn MMM--socialIcn_viadeo`              | Viadeo
<i class="MMM--socialIcn MMM--socialIcn_weibo"></i>               | `MMM--socialIcn MMM--socialIcn_weibo`               | Weibo
<i class="MMM--socialIcn MMM--socialIcn_wordpress"></i>           | `MMM--socialIcn MMM--socialIcn_wordpress`           | Wordpress
<i class="MMM--socialIcn MMM--socialIcn_xing"></i>                | `MMM--socialIcn MMM--socialIcn_xing`                | Xing

##Specialized Icons
There is one (1) specialized icon: the call out flag.

Icon                                                                             | Mix-In Class                         | Description
-------------------------------------------------------------------------------- | ------------------------------------ | -----------
<div style="position: relative"><span class="MMM--callOutFlag">New</span></div>  | `MMM--callOutFlag`                   | New Product Banner
*/

/* ---------------------------------------------------------------------
 Document Icon Styles
------------------------------------------------------------------------ */

.MMM--docIcn {
    display: inline-block;
    *display: inline; /* ie7 support for inline-block */
    *zoom: 1; /* ie7 support for inline-block */
    background: url(../images/doc-icon-sprite.png) no-repeat;
    height: 16px;
    width: 16px;
    vertical-align: -2px;
}

.MMM--docIcn_pdf { background-position: 0 0; }

.MMM--docIcn_pp { background-position: -16px 0 }

.MMM--docIcn_excel { background-position: -32px 0; }

.MMM--docIcn_word { background-position: -48px 0; }

/* ---------------------------------------------------------------------
 Social Icon Styles
------------------------------------------------------------------------ */

.MMM--socialIcn {
    display: inline-block;
    *display: inline; /* ie7 support for inline-block */
    *zoom: 1; /* ie7 support for inline-block */
    text-indent: -9999em;
    *text-indent: 0; /* reset text-indent in ie7 to display background image */
    *font-size: 0; /* set font-size to 0 in IE7 to hide text */
    background: url(../images/social-icon-sprite.png) no-repeat;
    height: 32px;
    width: 32px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    .MMM--socialIcn {
        background-image: url(../images/retina-social-icon-sprite.png);
        -moz-background-size: auto 100%;
        -ms-background-size: auto 100%;
        -o-background-size: auto 100%;
        -webkit-background-size: auto 100%;
        background-size: auto 100%;
    }
}

.MMM--socialIcn_facebook { background-position: 0 0; }

.MMM--socialIcn_youtube { background-position: -32px 0; }

.MMM--socialIcn_twitter { background-position: -64px 0; }

.MMM--socialIcn_rss { background-position: -96px 0; }

.MMM--socialIcn_linkedin { background-position: -128px 0; }

.MMM--socialIcn_blogger { background-position: -160px 0; }

.MMM--socialIcn_flickr { background-position: -192px 0; }

.MMM--socialIcn_googleplus { background-position: -224px 0; }

.MMM--socialIcn_instagram { background-position: -256px 0; }

.MMM--socialIcn_pinterest { background-position: -288px 0; }

.MMM--socialIcn_quora { background-position: -320px 0; }

.MMM--socialIcn_reddit { background-position: -352px 0; }

.MMM--socialIcn_renren { background-position: -384px 0; }

.MMM--socialIcn_slideshare { background-position: -416px 0; }

.MMM--socialIcn_tudou { background-position: -448px 0; }

.MMM--socialIcn_tumblr { background-position: -480px 0; }

.MMM--socialIcn_viadeo { background-position: -512px 0; }

.MMM--socialIcn_weibo { background-position: -544px 0; }

.MMM--socialIcn_wordpress { background-position: -576px 0; }

.MMM--socialIcn_xing { background-position: -608px 0; }

/* ---------------------------------------------------------------------
 Call Out Flag Icon Styles
------------------------------------------------------------------------ */

.MMM--callOutFlag {
    position: absolute;
    top: -15px;
    right: -1px;
    z-index: 10;
    font-weight: bold;
    font-size: 10px;
    color: #ff0000;
}

.rtl .MMM--callOutFlag {
    right: auto;
    left: -1px;
}

.MMM--callOutFlag:after {
    content:'';
    display: block;
    height: 38px;
    width: 20px;
    position: absolute;
    top: 14px;
    background: transparent url(../images/bkgd-flag.png) 0 0 no-repeat;
}