/* ======== 1. SETUP ========*/
/* NOTE: standard Meyer reset, modified to remove sup */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul, ol {
    list-style: none;
}
/*end reset*/

/* ---- CLEARFIX ---- */
.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}
/* ======== END SETUP ========*/

/*======== 2. GLOBAL HTML RULES ========*/
body {
    /*overflow-y: hidden;idk why? they have this on mylan.com*/
    overflow-x: hidden; /*for the .flyoff elements*/
}

p {
    line-height: 1.5;
    color: #666;
    font-size: 14px;
}

div, p, h1, h2, h3, h4, h5, a, li {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #666;
}

button {
    cursor: pointer;
}

sup {
    vertical-align: top;
    font-size: 75%;
}

h1, h2, h3, h4, h5 {
    line-height: 1.2;
}

a, a:visited, a span, a:visited span {
    color: #00BBE7;
    text-decoration: none;
}

a:hover, a:hover span {
    color: #00BBE7;
    text-decoration: underline;
}

strong {
    font-weight: bold;
    color: #333; /*overridden with #000 if found inside .caption*/
}

em {
    font-style: italic;
}

hr {
    height: 1px;
    border: none;
    background: #e2e2e2;
}
/*======== END GLOBAL HTML RULES ========*/

/* ======== 3. BASE SHARED STYLES (Reusable classes and Custom Elements) ======== */
/* ---- Rich text editor styles ----
 ALL rich text fields should be nested in a .caption */
.caption {
    padding-bottom: 30px;
}

/*"empty" class is appended via JS*/
.caption.empty {
    padding: 0!important;
}

/*this may seem cumbersome, but it's the best way we've found to avoid double padding issues due to unpredictable content entry. 
(If we simply pad the bottom of everything, we can't also pad its outer container). 
(But if we don't pad the outer container then we get no padding at all when the content author neglects to use any HTML element.) 
(Additionally, the rich text editor is not consistent when it comes to automatically wrapping text and inserting tags.)
In our experience this is the best method for consistent results with the CMS. */
.caption p + p,
.caption p + ul,
.caption p + ol,
.caption ul + ul,
.caption ul + p,
.caption table + p,
.caption table + ol,
.caption table + ul,
.caption p + h2,
.caption h2 + p {
    margin-top: 20px;
}

.rail .caption p {
    line-height: 1.5;
}

.container-with-rail > .grid > .col-1of3.right .caption p + p {
    margin-top: 8px;
}

.container-with-rail > .grid > .col-1of3.right .caption p + ul,
.container-with-rail > .grid > .col-1of3.right .caption ul + ul,
.container-with-rail > .grid > .col-1of3.right .caption ul + p {
    margin-top: 8px;
}

.caption ul li {
    /* NEW STANDARD 4/23/2015 */
    padding-bottom: 4px;
    padding-left: 10px;
    position: relative;
    /*temp? removed
        margin-left: 15px;*/
}

.caption ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.caption ul li:before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    top: 6px;
    left: 1px;
    background: #00bbe7;
}

.caption ol {
    list-style: decimal;
}

.caption ol li {
    list-style-position: inside;
}

.caption h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/*nested lists - see UK terms and conditions*/
.caption ol li {
    list-style-position: outside;
    margin-left: 40px;
    padding: 10px 0px;
}

.caption ol ol li {
    padding: 10px 0px 10px 10px;
    list-style-position: outside;
    margin-left: 20px;
    list-style-type: lower-alpha;
}

.caption ol ol {
    padding-top: 10px;
    font-size: 120%;
    list-style-type: lower-alpha;
}

/*addt'l typography styles*/

.caption small {
    font-size: 11px;
    line-height: 1.5;
    display: block;
}

.caption small p {
    line-height: 1.4;
    font-size: 11px;
}

.caption small p + p {
    margin-top: 10px;
}

.caption sup {
    /*matches original Mylan.com implementation*/
    vertical-align: top;
    font-size: 75%;
}

.caption i {
    font-style: italic;
}

.caption blockquote {
    padding: 20px 0;
}

/*all <strong> tags within captions should be rendered black*/
.caption strong {
    color: #000;
}

/* ---- buttons (v1) ---- */
.btn {
    /*needs to be able to wrap because of multilingual
	 white-space: nowrap;
	 overflow: hidden;*/
    cursor: pointer;
    display: inline-block;
    /*why? padding-right: 4px;*/
    color: #666;
    background: #efefef;
    background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e2e2e2));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e2e2e2 100%);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    /*ie9 - ie8 gets a different filter in ie8.css */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=0);
}

.btn > a {
    color: #00BCE4;
    padding: 12px 20px 12px 12px;
    display: block;
    font-weight: bold;
}

.btn > a > span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 6px;
    background-position: 0 -37px;
    display: inline-block;
    position: relative;
    right: -6px;
    top: 1px;
}

/* --- Special "ICON BUTTON" ---- */
.btn.icon-btn {
    position: relative;
}

.btn.icon-btn .icon {
    position: absolute;
    top: 50%;
    margin-top: -13px;
}

.btn.icon-btn span {
    display: inline-block;
    padding-left: 30px;
    font-weight: normal;
    color: #333;
    line-height: 1;
}

.btn.icon-btn span:after {
    display: none;
}

.btn.icon-btn a:hover span {
    text-decoration: none;
}

.btn.icon-btn a:active span {
    color: #00bbee;
}

/* ---- button version 2 - always has blue text and > carat image ---- */
.btn-v2 {
    cursor: pointer;
    display: inline-block;
    padding-right: 4px;
    color: #666;
    background: #efefef;
    background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e2e2e2));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e2e2e2 100%);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    /*ie9 - ie8 gets a different filter in ie8.css */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=0);
}

.btn-v2 > a {
    color: #00BCE4;
    /*11/18 WHY is the l/r padding only 4 px??? padding: 12px 4px; */
    padding: 12px 14px;
    display: block;
    font-weight: bold;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.btn-v2 > a > span {
    left: -2px;
    position: relative;
}

.isIE .btn-v2 > a > span {
    /*TODO: should this be added to all browsers? Problem only occurs in IE (all versions)*/
    display: inline-block;
}

.btn-v2 > a > span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 6px;
    background-position: 0 -37px;
    display: inline-block;
    position: absolute;
    right: -10px;
    top: 4px;
}

.btn-v2 > a:hover,
.btn-v2 > a:hover span {
    text-decoration: none;
}
/* --- SHARED FORM STYLES --- */
.custom-inputs input[type="text"], textarea {
    width: 100%;
    padding: 11px;
    margin: 0 0 36px;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #f7f7f7;
    border: 1px solid #efefef;
    box-shadow: 0 3px 6px #d9d9d9 inset;
    font-size: 14px;
    line-height: 14px;
    border-radius: 5px;
    color: #666;
    /*hopefully stop iphone from ignoring css?*/
    -webkit-appearance: none;
}

.custom-inputs .input_text .labelwrap, .custom-inputs .input_select .labelwrap {
    padding-bottom: 5px;
}

.custom-inputs .input_select {
    margin-bottom: 30px;
}

.field-validation-error {
    color: #f05168;
    display: block;
    font-style: italic;
    font-size: 14px;
}

/* ---- ICON LINKS (v1) ---- */
a.has-arrow-blue-med:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 6px;
    background-position: 0 -37px;
    display: inline-block;
    position: relative;
    right: -6px;
    top: 1px;
}

a.has-arrow-blue-med {
    /*sometimes these links are contextual and have more text after them - so the arrow should take up space. Hesitant to apply this space to all arrow link types however.*/
    margin-right: 10px;
}

.btn a.has-arrow-blue-med {
    /*TODO: inconsistent usage - see Careers Callout (home page) - some btns contain arrow link. Btn has extra right padding built in for arrow, so this margin is not needed.*/
    margin-right: 0;
}

/*a.has-arrow-blue-lg span:after*/
a.has-arrow-blue-lg:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 13px;
    width: 14px;
    background-position: 0 -152px;
    display: inline-block;
    position: relative;
    right: -6px;
    top: 0px;
}

/*a.has-arrow-blue-lg-up span:after*/
a.has-arrow-blue-lg-up:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 8px;
    width: 14px;
    background-position: 0 -60px;
    display: inline-block;
    position: relative;
    right: -6px;
    top: -2px;
}

a.has-popout-icon span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 14px;
    width: 14px;
    background-position: 0 -46px;
    display: inline-block;
    position: relative;
    right: -6px;
    top: 1px;
}

a.has-arrow-white-med span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 14px;
    background-position: 0 -203px;
    display: inline-block;
    position: relative;
    right: -6px;
    top: 1px;
}

/* ---- ICON LINKS (v2) ---- */
.icon-link > span {
    position: relative;
}

/*TODO: why are some of these abs, and others rel, and which one is correct? 
    Rel works for multiline text but the carat can wrap independently. 
    Abs works for multiline text in Chrome but not in FF or possibly IE. It does prevent the carat from wrapping independently.
    2/12/2015 We are going with a tentative solution to abs position the carat and wrap only the last word in <span> - this is the most reliable method and reflects what was done on mylan.com
    however we have only done this on arrow blue med & lg for now, as we don't want to make any drastic global changes until necessary .
*/

.icon-link.arrow-blue-med span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 6px;
    background-position: 0 -37px;
    display: inline-block;
    position: absolute;
    right: -11px;
    bottom: 2px;
}

.icon-link.arrow-blue-med-up span:after {
    content: " ";
    background-image: url('/-/media/gwmp/images/ui/icofootersprite.png');
    height: 8px;
    width: 12px;
    background-position: 0 -60px;
    display: inline-block;
    position: relative;
    right: -5px;
    top: -2px;
}

.icon-link.arrow-blue-lg span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 13px;
    width: 14px;
    background-position: 0 -152px;
    display: inline-block;
    position: absolute;
    right: -18px;
    bottom: 4px;
}

.icon-link.popout span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 14px;
    width: 14px;
    background-position: 0 -46px;
    display: inline-block;
    position: relative;
    right: -6px;
    top: 1px;
}

.icon-link.arrow-white-med span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 12px;
    background-position: 0 10px;
    display: inline-block;
    position: relative;
    right: -5px;
    top: 1px;
}

.icon-link.arrow-blue-down span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 12px;
    background-position: 0 35px;
    display: inline-block;
    position: relative;
    right: -5px;
    top: 1px;
}
/* =================== END BASE SHARED STYLES =================== */

/* =================== 4. PAGE LAYOUT STYLES =================== */
/* --- GRID FRAMEWORK --- */
.grid {
    width: 100%;
    max-width: 960px;
}

/*clearfix the grid (because we are using floats)...*/
.grid:before, .grid:after {
    content: " ";
    display: table;
}

.grid:after {
    clear: both;
}

.col {
    float: left;
}

.col-1of2 {
    width: 50%;
}

.col-1of3 {
    width: 33.3333%;
}

.col-2of3 {
    width: 66.6666%;
}

.col-1of4 {
    width: 25%;
}

.col-3of4 {
    width: 75%;
}

.col-full {
    width: 100%;
}
/*add more col types as needed...*/
/* --- END GRID FRAMEWORK --- */

.page-wrap-outer {
    overflow-x: hidden; /*mobile devices don't recognize overflow rules on body*/
}

.main-wrap {
    margin-top: 50px;
}

.flyoff {
    /* for design elements that break out of the grid and fly off the right side of the screen. */
    padding-right: 2000px;
    width: 100%;
}

/* ---- CONTENT WITH RAIL (one of the most foundational components of the UI framework) ----
 deviates from the grid, like most things in this design, so we will override the standard rules*/
.container-with-rail .col-1of3 {
    width: 28.2%;
    /*31.2%*/
}

.container-with-rail .col-2of3 {
    width: 71.8%;
    /*68.8%*/
}

.container-with-rail > .grid > .left > .inner {
    padding-right: 20px;
}

.container-full .container-full, .container-with-rail .container-full, .container-two-column .container-full {
    /*container fulls are ending up nested under other containers causing double padding issues*/
    padding-bottom: 0;
}

.container-full .container-full + .container-full, .container-with-rail .container-full + .container-full, .container-two-column .container-full + .container-full {
    padding-top: 20px;
}

.padded-content {
    /*(the "uniform" left/right padding for main content that is the full grid width)*/
    padding-right: 20px;
    padding-left: 40px;
}

/*TWO COLUMN CONTAINER*/
.container-two-column > .inner > .grid > .col.left {
    padding-right: 10px;
    box-sizing: border-box;
}

/* RAILS - units of content that go on the right-hand column of the 2-column container */
.rail {
    margin-bottom: 20px;
    position: relative;
    min-height: 20px;
}

.rail > .inner {
    padding: 20px 0 20px 20px;
    /*apply z index so the bkd image doesn't cover anything up*/
    position: relative;
    z-index: 1;
}

.rail.grey {
    background: #f2f2f2;
}

.rail.grey > .inner {
    padding: 20px 10px 20px 20px;
}

.rail.extra-margin {
    margin-left: 20px;
}

.rail.extra-margin > .inner {
    padding-right: 20px;
}

.rail.has-stripes > .inner,
.rail.grey.has-stripes > .inner {
    /*stripes create additional 20px on bottom, so we don't need the pad*/
    padding-bottom: 0;
}

.rail.has-shadow {
    box-shadow: 0 5px 5px #b5b5b5;
}

/*hide optional stuff by default*/
.rail .opt-stripes, .rail .opt-bkd-img {
    display: none;
}

.rail.has-stripes .opt-stripes {
    display: block;
    background-color: white;
    background-image: url("/-/media/gwmp/images/ui/greendiagloop.png");
    background-position: 0 5px;
    background-repeat: repeat-x;
    height: 20px;
    width: 100%;
}

.rail.has-stripes.blue .opt-stripes {
    display: block;
    background-color: white;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-position: 0 5px;
    background-repeat: repeat-x;
    height: 20px;
    width: 100%;
}

/*optional background image for rails (which is actually an img tag) */
.rail .opt-bkd-img {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
}

.rail .opt-bkd-img img {
    width: auto;
    height: 100%;
    position: absolute; /*fixes safari bug*/
}

.rail.flyoff.has-stripes .opt-stripes {
    /*force stripes to extend into padding if rail has flyoff*/
    width: 2186px;
    z-index: 1;
    position: relative;
    /*these have image backgrounds (sometimes) so move the stripes downward so they don't obscure it....*/
    bottom: -20px;
}

.rail.has-stripes.flyoff {
    /*....and increase the bottom margin by the same amount of pixels.*/
    margin-bottom: 40px;
}

.rail .caption {
    /*rails are already padded so no need to pad captions on the rail.*/
    padding-bottom: 0;
    /*but add 10px to right padding
    padding-right: 10px; */
}

.rail .content-section + .content-section {
    /*(but make sure to put spacing between subsequent content sections on rail)*/
    padding-top: 30px;
}

.rail.extra-margin .caption {
    padding-right: 0;
    /*produces exactly 126px content width to match mylan.com*/
}

.rail .caption .btn {
    position: relative;
    left: -2px;
}

/*to retrofit enough flexibility to match the existing designs...
    here are two additional component properties for rail, allowing us to disable the top and bottom margin/padding */
.rail.no-bottom-pad {
    margin-bottom: 0;
}

.rail.no-bottom-pad > .inner {
    padding-bottom: 0;
}

.rail.no-top-pad > .inner {
    padding-top: 0;
}
/*if they have both no top and no bottom pad, safe to assume it's for a sub-headline... */
.rail.no-top-pad.no-bottom-pad > .inner {
    padding-right: 0;
}
/*see about us page...*/
.rail.no-top-pad.no-bottom-pad .sub-headline .divider {
    margin-bottom: 14px;
}

/*4/17/2015 new rail option for narrow content (to accomodate background image) */
.rail.narrow-content > .inner {
    padding-top: 30px;
    padding-bottom: 20px;
}

.rail.narrow-content .content-section .caption {
    max-width: 100px;
}

/*override relative positioning just here - to prevent icon from wrapping due to extremely narrow content area*/
.rail.narrow-content .content-section .caption a.icon-link.popout span,
.rail.narrow-content .content-section .caption a.has-popout-icon span {
    position: relative;
}

.rail.narrow-content .content-section .caption a.icon-link.popout span:after,
.rail.narrow-content .content-section .caption a.has-popout-icon span:after {
    position: absolute;
    right: -19px;
    top: 0px;
}

/*4/17/2015 new container-with-rail wider-rail option */
.container-with-rail.wider-rail > .grid > .col.col-2of3.left {
    width: 67.5%;
}

.container-with-rail.wider-rail > .grid > .left > .inner {
    padding-right: 10px;
}

.container-with-rail.wider-rail > .grid > .col.col-1of3.right {
    width: 32.5%;
}

.container-with-rail.wider-rail > .grid > .col.col-1of3.right .rail.grey > .inner {
    padding-left: 13px;
}

/* ---- THE ALL-IMPORTANT MAX WITH DECLARATION ---- */
.container-full.padded-content, .container-with-rail.padded-content {
    max-width: 640px;
}

.home .container-full.padded-content, .home .container-with-rail.padded-content {
    max-width: none;
}
/* =================== END GLOBAL PAGE LAYOUT STYLES =================== */

/* =================== 5. COMPONENTS =================== */
/* --- NAVIGATION --- */
.nav-module {
    position: relative;
    top: -50px;
    z-index: 5;
    background: #F7F7F7;
}

.nav-module .logo {
    position: relative;
}

.nav-module .logo > a > img {
    width: 100%;
    height: auto;
}

.nav-list {
    display: none;
}

.nav-list > li {
    padding-left: 0;
}

.nav-list > li:before {
    display: none;
}

.nav-list > li > a {
    font-size: 13px;
    display: block;
    min-height: 42px;
    width: 100%;
    position: relative;
    /*border-top: 1px solid white;*/
    background-color: #f7f7f7;
    background-image: url('/-/media/gwmp/images/ui/nav_spritesheet.png');
    background-repeat: no-repeat;
    background-position: 10px -82px;
}

.nav-list > li > a, .nav-list > li > a:hover {
    text-decoration: none;
}

.nav-list > li > a > span {
    font-size: 13px;
    text-decoration: none;
    color: #666;
    line-height: 1.2;
}

.nav-list > li > a:hover {
    background-color: #E2E2E2;
    /*border-top: 1px solid #E2E2E2;*/
    background-position: 6px -245px;
}

.nav-toggle {
    display: block;
    height: 41px;
    width: 35px;
    float: left;
    background: none;
    cursor: pointer;
}

