/* 
 * ---------------------------------------- *
 * M&G Allocation Styles                    *
 * ---------------------------------------- *
 */

/* global
   ============================ */

html.allocation-landing { background: url(/Assets/SiteRefresh/img/backgrounds/audience_landing.jpg) no-repeat center -170px; }
html.allocation-landing.gradient-background { background: linear-gradient(to bottom, #f4f6f7 47%, #c0c67c 70%, #23595f 100%); }
.wrap { background: -moz-linear-gradient(top, #f4f6f7 40px, #ffffff 40px); background: -webkit-linear-gradient(top, #f4f6f7 40px,#ffffff 40px); background: linear-gradient(to bottom, #f4f6f7 40px,#ffffff 40px); }
nav .top-menu { background: #ffffff; }

.allocation-wrap { background: #ffffff; border-top: 14px solid #9eaa02; }
.oldie .allocation-wrap { border-left: 1px solid #cdcdcd; border-right: 1px solid #cdcdcd; }
.allocation-wrap figure { display: block; margin: 0; padding: 0; }
.allocation-wrap h1,
.allocation-wrap h2,
.allocation-wrap h3,
.allocation-wrap h4 { color: #014f5b; font-family: "Interstate MG"; }
.allocation-wrap h3 { font-size: 36px; line-height: 1.2; }
.allocation-wrap h4 { font-size: 26px; line-height: 1.2; font-family: "Interstate MG Light"; margin-bottom: 25px; }

.allocation-wrap .footer-utility { margin-bottom: 0; padding-bottom: 40px; }
.allocation-wrap .footer-utility > div { padding: 0 23px; }

.allocation-wrap section[data-nav-text] { padding-bottom: 60px; position: relative; }
.back-to-top { background: url("/Assets/AllocationRange/images/icons/back-to-top-arrow.png") no-repeat 85% 60% #ffffff; bottom: 0; color: #363636; cursor: pointer; display: block; font-family: "Interstate MG"; font-size: 14px; font-weight: bold; height: 30px; letter-spacing: -0.05em; line-height: 32px; padding: 0 26px 0 11px; position: absolute; right: 15px; }
.oldie .back-to-top { font-weight: normal; }

/* modules
   ============================ */

/* image banner
   ---------------------------- */

.image-banner { border-bottom: 14px solid #9eaa02; display: block; margin: 0; padding: 0; clear: both; }
.image-banner img { display: block; max-width: 100%; height: auto; }

/* allocation nav
   ---------------------------- */

.allocation-nav { font-size: 16px; width: 960px; background: #ebeb9e; border-bottom: 1px solid #cdcc0d; padding: 8px 0 6px; display: none; }
.allocation-nav.show { display: block; }
.allocation-nav.fixed { position: fixed; top: 0; left: 50%; margin-left: -480px; z-index: 1; }
.allocation-nav .items { width: 100%; }
.allocation-nav table.vertical-centre,
.allocation-nav table.vertical-centre tbody,
.allocation-nav table.vertical-centre tr,
.allocation-nav table.vertical-centre td { height: auto; min-height: 0; }
.allocation-nav td { position: relative; border-left: 2px solid #9faa1c; border-right: 2px solid #9faa1c; }
.allocation-nav td:first-child { border-left: none; }
.allocation-nav td.last { border-right: none; }
.allocation-nav td a { display: block; font-family: "Interstate MG"; color: #363636; text-decoration: none; text-align: center; }
.allocation-nav td a .border { position: absolute; bottom: -7px; width: 100%; left: 0; border-bottom: 1px solid transparent; }
.allocation-nav td a .inner { padding: 5px 30px; }
.allocation-nav td a:hover { text-decoration: underline; }
.allocation-nav td.active a { text-shadow: 0 0 1px rgba(51, 51, 51, 0.3); }
.allocation-nav td.active a .border { border-bottom: 6px solid #9faa1c; }

.ie7 .allocation-nav { width: 958px; }
.ie7 .allocation-nav td a .inner { padding: 5px 26px; }

/* text + quote module
   ---------------------------- */

.text-module { padding: 40px 0 20px; font-size: 16px; }
.text-module .inner { max-width: 670px; margin: auto; }
.text-module .inner .attribution { margin-bottom: 25px; }
.text-module .inner .attribution img { margin: 0 auto 25px; }
.text-module .inner p,
.text-module .inner ul { margin-bottom: 25px; }
.text-module .inner p ul,
.text-module .inner p ul.teal-bullets { margin-bottom: 0; }
.text-module .inner p { line-height: 1.4em; }
.text-module .inner h3 { max-width: 600px; margin: auto auto 0; font-family: "Interstate MG"; line-height: 1.1em; }
.text-module .inner h3,
.text-module .inner h4 { margin-bottom: 0; }
.text-module .inner h3 ~ .rte,
.text-module .inner h4 ~ .rte { margin-top: 25px; }
.text-module .inner .teal-cta { margin-bottom: 25px; }
.text-module .inner p .teal-cta { margin-bottom: 0; }
.text-module .inner p .teal-cta + .teal-cta { margin-top: 25px; }

/* fund selector
   ---------------------------- */

.fund-selector { background: #fdfadb; padding: 50px 14px; font-size: 16px; }
.fund-selector .title { margin: 0 auto; padding: 0; color: #333; }
.fund-selector .title p { margin-bottom: 25px; }
.fund-selector .allocation-fund,
.fund-selector > .edit-frame > div > .edit-frame { width: 31.77%; float: left; margin-left: 2.345%; position: relative; overflow: hidden; }
.fund-selector .allocation-fund.first,
.fund-selector > .edit-frame > div > .edit-frame:nth-child(3n - 2) { margin-left: 0; }
.fund-selector .allocation-fund .top { padding: 12px 15px; background: #cd9933; color: #fdfadb; text-transform: uppercase; }
.fund-selector .allocation-fund .top,
.fund-selector .allocation-fund .top h3 { font-family: "Interstate MG"; font-size: 20px; }
.fund-selector .allocation-fund .top .coloured { color: #004f5c; }
.fund-selector .allocation-fund .img-holder { position: relative; }
.fund-selector .allocation-fund .img-holder img { display: block; max-width: 100%; height: auto; }
.fund-selector .allocation-fund .fund-details { background: #cd9933; margin-bottom: 1px; width: 100%; }
.fund-selector .allocation-fund .fund-details .inner { padding: 8px 64px; color: #02474e; }
.fund-selector .allocation-fund .fund-details .inner h4 { font-size: 20px; font-family: "Interstate MG"; color: #02474e; margin-bottom: 0; }
.fund-selector .allocation-fund .fund-details .inner div { font-size: 26px; line-height: 1; }
.fund-selector .allocation-fund .fund-details .inner .highlight { color: #cd9933; font-size: 42px; font-weight: bold; }
.fund-selector .allocation-fund .fund-details .inner .connector { position: relative; bottom: 6px; }
.fund-selector .allocation-fund .actions { position: relative; }
.fund-selector .allocation-fund .actions a { display: block; margin-bottom: 1px; }
.fund-selector .allocation-fund .actions span { display: block; }
.fund-selector .allocation-fund .panel { background: url("/Assets/AllocationRange/images/backgrounds/bg-panel-transparency.png") left top repeat transparent; background: rgba(243, 243, 214, 0.9); bottom: 0; height: 100%; left: 0; overflow-y: auto; position: absolute; width: 100%; }
.fund-selector .allocation-fund .panel .close { background: url("/Assets/AllocationRange/images/icons/close.png"); cursor: pointer; display: block; height: 12px; position: absolute; right: 20px; top: 15px; width: 12px; }
.fund-selector .allocation-fund .panel .panel-content { font-size: 16px; line-height: 19px; overflow: hidden; padding: 40px 15px 10px; }
.fund-selector .allocation-fund .panel .panel-content img { margin: 20px auto; }
.fund-selector .allocation-fund .panel .panel-content .interest { font-size: 14px; line-height: 17px; }

.fund-selector > .edit-frame > div > .edit-frame > .allocation-fund { float: none; margin-left: 0; width: 100%; }
.fund-selector .edit-frame .allocation-fund .panel { display: block; position: static; border-top: 1px dashed #000; }
.fund-selector .edit-frame .allocation-fund .panel .close { display: none; }

.oldie .fund-selector .allocation-fund { width: 30.9%; }

/* fund selector 2 col
   ---------------------------- */

.fund-selector.plans-2 { background: url('/Assets/AllocationRange/images/backgrounds/bg-golfer.jpg') no-repeat top center #fdfadb; }
.fund-selector.plans-2 .allocation-fund { float: right; margin-top: 30px; }
.fund-selector.plans-2 .allocation-fund.first { float: left; }
.fund-selector.plans-2 .allocation-fund .panel { display: block; position: static; height: auto; background: transparent; }
.fund-selector.plans-2 .allocation-fund .fund-details, 
.fund-selector.plans-2 .allocation-fund .img-holder > img,
.fund-selector.plans-2 .allocation-fund .actions a.icon-reveal,
.fund-selector.plans-2 .edit-frame .allocation-fund .img-holder > span > img,
.fund-selector.plans-2 .allocation-fund .panel .close { display: none; }
.fund-selector.plans-2 .allocation-fund .panel .panel-content { padding: 25px 15px 35px; background: transparent; }

.fund-selector.plans-2 .edit-frame .allocation-fund .panel { border-top: none; }
.fund-selector.plans-2 > .edit-frame > div > .edit-frame ~ .edit-frame { float: right; }

/* 3-col box grid
   ---------------------------- */

.box-grid { padding: 40px 12px 50px; }
.text-module.bg-striped + .box-grid { padding-top: 0; }
.box-grid .box { float: left; width: 32.2%; margin-left: 1.7%; position: relative; }
.box-grid .box table { border-left: 1px solid #cdcccc; }
.box-grid .box.first { margin-left: 0; }
.box-grid .box.first table { border-left: none; }
.box-grid .box table,
.box-grid .box tbody,
.box-grid .box tr,
.box-grid .box td { min-height: 0; height: auto; }
.box-grid .box .inner { padding: 10px 25px; color: #004f5c; font-size: 18px; line-height: 1.4; font-weight: bold; }
.box-grid .box .inner .arrow { position: absolute; top: 50%; margin-top: -14px; left: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 16px solid #fff; }
.box-grid .box .inner .arrow.right { left: auto; right: 0; border-left: none; border-right: 16px solid #fff; }
.box-grid + .bg-striped { margin-top: 38px; }

.text-module .box-grid { background: transparent; padding-top: 10px; padding-bottom: 0; }
.text-module .box-grid .back-to-top { display: none; }

/* dual box module
   ---------------------------- */

.dual-focus { padding: 40px 14px 50px; font-size: 16px; line-height: 1.5; }
.dual-focus .top { margin-bottom: 25px; }
.dual-focus .half { width: 48.47%; float: left; margin-left: 2.25%; background: #fff; }
.dual-focus .half.first { margin-left: 0; }
.dual-focus .title { text-transform: uppercase; font-size: 20px; background: #9faa1d; color: #fff; padding: 19px 14px; margin: 0; }
.dual-focus .icon-bar { position: relative; width: 247px; min-height: 8px; margin: 15px auto; }
.dual-focus .icon-bar img { display: block; margin: auto; }
.dual-focus .details { color: #064a5f; padding: 0 25px 25px; }
.dual-focus .details p,
.dual-focus .details .teal-cta,
.dual-focus .details div.margins { margin-bottom: 15px; }
.dual-focus .details p .teal-cta { margin-bottom: 0; }

.oldie .dual-focus .half { width: 445px; margin-left: 22px; }
.oldie .dual-focus .half:first-child { margin-left: 0; }

/* circle pods
   ---------------------------- */

.circle-pods { padding: 40px 20px 0; font-size: 16px; line-height: 1.5; }
.circle-pods .items { margin: 20px 0; }
.circle-pods .item { display: inline-block; width: 140px; height: 140px; border: 10px solid #cdcccc; padding: 10px; margin: 15px; background: #41739c; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.circle-pods .item.theme-purple { background: #4c4870; }
.circle-pods .item.theme-red { background: #89232c; }
.circle-pods .item.theme-green { background: #659899; }
.circle-pods .item td { color: #fff; line-height: 1.4; }

.oldie .circle-pods .item { width: 140px; height: 140px; padding: 20px 20px 21px 21px; border: none; margin: 15px; background: url(/Assets/AllocationRange/images/backgrounds/bg-circle-pod-sprite.png) no-repeat 0 0; }
.oldie .circle-pods .item.theme-purple { background-position: 0 -181px; }
.oldie .circle-pods .item.theme-red { background-position: 0 -362px; }
.oldie .circle-pods .item.theme-green { background-position: 0 -543px; }
.ie7 .circle-pods .item { display: inline; zoom: 1; }

/* quote listing
   ---------------------------- */

.quote-listing { padding-top: 40px; }
.quote-listing .top { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
.quote-listing h4 { margin-bottom: 10px; font-family: "Interstate MG"; }
.quote-listing .text-module { padding: 20px 0; }
.quote-listing .text-module .inner h4 ~ .rte { margin-top: 10px; }

/* video feature
   ---------------------------- */

.video-feature { font-size: 16px; line-height: 1.5; }
.video-feature .holder { padding: 40px 14px 50px; background: url(/Assets/AllocationRange/images/backgrounds/bg-ampersands.png) no-repeat bottom right; }
.video-feature .top { margin-bottom: 25px; font-family: "Interstate MG Light"; }
.video-feature h3 { margin-bottom: 10px; }
.video-feature .video-holder { max-width: 460px; margin: auto; }
.video-feature .video-holder .inner { position: relative; height: 0; padding-bottom: 56.25%; }
.video-feature .video-holder .inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.oldie .video-feature .video-holder { max-width: 640px; width: 640px; }
.oldie .video-feature .video-holder .inner { height: auto; padding-bottom: 0; }
.oldie .video-feature .video-holder .inner iframe { position: static; width: 640px; height: 360px; }

/* 4-col info section
   ---------------------------- */

.info-columns { padding: 40px 3px 45px; }
.info-columns .item { width: 25%; float: left; position: relative; overflow: hidden; }
.info-columns .item .inner { padding: 0 22px; }
.info-columns .item .inner .top { font-weight: bold; font-size: 17px; line-height: 1.3; margin-bottom: 2px; }
.info-columns .item .inner .content { font-size: 15px; line-height: 1.5; font-family: "Interstate MG Light"; }
.info-columns .item .inner:before { content: ''; position: absolute; left: 0; width: 1px; top: 20px; height: 100%; background: #cdcdcd; }
.info-columns .item.first .inner:before { display: none; }
.ie7 .info-columns .item .inner { border-left: 1px solid #cdcdcd; }
.ie7 .info-columns .item.first .inner { border-left: none; }

/* blog listing
   ---------------------------- */

.blog-listing { padding: 40px 16px 50px; }
.blog-listing .blog-posts { padding: 0; }
.blog-listing .post:first-child { margin-top: 0; }
.blog-listing .post { min-height: 156px; margin-top: 40px; overflow: hidden; padding-bottom: 40px; padding-left: 322px; padding-right: 40px; position: relative; }
.blog-listing .post:after { background: #f7f7db; bottom: 0; content: ""; display: block; left: 50%; height: 1px; margin-left: -308px; position: absolute; width: 617px; }
.blog-listing .article-img { left: 0; max-width: 300px; overflow: hidden; position: absolute; top: 0; }
.blog-listing .article-title-date h2 { font-size: 22px; font-weight: bold; line-height: 28px; padding-bottom: 4px; }
.blog-listing .article-title-date p { color: #659899; font-size: 16px; line-height: 28px; }
.blog-listing .post .article-summary { font-size: 16px; line-height: 22px; margin-top: -5px; padding-bottom: 20px; }
.blog-listing .subscribe { font-family: "Interstate MG Light"; font-size: 18px; line-height: 22px; padding: 40px 0 0; }
.blog-listing .subscribe p { padding: 0 0 21px; }

.blog-listing .teal-cta { padding-top: 15px; padding-bottom: 15px; }

.oldie .blog-listing .article-title-date h2 { font-weight: normal; }
.ie7 .blog-listing .post { background: url("/Assets/AllocationRange/images/CONTENT_IMAGES/blog-separator.png") center bottom no-repeat transparent; }

/* events listing
   ---------------------------- */

.events-listing { padding: 0; }
.blog-listing .events-listing { padding: 0 0 40px; }
.events-listing .bg-yellow { overflow: hidden; padding: 34px 37px 25px; }
.events-listing span.cal-icon { background: url("/Assets/AllocationRange/images/icons/events-calendar.png") no-repeat left 3px transparent; display: block; float: left; height: 94px; width: 88px; }
.events-listing .event { float: left; padding-left: 37px; line-height: 21px; max-width: 600px; }
.events-listing .event h2 { font-size: 18px; font-weight: bold; }
.events-listing .event h2 span { font-size: 16px; font-weight: normal; margin-left: 30px; }
.events-listing .event .event-summary { font-size: 16px; line-height: 20px; padding: 5px 0 10px; }

/* image text bar
   ---------------------------- */

.bg-striped.img-text-bar { margin: 0; padding: 0 0 60px; }
.img-text-bar .bg-white { overflow: hidden; padding: 12px; }
.img-text-bar .left { float: left; }
.img-text-bar .rte { padding: 18px 25px; }
.img-text-bar .rte h5 { font-size: 18px; line-height: 22px; font-weight: bold; padding: 0 0 12px; }

/* helpers
   ============================ */

.text-centred { text-align: center; }
.cf:after,
.cf:before { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

.width-800 { max-width: 800px; margin: auto; }
.width-670 { max-width: 670px; margin: auto; }

ul.teal-bullets { font-family: "Interstate MG"; color: #064a5f; text-align: left; list-style: disc; margin: auto auto 25px; max-width: 400px; }
ul.teal-bullets li { padding: 3px 0 10px 0; }
.ie7 ul.teal-bullets { padding-left: 30px; }

a.teal-cta,
a.lime-cta,
a.arrow-cta { font-family: "Interstate MG"; font-size: 16px; display: inline-block; padding: 20px 16px; color: #fff; text-decoration: none; background-color: #004f5c; background-repeat: no-repeat; background-position: 15px center; }
a.lime-cta { background-color: #cdcc00; }

a.arrow-cta { padding: 2px 0 2px 35px; background-color: transparent; background-image: url(/Assets/AllocationRange/images/icons/button-arrow-teal.jpg); background-position: left center; color: #004f5c; }
a.teal-cta.icon-arrow { padding-left: 54px; background-image: url(/Assets/AllocationRange/images/icons/button-arrow-white.jpg); }
a.lime-cta.icon-reveal { padding-left: 54px; background-image: url(/Assets/AllocationRange/images/icons/button-icon-reveal.png); }
a.lime-cta.icon-reveal.hide-panel { background-image: url(/Assets/AllocationRange/images/icons/button-icon-hide.png) }

a.teal-cta:hover,
a.lime-cta:hover,
a.arrow-cta:hover { text-decoration: underline; }

.bg-striped { background: url(/Assets/AllocationRange/images/backgrounds/bg-grey-stripes.jpg); }
.bg-striped-yellow { background: url(/Assets/AllocationRange/images/backgrounds/bg-yellow-stripes.png); }
.bg-white { background-color: #ffffff; }
.bg-yellow { background-color: #f7f7db; }

table.vertical-centre,
table.vertical-centre tbody,
table.vertical-centre tr,
table.vertical-centre td { table-layout: fixed; min-height: 100%; height: 100%; width: 100%; vertical-align: middle; padding: 0; margin: 0; border-collapse: collapse; }

.rte .large { font-size: 29px; }
.rte .medium { font-size: 21px; color: #064a5f; text-decoration: none; }
.rte a.medium:hover { text-decoration: underline; }

.hide { display: none; }