/* base.scss */ .ns-virus { max-width: 832px; width: 100%; padding-bottom: 16px; } .panels__item-image { max-width: 92%; margin-bottom: 16px; } .panels__close { display: none; } .desk_sf { display: none; } .mobile_sf { display: none; } ol.panels { margin: 0 0 0 0; padding: 0 0 0 0; z-index: 999999999; width: 113px; left: -113px; } ol.panels.panels__out { width: auto; left: 1px; } .panels__item, .desktop .panels__item__open, .desktop .panels__item__inactive, .desktop .panels__item__inactive.panels__item__hover, .desktop .panels__item__active, .desktop .panels__item__active.panels__item__hover { max-width: 815px; width: 100%; background-color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; } .panels__item .panels__item-header, .desktop .panels__item__open .panels__item-header, .desktop .panels__item__inactive .panels__item-header, .desktop .panels__item__inactive.panels__item__hover .panels__item-header, .desktop .panels__item__active .panels__item-header, .desktop .panels__item__active.panels__item__hover .panels__item-header { font-size: 1.5em; color: white; padding-left: 16px; padding-top: 16px; margin-bottom: 8px; } .panels__item p.panels__item-text, .desktop .panels__item__open p.panels__item-text, .desktop .panels__item__inactive p.panels__item-text, .desktop .panels__item__inactive.panels__item__hover p.panels__item-text, .desktop .panels__item__active p.panels__item-text, .desktop .panels__item__active.panels__item__hover p.panels__item-text { font-size: 0.9em; color: white; padding-left: 16px; margin-right: 16px; } .panels__item .panels__item-text b, .desktop .panels__item__open .panels__item-text b, .desktop .panels__item__inactive .panels__item-text b, .desktop .panels__item__inactive.panels__item__hover .panels__item-text b, .desktop .panels__item__active .panels__item-text b, .desktop .panels__item__active.panels__item__hover .panels__item-text b { color: white; } /* mobile.scss */ .blq-js .mobile .panels { display: block; left: 0px; width: auto; } .ns-virus.mobile { max-height: none; } .mobile .mobile_sf { display: block; } .mobile .panels__item, .mobile .desktop .panels__item__open, .desktop .mobile .panels__item__open, .mobile .desktop .panels__item__inactive, .desktop .mobile .panels__item__inactive, .mobile .desktop .panels__item__inactive.panels__item__hover, .desktop .mobile .panels__item__inactive.panels__item__hover, .mobile .desktop .panels__item__active, .desktop .mobile .panels__item__active, .mobile .desktop .panels__item__active.panels__item__hover, .desktop .mobile .panels__item__active.panels__item__hover { margin-bottom: 8px; padding-bottom: 8px; list-style: none; margin-left: 0px; max-width: 832px; } .mobile .panels__item h3.panels__item-header, .mobile .desktop .panels__item__open h3.panels__item-header, .desktop .mobile .panels__item__open h3.panels__item-header, .mobile .desktop .panels__item__inactive h3.panels__item-header, .desktop .mobile .panels__item__inactive h3.panels__item-header, .mobile .desktop .panels__item__inactive.panels__item__hover h3.panels__item-header, .desktop .mobile .panels__item__inactive.panels__item__hover h3.panels__item-header, .mobile .desktop .panels__item__active h3.panels__item-header, .desktop .mobile .panels__item__active h3.panels__item-header, .mobile .desktop .panels__item__active.panels__item__hover h3.panels__item-header, .desktop .mobile .panels__item__active.panels__item__hover h3.panels__item-header { margin-bottom: 8px; } .mobile .panels__item p.panels__item-text, .mobile .desktop .panels__item__open p.panels__item-text, .desktop .mobile .panels__item__open p.panels__item-text, .mobile .desktop .panels__item__inactive p.panels__item-text, .desktop .mobile .panels__item__inactive p.panels__item-text, .mobile .desktop .panels__item__inactive.panels__item__hover p.panels__item-text, .desktop .mobile .panels__item__inactive.panels__item__hover p.panels__item-text, .mobile .desktop .panels__item__active p.panels__item-text, .desktop .mobile .panels__item__active p.panels__item-text, .mobile .desktop .panels__item__active.panels__item__hover p.panels__item-text, .desktop .mobile .panels__item__active.panels__item__hover p.panels__item-text { font-size: 1em; padding-bottom: 8px; line-height: 16px; max-width: 100%; } .mobile .panels__item .panels__item-image, .mobile .desktop .panels__item__open .panels__item-image, .desktop .mobile .panels__item__open .panels__item-image, .mobile .desktop .panels__item__inactive .panels__item-image, .desktop .mobile .panels__item__inactive .panels__item-image, .mobile .desktop .panels__item__inactive.panels__item__hover .panels__item-image, .desktop .mobile .panels__item__inactive.panels__item__hover .panels__item-image, .mobile .desktop .panels__item__active .panels__item-image, .desktop .mobile .panels__item__active .panels__item-image, .mobile .desktop .panels__item__active.panels__item__hover .panels__item-image, .desktop .mobile .panels__item__active.panels__item__hover .panels__item-image { display: block; float: left; margin-bottom: 16px; margin-left: auto; width: 90%; } /* desktop.scss */ .ns-virus.desktop { max-height: 500px; overflow: hidden; } .ns-virus { margin-left: auto; margin-right: auto; background-color: white; } .ns-virus .panels__item-text { margin-bottom: 0px; padding-bottom: 16px; } .blq-js .panels { display: none; list-style-type: none; } ol.panels { display: block; list-style-type: none; } .panels__item-image { float: right; margin-right: 16px; } .panels__item, .desktop .panels__item__open, .desktop .panels__item__inactive, .desktop .panels__item__inactive.panels__item__hover, .desktop .panels__item__active, .desktop .panels__item__active.panels__item__hover { margin-left: auto; margin-right: auto; min-height: 312px; z-index: 101; } .panels__item p.panels__item-text, .desktop .panels__item__open p.panels__item-text, .desktop .panels__item__inactive p.panels__item-text, .desktop .panels__item__inactive.panels__item__hover p.panels__item-text, .desktop .panels__item__active p.panels__item-text, .desktop .panels__item__active.panels__item__hover p.panels__item-text { padding-right: 8px; max-width: 303px; line-height: 16px; } .panels__item .panels__item-text__first, .desktop .panels__item__open .panels__item-text__first, .desktop .panels__item__inactive .panels__item-text__first, .desktop .panels__item__inactive.panels__item__hover .panels__item-text__first, .desktop .panels__item__active .panels__item-text__first, .desktop .panels__item__active.panels__item__hover .panels__item-text__first { margin-top: 16px; } .desktop .desk_sf { display: block; } .desktop .panels__hide .panels__item__inactive, .desktop .panels__hide .panels__item__inactive.panels__item__hover, .desktop .panels__hide .panels__item__active, .desktop .panels__hide .panels__item__active.panels__item__hover, .desktop .panels__hide .panels__item__active, .desktop .panels__hide .panels__item__active.panels__item__hover { display: none; } .desktop .media { position: relative; } .desktop .panels { list-style-type: none; display: block; z-index: 9999999999; } .desktop .panels { list-style-type: none; position: relative; top: -468px; } .desktop .panels__item__active.panels__out, .desktop .panels__out.panels__item__active.panels__item__hover, .desktop .panels__item__inactive.panels__out, .desktop .panels__out.panels__item__inactive.panels__item__hover, .desktop .panels__out.panels__item__active, .desktop .panels__out.panels__item__active.panels__item__hover { left: -140px; } .desktop .panels__item__active.panels__hide, .desktop .panels__hide.panels__item__active.panels__item__hover, .desktop .panels__item__inactive.panels__hide, .desktop .panels__hide.panels__item__inactive.panels__item__hover, .desktop .panels__hide.panels__item__active, .desktop .panels__hide.panels__item__active.panels__item__hover { display: none; } .desktop .panels__item__inactive, .desktop .panels__item__inactive.panels__item__hover, .desktop .panels__item__active, .desktop .panels__item__active.panels__item__hover { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 4px transparent; min-height: 96px; margin-left: 0px; max-width: 113px; max-height: 95px; margin-bottom: 4px; position: relative; background-color: rgba(0, 0, 0, 0.5); } .desktop .panels__item__inactive .panels__item-header, .desktop .panels__item__inactive.panels__item__hover .panels__item-header, .desktop .panels__item__active .panels__item-header, .desktop .panels__item__active.panels__item__hover .panels__item-header { position: absolute; font-size: 0.9em; font-weight: bold; padding-left: 4px; padding-top: 4px; top: 67px; opacity: 0.5; line-height: 13px; max-height: 17px; cursor: pointer; } .desktop .panels__item__inactive p.panels__item-text, .desktop .panels__item__inactive.panels__item__hover p.panels__item-text, .desktop .panels__item__active p.panels__item-text, .desktop .panels__item__active.panels__item__hover p.panels__item-text { display: none; } .desktop .panels__item__inactive .panels__item-image, .desktop .panels__item__inactive.panels__item__hover .panels__item-image, .desktop .panels__item__active .panels__item-image, .desktop .panels__item__active.panels__item__hover .panels__item-image { padding-top: 4px; float: none; width: 97px; height: 63px; margin-left: 4px; opacity: 0.5; max-width: 100%; cursor: pointer; } .desktop .panels__item__inactive.panels__item__hover, .desktop .panels__item__hover.panels__item__inactive, .desktop .panels__item__hover.panels__item__active { background-color: rgba(0, 0, 0, 0.85); } .desktop .panels__item__inactive.panels__item__hover .panels__item-header, .desktop .panels__item__hover.panels__item__inactive .panels__item-header, .desktop .panels__item__hover.panels__item__active .panels__item-header { opacity: 1; } .desktop .panels__item__inactive.panels__item__hover .panels__item-image, .desktop .panels__item__hover.panels__item__inactive .panels__item-image, .desktop .panels__item__hover.panels__item__active .panels__item-image { opacity: 1; } .desktop .panels__item__active, .desktop .panels__item__active.panels__item__hover { border: solid 4px #d1700e; border-opacity: 0.85; background-color: rgba(0, 0, 0, 0.85); } .desktop .panels__item__active .panels__item-header, .desktop .panels__item__active.panels__item__hover .panels__item-header { opacity: 1; } .desktop .panels__item__active .panels__item-image, .desktop .panels__item__active.panels__item__hover .panels__item-image { opacity: 1; } .desktop .panels__item__open { margin-top: 78px; position: relative; } .desktop .panels__item__open .panels__close { display: block; background: url("https://news.bbcimg.co.uk/view/1_4_13/cream/hi/shared/img/gvl3-icons-0-2.png") no-repeat scroll 0 0 transparent; background-position: -509px -32px; height: 17px; margin-top: 8px; margin-right: 8px; text-indent: -5000px; width: 15px; opacity: 0.7; float: right; } .desktop .panels__item__open .panels__close:hover { opacity: 1; } .desktop .panels__item__open .panels__close:active { opacity: 1; background-position: -509px -16px; } /* animation.scss */ .desktop .panels { -webkit-transition: left 1s ease-in-out; -moz-transition: left 1s ease-in-out; -ms-transition: left 1s ease-in-out; -o-transition: left 1s ease-in-out; transition: left 1s ease-in-out; } .desktop .media { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .desktop .panels__item-header, .desktop .panels__item-image, .desktop p.panels__item-text { -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .desktop p.panels__item-text { -webkit-transition: display 0.5s ease-in-out; -moz-transition: display 0.5s ease-in-out; -ms-transition: display 0.5s ease-in-out; -o-transition: display 0.5s ease-in-out; transition: display 0.5s ease-in-out; } /* ie-fixes.scss */ .ie7 .panels__item, .ie7 .desktop .panels__item__open, .desktop .ie7 .panels__item__open, .ie7 .desktop .panels__item__inactive, .desktop .ie7 .panels__item__inactive, .ie7 .desktop .panels__item__inactive.panels__item__hover, .desktop .ie7 .panels__item__inactive.panels__item__hover, .ie7 .desktop .panels__item__active, .desktop .ie7 .panels__item__active, .ie7 .desktop .panels__item__active.panels__item__hover, .desktop .ie7 .panels__item__active.panels__item__hover, .ie8 .panels__item, .ie8 .desktop .panels__item__open, .desktop .ie8 .panels__item__open, .ie8 .desktop .panels__item__inactive, .desktop .ie8 .panels__item__inactive, .ie8 .desktop .panels__item__inactive.panels__item__hover, .desktop .ie8 .panels__item__inactive.panels__item__hover, .ie8 .desktop .panels__item__active, .desktop .ie8 .panels__item__active, .ie8 .desktop .panels__item__active.panels__item__hover, .desktop .ie8 .panels__item__active.panels__item__hover { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000); } .ie7 .desktop .panel__open__mask, .ie8 .desktop .panel__open__mask { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000); } .ie7 .desktop .panels__item__inactive, .ie7 .desktop .panels__item__inactive.panels__item__hover, .ie7 .desktop .panels__item__active, .ie7 .desktop .panels__item__active.panels__item__hover, .ie8 .desktop .panels__item__inactive, .ie8 .desktop .panels__item__inactive.panels__item__hover, .ie8 .desktop .panels__item__active, .ie8 .desktop .panels__item__active.panels__item__hover { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000); width: 113px; height: 91px; min-height: 91px; } .ie7 .desktop .panels__item__hover.panels__item__inactive, .ie7 .desktop .panels__item__hover.panels__item__active, .ie8 .desktop .panels__item__hover.panels__item__inactive, .ie8 .desktop .panels__item__hover.panels__item__active { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000); } .ie7 .desktop .panels__item__active, .ie7 .desktop .panels__item__active.panels__item__hover, .ie8 .desktop .panels__item__active, .ie8 .desktop .panels__item__active.panels__item__hover { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000); } .ie7 .desktop .panels__item__inactive, .ie7 .desktop .panels__item__inactive.panels__item__hover, .ie7 .desktop .panels__item__active, .ie7 .desktop .panels__item__active.panels__item__hover { left: -35px; }