.nav-link {
    display: block;
    padding-top: 12px;
    padding-right: 5px;
}

/*hide arrow if there's no child*/
.nav-activator.no-child {
    background-image: none;
}

.nav-activator.no-child .nav-toggle {
    display: none;
}

.nav-activator.no-child .nav-link {
    margin-left: 35px;
}

/*level 1*/
.nav-list.lvl-1 {
    display: block;
}

.nav-activator.lvl-1 {
    background: #222222;
    height: 46px;
    display: none; /* "MENU" button */
}

.nav-activator.lvl-1 a span {
    color: #fff;
}

.nav-activator.lvl-1:before {
    background-color: #F0F0F0;
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #D7D7D7;
    content: " ";
    display: block;
    height: 1px;
}

.nav-activator.lvl-1:hover {
    background: #888888;
    text-decoration: none;
}

/*level 2*/
.nav-activator.lvl-2:before {
    content: " ";
    display: block;
    height: 3px;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #fff;
    background-color: #f0f0f0;
}

.nav-activator.lvl-2 {
    min-height: 32px;
    padding-bottom: 12px;
}

.nav-activator.lvl-2.active {
    background-color: #292C31;
    background-position: 8px -128px;
    border-bottom: 1px solid #202225;
    padding-bottom: 13px;
}

.nav-activator.lvl-2.active > .nav-link {
    color: #fff;
    padding-right: 18px;
}

.nav-activator.lvl-2.active > .nav-toggle {
}

.nav-activator.lvl-2.current:after {
    content: "";
    display: block;
    width: 15px;
    height: 42px;
    right: 0;
    top: 50%;
    margin-top: -18px;
    position: absolute;
    background-image: url('/-/media/gwmp/images/ui/icomarkernav.png');
}

.nav-list.lvl-2 > li > a {
    background-image: none;
    background-color: #33353A;
    border-bottom: 1px solid #202225;
    border-top: 1px solid #42454e;
}

.nav-list.lvl-2 > li > a span {
    color: #fff;
}

.nav-list.lvl-2 > li > a:hover {
    background-color: #1f2226;
}

.nav-list.lvl-2 > li > a > .nav-link {
    padding: 12px 16px 11px 35px;
    line-height: 1.4;
}

.nav-list.lvl-2.active > li > a.current {
    background-color: #191919;
}

.nav-list.lvl-2.active > li > a.current:after {
    content: " ";
    width: 15px;
    height: 100%;
    right: 0;
    top: 1px;
    position: absolute;
    background-image: url('/-/media/gwmp/images/ui/icomarkernav.png');
    background-position: center;
    background-repeat: no-repeat;
}

/*level 3*/
.nav-list.lvl-3 {
    display: block;
}

.nav-list.lvl-3 > li > a {
    background-image: none;
    background-color: #33353A;
    color: #fff;
    border-bottom: 1px solid #202225;
    border-top: 1px solid #42454e;
}

.nav-list.lvl-3 > li > a:hover {
    background-color: #1f2226;
}

.nav-list.lvl-3.active > li > a.current {
    background-color: #191919;
}

.nav-list.lvl-3 > li > a > .nav-link {
    padding: 11px 16px 11px 56px;
    line-height: 1.4;
    color: #fff;
}

.nav-list.lvl-3.active > li > a.current:after {
    content: " ";
    width: 15px;
    height: 100%;
    right: 0;
    top: 1px;
    position: absolute;
    background-image: url('/-/media/gwmp/images/ui/icomarkernav.png');
    background-position: center;
    background-repeat: no-repeat;
}

.nav-list.lvl-1:after {
    content: " ";
    display: block;
    height: 3px;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #fff;
    background-color: #f0f0f0;
}

/*Plus resources navigation submenu*/
.plus-resources {
    padding-top: 2px; /*why?*/
    position: relative;
    background: #f7f7f7;
    background: -moz-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%);
    background: -o-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%);
    background: linear-gradient(to bottom, #f7f7f7 0%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 );
}

.plus-resources .extra-text {
    text-decoration: none;
    color: #00bce6;
    font-size: 10px;
    position: relative;
    top: -19px;
    padding-left: 14%;
    line-height: 1.2;
    display: block;
}

.plus-resources a:hover {
    text-decoration: none;
}

.plus-resources img {
    width: 100%;
}

.plus-resources:hover {
    background: #f7f7f7;
    text-decoration: none;
}

.plus-resources.active, .plus-resources.active:hover {
    background: #292c31;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292c31', endColorstr='#292c31',GradientType=0 );
}

.plus-resources.active .extra-text {
    color: #fff;
}

.plus-resources.current > a:after {
    content: url("/-/media/gwmp/images/ui/icomarkernav.png");
    height: 42px;
    position: absolute;
    right: 0;
    top: 27px;
    width: 15px;
}

.plus-resources .nav-list.lvl-2.active > li > a.current {
    background-color: #33353A;
}

.plus-resources .nav-list.lvl-2.active > li > a:hover {
    background-color: #191919;
}

.plus-resources .nav-list.lvl-2 {
    /*hide resources nav list from desktop...*/
    display: none;
}

.plus-resources.active .nav-list.lvl-2 {
    /*...unless we are in the PR section*/
    display: block;
}

.plus-resources .normal {
    display: block;
}

.plus-resources .inverted {
    display: none;
}

.plus-resources.active .normal {
    display: none;
}

.plus-resources.active .inverted {
    display: block;
}

/*bottom nav shadow*/
nav.nav:after {
    content: " ";
    width: 100%;
    height: 4px;
    position: absolute;
    display: block;
    bottom: -4px;
    background-image: url('/-/media/gwmp/images/ui/shadow.png');
    background-repeat: repeat-x;
}

/* home page overrides - home page only */
.home .nav.grid {
    position: absolute;
    top: 0;
    left: 0;
}

.home .nav-module { /*nav is not part of page flow on home*/
    top: 0;
}

.home .nav-list.lvl-1 {
    display: none;
}

.home .nav-activator.lvl-1 {
    /*only appears on home page*/
    display: block;
}

.home .nav-activator.lvl-1 span {
    display: block;
    margin: 0 auto;
    padding-left: 20px;
    position: relative;
    width: 100px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding-top: 13px;
    color: #fff;
}

.home .nav-activator:hover span {
    text-decoration: none;
}

.home .nav-activator.lvl-1 span:before {
    content: " ";
    background: url('/-/media/gwmp/images/ui/nav_spritesheet.png');
    display: block;
    width: 20px;
    height: 30px;
    position: absolute;
    background-position: 0 -227px;
    left: 20px;
    top: 10px;
}

.nav-list.active, .nav-list.lvl-1.active {
    display: block;
}

/*the NEWS section of the navigation has color coding*/
.nav-list.lvl-2.active > li.red, .nav-list.lvl-2.active > li.purple, .nav-list.lvl-2.active > li.green, .nav-list.lvl-2.active > li.orange {
    box-sizing: border-box;
}

.nav-list.lvl-2.active > li.red {
    border-left: 5px solid #EC3358;
}

.nav-list.lvl-2.active > li.purple {
    border-left: 5px solid #6E57A4;
}

.nav-list.lvl-2.active > li.green {
    border-left: 5px solid #C3D940;
}

.nav-list.lvl-2.active > li.orange {
    border-left: 5px solid #F57F22;
}


.nav-list.lvl-2.active > li.blue {
    border-left: 5px solid #00b5e6;
}


/* --- END NAVIGATION --- */

/*---- COOKIE WARNING ----*/
.cookie-warning {
    display: none;
    position: fixed;
    height: 175px;
    top: 0;
    background: #ededed;
    z-index: 7;
    width: 100%;
}

.cookie-warning .inner {
    padding: 28px 0 20px 20px;
    max-width: 920px;
    position: relative;
}

.cookie-warning .scrollable {
    padding-right: 20px;
    height: 85px;
    overflow-y: auto;
}

.cookie-warning .scrollable p + p {
    padding-top: 10px;
}

.cookie-warning .close {
    position: absolute;
    right: 37px;
    top: 7px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
    color: #757575;
    font-size: 14px;
    cursor: pointer;
}

.cookie-warning .close > span {
    position: relative;
}

.cookie-warning .close > span:after {
    content: url('/-/media/gwmp/images/ui/modalclose.png');
    height: 26px;
    width: 28px;
    position: absolute;
    top: -5px;
    right: -35px;
}

.cookie-warning p, .cookie-warning a {
    font-size: 12px;
}

.cookie-warning h1 {
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 8px;
}

.cookie-warning .choices {
    padding-top: 10px;
    /*MUST specify height because of the fixed positioning and requirement to not scroll.*/
    height: 40px;
}

.cookie-warning .choices > a {
    display: inline-block;
    max-width: 50%;
    vertical-align: middle;
    margin-right: 10px;
}

.cookie-warning .choices .btn {
    display: inline-block;
}

/* ----- HEADER BAR ----- */
section.header {
    height: 55px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4;
    background: url('/-/media/gwmp/images/ui/bgheader.png') repeat-x scroll 0 -61px;
}

.header-divider {
    background: url('/-/media/gwmp/images/ui/bgheader.png') no-repeat scroll right bottom;
}

.header > .grid {
    padding-top: 5px;
    height: 43px;
}

.header.scrolled {
    z-index: 6;
}

.header .logo {
    position: relative;
    z-index: 6;
    height: 100%;
    text-align: center;
}

.header .logo img {
}

.header.scrolled .logo {
    z-index: 6;
}

.header.scrolled .logo img.desktopOnly {
    margin-left: -10px;
    /*slight adjustment*/
}

.header-menu {
    position: relative;
    height: 100%;
}

.header.scrolled .header-menu:before {
    display: none;
}

.header-menu:before {
    content: " ";
    background: url('/-/media/gwmp/images/ui/bgheader.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 55px;
    width: 7px;
    position: absolute;
    left: -5px;
    top: -5px;
}

.header-menu > .inner {
    padding-left: 149px;
    position: relative;
    padding-right: 14px;
    height: 100%;
}

/*--- LANGUAGE SELECT MODULE ---*/
.language-select-module {
    width: 132px;
    height: 43px;
    /*float: left;*/
    position: absolute;
    left: 0;
    cursor: pointer;
}

.language-select-module .flag {
    height: 25px;
    width: 25px;
    position: absolute;
    top: 8px;
    left: 18px;
}

.language-select-module .lang {
    position: relative;
    left: 50px;
    top: 10px;
    color: #666666;
    font-size: 15px;
}

.language-select-module .lang:after {
    content: url('/-/media/gwmp/images/ui/icolangarrow.png');
    position: absolute;
    width: 21px;
    height: 14px;
    right: -37px;
    top: 0px;
}
/* language select flyout */
.language-flyout {
    /*this is included within the header language button component, however, when the js fires to open it, the js will also move it higher up in the html structure.*/
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 10;
}

.language-flyout > .flyout.grid > .col-1of4 {
    line-height: 0;
    height: 16px;
}

.language-flyout .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10;
    opacity: .5;
}

.language-flyout .flyout.grid {
    position: relative;
    z-index: 11;
    height: 100%;
}

.language-flyout .col-3of4 {
    position: relative;
    height: 100%;
}

.language-flyout .tab {
    display: block;
    height: 50px;
    width: 125px;
    position: absolute;
    left: 0px;
    z-index: 12;
    background: #fcfcfc;
    cursor: pointer;
}

.language-flyout .tab .flag {
    height: 25px;
    width: 25px;
    position: absolute;
    top: 13px;
    left: 18px;
}

.language-flyout .tab .lang {
    position: relative;
    left: 50px;
    top: 15px;
    color: #666666;
    font-size: 15px;
}

.language-flyout .tab .lang:after {
    content: url('/-/media/gwmp/images/ui/icolangarrow.png');
    position: absolute;
    width: 21px;
    height: 13px;
    right: -37px;
    top: 0px;
}

.language-flyout .pane {
    position: fixed;
    width: 72.5%;
    max-width: 710px;
    top: 50px;
    bottom: 20px;
    box-shadow: -2px 2px 25px rgba(0,0,0,.25);
    background: #eeeeee;
}

.language-flyout .pane > .inner {
    background: #fff;
    position: absolute;
    bottom: 20px;
    top: 85px;
    right: 5.65%;
    left: 5.65%;
    padding-top: 40px;
    overflow: auto;
}

.language-flyout .pane .title {
    /*height: 85px;*/
    padding-bottom: 10px;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #eeeeee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fcfcfc 0%,#eeeeee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fcfcfc 0%,#eeeeee 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fcfcfc 0%,#eeeeee 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

.language-flyout .pane .title > .logo {
    background-image: url('/-/media/gwmp/images/ui/logo_m_sm_ur_np.png');
    height: 25px;
    width: 25px;
    display: inline-block;
    margin-left: 5.65%;
    margin-top: 22px;
}

.language-flyout .pane .title > h1 {
    font-weight: bold;
    font-size: 24px;
    color: #333;
    display: inline-block;
    margin-left: 14px;
}

.language-flyout .close {
    float: right;
    margin-right: 90px;
    margin-top: 32px;
    font-weight: bold;
    text-decoration: underline;
    color: #757575;
    font-size: 14px;
    cursor: pointer;
}

.language-flyout .close > span {
    position: relative;
}

.language-flyout .close > span:after {
    content: url('/-/media/gwmp/images/ui/modalclose.png');
    height: 26px;
    width: 28px;
    position: absolute;
    top: -5px;
    right: -35px;
}

.language-flyout .pane > .inner > p {
    padding: 0px 20px 0px 40px;
    font-size: 14px;
    color: #666666;
}

/*TODO: Child selector (>) */
.country-list li {
    border-bottom: 1px solid #ededed;
    padding: 20px 20px 0px 40px;
}
/*override default list styles*/
.country-list li:before {
    display: none;
}

.country-list > li > h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    width: 110px;
    display: inline-block;
    vertical-align: top;
    padding-top: 7px;
}

.country-list > li > ol, .country-list > li > ol > li > ol {
    display: inline-block;
}

.country-list .country-name, .country-list > li > ol > li > ol > li > a {
    display: inline-block;
    vertical-align: middle;
    min-height: 38px;
    font-size: 14px;
}

.country-list .country-name {
    color: #666666;
    width: 124px;
    padding-left: 10px;
}

.country-list > li > ol > li > ol > li {
    display: inline-block;
}

/*TODO: Child selector (>) */
.country-list li li {
    border: none;
    padding-top: 0;
    padding-left: 0;
}
/*
 .country-list > li > ol > li > ol > li + li {
 padding-left: 20px;
 }
 */
.country-list > li > ol > li > ol > li > a:hover {
    text-decoration: none;
}

.country-list .country {
    display: inline-block;
}

.other-locations {
    padding: 30px 0;
}

.other-locations > p {
    padding: 0px 20px 20px 40px;
    font-size: 14px;
    color: #666666;
}

.other-locations > .inner {
    padding-left: 154px;
}

.other-locations ol > li {
    min-height: 46px;
}

/*override default list styles*/
/*TODO child selector*/
.other-locations li {
    padding-left: 0;
}

.other-locations li:before {
    display: none;
}

.other-locations ol > li > span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    vertical-align: top;
    padding: 10px 0 0 14px;
}

.country-list > li:first-child > ol {
    padding-top: 10px;
}
/*end language select flyout and module*/

/*---- SEARCH MODULE ----*/
.search-module {
    /*box-sizing: border-box;*/
    height: 38px;
    width: 100%;
    position: relative;
}

.search-module .inner {
    background: url('/-/media/gwmp/images/ui/headersearchsprite.png');
    background-position: 0 -42px;
    background-repeat: repeat-x;
    width: 100%;
    height: 100%;
}

.search-module .inner:before {
    content: " ";
    background: url('/-/media/gwmp/images/ui/headersearchsprite.png');
    width: 9px;
    height: 100%;
    position: absolute;
    left: -9px;
    top: 0;
}

.search-module .inner:after {
    content: " ";
    background: url('/-/media/gwmp/images/ui/headersearchsprite.png');
    width: 9px;
    height: 100%;
    position: absolute;
    background-position: 9px -84px;
    right: -4px;
    top: 0;
}

.search-module form {
    width: 100%;
}

.search {
    width: 100%;
}

.search-module .search input {
    width: inherit;
    display: inline-block;
    background: none;
    font-size: 13px;
    color: #000;
    line-height: 16px;
    position: relative;
    top: 10px;
    height: auto;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    border: none;
    outline: none;
}

.search-module .search input.placeholder-text {
    color: #666;
}

