/* Home feed */ .autoclear:after { content: ""; display: table; clear: both; } html{overflow-x: hidden !important;} body.feed{ max-width: 100%; overflow: hidden; } a.dynamic-link{color:#F8F7E2;} #feedContainer .feed-item{position:relative; max-width:600px; margin: 0 auto 0 auto; min-height: 90px; z-index:1;} #feedContainer .feed-item.faded{opacity:0.25;} #feedContainer .feed-item .article-content{position:relative; margin-left:60px; border-top: 1px solid #000; padding:20px 0 20px 0;} #feedContainer .feed-item.quote .article-content, #feedContainer .feed-item.fact .article-content{padding:20px 0 20px 0;} #feedContainer .feed-item .share-icons{display:none; right:-130px; position:absolute; top:20px; height:30px; width:110px; z-index:10;} .touch #feedContainer .feed-item .share-icons{display:block;} @media only screen and (min-width:955px){ #feedContainer .feed-item:hover .share-icons{display:block;} #feedContainer .feed-item:hover .share-icons .more-from-twitter, #feedContainer .feed-item:hover .share-icons .source, .touch #feedContainer .feed-item .share-icons .source, .touch #feedContainer .feed-item .share-icons .more-from-twitter{display: block; width: 160px; padding-top: 6px; text-decoration: underline;} #feedContainer .feed-item:hover .share-icons .share{display:none;} } @media only screen and (min-width:800px){ .touch #feedContainer .feed-item .share-icons .share{display:none;} } #feedContainer .share-icons .share-icon{display:inline-block; width:30px; height:30px; margin-right: 4px; background-image:url('/assets/feed/share-icons.png'); background-size: auto 100%; } #feedContainer .share-icons .share-icon.twitter{background-position: -120px 0;} #feedContainer .share-icons .share-icon.facebook{background-position: 0 0;} #feedContainer .feed-item .article-content a{display:block;} #feedContainer .feed-item .article-content .text{width:60%; float: left; padding-right:20px;} #feedContainer .feed-item.quote .article-content .text, #feedContainer .feed-item.quoteoftheday .article-content .text, #feedContainer .feed-item.fact .article-content .text, #feedContainer .feed-item.factoftheday .article-content .text, #feedContainer .feed-item.qtube .article-content .text, #feedContainer .feed-item.clip .article-content .text, #feedContainer .feed-item.image .article-content .text, #feedContainer .feed-item.announcement .article-content .text{width:100%; padding-right:0px; float:none; position:relative; z-index:1;} #feedContainer .feed-item .article-content .video{ padding-top: 6px; z-index:10; position:relative;} #feedContainer .feed-item.quote blockquote{text-align:center;} #feedContainer .feed-item.quote blockquote cite{text-transform: uppercase; font-size: 14px;} #feedContainer .feed-item .article-content .title{font-size:18px; margin-bottom:14px;} #feedContainer .feed-item .article-content .description{font-size: 15px; line-height: 1.4em;} #feedContainer .feed-item .article-content .description footer{padding-top: 12px; font-size: smaller;} #feedContainer .feed-item.quote .article-content .description, #feedContainer .feed-item.quoteoftheday .article-content .description, #feedContainer .feed-item.fact .article-content .description, #feedContainer .feed-item.factoftheday .article-content .description{font-size: 18px;} #feedContainer .feed-item .article-content .image{float:right; width:40%;} #feedContainer .feed-item.image .article-content .text{padding-bottom:6px;} #feedContainer .feed-item.image .article-content .image{float:none; width:100%; text-align: center; padding-top: 16px;} #feedContainer .feed-item.image .article-content .image img{width:auto; max-width:100%; max-height:400px;} #feedContainer .feed-item.announcement .article-content .image{float:none; width:100%; text-align: center; padding-top: 16px;} #feedContainer .feed-item.announcement .article-content .image img{width:auto; max-width:100%; max-height:400px;} #feedContainer .feed-item .article-content .image img{width:100%;} #feedContainer .feed-item .article-content .feed-item-overlay{position:absolute; display:block; top:0; right:-150px; bottom:0; left:0; z-index:10;} #feedContainer .feed-item .feed-item-underlay{position:absolute; display:block; top:0; right:-150px; bottom:-30px; left:0; z-index:0;} #feedContainer .feed-item .icon{position:relative; width:40px; height: 40px; float: left; background-image:url('/assets/feed/feed_icon_strip_colour.png'); background-repeat:no-repeat; background-position: 0 0; background-size: auto 100%; cursor:pointer;} #feedContainer .feed-item.scoopit .icon{background-position: -80px 0; top: 18px;} #feedContainer .feed-item.fact .icon, #feedContainer .feed-item.factoftheday .icon{background-position: -40px 0; top: 20px;} #feedContainer .feed-item.quote .icon, #feedContainer .feed-item.quoteoftheday .icon{background-position: -120px 0; top: 13px;} #feedContainer .feed-item.twitter .icon{background-position: -160px 0; top: 6px;} #feedContainer .feed-item.announcement .icon{background-position: 0px 0; top: 16px;} #feedContainer .feed-item.clip .icon, #feedContainer .feed-item.qtube .icon{background-position: -200px 0; top: 16px;} #feedContainer .feed-item.topic .icon{background-position: -320px 0; top: 16px;} #feedContainer .feed-item.image .icon{background-position: -280px 0; top: 16px;} .no-touch #feedContainer .feed-item .icon .type-label, .no-touch #feedContainer .feed-item .icon .time-label{display:none;} .no-touch #feedContainer .feed-item:hover .icon .type-label, .no-touch #feedContainer .feed-item:hover .icon .time-label{display:block;} #feedContainer .feed-item .icon .type-label{text-transform: capitalize; position:relative; width:100px; left:-105px; text-align:right; font-weight: bold; margin-top: 5px; margin-bottom:4px; font-size: 13px;} #feedContainer .feed-item .icon .time-label{position:relative; width:60px; left:-65px; text-align:right; font-size:12px;} #feedContainer .feed-item .title{font-size:20px; font-weight:bold; text-transform:uppercase;} #feedContainer .feed-item .infocloud-link{padding-top: 16px; color: #244B74;} #feedContainer .feed-item.scoopit .description{} #feedContainer .new-at-top{display:none;} #feedContainer .no-items-on-date{font-size: 16px; padding: 0 0 30px 0;} #feedContainer .no-items-on-date a{text-decoration: underline;} body.feed *{box-sizing: border-box;} body.feed .wrap{width:100%; max-width: 955px; padding-right: 10px; padding-left: 10px;} body.feed #header .wrap{width:auto; max-width:935px;} body.feed #header .wrap img {top: -48px; position: relative; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} body.feed #headerNav ul{min-width:0;} body.feed #footer{z-index:10; margin-top:59px;} body.feed #footer .wrap{width:auto; max-width:935px; background: none;} body.feed #footer.stuck{position:fixed; bottom:0;left: 0; width: 100%; -moz-transform: translateY(92%); -webkit-transform: translateY(92%); -o-transform: translateY(92%); -ms-transform: translateY(92%); transform: translateY(92%);} body.feed #footer.stuck.opened{ -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; -moz-transform: translateY(94%); -webkit-transform: translateY(94%); -o-transform: translateY(94%); -ms-transform: translateY(94%); transform: translateY(94%);} body.feed #footer.stuck.open{ -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } body.feed #footer.stuck #footer-open-trigger{display:block; position:absolute; cursor:pointer; width:100%; height:20px; top:0; left:0; color: #F8F7E2; text-align: right; padding: 5px 20px; font-weight: bold;} body.feed #footer #footer-open-trigger .hide{display:none;} body.feed #footer #footer-open-trigger .show{display:inline;} body.feed #footer.open #footer-open-trigger{padding-top:10px;} body.feed #footer.open #footer-open-trigger .hide{display:inline;} body.feed #footer.open #footer-open-trigger .show{display:none;} body.feed .wrap #content-bottom, body.feed .wrap #content-top{position:relative; height:0; -webkit-transition: height 0.25s ease-in-out; -moz-transition: height 0.25s ease-in-out; -ms-transition: height 0.25s ease-in-out; -o-transition: height 0.25s ease-in-out; transition: height 0.25s ease-in-out;} body.feed .wrap #content-bottom.loading, body.feed .wrap #content-top.loading{height:30px; background-image:url('/assets/feed/loader.gif'); background-repeat:no-repeat; background-position:center center;} body.feed .wrap #itemFilter{padding:10px 10px 10px 10px; z-index:30; margin:20px 0; overflow:hidden;} body.feed .wrap #itemFilter.stuck{ position: fixed; top: 25px; width: 100%; max-width: 100%; margin: 0; left: 0; border-bottom: 1px #000 solid; background-color: #EFF0E9;} body.feed .wrap #itemFilter ul{text-align: center;} body.feed .wrap #itemFilter ul li{display:inline-block; padding:4px 10px 5px; font-weight:bold; font-size:18px; cursor:pointer; position:relative; margin-right: 2px; } body.feed .wrap #itemFilter ul li.selected{background-color: #020633; color:#F8F7E2;} body.feed .wrap #itemFilter ul li:after{border-right: 1px solid #000; position:absolute; width:1px; top:8px; right:-3px; height:12px; content:'';} body.feed .wrap #itemFilter ul li:last-of-type:after{border-right:0px none;} #feedContainer .feed-item.hide{display:none;} #feedContainer .feed-item.hide.show{display:block;} .hidebydate{display:none;} .feedDateBanner{position:relative; padding:8px 15px; background-color:#020633; color:#F8F7E2; margin: 20px 0 40px 0; z-index:2;} .feedDateBanner.hide, .feedDateBanner.hidden{display:none;} .feedDateBanner.today{margin:0;} .feedDateBanner h2{font-size:32px; font-weight: bold; line-height: 1.4;} .feedDateBanner .date{font-size: 24px; font-weight: normal; vertical-align: middle;} .feedDateBanner .date-filter{position:absolute; top:14px; right:15px; z-index:5; width:35px; height:35px; cursor:pointer; background-image: url(/assets/feed/calendar.png); background-size: 100% auto; background-repeat: no-repeat;} .feedDateBanner .date-filter .calendar{position:absolute; top:0px; right:0; z-index:6;} #headerNav.stuck{position:fixed; top:0px; height: 25px; z-index: 100; background: rgb(0, 0, 51); background: rgba(0, 0, 51, 0.9);} .action-button-holder{position:relative; padding-top:35px;} .action{position: relative; cursor: pointer; background-color: #020633; display: inline-block; padding: 4px 10px; float: right; color: #fff; margin-left:5px;} .action.loadmore{} .action a{color:#F8F7E2;} .morerecent{padding-bottom:20px;} @media only screen and (max-width:955px){ body.feed .wrap #itemFilter.stuck{left:0;} #feedContainer .feed-item .share-icons{ display: block; position: relative; top: auto !important; right: auto; margin-left: 60px; margin-bottom: 15px; left: auto; width: auto;} #feedContainer .feed-item .share-icons{text-align: center;} #feedContainer .feed-item .share-icons .share-icon{display:none;} #feedContainer .feed-item .share-icons.icon-default .share-icon, #feedContainer .feed-item .share-icons.icon-force .share-icon{display:inline-block;} #feedContainer .feed-item .share-icons.icon-default .text-link.share, #feedContainer .feed-item .share-icons.icon-force .text-link{display:none;} #feedContainer .feed-item .share-icons .text-link{padding: 0 10px; text-decoration: underline; border-right: 1px solid #3E3935;} #feedContainer .feed-item .share-icons .text-link:last-child{border-right:0px none;} } @media only screen and (max-width:800px){ body.feed #footer{position:relative; height:auto; background-repeat:repeat; padding-bottom:20px; padding-top: 2px;} body.feed #footer .wrap{height:auto;} body.feed #footer #footermenu{width:100%;} body.feed #footer .wrap > div{width:100%; float:none; height:auto !important; margin-top:14px; margin-left: auto;} body.feed #footer .wrap > #dayfact{border-bottom: 0px none; padding-bottom: 8px;} body.feed #footer .wrap > #dayquote {padding-bottom: 8px;} body.feed #footer .wrap > #copyright {width: 100%;position: relative;bottom: auto;right: auto;} body.feed #footer .wrap > #designanddev { border-bottom: 0px solid #F8F7E2;padding-bottom: 10px;position: relative;bottom: auto;right: auto;width: 100%;} body.feed #footer .wrap h4 {margin-bottom: 12px;} body.feed #headerNav ul.list{display:none; height:40px;} body.feed #headerNav{height:40px;} body.feed #headerNav #mobileMenuTrigger{position:absolute; width: 40px; height:40px; top:0; right:10px; cursor: pointer;} body.feed #headerNav #mobileMenuTrigger:before{ content: 'b'; position: absolute; width: 100%; height: 100%; font-family: 'qi-public-icons'; font-size: 30px; font-weight: normal; top: 10px; left: 0;} body.feed #headerNav.stuck #miniLogo{position:absolute; width: 40px; height:40px; top:0; left:5px; background-image: url('/assets/logo_cream.png'); background-repeat: no-repeat; background-position: center center; background-size: auto 24px;} body.feed .wrap #itemFilter.stuck{top:40px;} /*.touch #feedContainer .feed-item .share-icons .share {display: inline;}*/ } @media only screen and (max-width:730px){ #feedContainer .feed-item .icon .type-label{left:auto; float:right; margin-top:40px;} #feedContainer .feed-item .icon .time-label{left:auto; float:right; font-size:10px;} #feedContainer .feed-item.announcement .icon .time-label{margin-top:44px;} #feedContainer .feed-item.announcement .type-label{display:none;} #feedContainer .feed-item.fact .type-label{padding-right:8px;} } @media only screen and (max-width:520px){ #feedContainer .feed-item .article-content .text{width:100%; float: none; padding-right:0px;} #feedContainer .feed-item .article-content .image{float:none; width:100%; margin-top:15px;} #feedContainer .feed-item .article-content{margin-left:50px;} #feedContainer .feed-item .share-buttons{margin-left:50px;} #feedContainer .feed-item .share-icons{margin-left:50px;} #feedContainer .feed-item .icon{ left: -3px;} } @media only screen and (max-width:460px){ .feedDateBanner h2{font-size:20px;} .feedDateBanner .date{font-size: 17px;} .feedDateBanner .date-filter{top:7px; right:7px;} } /* Admin only */ body.feed-admin *{box-sizing: content-box;} body.feed-admin #middle *{box-sizing: border-box;} body.feed-admin .current_date{font-size: 24px; margin: 24px 0;} body.feed-admin .wrap{position:relative;} body.feed-admin .datepicker{ position: absolute; top: 14px; right: 15px; z-index: 5; width: 40px; height: 40px; cursor: pointer; background-image: url(/assets/feed/calendar.png); background-size: 90% auto; background-repeat: no-repeat; background-color: #000; background-position: center center;} body.feed-admin .navigate{margin-right: 5px;} body.feed-admin .action_holder{display: block; position: relative; width: 100%; height: 50px;} body.feed-admin .action_holder.bottom{padding-top:40px;} body.feed-admin .share-icons{display:none !important;} body.feed-admin #feedContainer .feed-item .icon{cursor:default;} body.feed-admin #feedContainer .feed-item .edit-actions{position:absolute; display:block; top:20px; right:-100px; z-index:100;} body.feed-admin #feedContainer .feed-item .edit-actions a.delete{display:inline-block; background-color: #f00; padding:6px;} body.feed .mm-menu{z-index:3000; box-shadow: -4px 0px 20px 0px rgba(0,0,0,0.5);}