.search-module .submit {
    position: absolute;
    right: 8px;
    top: 8px;
    background-image: url('/-/media/gwmp/images/ui/headersearchsprite.png');
    height: 20px;
    width: 20px;
    background-position: 0 -126px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.search-module .submit input {
    width: 20px;
    cursor: pointer;
    opacity: 0;
}
/*search placeholder text hack for ie8 and 9*/
.search-module .ie8-ie9-only {
    display: none;
}

.lt-ie10 .search-module .ie8-ie9-only {
    display: block;
    position: absolute;
    top: 12px;
    z-index: 0;
}

.lt-ie10 .search-module input {
    position: relative;
    z-index: 1;
}

/* --- FOOTER --- */
/* requires overriding/breaking the grid, and other hacks due to layout quirks */
.global-footer {
    margin-top: 80px;
}

.global-footer > .grid > .col-1of4 {
    max-width: 240px;
    float: right; /*has to be floated right so it can be placed between sitemap and legal in the HTML - mobile state collapses into one column */
}

.global-footer > .grid > .col-3of4 > .inner {
    padding: 0 0 0 40px;
    margin-right: 5px;
}

.global-footer > .grid > .col-3of4 > .inner > .border {
    border-top: 1px solid #e2e2e2;
    max-width: 680px;
    height: 39px;
    margin-left: -40px;
}

.sitemap.grid {
    max-width: 640px;
}

.sitemap-block {
    max-width: 162px;
    width: 85%; /*they need to shrink slightly when scaling to keep space in between*/
    display: inline-block; /*this is for the left-center-right hack, below*/
    text-align: left;
}

/*section landing page links*/
.sitemap-block > a {
    font-weight: bold;
    position: relative;
    font-size: 14px;
}

.sitemap-block > a > span {
    color: #333;
}

.sitemap-block > a > span:after {
    content: " ";
    background-image: url('/-/media/gwmp/images/ui/icofootersprite.png');
    height: 13px;
    width: 10px;
    background-position: 0 -24px;
    display: inline-block;
    position: relative;
    right: -5px;
    top: 2px;
}

.sitemap-divider {
    height: 4px;
    width: 100%;
    background: #dddddd;
    margin-top: 10px;
    margin-bottom: 10px;
}

.sitemap-divider span {
    height: 4px;
    display: block;
    width: 60px;
    background: #00BBE4;
}

/*section sub page links*/
.sitemap-block > ul {
    padding-bottom: 70px;
}

.sitemap-block > ul > li {
    padding-bottom: 8px;
}

/*override default list styles*/
.sitemap-block > ul > li {
    padding-left: 0;
}

.sitemap-block > ul > li:before {
    display: none;
}

.sitemap-block li > a {
    position: relative;
    font-size: 14px;
    line-height: 1.46;
}

.sitemap-block li > a > span {
    color: #333;
}

.sitemap-block li > a > span:after {
    content: " ";
    background-image: url('/-/media/gwmp/images/ui/icofootersprite.png');
    height: 13px;
    width: 10px;
    background-position: 0 -24px;
    display: inline-block;
    position: relative;
    right: -5px;
    top: 2px;
}

/*sitemap columns must be nested under sitemap grids in groups of 3*/
.sitemap.grid > .col-1of3 {
    text-align: left;
}

.sitemap.grid > .col-1of3 + .col-1of3 {
    text-align: center;
}

.sitemap.grid > .col-1of3 + .col-1of3 + .col-1of3 {
    text-align: right;
}

/*footer right-hand rail*/
.footer-rail {
    max-width: 200px;
    background: #F2F2F2;
    border-top: 4px solid #00BBE4;
    margin-bottom: 100px;
}

.footer-rail .inner {
    padding: 20px 14px 25px 16px;
    border-bottom: 4px solid #00BBE4;
}

.footer-rail > .inner > img.logo {
    width: 77px;
    height: 34px;
    margin-bottom: 10px;
}

/*TODO child selector*/
.footer-rail li {
    position: relative;
    padding-left: 35px;
}

.footer-rail li .icon {
    height: 29px;
    width: 25px;
    position: absolute;
    left: 0;
    top: 0;
}

.footer-rail ul {
    margin-top: 18px;
}

.footer-rail li h2 {
    font-weight: bold;
    font-size: 14px;
    color: #333333;
    line-height: 1.5;
}

.footer-rail p {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
}

.footer-rail .btn {
    width: 94%;
    margin-left: 2px;
    margin-top: 16px;
}

.footer-rail .btn a {
    padding: 13px;
    display: block;
    text-align: center;
}

.footer-rail .btn span {
    position: relative;
    font-size: 14px;
    left: -5px;
    display: block;
    line-height: 1;
}

.footer-rail .btn span:after {
    content: " ";
    background-image: url('/-/media/gwmp/images/ui/icofootersprite.png');
    height: 10px;
    width: 6px;
    background-position: 0 -37px;
    display: inline-block;
}

.footer-rail .caption {
    padding-bottom: 0;
}

/*override default list styles*/
.footer-rail li:before {
    display: none;
}

/*footer legal section*/
.global-footer .legal {
    padding-left: 40px;
    padding-right: 5px;
    max-width: 640px;
    margin-bottom: 40px;
}

.global-footer .legal .logo {
    width: 186px;
    height: 165px;
    float: left;
    display: block;
    /*background-image: url('../images/logo-small.png');
	 background-repeat: no-repeat;*/
}

.global-footer .legal .right {
    /*float: right;
	 padding-left: 196px;*/
}

/*TODO child selector*/
.global-footer .legal .links li {
    display: inline-block;
    padding-right: 4px;
    font-size: 14px;
}

.global-footer .legal .links li + li {
    border-left: 1px solid #666;
    padding-left: 7px;
}

.global-footer .legal p {
    color: #666;
    font-size: 14px;
    padding: 6px 0 0 0;
    line-height: 1.25;
    margin-bottom: 0;
}

.global-footer .legal a.uparrow {
    cursor: pointer;
    /* ^^ not sure why this is necessary*/
    margin-bottom: 5px;
    display: inline-block;
}

.global-footer .legal a.uparrow:after {
    content: " ";
    background-image: url('/-/media/gwmp/images/ui/icofootersprite.png');
    height: 8px;
    width: 12px;
    background-position: 0 -60px;
    display: inline-block;
    position: relative;
    right: -5px;
    top: -2px;
}

/* 4/20/2015 2x logo image */
.global-footer .legal .logo img {
    max-width: 144px;
}

/* ---- END GLOBAL FOOTER ---- */
/* ============== END GLOBAL COMPONENTS =============== */

/* ============== BEGIN INDIVIDUAL COMPONENTS ============== */
/* ---- tabbed-interface ---- */
.tabs {
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 25px;
    position: relative;
}

.tabs > .tab {
    display: inline;
}

.tabs > li.tab {
    padding-left: 0;
}

.tabs > li.tab:before {
    display: none;
}

.tabs > .tab > h3 {
    display: inline-block;
    z-index: 1;
    margin: 0 -2px -1px 0;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    background: #f9f9f9;
    background: -moz-linear-gradient(top, #f9f9f9 0%, #ececec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ececec));
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#ececec 100%);
    background: -o-linear-gradient(top, #f9f9f9 0%,#ececec 100%);
    background: -ms-linear-gradient(top, #f9f9f9 0%,#ececec 100%);
    background: linear-gradient(to bottom, #f9f9f9 0%,#ececec 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ececec',GradientType=0 );
}

.tabs > .tab > h3 > a {
    padding: 16px 40px 17px;
    display: block;
    color: #666;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.tabs .tab.active > h3, .tabs .tab:hover > h3 {
    background: #fff;
    border-bottom: 1px solid #fff;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}

.pane .state {
    display: none;
}

.pane .state.active {
    display: block;
}

/* ---- Dividers (appear beneath headlines and sub-headlines) ---- */
.divider {
    height: 7px;
    background: #f1f1f1;
    border-top: 1px solid #c4c4c4;
    width: 100%;
}

/* ---- MAIN PAGE HEADLINE ---- */
.page-headline {
    padding-bottom: 30px;
    padding-top: 31px;
}

.page-headline h1 {
    color: #333;
    font-size: 30px;
    font-weight: bold;
    padding: 0 0 16px 0;
    line-height: 1.2;
}

.page-headline .divider.red, .page-headline .divider.purple, .page-headline .divider.green, .page-headline .divider.orange {
    width: 100%;
    height: 5px;
    /*max-width: 640px;*/
    position: relative;
    bottom: -1px;
    border: none;
}

.page-headline .divider.red {
    background-color: #EC3358;
}

.page-headline .divider.purple {
    background-color: #6E57A4;
}

.page-headline .divider.green {
    background-color: #C3D940;
}

.page-headline .divider.orange {
    background-color: #F57F22;
}

.page-headline.has-highlight h1 {
    padding: 0 0 11px;
}
/*added h2 field for product detail pages*/
.page-headline h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-top: -16px;
    padding-bottom: 14px;
}

/*reduce top padding if preceeded by breadcrumbs*/
.breadcrumbs + .page-headline {
    padding-top: 10px;
}

/* ---- sub-headlines ---- */
.sub-headline h2 {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    line-height: normal;
    padding-bottom: 12px; /*only applied if divider is absent*/
}
/*sometimes a div has been placed inside a subheadline, to allow for anchor linking*/
/*(the correct implementation would have been to use <span> but it's too late now)*/
.sub-headline h2 > div {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    line-height: normal;
}

.sub-headline .opt-link {
    text-align: right;
}

.sub-headline .opt-link a {
    font-size: 11px;
    line-height: normal;
}

.sub-headline .opt-link a:hover {
    text-decoration: underline;
}

.sub-headline .divider {
    position: relative;
    margin: 16px 0;
}

.sub-headline .divider.red, .sub-headline .divider.purple, .sub-headline .divider.green, .sub-headline .divider.orange, .sub-headline .divider.blue {
    border-top: none;
    border-bottom: 1px solid #ddd;
    background: none;
    height: 5px;
}

.sub-headline .divider > div {
    height: 5px;
    width: 81px;
    position: absolute;
    top: 1px;
}

.sub-headline .divider.red > div {
    background: #EC3358;
}

.sub-headline .divider.purple > div {
    background: #6E57A4;
}

.sub-headline .divider.green > div {
    background: #C3D940;
}

.sub-headline .divider.orange > div {
    background: #F57F22;
}

.sub-headline .divider.blue > div {
    background: #00bbe7;
}

/*divider appears different when sub-headline is on the rail*/
.container-with-rail .right .sub-headline .divider > div {
    width: 41px;
}
/*some sub-headlines on rail have additional left-padding for no apparent reason, if we need to accomodate this, just add the .extra-margin class. */
.sub-headline.extra-margin {
    margin-left: 20px;
}
/*hide optional stuff by default!*/
.sub-headline .divider, .sub-headline .opt-link {
    display: none;
}

.sub-headline.has-divider .divider, .sub-headline.has-opt-link .opt-link {
    display: block;
}

.sub-headline.has-opt-link h2 {
    float: left;
}

.sub-headline .opt-link a {
    display: inline-block;
}

.sub-headline.has-divider h2 {
    padding-bottom: 0;
}

/* ---- hero image ---- */
.hero-image {
    position: relative;
    max-width: 680px;
    line-height: 0;
    margin-bottom: 16px;
}

.hero-image img {
    width: 100%;
    height: auto;
}

.hero-image-overlay {
    background: none repeat scroll 0 0 #00b1dd;
    bottom: 0;
    content: "";
    height: 28%;
    left: 0;
    opacity: 0.85;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.hero-image-stripes {
    background: url('/-/media/gwmp/images/ui/bluediagloop.png');
    width: 2000px;
    height: 28%;
    position: absolute;
    bottom: -7px;
    z-index: -1;
}

.hero-image .opt-supplemental-image img {
    position: absolute;
    height: 100%;
    width: auto;
    left: 0;
    top: 0;
    z-index: 3;
}

/*if optional supplemental image is present, shift main image to the right*/
.hero-image.has-opt-image {
    text-align: right;
}

.hero-image.has-opt-image > img {
    width: 85%;
}

/*also, the overlay opacity is different on these, for no good reason.*/
.hero-image.has-opt-image .hero-image-overlay {
    opacity: 0.63;
}

/* ---- filters - appear on press release landing page, feature story landing page, etc. ---- */
.filters {
    padding-top: 3px;
    color: #666;
    padding-bottom: 32px;
    /*filters does not always have a borderborder-bottom: 1px solid #E2E2E2;*/
}

.filters label {
    font-weight: normal;
}

.filters > ul {
    display: inline-block;
}

.filters > ul > li {
    display: inline-block;
    font-size: 14px;
    margin-right: 15px;
    /*override default list styles*/
    padding-left: 0;
}

.filters > ul > li:before {
    display: none;
}

.filters > span {
    display: inline-block;
    font-weight: bold;
    padding-right: 25px;
    font-size: 14px;
    position: relative;
    vertical-align: top;
}

/* ---- pagination ---- */
.pagination {
    text-align: center;
    margin: 30px 0;
}

.pagination .prev, .pagination .next {
    display: inline-block;
    width: 55px;
    height: 51px;
    cursor: pointer;
}

.pagination .prev > a, .pagination .next > a {
    display: block;
    height: 100%;
    width: 100%;
}

.pagination .prev {
    margin-right: 15px;
    background-image: url('/-/media/gwmp/images/ui/paginationsprite.png');
}

.pagination .prev.disabled {
    background-image: url('/-/media/gwmp/images/ui/paginationsprite.png');
    background-position: 0 -53px;
    cursor: auto;
}

.pagination .next {
    margin-left: 15px;
    background-image: url('/-/media/gwmp/images/ui/paginationsprite.png');
    background-position: 0 -106px;
}

.pagination .next.disabled {
    background-image: url('/-/media/gwmp/images/ui/paginationsprite.png');
    background-position: 0 -159px;
    cursor: auto;
}

.pagination .page {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    padding-top: 15px;
    width: 26px;
}

.pagination .page a {
    font-size: 16px;
}

.pagination .page a:hover {
    text-decoration: none;
}

.pagination .page.current a, .pagination .page.current a:visited {
    color: #FFB901;
}

/* ---- Featured Stories ---- */
.feature-story {
    padding: 25px 0;
    border-bottom: 1px solid #e2e2e2;
    display: table;
    position: relative;
}

.feature-story .thumb {
    width: 45%;
    display: table-cell;
    position: relative;
}

.feature-story .thumb a {
    position: relative;
    display: block;
}

.feature-story .thumb a img {
    width: 100%;
    height: auto;
}

.feature-story .thumb a img.thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
}

.feature-story .thumb > a > img.vid-thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
}

.feature-story .desc {
    width: 55%;
    padding: 3px 10px 0 10px;
    display: table-cell;
    vertical-align: top;
}

.feature-story .desc h3 {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 12px;
}

.feature-story .desc p {
    padding: 0;
    margin: 0;
}

.feature-story .desc a {
    font-size: 14px;
    padding: 0;
    margin: 0;
}

.feature-stories-list {
    border-top: 1px solid #e2e2e2;
}

/*TODO child selector*/
.feature-stories-list li {
    padding-left: 0;
}

.feature-stories-list li:before {
    display: none;
}

/*found in the rendering...*/
.featured-story-headline-image {
    max-width: 100%;
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

/*Featured story individual article pages use the class "featured-story" (note the "d")
    UPDATE - markup fixed, related items list is no longer in the .caption. CSS no longer needed.
.featured-story .related-items-list {
    margin-top: 20px;
}
     */

/*featured story caption has non-standard bottom padding on mylan.com (20px) */
.featured-story > .caption {
    padding-bottom: 20px;
}

/* ---- press release article view ---- */
.press-release.col .inner {
    padding: 30px 0 0 40px;
}

.press-release .date {
    color: #666;
    position: relative;
    top: 30px;
    padding-bottom: 10px;
}

.press-release .page-headline {
    padding-top: 5px;
}

.press-release > .article-body > p > img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.press-release h3 {
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    margin-top: 20px;
}

.press-release h4 {
    text-decoration: underline;
    font-weight: bold;
    font-size: 16px;
    color: #000000;
    margin-top: 20px;
}

.press-release h5 {
    font-weight: bold;
    font-size: 14px;
    color: #000000;
    margin: 20px 0;
}

.press-release img {
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 20px 0;
}

.press-release .print-icon {
    position: relative;
    top: -18px;
    margin-right: 30px;
}

.press-release .print-icon a:hover,
.press-release .print-icon a span:hover {
    text-decoration: none;
}

.press-release .print-icon a span,
.press-release .print-icon a:visited span {
    color: #333;
}

.press-release .print-icon a span:after {
    content: url('/-/media/gwmp/images/ui/ico_print.png');
    position: absolute;
    width: 21px;
    height: 14px;
    right: -27px;
    top: -1px;
}

.press-release .article-body .caption {
    padding-bottom: 20px;
}

.press-release .topic-section {
    padding-bottom: 20px;
}
/* ---- press releases list ---- */
.press-releases .filters > span {
    position: relative;
    top: 7px;
}

.press-releases-list .topic + .topic > span {
    border-left: 1px solid #aaa;
    margin-left: 5px;
    padding-left: 7px;
}

.press-releases-list .title {
    line-height: 1.25;
}

/*TODO child selector*/
.press-releases-list li {
    padding-left: 0;
}

.press-releases-list li:before {
    display: none;
}

.press-release-list-item {
    padding-top: 25px;
    display: table;
    width: 100%;
    color: #666;
    font-size: 14px;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 22px;
}

.press-release-list-item .left {
    display: table-cell;
    width: 20%;
}

.press-release-list-item .right {
    display: table-cell;
    width: 80%;
    padding: 0 10px;
}

.press-release-list-item .topics {
    padding-top: 16px;
}

/*TEMP disabled pending approval for global change...
.press-release-list-item .title > a > span {
    position: relative;
}
.press-release-list-item .title > a > span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 6px;
    background-position: 0 -37px;
    display: inline-block;
    position: absolute;
    right: -11px;
    bottom: 2px;    
}
*/

/*added for PRNEWSWIRE content...*/
.press-release .caption > div {
    overflow-x: auto;
}

.press-release .caption > div > table {
    margin: 20px 0;
}

.press-release .caption b {
    font-weight: bold;
    color: #000;
}

.press-release p.xn-dateline {
    margin-bottom: 20px;
}

/* ---- list-sorting bar ---- */
.sorting-bar {
    display: table;
    width: 100%;
    box-shadow: 0 5px 5px #b5b5b5;
    cursor: pointer;
}

.sorting-bar > div {
    display: table-cell;
    color: #fff;
    font-size: 14px;
    padding: 12px;
}

.sorting-bar > div > span {
    cursor: pointer;
}

.sorting-bar > div > span:after {
    display: inline-block;
    content: url('/-/media/gwmp/images/ui/sortbar_carat.png');
    height: 8px;
    width: 4px;
    margin-left: 10px;
    position: relative;
    top: -1px;
}

.sorting-bar > div.down > span:after {
    display: inline-block;
    content: url('/-/media/gwmp/images/ui/sortbar_carat_down.png');
    height: 6px;
    width: 9px;
    margin-left: 7px;
    position: relative;
    top: -2px;
}

.sorting-bar > div.up > span:after {
    display: inline-block;
    content: url('/-/media/gwmp/images/ui/sortbar_carat_up.png');
    height: 6px;
    width: 9px;
    margin-left: 7px;
    position: relative;
    top: -2px;
}

.sort-by-date {
    width: 20%;
    background: #222;
}

.sort-by-title {
    width: 80%;
    background: #222;
}

.sort-by-date.up, .sort-by-title.up, .sort-by-date.down, .sort-by-title.down {
    background: #5a5959;
}

/* ---- News/Events list (deprecated) ----
 .news-events-list {
 margin-top: -15px;
 }

 .no-events-message {
 color: #666;
 font-size: 14px;
 }

 .no-events-message.active {
 display: block;
 }

 .news-events-list-item {
 font-size: 14px;
 padding-bottom: 20px;
 line-height: 1.3;
 color: #666;
 border-bottom: 1px solid #e2e2e2;
 margin-top: 20px;
 }

 .news-events-list-item .left img {
 float: left;
 }

 .news-events-list-item .right {
 margin-left: 100px;
 }

 .news-events-list-item .right h3 {
 font-weight: bold;
 color: #333;
 }

 .news-events-list-item .location, .news-events-list-item .date {
 display: inline-block;
 }

 .news-events-list-item .location {
 padding-right: 7px;
 }

 .news-events-list-item .date {
 border-left: 1px solid #666;
 padding-left: 10px;
 }

 .news-events-list-item .link {
 margin: 10px 0;
 }
 */

/*Events List*/
.events-list {
}

.events-list .no-events-message {
    display: none;
    font-size: 14px;
}

.events-list .no-events-message.active {
    display: block;
}

.events-list-item {
    padding: 20px 0;
    border-bottom: 1px solid #e2e2e2;
}

.events-list-item .left {
    width: 80px;
    float: left;
    padding-right: 10px;
}

.events-list-item .left img {
    width: 100%;
    height: auto;
}

.events-list-item .right {
    margin-left: 90px;
    padding-left: 10px;
}

.events-list-item h3 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding-bottom: 2px;
}

.events-list-item .location-date span {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    color: #666;
    font-size: 14px;
}

.events-list-item .location-date span.location {
    padding-left: 0;
}

.events-list-item .location-date span.date {
    border-left: 1px solid #666;
}

.events-list-item .time, .events-list-item .details, .events-list-item .type, .events-list-item .topic {
    font-size: 14px;
    color: #666;
}

.events-list-item .location-date {
    margin-bottom: 12px;
}

.events-list-item .details, .events-list-item .type {
    margin-bottom: 20px;
}

.events-list-item .label {
    font-weight: bold;
    color: #000;
}

.events-list-item .topic .label {
    font-weight: normal;
    color: #666;
}

.events-list-item .topic a {
    font-size: 14px;
}

.events-list-item b {
    font-weight: bold;
    color: #000;
}

/*events summary http://www.mylan.com/investors */
.events-summary {
    padding-bottom: 50px;
}

.events-summary-item {
    padding-bottom: 20px;
}

.events-summary-item .left {
    width: 80px;
    float: left;
    padding-right: 10px;
}

.events-summary-item .left img {
    width: 100%;
    height: auto;
}

.events-summary-item .right {
    margin-left: 90px;
    padding-left: 10px;
}

.events-summary-item h3 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.events-summary-item .location-date {
    display: inline-block;
    margin-top: 3px;
}

.events-summary-item .location-date .location,
.events-summary-item .location-date .date {
    display: inline-block;
    height: 21px;
}

.events-summary-item .location-date .location:after {
    content: " ";
    display: inline-block;
    height: 21px;
    border-right: 1px solid #666;
    width: 8px;
    margin-right: 4px;
    vertical-align: middle;
}

/* ---- news feed for right column (see mylan.com news landing page) ----
 note - this may be deprecated in favor of the more recent news-summary-list.
 not sure if this is in use anywhere. 
.news-feed .link {
    font-weight: bold;
}

.news-feed .date {
    color: #555;
    padding-bottom: 20px;
}*/

/* ---- related items list, for the bottoms of articles ... example: http://www.mylan.com/news/press-releases/item?id=123237 ---- */
.related-items-list > .grid > .col.left > .inner {
    padding-right: 20px;
}

.related-items-list > .grid > .col.right > .inner {
    padding-left: 20px;
}
/*override default list styles*/
/*TODO child selector*/
.related-items-list li {
    padding-left: 0;
    padding-bottom: 3px;
}

.related-items-list li:before {
    display: none;
}

.related-items-list .divider {
    padding-left: 40px;
    margin-bottom: 30px;
}

/*Related Items list is inside the Feature Stories .caption div. This should not have been done. TODO: Try to fix the markup. 
    UPDATE: markup fixed, CSS no longer needed
.caption .related-items-list ul li {
    padding-left: 0;
}
    */
/* ---- "icon list" because I can't think of a good name for this thing http://www.mylan.com/company ---- */
.icon-list > .inner > ul > li {
    position: relative;
}

.icon-list > .inner > ul > li + li {
    margin-top: 18px;
}

.icon-list h4 {
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

.icon-list .caption {
    padding-bottom: 0;
}

/*TODO child selector*/
.icon-list li {
    padding-left: 0;
}

.icon-list li:before {
    display: none;
}

.icon-list .caption p {
    line-height: 1.25;
}

.rail .icon-list {
    padding-top: 8px;
}

.rail .icon-list > .inner > ul > li {
    padding-left: 18px;
}

.rail .icon-list .icon {
    position: absolute;
    top: -8px;
    left: -48px;
}

.rail .icon-list .caption,
.rail .icon-list .caption p {
    line-height: 1.5;
}

.container-full .icon-list {
    background: #f2f2f2;
    margin-left: 20px;
    margin-bottom: 30px;
    width: 100%;
    padding-right: 2000px;
}

.container-full .icon-list > .inner {
    padding: 30px 0 20px 40px;
}

.container-full .icon-list .icon {
    position: absolute;
    left: -68px;
    top: -8px;
}

.rail .icon-list .caption {
    /*padding-bottom: 10px;*/
}

/*3rd variation for when the icon list is placed in the left (main) column of container-with-rail: */
.container-with-rail > .grid > .left .icon-list {
    background: #f2f2f2;
    margin-bottom: 30px;
    width: 100%;
}

.container-with-rail > .grid > .left .icon-list .icon {
    position: absolute;
    left: -68px;
    top: -8px;
}

.container-with-rail > .grid > .left .icon-list > .inner {
    /*padding: 30px 0 20px 78px;*/
    padding: 30px 10px 20px 40px;
}

.container-with-rail > .grid > .left .icon-list:after {
    content: " ";
    display: block;
    background-color: white;
    background-image: url("/-/media/gwmp/images/ui/greendiagloop.png");
    background-position: 0 5px;
    background-repeat: repeat-x;
    height: 20px;
    width: 100%;
}

/* ---- Standard Callout - example http://www.mylan.com/products ---- */
.callout {
    margin-bottom: 30px;
}

.callout .left {
    float: left;
    width: 50%;
    max-width: 200px;
    height: 100%;
    line-height: 0;
}

.callout .left img {
    width: 100%;
    height: auto;
}

.callout .right {
    padding-left: 200px;
}

.callout .right > .inner {
    padding-left: 20px;
}

.callout h3, .callout h3 > a, .callout h3 > a > span {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
}

.callout h3 {
    padding-bottom: 10px;
}

.callout .caption {
    padding-bottom: 0;
}

.callout .icon-link.arrow-blue-lg span:after {
    right: -22px;
}

/* ---- the GBR callout (generic brand reference guide) http://www.mylan.com/mylan-resources see bottom of page ---- */
.gbr-callout {
    background: #f2f2f2;
    margin-bottom: 30px;
}

.gbr-callout .inner {
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
}

.gbr-callout h4 {
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.gbr-callout .caption .links {
    padding-top: 25px;
    padding-bottom: 12px;
}

.gbr-callout .caption .links a {
    display: block;
    padding-bottom: 6px;
}

.gbr-callout .image {
    line-height: 0;
}

.gbr-callout .image img {
    width: 64%;
    margin-left: 18%;
}

.gbr-callout .main-link {
    background-color: #00B5E6;
    padding: 4px 20px;
}

.gbr-callout .main-link a span {
    color: #fff;
}

.gbr-callout .main-link a:hover span {
    text-decoration: none;
}

.gbr-callout .caption {
    padding-bottom: 0;
}

/* GBR when placed in the rail column */
.container-with-rail > .grid > .col.right .gbr-callout {
    padding-right: 2000px;
    margin-bottom: 30px;
    width: 100%;
}

.container-with-rail > .grid > .col.right .gbr-callout .image img {
    width: 180px;
    margin-left: -20px;
}

.container-with-rail > .grid > .col.right .gbr-callout > .inner {
    width: 100%;
}

.container-with-rail > .grid > .col.right .gbr-callout .main-link {
    width: 2137px;
}

/* ---- Plus Search ---- */
.plus-search {
    background: #38c7ef url('/-/media/gwmp/images/ui/bgproductSearch.png') right bottom repeat-x;
    box-shadow: 0 5px 5px #b5b5b5;
}

.plus-search > .inner {
    padding: 20px 20px 50px;
    max-width: 60.5%;
    position: relative;
}

.plus-search .search-wrap {
    padding-left: 10px;
}

.plus-search .search-module .search {
    padding-left: 5px;
}

.plus-search h4, .plus-search .caption, .plus-search .caption p {
    color: #fff;
}

.plus-search .caption p {
    padding: 0;
    line-height: 1.3;
}

.plus-search .caption {
    padding-bottom: 20px;
}

.plus-search h4 {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 18px;
}

.plus-search .powered-by {
    text-align: right;
    margin-top: 14px;
    position: relative;
    right: -5px;
    display: block;
}

.plus-search .powered-by .text {
    /*the "powered by" part needs to be HTML text so it can be multilingual */
    position: absolute;
    right: 31px;
    font-size: 9px;
    top: -1px;
    color: #000;
}

.plus-search .logo {
    position: absolute;
    right: -194px;
    top: 20px;
}

/*plus-search, when placed in the rail column */
.container-with-rail > .grid > .right .plus-search {
    margin-bottom: 30px;
}

.container-with-rail > .grid > .right .plus-search > .inner {
    padding: 20px 20px 17px;
    max-width: 75.5%;
}

/* new AUTOCOMPLETE feature (part of PDS) */
.plus-search .autoComplete {
    background: #fff;
    z-index: 4;
    position: absolute;
    top: 35px;
    width: 100%;
    padding: 10px 6px 10px 7px;
    left: -9px;
    border-radius: 0 0 5px 5px;
}

.plus-search .autoComplete a {
    display: block;
    padding: 3px;
    box-sizing: border-box;
}

/* ---- feature slide (news landing page) ---- */
.feature-slide {
    background: #f2f2f2;
    margin-bottom: 30px;
}

.feature-slide > .inner {
    padding-bottom: 20px;
}

.feature-slide .image {
    float: left;
    width: 45%;
    max-width: 200px;
    line-height: 0;
    padding: 20px 20px 0 20px;
}

.feature-slide .image img {
    width: 100%;
    height: auto;
}

.feature-slide .right {
    padding: 20px 20px 0 0;
    margin-left: 240px;
}

.feature-slide .right > .inner {
}

.feature-slide h3 {
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.feature-slide .location-date {
    margin-bottom: 12px;
}

.feature-slide .caption {
    padding-bottom: 20px;
}

/* ---- PDF lists (rules shared by both types) */
.pdf-list span {
    vertical-align: top;
    /*TODO: problematic? not specific enough?*/
}

/*TODO child selector*/
.pdf-list li {
    position: relative;
}

/*TODO child selector*/
.pdf-list li {
    padding-left: 0;
}

/*TODO child selector*/
.pdf-list li:before {
    display: none;
}
/*exception to icon link v1 rules*/
.pdf-list a.has-arrow-blue-med span:after {
    top: 5px;
    vertical-align: top;
}

/* ---- PDF list type A http://www.mylan.com/mylan-resources ---- */
.pdf-list.type-a .icon {
    width: 20px;
    height: 20px;
}

.pdf-list.type-a .file-size {
    display: none;
}

.pdf-list.type-a .icon {
    margin-right: 10px;
}

/*TODO child selector*/
.pdf-list.type-a li {
    padding-top: 12px;
    padding-bottom: 12px;
}

/*TODO child selector*/
.pdf-list.type-a li + li {
    border-top: 1px solid #E2E2E2;
}

/*type-a with inline option*/
.pdf-list.type-a.inline .left {
    float: left;
}

.pdf-list.type-a.inline .caption {
    padding-bottom: 0;
}

.pdf-list.type-a.inline + .pdf-list.type-a.inline {
    border-top: 1px solid #e2e2e2;
}

/* ---- PDF list type B http://www.mylan.com/company/corporate-policy#CommitteeCharters ---- */
/*TODO child selector*/
.pdf-list.type-b li {
    margin-bottom: 20px;
}

.pdf-list.type-b .file-size {
    display: block;
    font-size: 10px;
}

.pdf-list .file-size {
    color: #00BBE7;
}

.pdf-list.type-b > .inner > ul > li > .left, .pdf-list.type-b > .inner > ul > li > .right {
    display: inline-block;
    vertical-align: top;
}
/* a bit of a hack; we've now been asked to add an extra description field */
.pdf-list.type-b .right {
    width: 100%;
}

.pdf-list.type-b span {
    padding-left: 0;
}

.pdf-list.type-b .caption {
    padding-bottom: 0;
}

/*Type B with inline option*/
.pdf-list.type-b.inline > .inner > ul > li > .left,
.pdf-list.type-b.inline > .inner > ul > li > .right {
    display: block;
}

.pdf-list.type-b.inline > .inner > ul > li > .left {
    float: left;
    width: 52px;
}

.pdf-list.type-b.inline > .inner > ul > li > .right {
    width: auto;
    margin-left: 52px;
}

.pdf-list.type-b.inline .file-size {
    font-size: 11px;
    margin-top: -2px;
}

.pdf-list.type-b.inline {
    margin-bottom: 10px;
}

/*clearfix it*/
.pdf-list.type-b.inline:before,
.pdf-list.type-b.inline:after {
    content: " ";
    display: table;
}

.pdf-list.type-b.inline:after {
    clear: both;
}

.pdf-list.type-b.inline {
    *zoom: 1;
}

/*for product detail pages*/
.rail .pdf-list.type-b li,
.rail .pdf-list.type-b.inline {
    margin-bottom: 0;
}

.rail .pdf-list.type-b + .pdf-list.type-b {
    margin-top: 20px;
}

/* ---- accordions (rules shared by all types) ---- */
.accordion .pane {
    display: none;
}

.accordion .pane.expanded {
    display: block;
}

.accordion > .inner > ul > li {
    padding-left: 0;
}

.accordion > .inner > ul > li:before {
    display: none;
}

/* ---- Accordion type A - "color accordion" ---- */
.accordion.type-a .handle {
    background-image: url('/-/media/gwmp/images/ui/accordionhandle.png');
    cursor: pointer;
}

.accordion.type-a .handle > .inner {
    padding: 14px 20px;
    position: relative;
}

/*unfortunately the component was not built in such a way that multiple LIs are possible, so this has been commented out
.accordion.type-a > .inner > ul > li {
    margin-bottom: 20px;
}*/

.accordion.type-a {
    margin-bottom: 20px;
}

.accordion.type-a .caption {
    padding-bottom: 0;
}

/*hoping this will be some kind of a standard - i know some accordions are unpadded on mylan.com, for example: http://www.mylan.com/company/corporate-governance */
.accordion.type-a .pane {
    padding: 20px 20px 0 20px;
}


/*somewhat experimental*/
.accordion.type-a .caption + div {
    /*margin-top: 30px;*/
}
/*somewhat experimental*/
.accordion.type-a .caption.empty + div {
    margin-top: 0;
}

.accordion.type-a .green .pane > .caption,
.accordion.type-a .purple .pane > .caption,
.accordion.type-a .blue .pane > .caption,
.accordion.type-a .orange .pane > .caption,
.accordion.type-a .red .pane > .caption {
    /*this is double padded now ... padding: 0 20px 20px 20px;*/
    padding: 0 0 20px 0;
}

.accordion.type-a > .inner > ul > li.green {
    border-bottom: 3px solid #C3D940 /*Mylan.com uses BBD430 - should it be C3D940 like news components? Which is correct? Or should they really be unique? (That seems wrong.) */;
}

.accordion.type-a > .inner > ul > li.orange {
    border-bottom: 3px solid #F8B301; /*F57F22 / F8B301*/
}

.accordion.type-a > .inner > ul > li.red {
    border-bottom: 3px solid #E41938; /*EC3358 / E41938*/
}

.accordion.type-a > .inner > ul > li.purple {
    border-bottom: 3px solid #6E57A4;
}

.accordion.type-a > .inner > ul > li.blue {
    border-bottom: 3px solid #00b5e6;
}

.accordion.type-a .handle h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-right: 24px;
}

.accordion.type-a .handle .expand-collapse-icon {
    background-image: url('/-/media/gwmp/images/ui/expandcollapse.png');
    height: 32px;
    width: 34px;
    top: 8px;
    right: 10px;
    position: absolute;
    cursor: pointer;
}

.accordion.type-a .handle.expanded {
    background: #373737;
}

.accordion.type-a .handle.expanded h3 {
    color: #fff;
}

.accordion.type-a .handle.expanded .expand-collapse-icon {
    background-position: 0 32px;
}

.accordion.type-a .pane {
    /*problematic...
    padding-top: 20px;*/
}

.accordion.type-a .pane .caption, .accordion.type-a .pane .caption p {
    /*reminder, the reason I declared both is because I can't be sure if the content author will add a paragraph tag through the rich text editor. */
    line-height: 1.4;
}
/*optional image - http://www.mylan.com/businesses/generic-products */
.accordion.type-a .opt-image {
    margin-top: -20px;
    margin-bottom: 20px;
    margin-left: -20px;
    margin-right: -20px;
}

.accordion.type-a .opt-image img {
    width: 100%;
    height: auto;
}

/* ---- accordion type B - leaders accordion http://www.mylan.com/company/leadership ---- */
.accordion.type-b .handle {
    background-image: url('/-/media/gwmp/images/ui/accordionhandle.png');
    cursor: pointer;
}

.accordion.type-b .handle > .inner {
    padding: 14px 20px;
    position: relative;
}

.accordion.type-b .handle h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.accordion.type-b .handle .expand-collapse-icon {
    background-image: url('/-/media/gwmp/images/ui/expandcollapse.png');
    height: 32px;
    width: 34px;
    top: 8px;
    right: 10px;
    position: absolute;
    cursor: pointer;
}

.accordion.type-b .handle.expanded {
    background: #373737;
}

.accordion.type-b .handle.expanded h3 {
    color: #fff;
}

.accordion.type-b .handle.expanded .expand-collapse-icon {
    background-position: 0 32px;
}

.accordion.type-b .always-visible {
    padding: 8px 20px 40px 120px;
    position: relative;
    min-height: 84px;
}

.accordion.type-b .handle.expanded + .always-visible {
    padding-bottom: 20px;
}

.accordion.type-b .always-visible > .grid > .col > .caption,
.accordion.type-b .always-visible > .grid > .col > .inner > .caption {
    padding-bottom: 0;
}

.accordion.type-b .always-visible .thumbnail {
    height: 84px;
    width: 84px;
    position: absolute;
    left: 20px;
    top: 8px;
}

.accordion.type-b .always-visible .thumbnail img {
    height: auto;
    width: 100%;
}

.accordion.type-b .always-visible .left .caption {
}

.accordion.type-b .always-visible .caption p {
    padding-bottom: 0;
}

.accordion.type-b .always-visible .caption p + p {
    margin-top: 0;
}

.accordion.type-b .pane {
    border-top: 1px solid #e1e1e1;
    padding: 12px 20px 20px 20px;
}

.accordion.type-b.full-collapse .always-visible {
    display: none;
}

/*TODO child selector*/
.accordion.type-b.full-collapse li {
    margin-bottom: 30px;
}

/* ---- Accordion type C - "RX accordion" or "drug accordion" http://www.mylan.com/businesses/rx-products ---- */
.accordion.type-c {
    margin-bottom: 26px;
}

.accordion.type-c > .inner {
    max-width: 440px; /*this is to constrain it to the width of the bkd image (440px). Otherwise it sometimes renders at 441 due to the percent grid */
}

.accordion.type-c .handle {
    /*BACKGROUND IMAGE applied inline*/
    background-position: top right;
    background-repeat: no-repeat;
    cursor: pointer;
    border-top: 6px solid #00b5e6;
    min-height: 105px;
}

.accordion.type-c .handle > .inner {
    padding: 14px 35% 14px 20px;
    position: relative;
}

.accordion.type-c a.has-popout-icon span {
    line-height: 1;
    position: relative;
}

/*TODO: we eventually need to do this for all icon-links ... once they are changed to wrap only the last word in a <span>
 for now that has only been done in accordion type-c (rx accordion or "drug accordion" */
.accordion.type-c a.has-popout-icon span:after {
    position: absolute;
    right: -22px;
    top: -1px;
}

.accordion.type-c > .inner > ul > li:after {
    content: " ";
    display: block;
    background-color: white;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-repeat: repeat-x;
    height: 10px;
    width: 100%;
}

.accordion.type-c .handle h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-right: 40px;
    line-height: 1;
    margin-bottom: 4px;
}

.accordion.type-c .handle .expand-collapse-icon {
    background-image: url('/-/media/gwmp/images/ui/expandcollapse.png');
    height: 32px;
    width: 34px;
    top: 22px;
    right: 10px;
    position: absolute;
    cursor: pointer;
}

.accordion.type-c .handle.expanded {
    height: 173px;
}

.accordion.type-c .handle.expanded h3 {
}

.accordion.type-c .handle.expanded .expand-collapse-icon {
    background-position: 0 32px;
}

/*4/15/15 new component change to move site link into handle... now there are multiple link fields up there*/
.accordion.type-c .big.handle .link a {
    line-height: 1.2;
    display: block;
}

.accordion.type-c .big.handle .link a + a {
    padding-top: 5px;
}
/*end new component change*/

.accordion.type-c .pane .caption {
    padding: 0px 20px 20px 20px;
}

.accordion.type-c .pane .caption, .accordion.type-c .pane .caption p {
    /*reminder, the reason I declared both is because I can't be sure if the content author will add a paragraph tag through the rich text editor. */
    line-height: 1.4;
}

.accordion.type-c .surprise-image {
    padding-left: 20px;
    /*allow variable height images --- height: 105px;*/
    margin-top: -60px;
    width: 100%;
    position: relative;
}

.accordion.type-c .surprise-image .link {
    /*position: absolute;
	 bottom: 5px;*/
    margin-bottom: 4px;
}

.accordion.type-c .surprise-image img {
    width: 185px;
    height: auto;
}

.accordion.type-c .pane .links {
    padding-left: 20px;
    padding-bottom: 24px;
}

.accordion.type-c .pane .links a {
    display: block;
    font-weight: bold;
}

/*typography exceptions for drug accordion*/
.accordion.type-c .caption strong {
    color: #000;
}

.accordion.type-c .caption ul {
    /*LI_EXCEPTION*/
    list-style: disc;
    /* padding-left: 0; */
    padding-left: 20px;
}

/*Strong tags are being used as headlines and are being placed inside of the UL...*/
.accordion.type-c .caption > ul > strong {
    margin-left: -20px;
    display: block;
}

.accordion.type-c .caption ul li {
    /*color: #000;*/
    /*LI_EXCEPTION*/
    padding-bottom: 4px;
}

.accordion.type-c .caption ul li:before {
    display: none;
}

.accordion.type-c .caption td {
    border: 1px solid black;
    padding: 5px;
    box-sizing: border-box;
}

.accordion.type-c .caption > ul > li {
    /*LI_EXCEPTION*/
    padding-left: 0;
}

.accordion.type-c .caption > ol > li {
    margin-left: 0;
    padding-top: 0;
    /*LI_EXCEPTION*/
    /*RX Products page accordions*/
    padding-bottom: 0;
}

.accordion.type-c .caption > ol > li > ul {
    padding-left: 16px;
}

.accordion.type-c .caption > ol > li > ul > li {
    margin-left: 0;
    padding-top: 0;
    /*LI_EXCEPTION*/
    /*RX Products page accordions*/
    padding-bottom: 0px;
}

.accordion.type-c .caption > ol > li > ul > li > ul {
    padding-left: 16px;
}

.accordion.type-c .caption > ol > li > ul > li > ul > li {
    /*LI_EXCEPTION*/
    /*RX Products page accordions*/
    padding: 0;
    margin: 0;
}

.accordion.type-c .caption > ul > li > ul > li {
    /*LI_EXCEPTION*/
    padding-left: 0;
}

/*custom ULs for drug accordion*/
.accordion.type-c ul.custom-list.dash {
    list-style-type: none !important;
    padding-left: 20px !important;
}

.accordion.type-c ul.custom-list.dash > li {
    /*margin-left:16px !important;*/
}

.accordion.type-c ul.custom-list.dash > li:before {
    content: "―";
    display: block !important; /*unhide*/
    width: auto;
    height: auto;
    background: none;
    position: absolute;
    top: 0;
    left: -20px;
}
/* ---- Accordion type D - "careers accordion" or "image accordion v2" http://www.mylan.com/careers ---- */
.accordion.type-d {
    /*just to be safe*/
    max-width: 640px;
}

.accordion.type-d > .inner {
}

.accordion.type-d {
    margin-bottom: 25px;
}

.accordion.type-d .handle {
    /*BACKGROUND IMAGE applied inline*/
    background-position: top right;
    background-repeat: no-repeat;
    cursor: pointer;
    border-top: 6px solid #00b5e6;
    height: 105px;
}

.accordion.type-d .handle > .inner {
    padding: 14px 100px 14px 20px;
    position: relative;
}

.accordion.type-d .handle > .inner > .link a span {
    line-height: 1;
    display: block;
    padding-top: 4px;
}

.accordion.type-d > .inner > ul > li:after {
    content: " ";
    display: block;
    background-color: white;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-repeat: repeat-x;
    height: 10px;
    width: 100%;
}

.accordion.type-d .handle h3 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding-right: 30px;
}

.accordion.type-d .handle .expand-collapse-icon {
    background-image: url('/-/media/gwmp/images/ui/expandcollapse.png');
    height: 32px;
    width: 34px;
    top: 22px;
    right: 10px;
    position: absolute;
    cursor: pointer;
}

.accordion.type-d .handle.big.expanded {
    height: 173px;
}

.accordion.type-d .handle.expanded h3 {
}

.accordion.type-d .handle.expanded .expand-collapse-icon {
    background-position: 0 32px;
}

.accordion.type-d .pane .caption {
    padding: 20px 0 10px 0;
}

.accordion.type-d .pane .greybox .caption {
    padding-top: 0;
}

.accordion.type-d .pane .greybox .content-with-floated-image {
    min-height: 115px;
    margin-top: 10px;
}

.accordion.type-d .caption p + ul, .accordion.type-d .caption p + p, .accordion.type-d .caption ul + ul {
    margin-top: 15px;
}

.accordion.type-d .pane .caption, .accordion.type-d .pane .caption p {
    line-height: 1.4;
}

.accordion.type-d .pane .links a > span {
    font-weight: bold;
}

.accordion.type-d > .inner > ul > li > .pane > .caption .caption {
    /*to avoid double padding issues? (not sure where this applies)*/
    padding: 0;
}

/* ---- generic list, rebuilt ---- */
.large-icon-list > li {
    padding: 30px;
}

.large-icon-list > li.grey {
    background-color: #f5f5f5;
}

.large-icon-list > li > .left {
    float: left;
    width: 80px;
}

.large-icon-list > li > .left > img {
    width: 100%;
    height: auto;
}

.large-icon-list > li > .right {
    margin-left: 110px;
}

.large-icon-list > li > .right > .caption {
    padding-bottom: 0;
}

.large-icon-list > li > .right > .caption p {
    line-height: 1.5;
}

/* ---- FDA Warning ---- */
.FDAWarning {
    border: 1px solid #000;
    padding: 5px;
}

/* ---- patient materials list ---- */
.patient-materials-list .caption {
    padding-bottom: 0;
}

.patient-materials-list .thumb {
    width: 18%;
    float: left;
}

.patient-materials-list .thumb img {
    height: auto;
    width: 100%;
    max-width: 100px;
}

/*TODO child selector*/
.patient-materials-list li {
    padding-left: 0;
    padding-bottom: 30px;
}

.patient-materials-list li:before {
    display: none;
}

.patient-materials-list .center {
    width: 68%;
    float: left;
}

.patient-materials-list > ul > li > .icon {
    float: left;
    width: 14%;
}

.patient-materials-list .caption p {
    padding-bottom: 12px;
}

.patient-materials-list .center {
    padding: 0 12px;
    box-sizing: border-box;
}

.patient-materials-list h3 {
    font-weight: bold;
    margin-bottom: 10px;
}

.patient-materials-list .icon {
    text-align: center;
}

.patient-materials-list .file-size {
    font-size: 11px;
    color: #00BBE7;
}

.patient-materials-list .icon > a:hover {
    text-decoration: none;
}
/*component was built wrong - there's no subcomponent so there can only be 1 <li> per <ul> 
.patient-materials-list li + li {
    border-top: 1px solid #f2f2f2;
}*/
/*so we have to do this instead... */
.patient-materials-list + .patient-materials-list {
    border-top: 1px solid #e2e2e2;
    padding-top: 20px;
}
/*in case there's no icon*/
.patient-materials-list li.no-icon .center {
    width: 82%;
}

/* ---- blue stripey divider ---- */
hr.stripe.blue {
    height: 0;
    padding-bottom: 12px;
    margin-bottom: 20px;
    background: url("/-/media/gwmp/images/ui/bluestripes.png");
    border: 0;
    border-top: 6px solid #00b5e6;
}

/* ---- pullquote ---- */
.pullquote {
    margin-left: 20px;
    margin-right: 20px;
}

.pullquote blockquote {
    color: #00b1dd;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 15px;
    margin-left: 8px;
    text-indent: -8px;
    font-size: 20px;
}

.pullquote .attribution span {
    display: block;
}

.pullquote .attribution .name {
    font-weight: bold;
}

.pullquote .attribution {
    float: right;
    padding-right: 40px;
    font-size: 14px;
    margin-bottom: 30px;
}

/* ---- careers hero ---- */
.Career_Hero {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
}

.Career_Hero .inner {
    margin-left: 38px;
    padding-right: 87px;
    min-height: 285px;
}

.Career_Hero .bkd_img {
    position: absolute;
    width: 100%;
    z-index: -1;
    height: 285px;
    background-repeat: no-repeat;
    background-color: #0EB1DB;
    padding-right: 2000px;
}

.Career_Hero .hero_title {
    font-weight: bold;
    font-size: 24px;
    padding-top: 25px;
    color: #fff;
    width: 250px;
    line-height: 1.1;
}

.Career_Hero .hero_caption {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
    /*add more width to make it a bit more multilingual friendly... this will get you just a few extra words, so don't push your luck! */
    /*width: 185px;*/
    width: 280px;
    line-height: 1.1;
    padding-top: 6px;
}

.Career_Hero .hero_teaser {
    /*add more width to make it a bit more multilingual friendly... this will get you just a few extra words, so don't push your luck! */
    /*width: 202px;*/
    width: 265px;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    padding-bottom: 8px;
}

.Career_Hero .hero_teaser p {
    line-height: 1.1;
    padding: 4px 0;
    color: #fff;
}

.Career_Hero select {
    margin-bottom: 12px;
    height: 35px;
    width: 261px;
    border-radius: 3px;
    -webkit-appearance: none;
    background-color: #fff;
}


.Career_Hero .career_img {
    position: absolute;
    margin-left: 330px;
    height: 285px;
}

.Career_Hero .career_img img {
    height: 100%;
    width: auto;
}

.Career_Hero .hero_teaser a {
    font-weight: normal;
    color: #fff;
}

.Career_Hero .hero_teaser .btn-v2 {
    margin-bottom: 10px;
    margin-left: 5px;
}

.Career_Hero .hero_teaser .btn-v2 > a {
    padding: 11px 30px;
}

.Career_Hero .hero_teaser .btn-v2 > a > span {
    font-weight: bold;
}

.Career_Hero .hero_teaser a.icon-link span {
    color: #fff;
    text-decoration: underline;
}

/*.Career_Hero .hero_caption .btn + div + a span {
    this was previously added to match inconsistency. Removed to impose standard. See Mylan.com US Careers page.
    text-decoration: underline;
}*/

/*new version for mylan US contains "countryRedirect.cshtml" (country selector) */
.Career_Hero .careers-country-redirect .selectricOuter {
    width: 260px;
    margin: 20px 0 10px 4px;
}

.careers-country-redirect .selectricOuter {
    max-width: 280px;
}


/*TODO: TEMP this class exists in content only, and only on US careers landing page. we need to add a component property to distinguish between careers landing page hero, and careers sub page hero (i.e. US careers) */
.careers-landing-hero-caption {
    font-size: 20px;
    line-height: 1.3;
    padding-right: 70px;
    color: #ffffff;
}

/* ---- social media links with icons (found on http://www.mylan.com/news ) ---- */
.service_icon {
    margin: 2px 15px 0px 0px;
}

.service_url {
    position: relative;
    margin-left: 40px;
    top: -32px;
    font-size: 15px;
}

/* ---- Career Callout (found on http://www.mylan.com) ---- */
.career-callout {
    padding-top: 20px;
}

.career-callout > .inner {
    padding-left: 4.255%;
}

.career-callout > .inner > .grid {
    background-color: #eee;
}

.career-callout .title {
    font-weight: bold;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 26px;
    line-height: 1.2;
}

.career-callout .caption {
    font-size: 15px;
    margin-bottom: 18px;
    padding-bottom: 0;
}

.career-callout .center a:hover {
    text-decoration: none;
}

.career-callout .center > .inner {
    padding: 25px 0 20px 40px;
}

.career-callout .left {
    line-height: 0;
}

.career-callout .left img {
    height: auto;
    width: 100%;
}

.career-callout .right > .inner {
    padding-top: 25px;
    padding-left: 40px;
    padding-bottom: 20px;
}

.career-callout .position-teaser {
    padding: 10px 0;
}

.career-callout .stripes {
    display: block;
    background-color: white;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-position: 0 5px;
    background-repeat: repeat-x;
    height: 20px;
    padding-right: 2000px;
}

.career-callout .position-link {
    margin-bottom: 20px;
}

.career-callout .title span {
    font-size: 26px !important;
}

.career-callout .global-offer .btn {
    margin-top: 10px;
}

.career-callout .col.center > .inner > .btn {
    width: 100%;
}

.career-callout .col.center > .inner > .btn > a {
    text-align: center;
}

.career-callout .careers-country-redirect .selectricOuter {
    max-width: 216px;
    margin-top: 12px;
    margin-bottom: 16px;
}
/* ---- Content with Right Image component ---- */
.content-with-right-image .col, .content-with-right-image .col:after, .content-with-right-image .col:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content-with-right-image .right {
    padding: 0 0 20px 26px;
}

.content-with-right-image .left {
    padding-right: 20px;
}

.content-with-right-image {
    width: 100%;
}

.content-with-right-image .right img {
    max-width: 100%;
    width: 100%;
}

.content-with-right-image ul li {
    /*LI_EXCEPTION_REMOVED
    font-style: italic;
    padding-bottom: 0;
    */
}

/* ---- committees list ---- */
.committees-list > .inner > ul > li {
    border-bottom: 1px solid #e2e2e2;
    padding: 28px 20px 50px 20px;
}

/*TODO why is this needed?*/
.committees-list > .inner > ul > li:before {
    display: none;
}

.committees-list > .inner > ul > li > .left, .committees-list > .inner > ul > li > .right {
    float: left;
    width: 50%;
}

.committees-list > .inner > ul > li > .right > .inner > .left {
    width: 22%;
    float: left;
}

.committees-list > .inner > ul > li > .right > .inner > .right {
    width: 78%;
    float: right;
}

.committees-list .sub-headline {
    padding-top: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e2e2;
}

.committees-list > .inner > ul > li > h3 {
    padding-bottom: 20px;
}

.committees-list > .inner > ul > li > h3, .committees-list > .inner > ul > li > .left .members > h4 {
    /*committee title*/
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

car .committees-list > .inner > ul > li > .left .members > a {
    display: block;
}

.committees-list .right .left .icon {
    display: block;
    margin-left: 3px;
    margin-bottom: 3px;
}

.committees-list .right .left .file-size {
    color: #00BBE7;
}

/* ---- last updated date widget ---- */
.last-updated {
    font-size: 11px;
    color: #666;
    padding-left: 0;
    padding-top: 20px;
}

/* ---- INTERSTITIAL POPUPS ---- */
#interstitial-overlay {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 998;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    /*ie8-9*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#d3000000, endColorstr=#d3000000);
}

.interstitial {
    display: none;
    position: fixed;
    top: 20%;
    right: 0;
    left: 0;
    z-index: 999;
}

.interstitial .window {
    background: #fff;
    max-width: 645px;
    height: 100%;
    margin: 0 auto;
}

.interstitial .window .inner {
    padding: 41px 40px 60px 36px;
}

.interstitial .left {
    width: 45%;
    float: left;
}

.interstitial .right {
    margin-left: 45%;
}

.interstitial .window .stripes {
    background-color: white;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-repeat: repeat-x;
    height: 14px;
    width: 100%;
}

.interstitial .window .stripes .bar {
    height: inherit;
    width: 38%;
    background: #26BDE2;
}

.interstitial .window h2 {
    font-size: 18px;
    padding-bottom: 16px;
}

.interstitial .window .caption {
    padding-bottom: 20px;
}

.interstitial .continue, .interstitial .cancel {
    display: inline-block;
}

.interstitial .continue a {
    padding: 12px 24px;
}

.interstitial .cancel {
    margin-left: 40px;
}

.interstitial .cancel a {
    text-decoration: underline;
}

/* ---- single video player (video player within page content - not modal) ---- */
.single-video-player {
    margin-bottom: 30px;
}

/* ---- modal video popups ---- */
html.videoModalIsActive, html.videoModalIsActive body, html.videoModalIsActive .page-wrap-outer {
    overflow-y: hidden;
}

#video-modal {
    display: none;
}

#video-modal.active {
    display: block;
}

#video-modal .overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#d3000000, endColorstr=#d3000000);
    z-index: 100;
}

#video-modal .window {
    z-index: 101;
    position: absolute;
    max-width: 752px;
    /*(size and position set by javascript in ModalVideoPlayer rendering)*/
    background: #000;
}

#video-modal .close {
    position: absolute;
    top: -22px;
    right: 0;
    height: 22px;
    width: 35px;
    background-image: url("/-/media/gwmp/images/ui/video_modal_close_v2.png");
    cursor: pointer;
}

#video-modal.isMobile .close {
    height: 100%;
    width: 100%;
    background: black;
    background-image: none;
    cursor: default;
}

#video-modal.isMobile .overlay {
    background: black;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000, endColorstr=#FF000000);
}

/* ---- leaders-list ---- */
.leaders-list > .inner > ul > li > .left {
    float: left;
}

.leaders-list > .inner > ul > li > .right {
    margin-left: 100px;
}

.leaders-list > .inner > ul > li > .right > .link {
    font-weight: bold;
}

.leaders-list > .inner > ul > li > .right > .title {
    margin-bottom: 10px;
}

.leaders-list > .inner > ul > li > .right > .quote {
    margin-bottom: 20px;
}

.leaders-list > .inner > ul > li {
    min-height: 106px;
}

.accordion.type-a .leaders-list {
    /*this is double padded now ... padding: 0 20px 20px 20px;*/
    padding: 0 0 20px 0;
}

/* ---- fat-callout ---- */
.fat-callout {
    margin-bottom: 30px;
}

.fat-callout > .inner {
    position: relative;
    min-height: 180px;
    padding: 20px;
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 0%, #ededed 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(left, #ffffff 0%,#ededed 100%);
    background: -o-linear-gradient(left, #ffffff 0%,#ededed 100%);
    background: -ms-linear-gradient(left, #ffffff 0%,#ededed 100%);
    background: linear-gradient(to right, #ffffff 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=1 );
}

.fat-callout h3 {
    margin-bottom: 15px;
}

.fat-callout h3 > a {
    font-size: 18px;
    font-weight: bold;
}

.fat-callout > .inner img.logo {
    height: 160px;
    width: 160px;
    float: right;
    margin-top: -40px;
    margin-left: 10px;
}

.fat-callout > .inner .link {
    margin-top: 15px;
}

.fat-callout > .inner .link > a {
    font-weight: bold;
}

.fat-callout > .inner .caption {
    padding-bottom: 0;
}

/*this was a mistake, the blue bar is actually part of the next component down on the page
.fat-callout .stripe {
    height: 6px;
    width: 100%;
    background: #00B0DD;
    margin-top: 40px;
    margin-bottom: 20px;
}*/

/* ---- Content with floated image (text flows around. can be floated right or left.) ---- */
.content-with-floated-image h2 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
    font-weight: bold;
}

.content-with-floated-image h2.empty {
    /*JS hack to overcome shortcoming with how the component was written - empty HTML tags when no content is entered*/
    margin-bottom: 0;
}

.content-with-floated-image .floated.left {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    max-width: 200px;
    line-height: 0;
    display: block;
    /* ^^ in case its applied to an anchor that wraps the image*/
}

.content-with-floated-image .floated.right {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    max-width: 200px;
    line-height: 0;
    display: block;
    /* ^^ in case its applied to an anchor that wraps the image*/
}

/* 4/24/2015 - New exception options to accomodate non-standard behavior on Unit Dose page */
.content-with-floated-image.img-35-pct .caption {
    margin-left: 35%;
}

.content-with-floated-image.img-45-pct .caption {
    margin-left: 45%;
}
/*2015/07/24 update to fix 35% version (may also need to be done to the 45% version) */
.content-with-floated-image.img-35-pct .img-column {
    width: 35%;
}

.content-with-floated-image.img-35-pct .img-column img {
    width: 100%;
    max-width: none;
}

.content-with-floated-image.img-35-pct .caption {
    padding-left: 10px;
}

/* ---- news landing page summary list (on rail) ---- */
.news-summary-list {
    margin-bottom: 10px;
}

.news-summary-list a {
    font-weight: bold;
}

/*TODO child selector*/
.news-summary-list li {
    padding-bottom: 20px;
}

/*TODO child selector*/
.news-summary-list li {
    border-bottom: 1px solid #ddd;
}

/*TODO child selector*/
.news-summary-list li + li {
    padding-top: 20px;
}

/*TODO child selector*/
.news-summary-list li.last {
    border: none;
}

/*TODO child selector*/
.rail .news-summary-list li {
    border: none;
}

/* ---- "back to top" links ---- */
.back-to-top {
    text-align: right;
}

/* ---- references ---- */
.references, .references p {
    font-size: 12px;
}

/* ---- "content-image" component ---- */
.content-image img {
    width: 100%;
    height: auto;
    max-width: 440px;
    margin-bottom: 20px;
}

/*Products List*/
/*TODO child selector*/
ul.product-list li {
    margin-bottom: 8px;
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

/* ---- stupid twitter button that no one will ever click ---- */
.twitter-button {
    padding-right: 10px;
}

/* ---- fact-sheet component ---- */
.fact-sheet {
    background: white;
    padding: 20px;
    margin-top: 20px;
}

.fact-sheet > a > img {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.fact-sheet .button {
    width: 97%;
}

.fact-sheet .button .btn-v2 {
    width: 100%;
}

/* ---- connect with mylan (twitter and linkedin buttons to be placed on a rail) ---- */
.connect-with-mylan img {
    float: left;
    width: 25px;
    height: 25px;
}

.connect-with-mylan a {
    display: block;
    margin-left: 40px;
}

.connect-with-mylan p {
    padding-bottom: 15px;
}

.connect-with-mylan {
    padding-bottom: 15px;
}

/* ---- padded-grey-box (pharmacovigilance and who knows what else) ---- */
.padded-grey-box {
    background: #ededed;
    padding: 20px;
}

.padded-grey-box .caption {
    padding: 0;
}

/* ---- plus resources pharmacy resources - currently only on Canada ---- */
.ce-course-link {
    padding-right: 15px;
}

.ce-course-link img {
    float: right;
}

.ce-course-expander-toggle {
    cursor: pointer;
}

.ce-course-expander-content {
    display: none;
}

.ce-course-expander-content.active {
    display: block;
}

/*full width image - has optional link - used for home page single image (like on France) or anywhere else we need a full width image that scales responsively */
.full-width-image {
    margin-bottom: 10px;
}

.full-width-image img {
    width: 100%;
    height: auto;
}

/*History Callout*/
.history-callout {
    position: relative;
    padding-bottom: 30px;
}

.history-callout .main-image {
    position: relative;
    display: block;
    line-height: 0;
    border-bottom: 2px solid #c4c4c4;
}

.history-callout .main-image img {
    width: 100%;
    height: auto;
}

.history-callout .effects {
    height: 0;
    position: relative;
    width: 100%;
    left: 0;
    line-height: 0;
    top: -2px;
}

.history-callout .effects .left-arrow, .history-callout .effects .center-arrow, .history-callout .effects .right-arrow {
    height: 10px;
    width: 33%;
    position: absolute;
    background: url(/-/media/gwmp/images/ui/historydownarrow.png);
    background-position: center;
    background-repeat: no-repeat;
}

.history-callout .effects .center-arrow {
    left: 33%;
}

.history-callout .effects .right-arrow {
    left: 66%;
}

.history-callout .purposeless-line {
    width: 2000px;
    border-bottom: 2px solid #c4c4c4;
    position: absolute;
    right: -2020px;
}

.history-callout .stealth-link:hover {
    text-decoration: none;
}

.history-callout .paddedOnlyInDesktop {
    padding: 10px;
}

.history-callout .grid {
    margin-top: 5px;
}

.history-callout .grid .col.left > div, .history-callout .grid .col.center > div {
    padding: 10px;
}

/* leadership tabs */
.leadership-tabs .tabs {
    margin-bottom: 0;
}

.leadership-tabs .accordion.type-b > .inner > .sub-headline {
    padding-top: 25px;
    padding-bottom: 15px;
}

.leadership-tabs .sub-headline h2 {
    padding-bottom: 0;
}

.leadership-tabs .accordion.type-b .handle h3 {
    font-size: 14px;
}

.leadership-tabs .accordion.type-b .pane .caption {
    padding-bottom: 0;
}

.leadership-tabs .committees-list .footnotes {
    padding: 20px 0 40px 0;
}

.leadership-tabs .committees-list .members > a {
    display: block;
}

.leadership-tabs .accordion.type-b > .inner {
    position: relative;
}

.leadership-tabs .accordion.type-b .button {
    position: absolute;
    top: 8px;
    right: 10px;
}

.leadership-tabs .accordion.type-b .button .btn-v2 {
    padding-right: 0;
}

.leadership-tabs .accordion.type-b .button .btn-v2 > a {
    padding: 12px 40px;
}

.leadership-tabs .accordion.type-b .button span:after,
.leadership-tabs .accordion.type-b .button .hide-text {
    display: none;
}

.leadership-tabs .accordion.type-b .button.active .hide-text {
    display: inline;
}

.leadership-tabs .accordion.type-b .button.active .show-text {
    display: none;
}

.leadership-tabs .accordion.type-b .always-visible .right .links > h3 {
    color: #333;
    font-weight: bold;
}

.leadership-tabs .accordion.type-b .always-visible .right .links > a {
    display: block;
}

.leadership-tabs.master .btn-v2 > a:hover {
    text-decoration: underline;
}

/*big link image*/
.big-link-image img {
    width: 100%;
    height: auto;
}

.home .big-link-image {
    margin-left: -2px;
    padding-right: 40px;
}

.accordion.type-a .big-link-image {
    /*this is double padded now ... padding: 0 20px 20px 20px;*/
    padding: 0 0 40px 0;
}

/*large mylan plus list */
.large-mylan-plus-list {
    border-top: 6px solid #00b0dd;
    padding-top: 24px;
    margin-bottom: 20px;
}

.large-mylan-plus-list .caption {
    padding-bottom: 15px;
}

.large-mylan-plus-list .plus-logo {
    width: 186px;
    margin-bottom: 10px;
}

.large-mylan-plus-list .plus-logo img {
    width: 100%;
    height: auto;
}

.large-mylan-plus-list .border {
    border-bottom: 1px solid #dfdfdf;
}

.large-mylan-plus-list .border .color-block {
    width: 58px;
    height: 3px;
}

.large-mylan-plus-list .border.green .color-block {
    background: #bcd530;
}

.large-mylan-plus-list .border.orange .color-block {
    background: #fdb813;
}

.large-mylan-plus-list .border.red .color-block {
    background: #e71b3a;
}

.large-mylan-plus-list .section .left {
    float: left;
}

.large-mylan-plus-list .section .left .icon {
    padding: 20px 0;
    width: 38px;
    padding-right: 20px;
}

.large-mylan-plus-list .section .left .icon img {
    width: 100%;
    height: auto;
}

.large-mylan-plus-list .section .right h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 20px 0 6px 0;
}

.large-mylan-plus-list .blue-stripes {
    display: block;
    background-color: white;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-position: 0 5px;
    background-repeat: repeat-x;
    height: 20px;
    width: 100%;
}

.large-mylan-plus-list .button {
    margin: 5px 0 24px 5px;
}

.large-mylan-plus-list .button .btn-v2 {
    padding-left: 45px;
    padding-right: 45px;
}

/*Public Filings http://www.mylan.com/investors */
.public-filings-summary {
    max-width: 640px;
}

.public-filings-summary > .grid > .left > .left {
    float: left;
    width: 80px;
    padding-right: 10px;
}

.public-filings-summary > .grid > .left > .left img {
    width: 100%;
    height: auto;
}

.public-filings-summary > .grid > .left > .right {
    padding-left: 10px;
    margin-left: 90px;
    margin-bottom: 20px;
}

.public-filings-summary .icons.desktopOnly > div {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.public-filings-summary .icons.desktopOnly .icon {
    display: block;
    width: 30px;
    height: 30px;
    background: url(/-/media/gwmp/images/ui/icoformats.png) no-repeat;
    margin: 0 auto;
}

.public-filings-summary .icons.desktopOnly .filesize {
    font-size: 11px;
    padding-top: 3px;
    display: block;
    text-align: center;
}

.public-filings-summary .icons.desktopOnly .icon.pdf {
    background-position: -30px 0;
}

.public-filings-summary .icons.desktopOnly .icon.xlsx {
    background-position: -90px 0;
}

.public-filings-summary .order-by-mail {
    padding-bottom: 30px;
}

.public-filings-summary .main-link {
    font-weight: bold;
}

.public-filings-summary .rich-text-area {
}

.public-filings-summary hr {
    margin-bottom: 20px;
}

.public-filings-summary .cta > .left {
    float: left;
    width: 44px;
}

.public-filings-summary .cta > .left img {
    width: 100%;
    height: auto;
}

.public-filings-summary .cta > .right {
    margin-left: 54px;
}

.public-filings-summary .cta > .right h3 {
    margin: 8px 0 2px 0;
    font-weight: bold;
    color: #333;
}

/*public filings list page*/
.public-filings .sorting-bar > div {
    background: #222;
    cursor: pointer;
    box-sizing: border-box;
}

.public-filings .sorting-bar > div.active {
    background: #5a5959;
}

.public-filings .sorting-bar > div.date {
    width: 18.75%;
}

.public-filings .sorting-bar > div.title {
    width: 37.5%;
    border-right: 1px solid #3a3a3a;
}

.public-filings .sorting-bar > div.type {
    width: 12.5%;
    border-right: 1px solid #3a3a3a;
}

.public-filings .sorting-bar > div.formats {
    width: 31.25%;
}

.public-filings-list-item {
    display: table;
    width: 100%;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #e2e2e2;
}

.public-filings-list-item > div {
    display: table-cell;
}

.public-filings-list-item > div.date.desktopOnly {
    width: 18.75%;
}

.public-filings-list-item > div.title {
    width: 37.5%;
    padding-left: 10px;
    padding-right: 20px;
    padding-bottom: 14px;
}

.public-filings-list-item > div.type.desktopOnly {
    width: 12.5%;
    padding-left: 14px;
}

.public-filings-list-item > div.formats {
    width: 31.25%;
    padding-left: 20px;
}

.public-filings-list-item .icons.desktopOnly > div {
    display: inline-block;
    vertical-align: top;
    margin-right: 6px;
}

.public-filings-list-item .icons.desktopOnly .icon {
    display: block;
    width: 30px;
    height: 30px;
    background: url(/-/media/gwmp/images/ui/icoformats.png) no-repeat;
    margin: 0 auto;
}

.public-filings-list-item .icons.desktopOnly .filesize {
    font-size: 11px;
    padding-top: 3px;
    display: block;
    text-align: center;
}

.public-filings-list-item .icons.desktopOnly .icon.pdf {
    background-position: -30px 0;
}

.public-filings-list-item .icons.desktopOnly .icon.xlsx {
    background-position: -90px 0;
}

.public-filings .filters {
    padding-bottom: 12px;
}

.public-filings .filters ul li span {
    font-weight: bold;
    margin-right: 16px;
    position: relative;
    bottom: -6px;
    vertical-align: top;
}

.public-filings .filters .selectricOuter {
    display: inline-block;
}

/*this assumes that there will never be page numbers on the public filings list page*/
.public-filings .pagination .prev {
    margin-right: 0;
}

.public-filings .pagination .next {
    margin-left: 0;
}

/*Random Fact Callout*/
.random-fact-callout, .random-fact-callout .randomFact, .random-fact-callout .randomFact .image, .random-fact-callout .randomFact .image img {
    /*width: 100%;*/
    height: auto;
}

.random-fact-callout .randomFact {
    display: none;
}

.random-fact-callout .randomFact.chosen {
    display: block;
}

.random-fact-callout .randomFact .caption {
    padding: 0;
    margin-top: 20px;
}

.random-fact-callout .randomFact .caption.empty {
    margin-top: 0;
}

/*custom HR - highly flexible, many uses */
.custom-hr {
    margin: 10px 0;
}

.custom-hr.grey-line {
    height: 1px;
    background-color: #e2e2e2;
}

.custom-hr.blue-stripes {
    background-color: #fff;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-repeat: repeat-x;
    height: 20px;
}

.custom-hr.green-stripes {
    background-color: #fff;
    background-image: url("/-/media/gwmp/images/ui/greendiagloop.png");
    background-repeat: repeat-x;
    height: 20px;
}

.custom-hr.double-blue-stripes {
    background-color: #fff;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-repeat: repeat-x;
    height: 20px;
    border-top: 6px solid #00b0dd;
}

.custom-hr.red-stripes {
    background-color: #fff;
    background-image: url("/-/media/gwmp/images/ui/redstripes.png");
    background-repeat: repeat-x;
    height: 20px;
}

.isIE .custom-hr {
    text-align: left;
}

/*4/20/2015 new option for thinner HR (investors page) */
.custom-hr.thin {
    height: 7px;
}

/*investor faq section*/
.investor-faq {
    width: 100%;
    margin-bottom: 40px;
    overflow-x: hidden;
}

.investor-faq .question, .investor-faq .answer {
    display: table;
    width: 100%;
}

.investor-faq .question { /*JJFIX*/
    background: url(/-/media/gwmp/images/ui/qa_bg_glass_q.png) bottom repeat-x #dcdada;
}

.investor-faq .answer {
    background: url(/-/media/gwmp/images/ui/qa_bg_glass_a.png) bottom repeat-x #ededed;
}

.investor-faq .left {
    display: table-cell;
    width: 58px;
    vertical-align: middle;
    height: 100%;
}

.investor-faq .letter {
    font-size: 47px;
    color: #fff;
    padding: 17px 0;
    width: 58px;
    text-align: center;
    font-weight: bold;
}

.investor-faq .question .left {
    background: url(/-/media/gwmp/images/ui/qa_bg_glass_q.png) bottom repeat-x #51555f;
}

.investor-faq.green .answer .left {
    background: url(/-/media/gwmp/images/ui/qa_bg_glass_a.png) bottom repeat-x #c3d940;
}

.investor-faq.blue .answer .left {
    background: url(/-/media/gwmp/images/ui/qa_bg_glass_a.png) bottom repeat-x #00b0dd;
}

.investor-faq .right {
    display: table-cell;
    line-height: 1.1;
}

.investor-faq .right .caption {
    padding: 30px 45px 30px 25px;
}

.investor-faq .question .right .caption,
.investor-faq .question .right .caption p {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    line-height: 1.1;
}

.investor-faq .answer .right .caption,
.investor-faq .answer .right .caption p {
    font-size: 20px;
    color: #333;
    line-height: 1.2;
}

.investor-faq .answer .right .caption a {
    font-size: 20px;
    line-height: 1.2;
}

.investor-faq .answer .right img {
    width: 100%;
    height: auto;
}

.investor-faq .center {
    display: table-cell;
    width: 12px;
    vertical-align: middle;
}

.investor-faq .arrow {
    background: url(/-/media/gwmp/images/ui/qa_arrows_sprite.png) no-repeat;
    width: 12px;
    height: 41px;
}

.investor-faq.green .answer .arrow {
    background-position: 0 -100px;
}

.investor-faq.blue .answer .arrow {
    background-position: 0 -50px;
}

/*data-sheets*/
.data-sheets {
}

.data-sheets > .left,
.data-sheets > .right {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

.data-sheets > .left {
    padding-right: 10px;
}

.data-sheets > .right .sub-headline {
    margin-top: 20px;
}

.data-sheets .pdf-list.type-b.inline > .inner > ul > li > .left {
    text-align: center;
}

.data-sheets .icon-link.arrow-blue-med span:after {
    display: none;
}

.data-sheets + .data-sheets {
    padding-top: 20px;
    padding-bottom: 10px;
}

.data-sheets + .data-sheets + .data-sheets {
    border-top: 1px solid #e2e2e2;
}

.data-sheets > .left .caption {
    padding-bottom: 20px;
}

.data-sheets > .left .caption h3 {
    font-weight: bold;
    padding-bottom: 10px;
}

.data-sheets .pdf-list.type-b.inline .file-size {
    color: #666;
    font-size: 11px;
    margin-top: -5px;
    text-align: center;
}

.data-sheets .pdf-list.type-b.inline > .inner > ul > li > .left > a:hover {
    text-decoration: none;
}

.data-sheets .pdf-list.type-b.inline {
    margin-bottom: 7px;
}

/*product information*/
.product-information {
    margin-bottom: 24px;
}

.product-information .anchor-links {
    margin-bottom: 40px;
}

.product-information .anchor-links h2 {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-bottom: 14px;
}

.product-information .anchor-links a {
    margin-right: 12px;
    display: inline-block;
}

.product-information .anchor-links .caption {
    margin-top: 10px;
    padding-bottom: 0;
}

.product-information h3 {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-bottom: 15px;
}

.product-information .info.desktopOnly table {
    width: 100%;
}

.product-information .info.desktopOnly table {
    margin-bottom: 10px;
}

.product-information .info.desktopOnly table td {
    padding-right: 10px;
}

.product-information .image img {
    max-height: 250px;
    max-width: 250px;
}

.product-information .disclaimer {
    font-size: 12px;
    margin-bottom: 18px;
}

/*TODO this should be moved to media queries file*/
.product-information .info.mobileOnly .package-size-label, .product-information .info.mobileOnly .ndc-label {
    color: #454545;
}

.product-information .info.mobileOnly .package-size-data, .product-information .info.mobileOnly .ndc-data, .product-information .info.mobileOnly .fill-volume-data {
    margin-bottom: 10px;
}

.product-information .info.mobileOnly + .info.mobileOnly {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
}

.product-information > .caption.references {
    padding-bottom: 20px;
}

.product-information-page .caption.references,
.product-information-page .caption.references p {
    font-size: 11px;
}

/*page + product search results*/
.search-results .emptysearchterms,
.product-search-results .emptysearchterms {
    font-style: italic;
    font-weight: bold;
}

.search-results h3,
.product-search-results h3,
h3.product-search-results {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    padding-bottom: 15px;
}

/*product search result*/
.product-search-result {
    margin-bottom: 50px;
}

.product-search-result .left {
    width: 160px;
    float: left;
    text-align: center;
    min-height: 60px;
}

.product-search-result .left img {
    max-width: 100%;
    max-height: 140px;
}

.product-search-result .right {
    margin-left: 180px;
}

.product-search-result .right a {
    font-size: 18px;
    font-weight: bold;
}

/*DH class*/
.product-search-results a.link_underline {
    text-decoration: underline;
}

/* ---- IMAGE WITH STRIPES ---- */
.image-with-stripes {
    line-height: 0;
}

.image-with-stripes img {
    width: 100%;
    height: auto;
}

.image-with-stripes:after {
    content: "";
    background-image: url("/-/media/gwmp/images/ui/bluediagloop.png");
    background-repeat: repeat-x;
    height: 24px;
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

.image-with-stripes.smallstripes:after {
    height: 11px;
    position: relative;
    top: 4px;
}

/* ---- LARGE MEDIA CALLOUT ---- */
/* http://www.mylan.com/mylan-resources/pharmacist-materials */
.large-media-callout {
    margin-bottom: 12px;
}

.large-media-callout .left {
    float: left;
    width: 45%;
    margin: 0 10px 10px 0;
}

.large-media-callout .left img {
    width: 100%;
    height: auto;
}

.large-media-callout .right {
    margin-left: 45%;
    padding-left: 10px;
}

.large-media-callout .right .caption {
    padding-bottom: 20px;
}

.large-media-callout h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.large-media-callout .media .link {
    display: inline-block;
    font-size: 11px;
    margin-top: 7px;
    vertical-align: top;
}

.large-media-callout .media .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
}

.large-media-callout .media .icon img {
    width: 100%;
    height: auto;
}

/*forgot to clearfix it for mobile - TODO: remvoe this and just add "CF" class to the view... */
.large-media-callout:before, .large-media-callout:after {
    content: " ";
    display: table;
}

.large-media-callout:after {
    clear: both;
}

.large-media-callout {
    *zoom: 1;
}

/*4/30/2015 "Inline Callouts" for EMEA Lite Template home pages*/
.home .inline-callouts {
    padding-right: 10px;
    padding-left: 40px;
    box-sizing: border-box;
    max-width: 979px;
}

.inline-callouts {
    margin-left: -20px;
}

.inline-callouts .sub-headline .divider {
    margin-top: 4px;
}

.inline-callouts .sub-headline .divider > div {
    width: 40%;
}

.inline-callouts .grid > .col {
    padding-left: 20px;
    box-sizing: border-box;
    padding-bottom: 30px;
}

.inline-callouts .image a img {
    width: 100%;
    height: auto;
}

.inline-callouts .sub-headline h2,
.inline-callouts .sub-headline h2 a {
    font-size: 18px;
    color: #333;
    line-height: 1;
    padding: 4px 0 8px;
}

.inline-callouts .sub-headline h2 a:hover {
    text-decoration: none;
}

.inline-callouts .caption {
    padding-bottom: 0;
}

/*9/2/2015 ... 2-column "Contact Us" map module (map on right, text on left)*/
.contact-map-module {
    margin-bottom: 30px;
}

.contact-map-module > .left {
    width: 40%;
    float: left;
    box-sizing: border-box;
    padding: 20px 0 0 0;
}

.contact-map-module > .right {
    width: 60%;
    float: left;
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
}

/* 9/2/2015 ... New component for responsive Google Map embed*/
.responsive-google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.responsive-google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ============== END INDIVIDUAL COMPONENTS ============== */

/* ============== 6. PAGE-SPECIFIC STYLES =============== */
/* ---- BEGIN CONTACT PAGE ---- */
.contact-address {
    position: relative;
    /*height: 137px; what if theres a long address?*/
    padding-right: 40px;
}

.contact-address > .inner > img {
    top: 48px;
    position: absolute;
}

.contact-address > .inner {
    background: url('/-/media/gwmp/images/ui/bgboxglobe.png');
    background-position: top right;
    background-repeat: no-repeat;
    /*height: 97px; what if theres a long address?*/
    /*this does nothing padding-bottom: 20px; */
    padding-top: 20px;
}

.contact-address .right {
    padding-left: 70px;
    /*4EMEA*/
    padding-bottom: 20px;
}

.contact-address .right h2 {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    margin-bottom: 3px;
}

.contact-address .right p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/*note: right-clt is deprecated, should use .side-rail-a or .side-rail-b with rail .icon-list instead */
.right-clt {
    margin-bottom: 20px;
}

.right-clt.contact-directions {
    background: #f2f2f2;
    height: 137px;
    position: relative;
}

.right-clt.contact-directions .icon {
    position: absolute;
    left: -27px;
    top: 25px;
}

.right-clt.contact-directions .inner > div {
    padding-left: 34px;
    padding-top: 40px;
}

.right-clt.contact-directions .inner > div h3 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.right-clt.contact-directions .inner > div > p > a {
    font-size: 16px;
}

.right-clt.contact-directions .inner > div > p > a:hover, .right-clt.contact-directions .inner > div > p > a:hover span, .right-clt.contact-directions .inner > div > p > a:hover span label {
    /*oh why can't DH ever let two things just be the same?*/
    text-decoration: none;
}

.right-clt.contact-directions .btm-border {
    background: none repeat scroll 0 0 #FFFFFF;
    bottom: 0;
    height: 19px;
    position: absolute;
    width: 100%;
}

.right-clt.contact-directions .btm-border > div {
    background: url('/-/media/gwmp/images/ui/diagloopgrn.png');
    background-repeat: repeat-x;
    height: 14px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.right-clt.contact-directions p {
    font-size: 16px;
}

.right-clt.contact-directions p > a {
    display: inline-block;
    line-height: 1.0;
}

.contact-tabs {
    margin-top: 23px;
}

.contact-tabs .rail-clt {
    background-color: #F2F2F2;
}

#pharmaCovigilance label {
    font-weight: normal;
}

#pharmaCovigilance label strong {
    margin: 20px 0;
}

#btn_contact_submit {
    margin-right: 30px;
}

.input_submit .clear {
    display: inline-block;
    font-size: 14px;
}

.input_submit {
    margin: 20px 0 40px;
}

#contactForm-div {
    display: inline-block;
}

.clearable {
    background: url('/-/media/gwmp/images/ui/modalclose.png') no-repeat right -10px center !important;
    /*border:1px solid #999;*/
    padding: 3px 18px 3px 4px; /* USE the same right padding in jQ! */
    border-radius: 3px;
    transition: background 0.4s; /*REMOVE THIS LINE IF YOU ENCOUNTER ISSUES IN Chrome (Bug 02.2014)*/
}
/* (jQ addClass:) if input has value: */
.clearable.x {
    background-position: right 5px center;
}
/* (jQ addClass:) if mouse is over the 'x' input area*/
.clearable.onX {
    cursor: pointer;
}

/* contact department list - the information that appears on the rail next to the contact form*/
.contact-us .department {
    margin-bottom: 15px;
}

.contact-us .department h2 {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.contact-us .department p {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.3;
}

.contact-us .department a {
    font-size: 12px;
    line-height: 1.3;
}

.contact-us .department .link-with-icon .icon {
    float: left;
    margin-right: 5px;
}

/*contact us "primary business center" address - top left of the page */
.contact-address > .inner {
    min-height: 200px;
}
/* GLOBAL CENTER - appears on tab 2 of contact page */
.global-center .left {
    float: left;
    width: 20%;
}

.global-center .right {
    float: left;
    width: 80%;
    padding-top: 20px;
    padding-bottom: 30px;
}

.global-center .right .flag {
    float: left;
    width: 32px;
}

.global-center .right .flag img {
    width: 100%;
    height: auto;
}

.global-center .right .info {
    margin-left: 50px;
}

.global-center h2 {
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

.global-center .country h2 {
    padding-top: 6px;
    padding-bottom: 10px;
}

/* New Mailing Address tab for U.S. Form 10-K - mylan.com */
.mailing-address-check-container {
    margin-bottom: 30px;
}

.mailing-address-check-container #formCheckbox {
    display: inline-block;
}

.mailing-address-check-container > .labelwrap {
    display: inline;
}

.mailing-address-check-container .mailing-address-tab {
    padding: 14px 20px;
    margin-top: 40px;
    background-image: url('/-/media/gwmp/images/ui/accordionhandle.png');
}

.mailing-address-check-container .mailing-address-tab > .labelwrap > label {
    font-weight: bold;
    color: #666;
}

.mailing-address-check-container .mailing-address-tab.active {
    background: #373737;
}

.mailing-address-check-container .mailing-address-tab.active > .labelwrap > label {
    color: #fff;
}

.mailing-address-check-container .mailing-address-pane {
    background: #f2f2f2;
    padding: 20px;
}

/* ---- END CONTACT PAGE ---- */

/* ---- BEGIN GBR FORM PAGE ---- */
#gbrForm .input_submit .clear {
    margin-left: 35px;
}

/* ---- STATE / ZIP INPUTS (used on GBR and CONTACT forms, Mylan.com rebuild) */
.state-zip {
    width: 100%;
    display: table;
}

.state-zip .state,
.state-zip .zip {
    width: 50%;
    display: table-cell;
}

.state-zip .state {
    padding-right: 20px;
}

.state-zip .zip {
    padding-left: 20px;
}

/*GBR form only - for some reason, it's not a select on the contact form - Mylan.com rebuild*/
gbr-form .state-zip .state .labelwrap {
    padding-bottom: 8px;
}
/*USA Contact form only - Mylan.com rebuild*/
.contact-us.usa .state-zip .state input {
    margin-bottom: 16px;
}

/*TODO TEMP needed to add a CSS class to content to control image scaling rather than make a whole new component for this one-off */
.temp-gbr-form-callout-image-class {
    width: 100%;
    max-width: 400px;
    line-height: 0;
}

.temp-gbr-form-callout-image-class img {
    width: 100%;
    height: auto;
}

/* ---- BEGIN SITEMAP PAGE ---- */
.sitemap-page > a {
    /*"home" link*/
    padding-bottom: 8px;
    display: block;
}

/*TODO child selector*/
.sitemap-page li {
    padding-left: 0px;
    padding-bottom: 6px;
}

/*TODO child selector*/
.sitemap-page li:before {
    display: none;
}

/*TODO child selector*/
.sitemap-page li li {
    padding-left: 30px;
}

/*TODO child selector*/
.sitemap-page ul ul {
    padding-top: 4px;
}
/* ---- END SITEMAP PAGE ---- */

/* ---- BEGIN SEARCH RESULTS PAGE ---- */
.search-results h2 {
    /* rem is not supported by all the browsers we need to support. Also, please don't mix and match size units! We use PX on this project.  font-size: 1.125 rem; */
    padding-bottom: 20px;
}

/*TODO child selector*/
.search-results ul li {
    padding-left: 10px;
    position: relative;
}

/*TODO child selector*/
.search-results ul li:before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    top: 6px;
    left: 1px;
    background: #00bbe7;
}

.search-result-item {
    margin-bottom: 20px;
}

.search-result-item .snippet {
    padding-bottom: 0px;
}

.search-result-item b {
    font-weight: bolder;
}

.search-result-item .title {
    font-weight: bold;
    color: #00bbe7;
    text-decoration: underline;
}

.search-result-item .url {
    padding-bottom: 0px;
}

.search-results-query span {
    color: #333;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
}

.search-results-query .descriptor {
}

.search-results-query .terms {
    font-style: italic;
    /*seems to have been removed from mylan.com - remove here to match\
        text-transform: uppercase;*/
}

.search-results h2.pad-top {
    padding-top: 20px;
}
/* ---- END SEARCH RESULTS PAGE ---- */

/* ---- BEGIN Plus resources landing page http://www.mylan.com/mylan-resources ---- */
.plus-resources-hero {
    position: relative;
}

.plus-resources-hero:after {
    content: "";
    background-image: url('/-/media/gwmp/images/ui/plusresourceslandingherostripes.png');
    width: 2000px;
    background-repeat: repeat-x;
    height: 160px;
    position: absolute;
    z-index: -1;
}

.plus-resources-hero img {
    width: 100%;
    height: auto;
}

.plus-resources-hero > .inner > .caption {
    position: absolute;
    max-width: 490px;
    margin: 0 5%;
    bottom: 0;
    font-weight: bold;
    color: #fff;
    font-size: 18px;
    line-height: 1.33;
    padding-bottom: 20px;
}

.plus-resources-hero > .inner > .caption p {
    padding-bottom: 0;
}

.plus-resources-hero > .inner > .caption, .plus-resources-hero > .inner > .caption, .plus-resources-hero > .inner > .caption, .plus-resources-hero > .inner > .caption p {
    color: #fff;
    font-size: 18px;
    line-height: 1.33;
}

.plus-resources-hero-features {
    border-top: 5px solid #fff;
    margin-top: -170px;
    position: relative;
    z-index: 1;
}

.plus-resources-hero-features .inner {
    max-width: 640px;
    padding-left: 40px;
    padding-right: 20px;
}

.plus-resources-hero-feature {
    background: #fff;
    float: left;
    margin: 40px 0 40px 0;
}

.plus-resources-hero-feature > .inner {
    padding: 0 20px 10px 20px;
    min-height: 194px;
}

.plus-resources-hero-feature > .inner > .caption {
    padding-bottom: 0;
}

.plus-resources-hero-feature.green {
    border-bottom: 5px solid #bed600;
    border-top: 5px solid #bed600;
}

.plus-resources-hero-feature.orange {
    border-bottom: 5px solid #ffb900;
    border-top: 5px solid #ffb900;
}

.plus-resources-hero-feature.red {
    border-bottom: 5px solid #e71939;
    border-top: 5px solid #e71939;
}

.plus-resources-hero-feature .icon img {
    height: 83px;
    margin: 0 auto;
    padding-top: 15px;
    width: auto;
    display: block;
}

.plus-resources-hero-feature h3 {
    font-weight: bold;
    text-align: center;
    width: 100%;
    font-size: 18px;
    color: #333;
    margin: 6px 0 20px 0;
}

.plus-resources-hero-feature h3 a {
    /*in case they want to put a link inside it*/
    font-size: 18px;
}

.plus-resources-hero-feature .links a {
    padding-bottom: 6px;
    display: block;
}

.plus-resources-hero-feature .links a span {
    line-height: 16px;
    display: block; /*if HTML5 Doctype is set, some browsers won't let you set the line-height below a certain value (on inline elements). Display:block fixes this. */
}

/*options for One to Four column alternate layouts*/
/*one*/
.plus-resources-landing-page.one-up .plus-resources-hero-feature.two,
.plus-resources-landing-page.one-up .plus-resources-hero-feature.three,
.plus-resources-landing-page.one-up .plus-resources-hero-feature.four {
    display: none;
}

.plus-resources-landing-page.one-up .plus-resources-hero-feature.one {
    width: 100%;
}

/*two*/
.plus-resources-landing-page.two-up .plus-resources-hero-feature.three,
.plus-resources-landing-page.two-up .plus-resources-hero-feature.four {
    display: none;
}

.plus-resources-landing-page.two-up .plus-resources-hero-feature.one,
.plus-resources-landing-page.two-up .plus-resources-hero-feature.two {
    width: 47.5%;
    float: left;
}

.plus-resources-landing-page.two-up .plus-resources-hero-feature.one {
    margin-right: 5%;
}

/*three*/
.plus-resources-landing-page.three-up .plus-resources-hero-feature.four {
    display: none;
}

.plus-resources-landing-page.three-up .plus-resources-hero-feature.one,
.plus-resources-landing-page.three-up .plus-resources-hero-feature.two,
.plus-resources-landing-page.three-up .plus-resources-hero-feature.three {
    width: 31.25%;
    float: left;
}

.plus-resources-landing-page.three-up .plus-resources-hero-feature.one,
.plus-resources-landing-page.three-up .plus-resources-hero-feature.two {
    margin-right: 3.125%;
}

/*four*/
.plus-resources-landing-page.four-up .plus-resources-hero-feature.one,
.plus-resources-landing-page.four-up .plus-resources-hero-feature.two,
.plus-resources-landing-page.four-up .plus-resources-hero-feature.three,
.plus-resources-landing-page.four-up .plus-resources-hero-feature.four {
    width: 23%;
    float: left;
}

.plus-resources-landing-page.four-up .plus-resources-hero-feature.one,
.plus-resources-landing-page.four-up .plus-resources-hero-feature.two,
.plus-resources-landing-page.four-up .plus-resources-hero-feature.three {
    margin-right: 2%;
}

/*plus resources page - institutional customers section http://www.mylan.com/mylan-resources*/
.plus-resources-institutional h3 {
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
    color: #333;
}

.plus-resources-institutional h3 a {
    /*in case they want to put a link inside it*/
    font-size: 18px;
}

.plus-resources-institutional .divider {
    padding-bottom: 7px;
    margin-bottom: 20px;
    overflow: hidden;
    border-bottom: 5px solid #eb8700;
    background: none;
    border-top: none;
    height: auto;
}

.plus-resources-institutional .icon {
    display: inline-block;
    width: auto;
    height: 83px;
    margin: 0 15px 0 0;
}

.plus-resources-institutional > .grid .col > .inner {
    padding: 0 26px 0 0;
}

.plus-resources-institutional > .grid > .col > .inner > .links {
    margin-top: 20px;
}

.plus-resources-institutional > .grid > .col + .col > .inner {
    padding: 0 13px;
}

.plus-resources-institutional > .grid > .col + .col + .col > .inner {
    padding: 0 0 0 26px;
}

.plus-resources-institutional .icon img {
    height: inherit;
    width: auto;
}

.plus-resources-institutional h4 {
    font-weight: bold;
    color: #333;
}
/* ---- END Plus resources landing page ---- */
/* ============== END PAGE-SPECIFIC STYLES =============== */

/* =================== 7. UTILITY STYLES AND MISCELLANEOUS =================== */
.jsHook-mobile {
    z-index: 0; /*treat as boolean to keep track of mobile state*/
    position: absolute; /*position needed or z-index won't have a value, in some browsers*/
}

.jsHook-cookie {
    z-index: 175; /* for keeping track of the height of the cookie warning bar (in pixels) */
    position: absolute; /*position needed or z-index won't have a value, in some browsers*/
}

/*moved to a min width rule in media-queries.css - display:initial does not work reliably. also added to ie8.css since it won't recognize the min width rule.
 .mobileOnly {
 display: none;
 }
 */
/* ---- Embedded Youtube vids - force them to scale ---- */
.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.youtube-container iframe, .youtube-container object, .youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*DEV COMMENT CLASS used in prototyping*/
.devComment {
    display: block;
    border: 1px solid red;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: red;
    font-weight: bold;
    font-family: "Consolas", "Lucida Console", serif;
    margin: 0 0 8px 0;
    box-sizing: border-box;
}
/* =================== END UTILITY STYLES =================== */

/* ======================== 8. HACKS AND OVERRIDES ======================== */
/* ---- "Triple Callout" one-off - not sure where this is used (france? couldn't find it) ---- */
.triple-callout {
    float: left;
    max-width: 193px;
    margin-right: 20px;
    margin-bottom: 24px;
    text-align: left;
}

.triple-callout .caption {
    color: #807e83;
    font-size: 13px;
}

.triple-callout .caption strong {
    color: #807e83;
}

.triple-callout .image {
    margin-bottom: 24px;
}

.triple-callout-year {
    font-size: 22px;
    color: #807e83;
    font-weight: bolder;
    margin-top: 0;
}

/* ---- BIG Button one-off - not sure where this is used (france? couldn't find it) ---- */
.big-button span {
    color: #00bbe7;
    font-size: 200%;
    font-weight: bolder;
    white-space: nowrap;
    text-decoration: none;
}

.big-button {
    background-image: linear-gradient(to bottom, #fff 0%, #efefef 100%);
    border: 1px solid #aaa;
    border-radius: 6px;
    box-shadow: 0 0 3px #ccc;
    color: #666;
    padding: 24px 0;
    width: 100%;
    margin-top: 30px;
}

/* ---- mylan at a glance... unique right hand callout - not-fully-componentized (raw HTML inside rail with "at a glance" option selected) ---- */
.mylan-at-a-glance .bkd-img {
    position: absolute;
    right: -200px;
    top: 20px;
}

.mylan-at-a-glance .inner {
    padding-right: 5px;
}

.mylan-at-a-glance .fact-sheet {
    background: white;
    padding: 20px;
    margin-top: 20px;
}

.mylan-at-a-glance .fact-sheet > a > img {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.mylan-at-a-glance .fact-sheet .button {
    width: 97%;
}

.mylan-at-a-glance .fact-sheet .button .btn-v2 {
    width: 100%;
}

/* Deprecated Padding Styles - included for safety  */
.pad-20 {
    padding: 0 20px;
}

.pad-40 {
    padding: 0 40px;
}

.pad-0-20 {
    padding: 0 20px 0 0;
}

.pad-0-40 {
    padding: 0 40px 0 0;
}

.pad-20-0 {
    padding: 0 0 0 20px;
}

.pad-20-40 {
    padding: 0 40px 0 20px;
}

.pad-40-0 {
    padding: 0 0 0 40px;
}

.pad-40-5 { /*used by footer grid*/
    padding: 0 5px 0 40px;
}

.pad-40-20 {
    padding: 0 20px 0 40px;
}

.pad-40-30 {
    padding: 0 30px 0 40px;
}

.pad-40-60 {
    padding: 0 60px 0 40px;
}

.pad-top {
    /*previously "pad-0-20"*/
    padding: 0 20px 0 0;
}

.pad-main {
    /*previously "pad-40"*/
    /* now deprecated in favor of .padded-content (the "uniform" left/right padding for main content that is the full grid width) */
    padding: 30px 0 40px 40px;
    max-width: 640px;
}
/* END DEPRECATED PADDING STYLES */

/* Someone really likes generating elements using the <label> tag */
a label {
    cursor: pointer;
}

.global-footer .legal {
    max-width: none; /* ASSUMES all EMEA sites have no "Mega menu" or "footer rail" */
}

/* Portugal additions by ??? */
/*adding for Portugal terms & use*/
/*WARNING: "legal" is a highly reusable class name! We should change this to a unique class name ASAP, or we risk disrupting the display of GLOBAL ELEMENTS (such as legal footer!) which also use this classname. */
ol.legal ol {
    list-style-type: lower-alpha;
}
/*added some padding - just a guess - we have no visual reference for this page.*/
/*TODO child selector*/
ol.legal li {
    /*OL_LI_EXCEPTION*/
    padding-top: 20px;
}

/* I believe this was for Ireland, where they wanted 4 callouts stacked up on the home page */
.nav-indent {
    padding-left: 40px;
}

/*Temporary hack / stopgap to fix a very large quantity of arrow-links entered incorrectly in content on Leadership accordions (/company/leadership)
    They should be blue-med but they were entered as blue-lg */
.accordion.type-b .icon-link.arrow-blue-lg span:after {
    content: " ";
    background-image: url("/-/media/gwmp/images/ui/icofootersprite.png");
    height: 10px;
    width: 6px;
    background-position: 0 -37px;
    display: inline-block;
    position: absolute;
    right: -11px;
    bottom: 2px;
}

/*Temporary hack to make PDF list ("Graphical Media Link") display differently if inside an accordion (/company/corporate-governance) http://www.mylan.com/company/corporate-governance */
.accordion.type-a .pane > .pdf-list.type-b > .inner > ul > li > .left {
    float: left;
    width: 52px;
}

.accordion.type-a .pane > .pdf-list.type-b > .inner > ul > li > .left, .accordion.type-a .pdf-list.type-b > .inner > ul > li > .right {
    display: block;
}

.accordion.type-a .pane > .pdf-list.type-b > .inner > ul > li > .right {
}

.accordion.type-a .pane > .pdf-list.type-b > .inner > ul > li > .right .icon-link.arrow-blue-med span:after {
    display: none;
}

.accordion.type-a .pane > .pdf-list.type-b .file-size {
    font-size: 11px;
    margin-top: -2px;
}

.accordion.type-a .pane > .pdf-list.type-b {
    margin-bottom: 10px;
}

/*clearfix it*/
.accordion.type-a .pane > .pdf-list.type-b:before,
.accordion.type-a .pane > .pdf-list.type-b:after {
    content: " ";
    display: table;
}

.accordion.type-a .pane > .pdf-list.type-b:after {
    clear: both;
}

.accordion.type-a .pane > .pdf-list.type-b {
    *zoom: 1;
}

/*1/14/2015  all other accordions are padded, except corporate governance, so we will add the following hack to replicate the inconsistency
update- removed hack because while it works for the pdf list accordions, there's no way to target accordions with text content only on this page. So we will impose the standard: accordion type-a content is padded.
.accordion.type-a .pane > .pdf-list.type-b {
    margin-left:-20px;
    margin-right:-20px;
}
*/

/* for unit dose and specialty packaging page 
    REMOVED for 4/24/2015 update
.accordion.type-a .pane > .content-with-floated-image .floated.left {
    max-width: 47.2%;
}
*/

/*temp hack to add a bit of spacing between links in plus hero feature captions*/
.plus-resources-hero-feature .caption .icon-link {
    margin-bottom: 8px;
    display: inline-block;
}

/*temp hack for floated image content within accordion WITH a UL in the caption... odd use case... only seems to exist here:
    http://www.mylan.com/products/packaging-and-delivery-systems/unit-dose-and-specialty-packaging */
.accordion .content-with-floated-image > .caption > ul {
    /* this doesn't work with longer LI text
        float: left;*/
}

.accordion .content-with-floated-image > .caption {
    display: table;
    /*why this works, I have no clue*/
}

.accordion.type-a .content-with-floated-image > .caption {
    padding-top: 6px;
}

/*inconsistent font size on original mylan.com - attempt to replicate inconsistency */
.accordion .content-with-floated-image > .caption > ul > li {
    /*LI_EXCEPTION*/
    font-size: 12px;
}

/*odd exception --- inline pdf list type-b ON RAIL has no link icons... */
.rail .pdf-list.inline.type-b .icon-link.arrow-blue-med span:after {
    display: none;
}

/*TEMP hide mysterious unwanted HTML being generated by the pagination code... (press releases list page)*/
.PagedList-ellipses, .PagedList-skipToFirst, .PagedList-skipToLast {
    display: none;
}

/*TODO componentize this - it's just raw content right now */
.social-bar {
    margin-top: 4px;
}

.social-bar .socialButton {
    display: inline-block;
    position: relative;
}

.social-bar .socialButton + .socialButton {
    margin-left: 14px;
}

.social-bar .socialButton + .socialButton:before {
    content: " ";
    display: block;
    position: absolute;
    width: 1px;
    height: 25px;
    background: #EAB40F;
    left: -9px;
    top: -2px;
    bottom: 2px;
}

/*ANCHOR PUSH temporary stopgap for adjusting scroll position of anchor tags to compensate for height of header bar. (mylan.com)
    See UI CONTROL JS for proposed global solution (which is commented out pending approval to implement).*/
.anchor-push:before {
    display: block;
    content: " ";
    margin-top: -58px;
    height: 58px;
    visibility: hidden;
}

/*Hack for unique (nonstandard) green stripe divider on Mylan.com investors landing page*/
.public-filings-summary + script + .content-section + .custom-hr.green-stripes {
    max-width: 430px;
    height: 7px;
}

.public-filings-summary + script + .content-section + .custom-hr.green-stripes + .pdf-list + .custom-hr.green-stripes {
    max-width: 430px;
    height: 7px;
    margin-bottom: 30px;
}

/*hack for unique grey divider on Mylan.com's Investors page, between past events summary and bottom callout
    (it needs to have the normal padding adjusted and in mobile it needs to go straight to the edge) 
    (this markup is not componentized - it's in a content section*/
.custom-hr.grey-line.investors {
    margin: 0 0 18px;
}

/* hack to achieve unique exception to OL styles found on transdermal technology page */
/* .transdermal class is applied in content */
ol.transdermal {
    /*LI_EXCEPTION*/
    font-weight: bold;
    color: #000;
}

ol.transdermal li {
    /*LI_EXCEPTION*/
    margin-left: 20px;
    font-weight: bold;
    color: #000;
    padding: 0;
    margin-top: 4px;
}

ol.transdermal strong {
    color: #000;
}

ol.transdermal li span {
    font-weight: normal;
    color: #666;
}

/*Exception to normal Page Headline padding: reduce top padding if headline is preceded by a carousel*/
.carousel + .container-full.padded-content > .page-headline {
    padding-top: 10px;
}

/* TODO: This is a temp manual component, used on Canada and US and possibly elsewhere. It needs to be componentized. */
.accordion.type-d .greybox {
    background: #ededed;
    padding: 20px;
    margin-top: 10px;
}

.accordion.type-d .greybox h2 {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 12px;
}

/*here's the stand-alone version for componentization... TODO: move this into components section if/when views and controls are ever created for it (right now the class only exists in content on mylan.com) */
/* TODO: This is a temp manual component, used on Canada and US and possibly elsewhere. It needs to be componentized. */
/* ----- Reasons to Move ----- */
.reasons-to-move {
    background: #f2f2f2;
    padding: 20px;
    position: relative;
    margin-bottom: 45px; /*20 standard bottom padding + 25 to account for abs positioned blue stripe*/
}

.reasons-to-move h2 {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 12px;
}

/*exceptions to standard caption & ul behavior...*/
.reasons-to-move > .caption {
    padding-bottom: 10px;
    padding-top: 5px;
}

.reasons-to-move > .caption ul li + li {
    /*LI_EXCEPTION_REMOVED
    margin-top: 8px;*/
}

.reasons-to-move:after {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 20px;
    background-color: #fff;
    background-image: url("/-/media/gwmp/images/ui/bluestripes.png");
    background-repeat: repeat-x;
    left: 0;
    bottom: -25px;
}

/*additional rules and exceptions for "reasons to move" when placed inside an accordion (careers landing page, mylan.com) */
.accordion.type-d .reasons-to-move {
    margin-bottom: 15px;
}

.accordion.type-d .reasons-to-move:after {
    display: none;
}

.accordion.type-d .reasons-to-move h2 {
    margin-bottom: 20px;
}

.accordion.type-d .reasons-to-move > .caption {
    /*overrides .accordion.type-d > .inner > ul > li > .pane > .caption .caption" rule*/
    padding-bottom: 20px!important;
}

.accordion.type-d .reasons-to-move > .content-with-floated-image > .caption {
    display: inline;
    padding-bottom: 20px;
}

/*'Contact global communications cta' (not componentized) - mylan.com "news" landing page*/
h2.contact-global-communications-cta {
    font-size: 14px;
}

/*Tooltip Popup styles (one-off, not componentized. Currently only exists on mylan.com contact form... markup has been manually entered into content.) */
.tooltipPopupContainer {
    display: inline;
}

.tooltipTrigger {
    cursor: pointer;
    color: #00BBE7;
}

.tooltipPopupContainer.active .tooltipPopup {
    position: absolute;
    width: 220px;
    padding: 40px 20px 20px;
    background: #f7f7f7;
    z-index: 1;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    border-radius: 4px;
}

.tooltipPopupContainer.active .tooltipPopup {
    display: block!important;
}

.tooltipPopupContainer.active .tooltipPopup .caption {
    padding-bottom: 0;
}

.tooltipPopupContainer.active .tooltipPopup .closeBtn {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #00b1dd;
    cursor: pointer;
}

.tooltipPopupContainer.active .tooltipPopup .closeBtn img {
    margin-bottom: -5px;
}

/*TEMP - CSS class exists directly in content - mylan.com rebuild only - PDS phase 1 - will become deprecated when new PDS UI is created.*/
.product-page-marc-number {
    text-align: right;
    max-width: 680px;
    padding-right: 20px;
    padding-bottom: 20px;
    position: relative;
    bottom: -40px;
}

/*career iframe - sloppy but effective*/
#career_iframe {
    width: 120%;
}

/*CUSTOM BLUE TABLES http://www.mylan.fr/transparence-des-liens.html?d=2013&s=1&cat=cat_profsan */
table.blue-table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    font-size: 13px;
}

table.blue-table tr th {
    color: #FFF;
    background-color: #00bbe4;
    padding: 4px;
    text-align: left;
    font-weight: bold;
}

table.blue-table tr td {
    color: #000;
    background-color: #cce5f9;
    padding: 4px;
    font-size: 13px;
}

table.blue-table tr td a {
    font-size: 13px;
    color: #000;
}

table.blue-table tr td a:hover {
    text-decoration: none;
}

table.blue-table tr.odd td {
    color: #000;
    background-color: #e7f4fa;
}