/* libre-baskerville-400normal - latin */ @font-face { font-family: 'Libre Baskerville'; font-style: normal; font-display: swap; font-weight: 400; src: local("Libre Baskerville Regular "), local("Libre Baskerville-Regular"), url(/assets/libre-baskerville-latin-400-a9fc102a0906a6fdfcdb736432eb980f.woff2) format("woff2"), url(/assets/libre-baskerville-latin-400-df8dae64e9b53b5d6c1f8c31b71375f5.woff) format("woff"); /* Modern Browsers */ } /* libre-baskerville-400italic - latin */ @font-face { font-family: 'Libre Baskerville'; font-style: italic; font-display: swap; font-weight: 400; src: local("Libre Baskerville Regular italic"), local("Libre Baskerville-Regularitalic"), url(/assets/libre-baskerville-latin-400italic-21888b0d4fc13ab24011c4831a1a06b5.woff2) format("woff2"), url(/assets/libre-baskerville-latin-400italic-9430c38fbded3df27350efc2fa0a8fe7.woff) format("woff"); /* Modern Browsers */ } /* libre-baskerville-700normal - latin */ @font-face { font-family: 'Libre Baskerville'; font-style: normal; font-display: swap; font-weight: 700; src: local("Libre Baskerville Bold "), local("Libre Baskerville-Bold"), url(/assets/libre-baskerville-latin-700-14be43a789d45455e6616c7630dd6552.woff2) format("woff2"), url(/assets/libre-baskerville-latin-700-7206d87335243322e75161c0bf9c6432.woff) format("woff"); /* Modern Browsers */ } /* montserrat-100normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100; src: local("Montserrat Thin "), local("Montserrat-Thin"), url(/assets/montserrat-latin-100-4124805c0503dbfe42dd67d7f5715964.woff2) format("woff2"), url(/assets/montserrat-latin-100-c8fb2f714bbc7bc3e8dfffa916b286dc.woff) format("woff"); /* Modern Browsers */ } /* montserrat-100italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 100; src: local("Montserrat Thin italic"), local("Montserrat-Thinitalic"), url(/assets/montserrat-latin-100italic-e4bf47bd171a9b2a72dd84c58bf90edf.woff2) format("woff2"), url(/assets/montserrat-latin-100italic-d1f3f2d02ee4d7d2d4b1ad865014f189.woff) format("woff"); /* Modern Browsers */ } /* montserrat-200normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 200; src: local("Montserrat Extra Light "), local("Montserrat-Extra Light"), url(/assets/montserrat-latin-200-444ae007121264bc1969d49b4031f9b2.woff2) format("woff2"), url(/assets/montserrat-latin-200-edbce16a90aa22c297a0307b85789837.woff) format("woff"); /* Modern Browsers */ } /* montserrat-200italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 200; src: local("Montserrat Extra Light italic"), local("Montserrat-Extra Lightitalic"), url(/assets/montserrat-latin-200italic-f316c5d1ec40f3e68654c3f38b3999f3.woff2) format("woff2"), url(/assets/montserrat-latin-200italic-d7bbb730d9b5e11720b3eb32326dcca7.woff) format("woff"); /* Modern Browsers */ } /* montserrat-300normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 300; src: local("Montserrat Light "), local("Montserrat-Light"), url(/assets/montserrat-latin-300-0a7c6df06e85d978d096d4d18fd8d43d.woff2) format("woff2"), url(/assets/montserrat-latin-300-5e86df2cad22d2ef2b03516334afae5e.woff) format("woff"); /* Modern Browsers */ } /* montserrat-300italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 300; src: local("Montserrat Light italic"), local("Montserrat-Lightitalic"), url(/assets/montserrat-latin-300italic-c076c4892bc7a4be7b9097e97a35012d.woff2) format("woff2"), url(/assets/montserrat-latin-300italic-37c74a8d2d0d36a0a2c6e9a37ee15b0c.woff) format("woff"); /* Modern Browsers */ } /* montserrat-400normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 400; src: local("Montserrat Regular "), local("Montserrat-Regular"), url(/assets/montserrat-latin-400-501ce09c42716a2f6e1503a25eb174c9.woff2) format("woff2"), url(/assets/montserrat-latin-400-f29d2b8559699b6beb5b29b25b8bc572.woff) format("woff"); /* Modern Browsers */ } /* montserrat-400italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 400; src: local("Montserrat Regular italic"), local("Montserrat-Regularitalic"), url(/assets/montserrat-latin-400italic-882908d9950d9c86ebd380877f293d95.woff2) format("woff2"), url(/assets/montserrat-latin-400italic-22e7b04e5f2a901d49d4d342315a715a.woff) format("woff"); /* Modern Browsers */ } /* montserrat-500normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 500; src: local("Montserrat Medium "), local("Montserrat-Medium"), url(/assets/montserrat-latin-500-f0f2716c5fe401d175b88715e7d28685.woff2) format("woff2"), url(/assets/montserrat-latin-500-991b453bf90a0980e78966d2af7e3d3a.woff) format("woff"); /* Modern Browsers */ } /* montserrat-500italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 500; src: local("Montserrat Medium italic"), local("Montserrat-Mediumitalic"), url(/assets/montserrat-latin-500italic-4590ebba421b3288c305305d7fa7b504.woff2) format("woff2"), url(/assets/montserrat-latin-500italic-f3d41e4cdcc2314e49ddcea751d6f87f.woff) format("woff"); /* Modern Browsers */ } /* montserrat-600normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 600; src: local("Montserrat SemiBold "), local("Montserrat-SemiBold"), url(/assets/montserrat-latin-600-15c24f7109941777774ddd2c636c6a50.woff2) format("woff2"), url(/assets/montserrat-latin-600-f6dc6096f48956908c1787d9a722570a.woff) format("woff"); /* Modern Browsers */ } /* montserrat-600italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 600; src: local("Montserrat SemiBold italic"), local("Montserrat-SemiBolditalic"), url(/assets/montserrat-latin-600italic-6d10b80529d5c36c7c09fca7193af0fc.woff2) format("woff2"), url(/assets/montserrat-latin-600italic-02c4833312d94b1b0866f073023a250e.woff) format("woff"); /* Modern Browsers */ } /* montserrat-700normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 700; src: local("Montserrat Bold "), local("Montserrat-Bold"), url(/assets/montserrat-latin-700-79982cd1f74c6fa7451bf9b37ead09ff.woff2) format("woff2"), url(/assets/montserrat-latin-700-957e93fbbe131a59791cd820d98b7109.woff) format("woff"); /* Modern Browsers */ } /* montserrat-700italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 700; src: local("Montserrat Bold italic"), local("Montserrat-Bolditalic"), url(/assets/montserrat-latin-700italic-283438e9577fe6a684466bb100e105ec.woff2) format("woff2"), url(/assets/montserrat-latin-700italic-ca627c5ccc65cf80c2ecaea44b997de9.woff) format("woff"); /* Modern Browsers */ } /* montserrat-800normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 800; src: local("Montserrat ExtraBold "), local("Montserrat-ExtraBold"), url(/assets/montserrat-latin-800-35386154b78d046218fc8f88a44ff515.woff2) format("woff2"), url(/assets/montserrat-latin-800-756655905d91b77960888262e7d58d35.woff) format("woff"); /* Modern Browsers */ } /* montserrat-800italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 800; src: local("Montserrat ExtraBold italic"), local("Montserrat-ExtraBolditalic"), url(/assets/montserrat-latin-800italic-e1b52a7bd83e2324db6d92bdc206844c.woff2) format("woff2"), url(/assets/montserrat-latin-800italic-a69f0add9d86c1a84311d7dd8693ba4a.woff) format("woff"); /* Modern Browsers */ } /* montserrat-900normal - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 900; src: local("Montserrat Black "), local("Montserrat-Black"), url(/assets/montserrat-latin-900-260c2ea3ef57feb82251952e605a36d5.woff2) format("woff2"), url(/assets/montserrat-latin-900-186cae8091da578150d81958e217714a.woff) format("woff"); /* Modern Browsers */ } /* montserrat-900italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-display: swap; font-weight: 900; src: local("Montserrat Black italic"), local("Montserrat-Blackitalic"), url(/assets/montserrat-latin-900italic-d785fb9fc74588ffb7f306799709a97d.woff2) format("woff2"), url(/assets/montserrat-latin-900italic-43b527fe77254f97ea36e2b54e845ec4.woff) format("woff"); /* Modern Browsers */ } /* noto-sans-400normal - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-display: swap; font-weight: 400; src: local("Noto Sans Regular "), local("Noto Sans-Regular"), url(/assets/noto-sans-latin-400-abc24b0f77dd16d0b4ea7cbe4a1082b0.woff2) format("woff2"), url(/assets/noto-sans-latin-400-4bdffaaa646258ee12f4303664e3c806.woff) format("woff"); /* Modern Browsers */ } /* noto-sans-400italic - latin */ @font-face { font-family: 'Noto Sans'; font-style: italic; font-display: swap; font-weight: 400; src: local("Noto Sans Regular italic"), local("Noto Sans-Regularitalic"), url(/assets/noto-sans-latin-400italic-d03e693bde02509aeae71d9c7e9fa8e8.woff2) format("woff2"), url(/assets/noto-sans-latin-400italic-164d380d71bd87a07b1fc888512b333e.woff) format("woff"); /* Modern Browsers */ } /* noto-sans-700normal - latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-display: swap; font-weight: 700; src: local("Noto Sans Bold "), local("Noto Sans-Bold"), url(/assets/noto-sans-latin-700-87fdfdebee12871ec0b2c04217f6f603.woff2) format("woff2"), url(/assets/noto-sans-latin-700-75d288254ebf75e35a355823ac2b3d8f.woff) format("woff"); /* Modern Browsers */ } /* noto-sans-700italic - latin */ @font-face { font-family: 'Noto Sans'; font-style: italic; font-display: swap; font-weight: 700; src: local("Noto Sans Bold italic"), local("Noto Sans-Bolditalic"), url(/assets/noto-sans-latin-700italic-cbd8ec59f202bbb3ea43f713a9b941e3.woff2) format("woff2"), url(/assets/noto-sans-latin-700italic-d00289fe37460c9fca4cf0069de9474f.woff) format("woff"); /* Modern Browsers */ } @charset "UTF-8"; /** [Name] Colours [Section] Carlton [Description] Shared colours we reuse where we can. [Example] <% colours = { '$tc_red' => '#d8352a', '$tc_grey' => '#383838', '$conv_grey' => '#727272', '$conv_grey_dark' => '#5d5d5d', '$conv_grey_light' => '#f4f5f7', '$facebook_blue' => '#3a5a93', '$twitter_blue' => '#00b0e9', '$linkedin_blue' => '#0181b2', '$orcid_green' => '#a6ce39', '$rss_orange' => '#eb7f3e', '$top-bar-border' => '#eaeaea', '$google_orange' => '#de4931', '$whatsapp_blue' => '#455a64', '$fb_messenger_blue' => '#0084ff' } %> **/ /** [Name] [Section] Colours [Description] We have a default set of colours we reuse where we can. [Example] <% colours = { '$link_blue' => '#069', '$link_visited' => '#557585', '$link_blue_hover' => '#2d8cd6', '$newsletter_bgcolor' => '#faf7f4', '$newsletter_txt' => '#65635f', '$post_tile_bgcolor' => '#f6f7fa', '$friends_of_tc_red' => '#e50c20', '$eb-red' => '#da352a', '$eb-orange' => '#f5a623', '$eb-green' => '#50e3c2', '$eb-blue' => '#4a90e2', '$authentication_grey' => '#fafafa', '$footer-primary' => '#e43a3c', '$footer-primary-link' => '#fdb3b8', '$footer-dark-red' => '#c03139', '$footer-pink' => '#ffa0a5', '$article_gray' => '#727272', } %> **/ /** [Name] Topic Ribbons [Section] Placements [Description] Adds the 'Topic' ribbon to highlight which topic that article is tagged with. [Example]
**/ @-webkit-keyframes (progress) { 100% { background-position: -60px 0; } } @keyframes (progress) { 100% { background-position: -60px 0; } } html, body, div, span { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } html, body { height: 100%; -webkit-overflow-scrolling: touch; } body { line-height: 18px; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; } /* Remove possible quote marks (") from ,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Scale images properly in IE. */ img { -ms-interpolation-mode: bicubic; } /* Remove annoying border on linked images. */ a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul, nav ol { list-style: none; } del { text-decoration: line-through; } sup { vertical-align: super; font-size: smaller; } sub { vertical-align: sub; font-size: smaller; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } input, select { vertical-align: middle; } h1 { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } [class^="icon-"], [class*=" icon-"] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /** [Name] Typography - Icons [Section] Carlton [Description] TC icon font. Used for icons. **/ @font-face { font-family: "TCFont-Regular"; src: url(/assets/tcfont-regular-7b01787c2f80843cc46c5279f1679930.eot); src: url(/assets/tcfont-regular-7b01787c2f80843cc46c5279f1679930.eot?#iefix) format("embedded-opentype"), url(/assets/tcfont-regular-778f3b4f385b24cf8eb524d4e59d529d.woff) format("woff"), url(/assets/tcfont-regular-5dee10366a07e5385650c5fc9048cc72.ttf) format("truetype"); font-weight: normal; font-style: normal; } /** [Name] Icons [Section] Carlton [Description] Generic icon set using custom font face for glyphs. For information on adding glyphs to the font, please read ```/doc/fonts-and-glyphs.md``` in TC. [Example] <% icons = [ "comments", "twitter", "email", "facebook", "maximise", "republish", "globe", "delete", "add", "layout", "article", "article-published", "chart", "reader", "readers", "subtract", "comment", "search", "help", "rss", "favourite", "location", "time", "friend-of-tc", "friend-of-tc-outer", "friend-of-tc-heart", "check", "favourite-add", "skype", "phone", "mobile", "private", "public", "topics", "menu", "external-link", "trash", "picture", "image", "edit", "heading", "bold", "italic", "link", "video", "fullscreen", "close-fullscreen", "favourite-minus", "envelope", "simple-check", "calendar", "the-conversation", "lock", "unlock", "audio", "chevron-right", "caret-down", "caret-left", "caret-right", "caret-up", "pastespecial", "linkedin", "pause", "cog", "orcid", "music", "print", "google-plus", "home", "facebook-simple", "tag", "left-guillemet", "whatsapp", "fb-messenger", "youtube" ] %> **/ [class^="icon-"], [class*=" icon-"] { font-family: "TCFont-Regular"; display: inline-block; font-weight: normal !important; font-style: normal !important; vertical-align: middle; position: relative; top: -0.1em; width: 1.231em; font-size: 1.231em; } [class^="icon-"].icon-comments:before, [class*=" icon-"].icon-comments:before { content: "\F000"; } [class^="icon-"].icon-twitter:before, [class*=" icon-"].icon-twitter:before { content: "\F001"; color: #00b0e9; } [class^="icon-"].icon-email:before, [class*=" icon-"].icon-email:before { content: "\F002"; } [class^="icon-"].icon-facebook:before, [class*=" icon-"].icon-facebook:before { content: "\F003"; color: #3a5a93; } [class^="icon-"].icon-maximise:before, [class*=" icon-"].icon-maximise:before { content: "\F004"; } [class^="icon-"].icon-republish:before, [class*=" icon-"].icon-republish:before { content: "\F005"; } [class^="icon-"].icon-globe:before, [class*=" icon-"].icon-globe:before { content: "\F006"; } [class^="icon-"].icon-delete:before, [class*=" icon-"].icon-delete:before { content: "\F007"; } [class^="icon-"].icon-add:before, [class*=" icon-"].icon-add:before { content: "\F008"; } [class^="icon-"].icon-layout:before, [class*=" icon-"].icon-layout:before { content: "\F009"; } [class^="icon-"].icon-article:before, [class^="icon-"].icon-article-published:before, [class*=" icon-"].icon-article:before, [class*=" icon-"].icon-article-published:before { content: "\F00A"; } [class^="icon-"].icon-article-check:before, [class*=" icon-"].icon-article-check:before { content: "\F00B"; } [class^="icon-"].icon-chart:before, [class*=" icon-"].icon-chart:before { content: "\F00C"; } [class^="icon-"].icon-reader:before, [class*=" icon-"].icon-reader:before { content: "\F00D"; } [class^="icon-"].icon-readers:before, [class*=" icon-"].icon-readers:before { content: "\F00E"; } [class^="icon-"].icon-subtract:before, [class*=" icon-"].icon-subtract:before { content: "\F011"; } [class^="icon-"].icon-comment:before, [class*=" icon-"].icon-comment:before { content: "\F012"; } [class^="icon-"].icon-search:before, [class*=" icon-"].icon-search:before { content: "\F013"; } [class^="icon-"].icon-help:before, [class*=" icon-"].icon-help:before { content: "\F014"; } [class^="icon-"].icon-rss:before, [class*=" icon-"].icon-rss:before { content: "\F015"; color: #eb7f3e; } [class^="icon-"].icon-rss-non-coloured:before, [class*=" icon-"].icon-rss-non-coloured:before { content: "\F015"; } [class^="icon-"].icon-favourite:before, [class*=" icon-"].icon-favourite:before { content: "\F016"; } [class^="icon-"].icon-location:before, [class*=" icon-"].icon-location:before { content: "\F017"; } [class^="icon-"].icon-time:before, [class*=" icon-"].icon-time:before { content: "\F018"; } [class^="icon-"].icon-friend-of-tc:before, [class*=" icon-"].icon-friend-of-tc:before { content: "\F019"; } [class^="icon-"].icon-friend-of-tc-outer:before, [class*=" icon-"].icon-friend-of-tc-outer:before { content: "\F021"; } [class^="icon-"].icon-friend-of-tc-heart:before, [class*=" icon-"].icon-friend-of-tc-heart:before { content: "\F022"; } [class^="icon-"].icon-check:before, [class*=" icon-"].icon-check:before { content: "\F023"; } [class^="icon-"].icon-favourite-add:before, [class*=" icon-"].icon-favourite-add:before { content: "\F024"; } [class^="icon-"].icon-followed:before, [class*=" icon-"].icon-followed:before { content: "\F025"; } [class^="icon-"].icon-skype:before, [class*=" icon-"].icon-skype:before { content: "\F026"; } [class^="icon-"].icon-media-enquiries:before, [class^="icon-"].icon-work-phone:before, [class^="icon-"].icon-phone:before, [class*=" icon-"].icon-media-enquiries:before, [class*=" icon-"].icon-work-phone:before, [class*=" icon-"].icon-phone:before { content: "\F027"; } [class^="icon-"].icon-mobile:before, [class*=" icon-"].icon-mobile:before { content: "\F028"; } [class^="icon-"].icon-private:before, [class*=" icon-"].icon-private:before { content: "\F029"; } [class^="icon-"].icon-public:before, [class*=" icon-"].icon-public:before { content: "\F030"; } [class^="icon-"].icon-topics:before, [class*=" icon-"].icon-topics:before { content: "\F031"; } [class^="icon-"].icon-menu:before, [class*=" icon-"].icon-menu:before { content: "\F032"; } [class^="icon-"].icon-external-link:before, [class*=" icon-"].icon-external-link:before { content: "\F033"; } [class^="icon-"].icon-trash:before, [class*=" icon-"].icon-trash:before { content: "\F034"; } [class^="icon-"].icon-picture:before, [class*=" icon-"].icon-picture:before { content: "\F035"; } [class^="icon-"].icon-image:before, [class*=" icon-"].icon-image:before { content: "\F035"; } [class^="icon-"].icon-edit:before, [class*=" icon-"].icon-edit:before { content: "\F036"; } [class^="icon-"].icon-heading:before, [class*=" icon-"].icon-heading:before { content: "\F037"; } [class^="icon-"].icon-bold:before, [class*=" icon-"].icon-bold:before { content: "\F038"; } [class^="icon-"].icon-italic:before, [class*=" icon-"].icon-italic:before { content: "\F039"; } [class^="icon-"].icon-link:before, [class*=" icon-"].icon-link:before { content: "\F040"; } [class^="icon-"].icon-video:before, [class*=" icon-"].icon-video:before { content: "\F041"; } [class^="icon-"].icon-fullscreen:before, [class*=" icon-"].icon-fullscreen:before { content: "\F042"; } [class^="icon-"].icon-close-fullscreen:before, [class*=" icon-"].icon-close-fullscreen:before { content: "\F043"; } [class^="icon-"].icon-favourite-minus:before, [class*=" icon-"].icon-favourite-minus:before { content: "\F044"; } [class^="icon-"].icon-envelope:before, [class*=" icon-"].icon-envelope:before { content: "\F045"; } [class^="icon-"].icon-simple-check:before, [class*=" icon-"].icon-simple-check:before { content: "\F046"; } [class^="icon-"].icon-calendar:before, [class*=" icon-"].icon-calendar:before { content: "\F047"; } [class^="icon-"].icon-the-conversation:before, [class*=" icon-"].icon-the-conversation:before { content: "\F048"; } [class^="icon-"].icon-lock:before, [class*=" icon-"].icon-lock:before { content: "\F050"; } [class^="icon-"].icon-unlock:before, [class*=" icon-"].icon-unlock:before { content: "\F051"; } [class^="icon-"].icon-audio:before, [class*=" icon-"].icon-audio:before { content: "\F052"; } [class^="icon-"].icon-chevron-right:before, [class*=" icon-"].icon-chevron-right:before { content: "\F053"; } [class^="icon-"].icon-caret-down:before, [class*=" icon-"].icon-caret-down:before { content: "\F054"; } [class^="icon-"].icon-caret-left:before, [class*=" icon-"].icon-caret-left:before { content: "\F055"; } [class^="icon-"].icon-caret-right:before, [class*=" icon-"].icon-caret-right:before { content: "\F056"; } [class^="icon-"].icon-caret-up:before, [class*=" icon-"].icon-caret-up:before { content: "\F057"; } [class^="icon-"].icon-pastespecial:before, [class*=" icon-"].icon-pastespecial:before { content: "\F058"; } [class^="icon-"].icon-linkedin:before, [class*=" icon-"].icon-linkedin:before { content: "\F059"; color: #0181b2; } [class^="icon-"].icon-pause:before, [class*=" icon-"].icon-pause:before { content: "\F060"; } [class^="icon-"].icon-cog:before, [class*=" icon-"].icon-cog:before { content: "\F061"; } [class^="icon-"].icon-orcid:before, [class*=" icon-"].icon-orcid:before { content: "\F062"; color: #a6ce39; } [class^="icon-"].icon-music:before, [class*=" icon-"].icon-music:before { content: "\F063"; } [class^="icon-"].icon-print:before, [class*=" icon-"].icon-print:before { content: "\F064"; } [class^="icon-"].icon-google-plus:before, [class*=" icon-"].icon-google-plus:before { content: "\F065"; color: #de4931; } [class^="icon-"].icon-home:before, [class*=" icon-"].icon-home:before { content: "\F066"; } [class^="icon-"].icon-facebook-simple:before, [class*=" icon-"].icon-facebook-simple:before { content: "\F067"; color: #3a5a93; } [class^="icon-"].icon-tag:before, [class*=" icon-"].icon-tag:before { content: "\F068"; } [class^="icon-"].icon-left-guillemet:before, [class*=" icon-"].icon-left-guillemet:before { content: "\F069"; } [class^="icon-"].icon-input:before, [class*=" icon-"].icon-input:before { content: "\F070"; } [class^="icon-"].icon-whatsapp:before, [class*=" icon-"].icon-whatsapp:before { content: "\F071"; color: #455a64; } [class^="icon-"].icon-fb-messenger:before, [class*=" icon-"].icon-fb-messenger:before { content: "\F072"; color: #0084ff; } [class^="icon-"].icon-youtube:before, [class*=" icon-"].icon-youtube:before { content: "\F073"; color: #ff0000; } [class^="icon-"].icon-share:before, [class*=" icon-"].icon-share:before { content: "\F074"; } [class^="icon-"].icon-auth-facebook:before, [class*=" icon-"].icon-auth-facebook:before { content: "\F003"; color: #3a5a93; } [class^="icon-"].icon-auth-twitter:before, [class*=" icon-"].icon-auth-twitter:before { content: "\F001"; color: #00b0e9; } [class^="icon-"].icon-auth-linkedin:before, [class*=" icon-"].icon-auth-linkedin:before { content: "\F059"; color: #0181b2; } [class^="icon-"].icon-auth-google:before, [class*=" icon-"].icon-auth-google:before { content: "\F065"; color: #de4931; } .icon-combine .icon-friend-of-tc-heart { position: absolute; margin-top: 0.045em; } /** [Name] Icon combinations [Section] Carlton [Description] Some glyphs are meant to be used in unison. - ```..icon-combine-heart``` - Combines the icon-friend-of-tc-outer & icon-friend-of-tc-heart [Example] Make a donation **/ span.icon-combine-heart { position: relative; display: inline-block; padding-left: 10px; height: inherit; font-size: inherit; } span.icon-combine-heart i { position: absolute; text-align: center; top: 0; left: 0; } i.icon-conversation-red { color: #e50c20; } .vivus-icon-examples li { list-style: none; float: left; width: 25%; height: 25px; padding: 10px 0; } /** [Name] Typography - Libre Baskerville [Section] Carlton [Description] Libre Baskerville. Used for content#show. **/ @font-face { font-family: "Libre Baskerville"; src: url(/assets/librebaskerville-regular-5c7e409dda84c1449567914bea28e077.eot); src: url(/assets/librebaskerville-regular-5c7e409dda84c1449567914bea28e077.eot?#iefix) format("embedded-opentype"), url(/assets/librebaskerville-regular-e9de7a34bc52de1b55e59f11252d171e.woff) format("woff"), url(/assets/librebaskerville-regular-fafa09d7e0aa6ada5e86bdb82eba4cb9.ttf) format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Libre Baskerville"; src: url(/assets/librebaskerville-bold-d55aa906ea47db9bdfbf18de24221ebd.eot); src: url(/assets/librebaskerville-bold-d55aa906ea47db9bdfbf18de24221ebd.eot?#iefix) format("embedded-opentype"), url(/assets/librebaskerville-bold-3b99ae68a21ad2432e4bc9181c53fe43.woff) format("woff"), url(/assets/librebaskerville-bold-970895fa08dd2455721e7f60cb029817.ttf) format("truetype"); font-weight: bold; font-style: normal; } @font-face { font-family: "Libre Baskerville"; src: url(/assets/librebaskerville-italic-80c79c56e49808392d3ae921d2c6ec67.eot); src: url(/assets/librebaskerville-italic-80c79c56e49808392d3ae921d2c6ec67.eot?#iefix) format("embedded-opentype"), url(/assets/librebaskerville-italic-8954f6cb2af42e18f9d5cd4f0d82928b.woff) format("woff"), url(/assets/librebaskerville-italic-9b2c800dc1e3b3688b1f4d1e8f144c2c.ttf) format("truetype"); font-weight: normal; font-style: italic; } @font-face { font-family: "Libre Baskerville"; src: url(/assets/librebaskerville-bolditalic-5064ba7deaffe9be7dd3a8c036edff93.eot); src: url(/assets/librebaskerville-bolditalic-5064ba7deaffe9be7dd3a8c036edff93.eot?#iefix) format("embedded-opentype"), url(/assets/librebaskerville-bolditalic-036645a155b6639c122394cf4b5b9fea.woff) format("woff"), url(/assets/librebaskerville-bolditalic-8b401fcb7f50df2ebd574d5839fc7763.ttf) format("truetype"); font-weight: bold; font-style: italic; } html { -webkit-text-size-adjust: 100%; } body, textarea, input, select { font-size: 13px; font-family: "Helvetica Neue", Helvetica, sans-serif; color: #383838; } .text-center { text-align: center; } span.nobr { white-space: nowrap; } /** [Name] Standard paragraph type [Section] Typography [Description] - ```.fine-print``` - a smaller font size for notes of less importance [Example]

Oh, I don’t have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. Oh, I don’t have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain.

Fry, you can’t just sit here in the dark listening to classical music.

**/ p { margin-bottom: 18px; } p.fine-print { font-size: 11px !important; } /** [Name] Emphasis [Section] Typography [Description] Emphasise text as being important by increasing the weight of the type, or the rendering of italics. [Example]

Hi, I’m a naughty nurse, and I really need someone to talk to. $9.95 a minute. Hello Morbo, how’s the family? OK, if everyone’s finished being stupid. I don’t ‘need’ to drink.

**/ strong { font-weight: bold; } em { font-style: italic; } /** [Name] Quotations [Section] Typography [Description] - ```.left``` - Pull the quote to the left - ```.right``` - Pull the quote to the right - ```.feature``` - More prominent treatment [Example] <% ['', 'left', 'right', 'feature'].each do |style| %>

When I was first asked to make a film about my nephew, Hubert Farnsworth, I thought “Why should I?” Then later, Leela made the film. But if I did make it, you can bet there would have been more topless women on motorcycles. Roll film! I’m sorry, guys. I never meant to hurt you. Just to destroy everything you ever believed in. Fatal. Yeah, I do that with my stupidness.

Lorem ipsum dolor sit amet
<% end %> **/ blockquote { clear: both; padding: 9px 18px 12px 18px; font-style: italic; margin-bottom: 18px; color: #484848; text-align: center; } blockquote > blockquote:last-child { margin-bottom: 0; } blockquote p:last-child { margin-bottom: 0; } blockquote, blockquote.left { text-align: left; border-left: 4px solid #e8e8e8; } blockquote.right { text-align: right; border-right: 4px solid #e8e8e8; } blockquote.feature { color: #383838; position: relative; padding: 30px 0 24px 0; font-size: 32px; font-weight: bold; font-family: "LeagueGothicRegular", "League Gothic", Impact, sans-serif; font-style: normal; text-transform: uppercase; text-align: left; border-left: none; border-top: 4px solid #e8e8e8; border-bottom: 4px solid #e8e8e8; margin: 18px 0 36px 0; } blockquote.feature p:first-child { text-indent: 50px; } blockquote.feature:before { content: "\201C"; position: absolute; top: 62px; left: 0; color: #ddd; font-size: 125px; } blockquote.feature, blockquote.feature p { line-height: 36px; } blockquote.feature cite { font-size: 24px; } blockquote.feature cite:before { content: "\2014 "; } blockquote cite { font-style: normal; color: #aaa; } h1, h2, h3, h4, h5, h6, blockquote { -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; } /** [Name] Level 1 heading [Section] Typography [Description] - ```.slammed``` - Removes whitespace from the bottom of the heading. - ```.page-header``` - Top level headings for static content pages. Adds a 1px bottom border. - ```.double-bordered``` - Top level headings for static content pages. Adds a double 1px bottom border. [Example] <% ['', 'slammed', 'page-header', 'double-bordered'].each do |style| %>

h1. Level one heading

<% end %> **/ h1 { font-size: 28px; font-weight: bold; line-height: 36px; margin-bottom: 18px; } h1.page-header { border-bottom: 1px solid #eee; margin-bottom: 36px; padding-bottom: 9px; } h1.page-header span { color: #ccc; } h1.slammed { margin-bottom: 0; } h1.double-bordered { border-bottom: 1px solid #eee; padding-bottom: 1px; } h1.double-bordered:after { content: ""; display: block; position: relative; padding-bottom: 10px; border-bottom: 1px solid #eee; } /** [Name] Level 2 heading [Section] Typography [Description] - ```.slammed``` - Removes whitespace from the bottom of the heading. - ```.double-bordered``` - Top level headings for static content pages. Adds a double 1px bottom border. [Example] <% ['', 'slammed', 'double-bordered'].each do |style| %>

h2. Level one heading

<% end %> **/ h2 { font-size: 23px; font-weight: bold; margin-bottom: 12px; } h2.slammed { margin-bottom: 0; } h2.double-bordered { border-bottom: 1px solid #eee; padding-bottom: 1px; } h2.double-bordered:after { content: ""; display: block; position: relative; padding-bottom: 10px; border-bottom: 1px solid #eee; } /** [Name] Level 3 heading [Section] Typography [Description] - ```.slammed``` - Removes whitespace from the bottom of the heading. - ```.bordered``` - Adds a dark, 10px bottom border and more bottom margin. - ```.bordered-light``` - Adds a light grey, 1px bottom border and more bottom margin. - ```.double-bordered``` - Top level headings for static content pages. Adds a double 1px bottom border. [Example] <% ['', 'slammed', 'bordered', 'bordered-light', 'double-bordered'].each do |style| %>

h3. Level one heading

<% end %> **/ h3 { color: #333; font-size: 15px; line-height: 18px; margin-bottom: 12px; font-weight: bold; } h3.bordered { font-size: 15px; line-height: 18px; padding-bottom: 8px; border-bottom: 4px solid #ccc; margin-bottom: 12px; } h3.bordered > span { color: #8e8e8e; } h3.thick-light-bordered { padding-bottom: 8px; border-bottom: 4px solid #e6e6e6; } h3.thick-light-bordered > span { color: #8e8e8e; } h3.bordered-light { font-size: 15px; line-height: 15px; padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; margin-bottom: 6px; } h3.bordered-light > span { color: #8e8e8e; } h3.slammed { margin-bottom: 0; } h3.double-bordered { border-bottom: 1px solid #eee; padding-bottom: 1px; } h3.double-bordered:after { content: ""; display: block; position: relative; padding-bottom: 10px; border-bottom: 1px solid #eee; } /** [Name] Level 4 heading [Section] Typography [Description] - ```.slammed``` - Removes whitespace from the bottom of the heading. - ```.double-bordered``` - Top level headings for static content pages. Adds a double 1px bottom border. [Example] <% ['', 'slammed', 'double-bordered'].each do |style| %>

h4. Level one heading

<% end %> **/ h4 { color: #333; text-transform: uppercase; font-size: 10px; letter-spacing: 0.12em; margin-bottom: 10px; } h4.slammed { margin-bottom: 0; } h4.double-bordered { border-bottom: 1px solid #eee; padding-bottom: 1px; } h4.double-bordered:after { content: ""; display: block; position: relative; padding-bottom: 10px; border-bottom: 1px solid #eee; } /** [Name] Level 5 heading [Section] Typography [Description] - ```.slammed``` - Removes whitespace from the bottom of the heading. - ```.double-bordered``` - Top level headings for static content pages. Adds a double 1px bottom border. [Example] <% ['', 'slammed', 'double-bordered'].each do |style| %>
h5. Level one heading
<% end %> **/ h5.slammed { margin-bottom: 0; } h5.double-bordered { border-bottom: 1px solid #eee; padding-bottom: 1px; } h5.double-bordered:after { content: ""; display: block; position: relative; padding-bottom: 10px; border-bottom: 1px solid #eee; } /** [Name] Level 6 heading [Section] Typography [Description] - ```.slammed``` - Removes whitespace from the bottom of the heading. - ```.double-bordered``` - Top level headings for static content pages. Adds a double 1px bottom border. [Example] <% ['', 'slammed', 'double-bordered'].each do |style| %>
h6. Level one heading
<% end %> **/ h6 { color: #888; } h6.slammed { margin-bottom: 0; } h6.double-bordered { border-bottom: 1px solid #eee; padding-bottom: 1px; } h6.double-bordered:after { content: ""; display: block; position: relative; padding-bottom: 10px; border-bottom: 1px solid #eee; } hr { border: none; clear: both; border-top: 1px solid #ccc; margin-bottom: 18px; } /** [Name] Default anchor styling [Section] Typography [Description] - ```.information``` - Solid gray block information link - ```:hover``` - Subtle hover highlight. - ```:focus``` - Remove outline from anchors. - ```:visited``` - Subtly darker colour for visited links. - ```:visited:hover``` - Subtle hover highlight (same as :hover) [Example] <% ['', 'information', 'link'].each do |style| %> Default <%= style %> anchor <% end %> **/ a, .link { color: #069; text-decoration: none; outline: none; } a:hover, .link:hover { color: #2d8cd6; text-decoration: none; } a:focus, .link:focus { outline: none; } a:visited, .link:visited { color: #557585; } a:visited:hover, .link:visited:hover { color: #069; } nav ol li, nav ul li { list-style: none; margin-left: 0; } /** [Name] Unordered list [Section] Typography [Description] - ```.fine-print``` - Removes whitespace from the bottom of the heading. - ```.semantic``` - Removes whitespace from the bottom of the heading. [Example] <% ['', 'fine-print', 'semantic'].each do |style| %>

<% end %> **/ ul li { margin-left: 0; } ul.fine-print li { font-size: 11px; } ul.semantic li { list-style-type: none; margin-left: 0; } /** [Name] Ordered list [Section] Typography [Description] - ```.fine-print``` - Removes whitespace from the bottom of the heading. - ```.semantic``` - Removes whitespace from the bottom of the heading. [Example] <% ['', 'fine-print', 'semantic'].each do |style| %>
  1. We can’t compete with Mom! Her company is big and evil! Ours is small and neutral!
  2. Interesting. No, wait, the other thing: tedious.
  3. Actually, that’s still true.
    1. Too much work. Let’s burn it and say we dumped it in the sewer.
    2. Good news, everyone! I’ve taught the toaster to feel love!
    3. Oh God, what have I done?
  4. Now, now. Perfectly symmetrical violence never solved anything.
  5. Daddy Bender, we’re hungry.


<% end %> **/ ol li { margin-left: 0; } ol.fine-print li { font-size: 11px; } ol.semantic li { list-style-type: none; margin-left: 0; } /** [Name] Definition list [Section] Typography [Description] [Example]
Coins
5¢, 10¢, 20¢, 50¢, $1, $2
Notes
$5, $10, $20, $50, $100
**/ dl dt { float: left; font-weight: bold; clear: left; } dl dd { float: left; margin-left: 1em; text-align: left; } /** [Name] Fonts [Section] Typography [Description] - ```.league-gothic``` - It’s for metrics. - ```.meslo``` - It's for draft#edit [Example] <% ['league-gothic', 'meslo'].each do |style| %>

Fry, you can’t just sit here in the dark listening to classical music. And when we woke up, we had these bodies. Yes. You gave me a dollar and some candy. Okay, I like a challenge. Stop it, stop it. It’s fine. I will ‘destroy’ you! THE BIG BRAIN AM WINNING AGAIN! I AM THE GREETEST! NOW I AM LEAVING EARTH, FOR NO RAISEN!

<% end %> **/ .league-gothic { font-family: "LeagueGothicRegular", "League Gothic", Impact, sans-serif; font-size-adjust: 0.455; font-size: 30px; font-weight: normal; line-height: 40px; text-rendering: optimizeLegibility; } .meslo { font-family: "MesloLGMDZ", "Monaco", monospace; } figure, .figure { display: block; position: relative; } figure:after, .figure:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } figure iframe, .figure iframe { display: block; } figure figcaption, figure .figcaption, .figure figcaption, .figure .figcaption { color: #666; display: block; font-size: 11px; line-height: 18px; padding-top: 6px; } figure figcaption a, figure .figcaption a, .figure figcaption a, .figure .figcaption a { font-weight: normal !important; } figure figcaption .attribution, figure .figcaption .attribution, .figure figcaption .attribution, .figure .figcaption .attribution { color: #ccc; } figure figcaption .attribution a, figure .figcaption .attribution a, .figure figcaption .attribution a, .figure .figcaption .attribution a { color: #ccc; } figure figcaption .attribution a:hover, figure figcaption .attribution a:focus, figure .figcaption .attribution a:hover, figure .figcaption .attribution a:focus, .figure figcaption .attribution a:hover, .figure figcaption .attribution a:focus, .figure .figcaption .attribution a:hover, .figure .figcaption .attribution a:focus { color: #069; } article header p.byline { line-height: 18px; padding: 2px 0; font-size: 11px; margin-bottom: 0; color: #888888; } .callout { display: block; background: #f9f6e3; padding: 0.5em 1em; margin: 1em 0; color: #333; text-shadow: 0 1px 0 #fff; border-top: 4px solid #f3edca; } body { line-height: 18px; background-color: #fff; } #outer { padding-top: 48px; } #outer > .wrapper { padding-bottom: 48px; } .handheld { display: none; } h1 a:hover { text-decoration: none; } div.crop { overflow: hidden; } table.grid td, table.grid tr { border-bottom: 1px solid #000; } input::-webkit-input-placeholder { color: #999; } input:-ms-input-placeholder { color: #999; } input::-ms-input-placeholder { color: #999; } input::placeholder { color: #999; } input.placeholder { color: #999; } input:focus::-webkit-input-placeholder { color: #ccc; } input:focus:-ms-input-placeholder { color: #ccc; } input:focus::-ms-input-placeholder { color: #ccc; } input:focus::placeholder { color: #ccc; } input:focus.placeholder { color: #ccc; } .fluid-width-video-wrapper { margin-bottom: 18px; } audio { display: none; height: 0; visibility: hidden; width: 0; } .right { float: right; } .left { float: left; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .clearfix:before, .clearfix:after { content: " "; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /** [Name] Tooltips [Section] General Elements [Description] This is a big tooltip suitable for displaying actions. It doesn't handle positioning of the actual tooltip box - that's up to you. The arrow are always positioned in the center of the side that the arrow appears on. - ```.left``` - Arrow points left - ```.right``` - Arrow points right - ```.bottom``` - Arrow points up (tooltip is to the bottom of content) - ```.top``` - Arrow points down (tooltip is on top of content) [Example] <% ["left", "right", "bottom", "top"].each do |modifier| %>

I am a tooltip, I can contain all sorts of fun stuff!

Look, even multi-line stuff!

<% end %> **/ .tooltip { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.75)), to(rgba(0, 0, 0, 0.9))); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.9)); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.9)); background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.9)); -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25) inset, 0 1px 2px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.25) inset, 0 1px 2px 0 rgba(0, 0, 0, 0.25); border: 1px solid #000; position: absolute; z-index: 2; margin-top: -12px; padding: 5px 16px; font-size: 11px; color: #fff; } .tooltip p { margin-bottom: 0; } .tooltip p:last-child { margin-bottom: 0; } .tooltip:after { content: ""; display: block; position: absolute; width: 0; height: 0; } .tooltip.left:after { left: -8px; top: 50%; margin-top: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #262626; } .tooltip.right:after { right: -8px; top: 50%; margin-top: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #262626; } .tooltip.bottom:after { top: -8px; left: 50%; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #323232; } .tooltip.top:after { bottom: -8px; left: 50%; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #1a1a1a; } .hover.tooltip { -webkit-transition: opacity 0.15s; -o-transition: opacity 0.15s; transition: opacity 0.15s; pointer-events: none; opacity: 0; text-shadow: none; } :hover > .hover.tooltip, :active > .hover.tooltip { opacity: 1; } .lt-ie8 .hover.tooltip { display: none; } .lt-ie8 :hover > .tooltip { display: block; } /** [Name] Help Tooltips [Section] General Elements [Description] Uses ```.tooltip``` to show an icon, with a nicely positioned help tooltip that's always the same size. It's used on: - Sidebar views for suggesting good topics. - A helpful note regarding UTC times on the Author Dashboard - A note about republishing on the Author Dashboard [Example]

Tips for better topics

Selecting topics from a variety of categories helps us build better taxonomies. Picking (where possible) from a number of categories is best. For example: people, places, events, organisation, series.

Try and add a mix of broad and focused topics; tamiflu (specific drug name), influenza (moderately common topic), vaccination (broad topic), for example, are good choices.

**/ .help-tooltip { position: relative; display: inline-block; width: 24px; text-align: center; cursor: pointer; } .help-tooltip .tooltip { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(53, 75, 89, 0.9)), to(rgba(42, 61, 73, 0.9))); background-image: -webkit-linear-gradient(rgba(53, 75, 89, 0.9), rgba(42, 61, 73, 0.9)); background-image: -o-linear-gradient(rgba(53, 75, 89, 0.9), rgba(42, 61, 73, 0.9)); background-image: linear-gradient(rgba(53, 75, 89, 0.9), rgba(42, 61, 73, 0.9)); position: absolute; left: -126px; width: 250px; border: 1px solid #000; z-index: 100; margin-top: 0; padding: 12px; text-align: left; font-weight: normal; } .help-tooltip .tooltip h3, .help-tooltip .tooltip p { color: #fff; margin-bottom: 6px; } .help-tooltip .tooltip.bottom-left { left: auto; right: -19px; } .help-tooltip .tooltip.bottom-left:after { border-bottom: 8px solid #323232; border-left: 8px solid transparent; border-right: 8px solid transparent; margin-right: 10px; right: 12px; top: -8px; } .help-tooltip .tooltip.top-left { left: auto; right: -19px; bottom: 26px; } .help-tooltip .tooltip.top-left:after { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #1a1a1a; margin-right: 10px; right: 12px; bottom: -8px; } .help-tooltip .tooltip p:last-child { margin-bottom: 0; } .help-tooltip.aligned-right { float: right; } /* * Syntax highlighting styles. */ pre.highlight { margin-bottom: 18px; padding: 1em; background-color: #f8f8f8; overflow-y: auto; } pre.highlight table td { padding: 5px; } pre.highlight table pre { margin: 0; } pre.highlight .cm { color: #999988; font-style: italic; } pre.highlight .cp { color: #999999; font-weight: bold; } pre.highlight .c1 { color: #999988; font-style: italic; } pre.highlight .cs { color: #999999; font-weight: bold; font-style: italic; } pre.highlight .c, pre.highlight .cd { color: #999988; font-style: italic; } pre.highlight .err { color: #a61717; background-color: #e3d2d2; } pre.highlight .gd { color: #000000; background-color: #ffdddd; } pre.highlight .ge { color: #000000; font-style: italic; } pre.highlight .gr { color: #aa0000; } pre.highlight .gh { color: #999999; } pre.highlight .gi { color: #000000; background-color: #ddffdd; } pre.highlight .go { color: #888888; } pre.highlight .gp { color: #555555; } pre.highlight .gs { font-weight: bold; } pre.highlight .gu { color: #aaaaaa; } pre.highlight .gt { color: #aa0000; } pre.highlight .kc { color: #000000; font-weight: bold; } pre.highlight .kd { color: #000000; font-weight: bold; } pre.highlight .kn { color: #000000; font-weight: bold; } pre.highlight .kp { color: #000000; font-weight: bold; } pre.highlight .kr { color: #000000; font-weight: bold; } pre.highlight .kt { color: #445588; font-weight: bold; } pre.highlight .k, pre.highlight .kv { color: #000000; font-weight: bold; } pre.highlight .mf { color: #009999; } pre.highlight .mh { color: #009999; } pre.highlight .il { color: #009999; } pre.highlight .mi { color: #009999; } pre.highlight .mo { color: #009999; } pre.highlight .m, pre.highlight .mb, pre.highlight .mx { color: #009999; } pre.highlight .sb { color: #d14; } pre.highlight .sc { color: #d14; } pre.highlight .sd { color: #d14; } pre.highlight .s2 { color: #d14; } pre.highlight .se { color: #d14; } pre.highlight .sh { color: #d14; } pre.highlight .si { color: #d14; } pre.highlight .sx { color: #d14; } pre.highlight .sr { color: #009926; } pre.highlight .s1 { color: #d14; } pre.highlight .ss { color: #990073; } pre.highlight .s { color: #d14; } pre.highlight .na { color: #008080; } pre.highlight .bp { color: #999999; } pre.highlight .nb { color: #0086b3; } pre.highlight .nc { color: #445588; font-weight: bold; } pre.highlight .no { color: #008080; } pre.highlight .nd { color: #3c5d5d; font-weight: bold; } pre.highlight .ni { color: #800080; } pre.highlight .ne { color: #990000; font-weight: bold; } pre.highlight .nf { color: #990000; font-weight: bold; } pre.highlight .nl { color: #990000; font-weight: bold; } pre.highlight .nn { color: #555555; } pre.highlight .nt { color: #000080; } pre.highlight .vc { color: #008080; } pre.highlight .vg { color: #008080; } pre.highlight .vi { color: #008080; } pre.highlight .nv { color: #008080; } pre.highlight .ow { color: #000000; font-weight: bold; } pre.highlight .o { color: #000000; font-weight: bold; } pre.highlight .w { color: #bbbbbb; } @media only screen and (max-width: 599px) { body { font-size: 16px; height: 100%; line-height: 22px; width: 100%; } body #page-wrapper.overlay-visible { height: 100%; overflow: hidden; } body .handheld { display: block; } body p { padding: 0; } body.pages-show .highlight-panel { display: none; } body.pages-show .page-layout.section .handheld-analysis, body.pages-show .page-layout.section .series { display: block; } body.pages-show .page-layout.section .handheld-research, body.pages-show .page-layout.section .handheld-briefs, body.pages-show .page-layout.section .handheld-columnists, body.pages-show .page-layout.section .handheld-ad { display: none; } body.pages-show .page-layout.section .handheld-series .bordered { display: block; } body.pages-show .page-layout.section.handheld-display-research .handheld-research, body.pages-show .page-layout.section.handheld-display-research .handheld-briefs { display: block; } body.pages-show .page-layout.section.handheld-display-research section#research-news .bordered { display: none; } body.pages-show .page-layout.section.handheld-display-research #special_section { display: none; } body.pages-show .page-layout.section.handheld-display-research .handheld-analysis, body.pages-show .page-layout.section.handheld-display-research .series, body.pages-show .page-layout.section.handheld-display-research .handheld-columnists, body.pages-show .page-layout.section.handheld-display-research .handheld-ad { display: none; } body.pages-show .page-layout.section.handheld-display-columns .handheld-ad, body.pages-show .page-layout.section.handheld-display-columns .handheld-columnists { display: block; } body.pages-show .page-layout.section.handheld-display-columns #special_section { display: none; } body.pages-show .page-layout.section.handheld-display-columns .handheld-analysis, body.pages-show .page-layout.section.handheld-display-columns .series, body.pages-show .page-layout.section.handheld-display-columns .handheld-research, body.pages-show .page-layout.section.handheld-display-columns .handheld-briefs { display: none; } body #all-of-the-things, body #hot-topics, body #primary-navigation, body #partners-footer, body .masthead-search, body #members-footer, body #editors-picks, body #eb { display: none; } body #columnists .bordered, body #analysis-and-comment .bordered, body #research-news .bordered { display: none; } body .wrapper { width: auto; margin: 0; padding-left: 10px; padding-right: 10px; } body.pages .page-layout.sochi_2014 section.article-section article.placed figure, body.pages .page-layout.rugby_2014 section.article-section article.placed figure, body.pages .page-layout.world_cup_2014 section.article-section article.placed figure, body.pages .page-layout.glasgow_2014 section.article-section article.placed figure { display: none; } body.pages .page-layout.olympic h1.page-header, body.pages .page-layout.election h1.page-header, body.pages .page-layout.au_election_2013 h1.page-header, body.pages .page-layout.sochi_2014 h1.page-header, body.pages .page-layout.rugby_2015 h1.page-header, body.pages .page-layout.world_cup_2014 h1.page-header, body.pages .page-layout.glasgow_2014 h1.page-header { margin-top: -5px; padding: 0 10px; border-bottom: none; } body.pages .page-layout.olympic div.page-column > #analysis-and-comment, body.pages .page-layout.election div.page-column > #analysis-and-comment, body.pages .page-layout.au_election_2013 div.page-column > #analysis-and-comment, body.pages .page-layout.sochi_2014 div.page-column > #analysis-and-comment, body.pages .page-layout.rugby_2015 div.page-column > #analysis-and-comment, body.pages .page-layout.world_cup_2014 div.page-column > #analysis-and-comment, body.pages .page-layout.glasgow_2014 div.page-column > #analysis-and-comment { margin-top: 1em; } body.pages .page-layout.olympic section.advertisement > h3, body.pages .page-layout.election section.advertisement > h3, body.pages .page-layout.au_election_2013 section.advertisement > h3, body.pages .page-layout.sochi_2014 section.advertisement > h3, body.pages .page-layout.rugby_2015 section.advertisement > h3, body.pages .page-layout.world_cup_2014 section.advertisement > h3, body.pages .page-layout.glasgow_2014 section.advertisement > h3 { display: none; } body.pages .page-layout.olympic .feature-gallery, body.pages .page-layout.election .feature-gallery, body.pages .page-layout.au_election_2013 .feature-gallery, body.pages .page-layout.sochi_2014 .feature-gallery, body.pages .page-layout.rugby_2015 .feature-gallery, body.pages .page-layout.world_cup_2014 .feature-gallery, body.pages .page-layout.glasgow_2014 .feature-gallery { clear: both; } body.pages .page-layout.olympic .feature-gallery article > header, body.pages .page-layout.election .feature-gallery article > header, body.pages .page-layout.au_election_2013 .feature-gallery article > header, body.pages .page-layout.sochi_2014 .feature-gallery article > header, body.pages .page-layout.rugby_2015 .feature-gallery article > header, body.pages .page-layout.world_cup_2014 .feature-gallery article > header, body.pages .page-layout.glasgow_2014 .feature-gallery article > header { display: none; } body.pages .page-layout.olympic .feature-gallery article, body.pages .page-layout.election .feature-gallery article, body.pages .page-layout.au_election_2013 .feature-gallery article, body.pages .page-layout.sochi_2014 .feature-gallery article, body.pages .page-layout.rugby_2015 .feature-gallery article, body.pages .page-layout.world_cup_2014 .feature-gallery article, body.pages .page-layout.glasgow_2014 .feature-gallery article { padding-bottom: 46px; background-color: #323232; } body.pages .page-layout.olympic .feature-gallery figcaption, body.pages .page-layout.election .feature-gallery figcaption, body.pages .page-layout.au_election_2013 .feature-gallery figcaption, body.pages .page-layout.sochi_2014 .feature-gallery figcaption, body.pages .page-layout.rugby_2015 .feature-gallery figcaption, body.pages .page-layout.world_cup_2014 .feature-gallery figcaption, body.pages .page-layout.glasgow_2014 .feature-gallery figcaption { position: static; padding: 20px; } body .page-layout.olympic .page-header, body .page-layout.olympic .feature-gallery h3, body .page-layout.olympic .latest-multimedia, body .page-layout.olympic .latest-comments { display: none; } body .page-layout.olympic .masthead-home-link:before { display: none !important; } body.pages-show-factcheck #page-area-factcheck article header { margin-left: 0 !important; } body.pages-show-factcheck #page-area-factcheck article .content { margin-left: 0 !important; } body.search-index #search_form #search-header { padding: 0; background: none; } body.search-index #search_form #search-header .search-form { padding-bottom: 0; } body.search-index #search_form #search-header .search-form label { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 6px 0 0 8px; } body.search-index #search_form #search-header .search-form input { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 4px 8px 4px 35px; font-size: 20px; width: 100%; min-width: 100%; -webkit-appearance: none; } body.search-index #search_form #search-header .search-form input[type=submit] { position: absolute; left: -110%; } body.search-index #search_form #search-header .search-form nav { display: none; } body.search-index #search_form p.search-suggestions, body.search-index #search_form aside#search-sidebar { display: none; } body.search-index #search_form section#search-results { margin-top: 12px; } body.search-index #search_form section#search-results h1 { font-size: 20px; text-align: left; } body footer#footer { background-color: #cf2522; background-position: left bottom; padding: 5px 0; } body footer#footer a { letter-spacing: normal; font-weight: bold; margin-right: 10px; } body footer#footer p.copyright { clear: both; float: none; font-size: 12px; letter-spacing: normal; margin-bottom: 0; padding: 5px 0; text-align: center; } body footer#footer p.copyright span { display: block; } body footer#footer p.copyright span + span { margin-top: 3px; } body footer#footer p.copyright a { display: inline; } body footer#footer p.copyright .comma { display: none; } body footer#footer nav { display: none; } body #outer { padding-top: 12px; } body #outer > .wrapper { padding-bottom: 0; } body #outer .sidebar-link-list { display: none; } body.pages .page-layout.section nav#tabbed-navigation { display: table; } body h1.page-header { font-size: 20px !important; line-height: 1.3 !important; width: 100%; } body h2 { font-size: 18px; line-height: 1.3; } body.partners.partners-index .partner:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } body.partners.partners-index .partner article:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } body.institutions.institutions-index #contributors #contributor-index li { width: 14% !important; } body.info.info-contact_us #email tr th { border: 0 !important; display: block; padding-bottom: 10px !important; } body.info.info-contact_us #email tr td { border-bottom: 1px solid #d9d9d9; border-top: 0 !important; display: block; margin: 0 !important; padding-top: 0 !important; } body article aside.share { clear: both; } body article aside.share li { float: left; margin-right: 5px; } body article aside.share li .button { margin-bottom: 0; font-size: 10px; padding-right: 8px; } body .content-list img { display: none; } body.columns-show article { margin-bottom: 1em; } body.columns-show .pagination { font-size: 0.9em; margin-bottom: 1em; } body.metrics-institutions-show .datefilter, body.metrics-institutions-show .inst-2, body.metrics-institutions-show .inst-3, body.metrics-institutions-show .inst-4 { display: none; } body.metrics-institutions-show #top-authors table tr th:nth-child(3), body.metrics-institutions-show #top-authors table tr td:nth-child(3) { display: none; } body.metrics-institutions-show .metrics td.metric div h3 { font-size: 30px; line-height: 30px; } body.metrics-institutions-show .metrics .author-avatar .role { display: none; } } @media only screen and (min-width: 1466px) { html body .article-section article h2 { font-size: 20px; } html body .article-section .lead-story h2 { font-size: 30px; } html body .article-section .c-format h2 { font-size: 12px; } html body.profiles-dashboards-show .metrics-wrapper .metrics-column { width: 50%; } html body .donations-video iframe { height: 279px; } } /** [Name] Grid [Section] Carlton [Description] A 16 column grid system used throughout the site. This replaced the now original 11 (WAT) col grid that was used prior to "The Great Design Refresh" of 2012 (LOL). Uses grid classes ```.grid-one``` to ```.grid-sixteen``` and ```.grid-last``` to remove the right-margin on the last item in a row. Columns can be pushed around using ```.grid-append-one``` to ```.grid-append-fifteen``` and ```.grid-prepend-one``` to ```.grid-prepend-fifteen```. __These classes are namespaced within the `.wrapper` class__ [Example]
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
4
4
4
4
8
8
16
**/ .vivus-grid-example { margin-bottom: 20px; padding: 20px; display: block; background-color: #24281a; color: #fff; text-align: center; } body { min-width: 992px; } .wrapper { margin: 0 auto; position: relative; width: 972px; } .wrapper:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .wrapper [class^="grid-"], .wrapper [class*=" grid-"] { float: left; margin-right: 20px; } .wrapper .grid-one { width: 42px; } .wrapper .grid-two { width: 104px; } .wrapper .grid-three { width: 166px; } .wrapper .grid-four { width: 228px; } .wrapper .grid-five { width: 290px; } .wrapper .grid-six { width: 352px; } .wrapper .grid-seven { width: 414px; } .wrapper .grid-eight { width: 476px; } .wrapper .grid-nine { width: 538px; } .wrapper .grid-ten { width: 600px; } .wrapper .grid-eleven { width: 662px; } .wrapper .grid-twelve { width: 724px; } .wrapper .grid-thirteen { width: 786px; } .wrapper .grid-fourteen { width: 848px; } .wrapper .grid-fifteen { width: 910px; } .wrapper .grid-sixteen { width: 972px; } .wrapper .grid-prepend-one { margin-left: 62px; } .wrapper .grid-prepend-two { margin-left: 124px; } .wrapper .grid-prepend-three { margin-left: 186px; } .wrapper .grid-prepend-four { margin-left: 248px; } .wrapper .grid-prepend-five { margin-left: 310px; } .wrapper .grid-prepend-six { margin-left: 372px; } .wrapper .grid-prepend-seven { margin-left: 434px; } .wrapper .grid-prepend-eight { margin-left: 496px; } .wrapper .grid-prepend-nine { margin-left: 558px; } .wrapper .grid-prepend-ten { margin-left: 620px; } .wrapper .grid-prepend-eleven { margin-left: 682px; } .wrapper .grid-prepend-twelve { margin-left: 744px; } .wrapper .grid-prepend-thirteen { margin-left: 806px; } .wrapper .grid-prepend-fourteen { margin-left: 868px; } .wrapper .grid-prepend-fifteen { margin-left: 930px; } .wrapper .grid-prepend-sixteen { margin-left: 992px; } .wrapper .grid-append-one { margin-right: 62px; } .wrapper .grid-append-two { margin-right: 124px; } .wrapper .grid-append-three { margin-right: 186px; } .wrapper .grid-append-four { margin-right: 248px; } .wrapper .grid-append-five { margin-right: 310px; } .wrapper .grid-append-six { margin-right: 372px; } .wrapper .grid-append-seven { margin-right: 434px; } .wrapper .grid-append-eight { margin-right: 496px; } .wrapper .grid-append-nine { margin-right: 558px; } .wrapper .grid-append-ten { margin-right: 620px; } .wrapper .grid-append-eleven { margin-right: 682px; } .wrapper .grid-append-twelve { margin-right: 744px; } .wrapper .grid-append-thirteen { margin-right: 806px; } .wrapper .grid-append-fourteen { margin-right: 868px; } .wrapper .grid-append-fifteen { margin-right: 930px; } .wrapper .grid-append-sixteen { margin-right: 992px; } .wrapper .grid-last { margin-right: 0; } .wrapper .grid-left { float: left; } .wrapper .grid-right { float: right; } @media only screen and (max-width: 599px) { body { min-width: 100%; } .wrapper { width: 100%; } .wrapper .grid-one, .wrapper .grid-two, .wrapper .grid-three, .wrapper .grid-four, .wrapper .grid-five, .wrapper .grid-six, .wrapper .grid-seven, .wrapper .grid-eight, .wrapper .grid-nine, .wrapper .grid-ten, .wrapper .grid-eleven, .wrapper .grid-twelve, .wrapper .grid-thirteen, .wrapper .grid-fourteen, .wrapper .grid-fifteen, .wrapper .grid-sixteen { width: 100%; } .wrapper .grid-prepend-one, .wrapper .grid-prepend-two, .wrapper .grid-prepend-three, .wrapper .grid-prepend-four, .wrapper .grid-prepend-five, .wrapper .grid-prepend-six, .wrapper .grid-prepend-seven, .wrapper .grid-prepend-eight, .wrapper .grid-prepend-nine, .wrapper .grid-prepend-ten, .wrapper .grid-prepend-eleven, .wrapper .grid-prepend-twelve, .wrapper .grid-prepend-thirteen, .wrapper .grid-prepend-fourteen, .wrapper .grid-prepend-fifteen, .wrapper .grid-prepend-sixteen { margin-left: 0; } .wrapper .grid-append-one, .wrapper .grid-append-two, .wrapper .grid-append-three, .wrapper .grid-append-four, .wrapper .grid-append-five, .wrapper .grid-append-six, .wrapper .grid-append-seven, .wrapper .grid-append-eight, .wrapper .grid-append-nine, .wrapper .grid-append-ten, .wrapper .grid-append-eleven, .wrapper .grid-append-twelve, .wrapper .grid-append-thirteen, .wrapper .grid-append-fourteen, .wrapper .grid-append-fifteen, .wrapper .grid-append-sixteen { margin-right: 0; } } @media only screen and (min-width: 1466px) { body { min-width: 1376px; } .wrapper { width: 1356px; } .wrapper .grid-one { width: 66px; } .wrapper .grid-two { width: 152px; } .wrapper .grid-three { width: 238px; } .wrapper .grid-four { width: 324px; } .wrapper .grid-five { width: 410px; } .wrapper .grid-six { width: 496px; } .wrapper .grid-seven { width: 582px; } .wrapper .grid-eight { width: 668px; } .wrapper .grid-nine { width: 754px; } .wrapper .grid-ten { width: 840px; } .wrapper .grid-eleven { width: 926px; } .wrapper .grid-twelve { width: 1012px; } .wrapper .grid-thirteen { width: 1098px; } .wrapper .grid-fourteen { width: 1184px; } .wrapper .grid-fifteen { width: 1270px; } .wrapper .grid-sixteen { width: 1356px; } .wrapper .grid-prepend-one { margin-left: 86px; } .wrapper .grid-prepend-two { margin-left: 172px; } .wrapper .grid-prepend-three { margin-left: 258px; } .wrapper .grid-prepend-four { margin-left: 344px; } .wrapper .grid-prepend-five { margin-left: 430px; } .wrapper .grid-prepend-six { margin-left: 516px; } .wrapper .grid-prepend-seven { margin-left: 602px; } .wrapper .grid-prepend-eight { margin-left: 688px; } .wrapper .grid-prepend-nine { margin-left: 774px; } .wrapper .grid-prepend-ten { margin-left: 860px; } .wrapper .grid-prepend-eleven { margin-left: 946px; } .wrapper .grid-prepend-twelve { margin-left: 1032px; } .wrapper .grid-prepend-thirteen { margin-left: 1118px; } .wrapper .grid-prepend-fourteen { margin-left: 1204px; } .wrapper .grid-prepend-fifteen { margin-left: 1290px; } .wrapper .grid-prepend-sixteen { margin-left: 1376px; } .wrapper .grid-append-one { margin-right: 86px; } .wrapper .grid-append-two { margin-right: 172px; } .wrapper .grid-append-three { margin-right: 258px; } .wrapper .grid-append-four { margin-right: 344px; } .wrapper .grid-append-five { margin-right: 430px; } .wrapper .grid-append-six { margin-right: 516px; } .wrapper .grid-append-seven { margin-right: 602px; } .wrapper .grid-append-eight { margin-right: 688px; } .wrapper .grid-append-nine { margin-right: 774px; } .wrapper .grid-append-ten { margin-right: 860px; } .wrapper .grid-append-eleven { margin-right: 946px; } .wrapper .grid-append-twelve { margin-right: 1032px; } .wrapper .grid-append-thirteen { margin-right: 1118px; } .wrapper .grid-append-fourteen { margin-right: 1204px; } .wrapper .grid-append-fifteen { margin-right: 1290px; } .wrapper .grid-append-sixteen { margin-right: 1376px; } .wrapper .large-grid-one { width: 66px; } .wrapper .large-grid-two { width: 152px; } .wrapper .large-grid-three { width: 238px; } .wrapper .large-grid-four { width: 324px; } .wrapper .large-grid-five { width: 410px; } .wrapper .large-grid-six { width: 496px; } .wrapper .large-grid-seven { width: 582px; } .wrapper .large-grid-eight { width: 668px; } .wrapper .large-grid-nine { width: 754px; } .wrapper .large-grid-ten { width: 840px; } .wrapper .large-grid-eleven { width: 926px; } .wrapper .large-grid-twelve { width: 1012px; } .wrapper .large-grid-thirteen { width: 1098px; } .wrapper .large-grid-fourteen { width: 1184px; } .wrapper .large-grid-fifteen { width: 1270px; } .wrapper .large-grid-sixteen { width: 1356px; } .wrapper .large-grid-prepend-one { margin-left: 86px; } .wrapper .large-grid-prepend-two { margin-left: 172px; } .wrapper .large-grid-prepend-three { margin-left: 258px; } .wrapper .large-grid-prepend-four { margin-left: 344px; } .wrapper .large-grid-prepend-five { margin-left: 430px; } .wrapper .large-grid-prepend-six { margin-left: 516px; } .wrapper .large-grid-prepend-seven { margin-left: 602px; } .wrapper .large-grid-prepend-eight { margin-left: 688px; } .wrapper .large-grid-prepend-nine { margin-left: 774px; } .wrapper .large-grid-prepend-ten { margin-left: 860px; } .wrapper .large-grid-prepend-eleven { margin-left: 946px; } .wrapper .large-grid-prepend-twelve { margin-left: 1032px; } .wrapper .large-grid-prepend-thirteen { margin-left: 1118px; } .wrapper .large-grid-prepend-fourteen { margin-left: 1204px; } .wrapper .large-grid-prepend-fifteen { margin-left: 1290px; } .wrapper .large-grid-prepend-sixteen { margin-left: 1376px; } .wrapper .large-grid-append-one { margin-right: 86px; } .wrapper .large-grid-append-two { margin-right: 172px; } .wrapper .large-grid-append-three { margin-right: 258px; } .wrapper .large-grid-append-four { margin-right: 344px; } .wrapper .large-grid-append-five { margin-right: 430px; } .wrapper .large-grid-append-six { margin-right: 516px; } .wrapper .large-grid-append-seven { margin-right: 602px; } .wrapper .large-grid-append-eight { margin-right: 688px; } .wrapper .large-grid-append-nine { margin-right: 774px; } .wrapper .large-grid-append-ten { margin-right: 860px; } .wrapper .large-grid-append-eleven { margin-right: 946px; } .wrapper .large-grid-append-twelve { margin-right: 1032px; } .wrapper .large-grid-append-thirteen { margin-right: 1118px; } .wrapper .large-grid-append-fourteen { margin-right: 1204px; } .wrapper .large-grid-append-fifteen { margin-right: 1290px; } .wrapper .large-grid-append-sixteen { margin-right: 1376px; } } #dev-menu { cursor: pointer; left: -100px; position: absolute; z-index: 1000; } #dev-menu .icon-menu { -webkit-box-sizing: content-box; box-sizing: content-box; display: block; font-size: 20px; height: 31px; line-height: 1; padding-top: 15px; text-align: center; top: 0; width: 46px; } #dev-menu a { background-color: #999; color: #fff; display: none; font-size: 12px; line-height: 1; padding: 8px 32px 8px 15px; position: relative; z-index: 1000; } #dev-menu a:hover { background-color: #eaeaea; color: #333; } #dev-menu a:hover:last-child { border-bottom: 1px solid #eaeaea; } #dev-menu:hover .icon-menu { background-color: #999; color: #fff; } #dev-menu:hover a { display: block; position: relative; z-index: 1000; } #dev-menu:hover a:last-child { border-bottom: 1px solid #999; } #header { background: #f6f6f6; border-bottom: 5px solid #eaeaea; border-top: 1px solid #eaeaea; padding-top: 24px; } #header.condensed { border-bottom: 1px solid #eaeaea; padding-top: 17px; } #header.condensed #masthead { margin-bottom: 18px; } #header.condensed .masthead-home-link { top: 3px; float: left; display: block; width: 260px; } #header.condensed .masthead-home-link img { width: 100%; } #header.condensed .masthead-tagline { display: none; } @media only screen and (max-width: 599px) { #header { border: none; padding: 0; } #header .wrapper { position: static; } } #masthead { position: relative; margin: 0 0 24px 0; } #masthead .masthead-home-link { font: 0 / 0 serif; text-shadow: none; color: transparent; position: relative; float: left; margin-bottom: 0; display: block; width: 350px; height: 29px; } #masthead .masthead-home-link img { display: block; } html.no-svg #masthead .masthead-home-link { background: url(/assets/logo-no-svg-4e57e9846b7abc0125394194bb3cc287.png) left top no-repeat; height: 22px; width: 262px; } html.no-svg #masthead .masthead-home-link img { display: none; } #masthead .masthead-tagline { padding-top: 4px; clear: left; float: left; width: 300px; height: 18px; color: #999; font-weight: normal; text-shadow: none; font-size: 12px; } #masthead .masthead-search { float: right; margin-top: -3px; margin-left: 20px; } #masthead .masthead-search input { -webkit-border-radius: 2px; border-radius: 2px; padding: 7px 6px 6px 26px; min-width: 280px; border: 1px solid #aaa; position: relative; background-color: #fff; display: block; font-size: 12px; line-height: 16px; } #masthead .masthead-search input:focus { outline: none; border-color: #555; } #masthead .masthead-search label { position: absolute; color: #999; padding: 8px 0 0 12px; z-index: 3; } #masthead .masthead-search label i:before { color: #999; font-size: 14px; left: -4px; position: relative; top: 0; } #masthead .masthead-search legend, #masthead .masthead-search .button { display: none; } @media only screen and (max-width: 599px) { #masthead { display: none; } } /** [Name] Top bar [Section] Carlton [Description] The Top Bar **naturally** sits atop the entire site. **/ #topbar { background: #fff; height: 46px; line-height: 18px; position: relative; z-index: 25; } .topbar-module { float: left; } .topbar-button-list { list-style: none; } .topbar-button-list li { float: left; margin-right: 8px; } .topbar-button-list li:first-child { margin-left: 8px; } .topbar-button-list a { -webkit-border-radius: 16px; border-radius: 16px; display: block; height: 32px; margin: 7px 0; text-align: center; width: 32px; line-height: 32px; } .topbar-button-list i { margin: 0 auto; font-size: 16px; line-height: 16px; vertical-align: baseline; top: 2px; } .topbar-button-list i:before { color: #fff; } .topbar-stay-informed { float: right; } .topbar-stay-informed .topbar-button-text { display: none; color: #fff; padding: 0 6px 0 0; } .topbar-stay-informed .topbar-button.with-label a { padding: 0 6px 0 6px; width: auto; } .topbar-stay-informed .topbar-button i:before { color: #fff; } .topbar-stay-informed .newsletter a { background: #d8352a; } .topbar-stay-informed .newsletter a:hover { background: #af2920; } .topbar-stay-informed .facebook a { background: #3a5a93; } .topbar-stay-informed .facebook a:hover { background: #4971b7; } .topbar-stay-informed .twitter a { background: #00b0e9; } .topbar-stay-informed .twitter a:hover { background: #1dc8ff; } .topbar-stay-informed .rss a { background: #eb7f3e; } .topbar-stay-informed .rss a:hover { background: #f09e6c; } .topbar-stay-informed .linkedin a { background: #0181b2; } .topbar-stay-informed .linkedin a:hover { background: #01a6e5; } .topbar-stay-informed .googleplus a { background: #de4931; } .topbar-stay-informed .googleplus a:hover { background: #e5705d; } .ie7 .topbar-stay-informed .topbar-button a { background: transparent; } .topbar-item-list { list-style: none; } .topbar-item-list li { border-left: 1px solid #eaeaea; float: left; } .topbar-item-list li:first-child { border-left: 0; padding-left: 0; } .topbar-item-list li a { -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; color: #555; display: block; height: 18px; padding: 15px 10px 13px; } .topbar-item-list li a:focus, .topbar-item-list li a:hover, .topbar-item-list li a:active { color: #111; background: #f6f6f6; } .topbar-dropdown a { -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; color: #555; display: block; height: 18px; padding: 15px 15px 13px; position: relative; white-space: nowrap; z-index: 200; } .topbar-dropdown a:focus, .topbar-dropdown a:hover, .topbar-dropdown a:active { color: #111; background: #f6f6f6; } .topbar-dropdown .menu-button-close, .topbar-dropdown .menu-button-open { display: none; background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") repeat top left; bottom: 0; left: 0; position: absolute; right: 0; top: 0; text-indent: -10000px; } .topbar-dropdown .menu-button-close:hover, .topbar-dropdown .menu-button-close:focus, .topbar-dropdown .menu-button-open:hover, .topbar-dropdown .menu-button-open:focus { background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") repeat top left; } .topbar-dropdown .menu-button-contents { display: block; height: 18px; padding: 15px 6px 13px 15px; position: relative; } .topbar-dropdown .menu-button-text { float: left; max-width: 150px; overflow: hidden; position: relative; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; } .topbar-dropdown .drop-down-caret { display: none; font-size: 1em; opacity: 0.6; top: -2px; } .js .topbar-dropdown .drop-down-caret { display: inline; } .topbar-dropdown.open .menu { display: block; z-index: 8; } .topbar-dropdown.open .menu-button-contents { position: relative; border-bottom: 1px solid #fff; margin-bottom: -1px; z-index: 10; } .topbar-dropdown .menu { background: #fff; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; border: 1px solid #eaeaea; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; box-sizing: border-box; display: none; left: 0; margin-right: -1px; min-width: 100%; position: absolute; top: 46px; } .topbar-mobile-home-link { display: none; height: 46px; left: 50%; margin-left: -25%; position: absolute; top: 0; width: 50%; z-index: 100; } .topbar-mobile-home-link img { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: relative; top: 50%; width: 100%; } .topbar-home-link { text-align: center; } .topbar-dashboard-link { float: right; } .topbar-dashboard-link a { border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea; } .topbar-label { padding: 15px 0 13px 10px; } .topbar-edition-selector { border-right: 1px solid #eaeaea; height: 46px; position: relative; } .topbar-edition-selector .current-region { color: #d8352a; } .topbar-account-nav { float: right; border-right: 1px solid #eaeaea; position: relative; } .editing-page .topbar-account-nav { border-right: 0; } .topbar-account-nav img { -webkit-border-radius: 32px; border-radius: 32px; display: inline; height: 36px; margin-top: -10px; width: 36px; } .topbar-account-nav .dashboard { display: none; } .topbar-account-nav .activity-count { background: #d8352a; -webkit-border-radius: 10px; border-radius: 10px; color: #fff; height: 14px; line-height: 14px; padding: 2px 6px; position: absolute; right: -11px; top: 3px; z-index: 12; } @media only screen and (min-width: 1466px) { .topbar-stay-informed .topbar-button-text { display: inline; } } @media only screen and (max-width: 599px) { .topbar-home-link, .topbar-edition-selector-title, .topbar-edition-selector, .topbar-promotional-links, .topbar-dashboard-link, .topbar-stay-informed { display: none; } #topbar { border-bottom: 1px solid #eee; font-size: 12px; } #topbar .wrapper { padding-left: 10px; padding-right: 10px; } #topbar .topbar-mobile-home-link { display: block; } #topbar .author-signup, #topbar .reader-signup { display: none; } .topbar-account-nav { border-right: 0; display: block; margin-right: -10px; } .topbar-account-nav .activity-count { right: 33px; } .topbar-account-nav.open .menu-button-contents { border-left: 1px solid #eee; } .topbar-account-nav .menu-button-contents { padding-left: 6px; } .topbar-account-nav .menu-button-name { display: none; } .topbar-account-nav .menu { border-right: 0; left: initial; right: 1px; width: 130px; } .topbar-account-nav .dashboard { display: block; } .topbar-account-nav .menu-button { padding-left: 0; } } @-webkit-keyframes pulse { 40% { -webkit-transform: scale(1); transform: scale(1); } 47% { -webkit-transform: scale(1.03); transform: scale(1.03); } 55% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 40% { -webkit-transform: scale(1); transform: scale(1); } 47% { -webkit-transform: scale(1.03); transform: scale(1.03); } 55% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /** [Name] Information Panel [Section] Alerts [Description] We have information panels and flash notices that get displayed to the user. Useed to inform them of successful / failed actions. - ```.prominent``` - A prominent information box - ```.warning``` - Something dangerous might happen! - ```.error``` - Something has gone wrong - ```.success``` - Something has gone right! [Example]

Check it out, y'all. Prominent. Everyone who was invited is here.

Check it out, y'all. Prominent. Everyone who was invited is here.

Check it out, y'all. Prominent. Everyone who was invited is here.

Check it out, y'all. Prominent. Everyone who was invited is here.

**/ .information { -webkit-border-radius: 2px; border-radius: 2px; color: #7f7f7f; padding: 12px 12px 12px 42px; background: #f1f1f1 url(/assets/icons/alert-instructions-10bbf40b2f616f5b58d86059b6bd6460.png) no-repeat 15px 13px; } .information a { font-weight: bold; color: inherit; } .information p { margin-bottom: 0; } .information p + p { margin-top: 1em; } .information .button { margin: -3px 6px; } .information.prominent { -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); border: 1px solid #ccc; background-color: #f6f6f6; } .information.success { color: #344b15; background-color: #bede9d; background-image: url(/assets/icons/alert-success-f243e8383813a3c75dfb21c215ced664.png); } .information.error { color: #fff; background-color: #ec6c5d; background-image: url(/assets/icons/alert-error-de3e4c7ddcee4d90fc268cea5afe35e8.png); } .information.warning { color: #fff; background-color: #e4b243; background-image: url(/assets/icons/alert-information-3258465c4e9666dff843c2fbb1ea4247.png); } .formtastic .information { padding: 12px 12px 12px 42px; } /** [Name] Flash notices [Section] Alerts [Description] - ```p.notice``` - A state for displaying informational and success messages - ```p.warning``` - A state for displaying non-critical problems or notifications - ```p.alert``` - A state for displaying error or validation flashes [Example]

Check it out, y'all. Everyone who was invited is here.

Check it out, y'all. Everyone who was invited is here.

Check it out, y'all. Everyone who was invited is here.

**/ p.flash { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#dbdbdb)); background-image: -webkit-linear-gradient(#eee, #dbdbdb); background-image: -o-linear-gradient(#eee, #dbdbdb); background-image: linear-gradient(#eee, #dbdbdb); filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); position: fixed; width: 440px; left: 50%; margin-left: -240px; top: 0; z-index: 30000; padding: 10px 20px; text-align: center; background-color: #dbdbdb; border: 1px solid #aaa; border-top: none; font-weight: bold; font-size: 12px; } @media only screen and (max-width: 599px) { p.flash { font-size: 11px; margin-left: -37%; padding: 10px 2%; width: 70%; } } p.flash.hidden { top: -200px; -webkit-transition: top 0.5s; -o-transition: top 0.5s; transition: top 0.5s; } p.flash.show { top: 0; -webkit-transition: top 0.5s; -o-transition: top 0.5s; transition: top 0.5s; } p.flash.notice { background-image: -webkit-gradient(linear, left top, left bottom, from(#dcefc0), to(#bede9d)); background-image: -webkit-linear-gradient(#dcefc0, #bede9d); background-image: -o-linear-gradient(#dcefc0, #bede9d); background-image: linear-gradient(#dcefc0, #bede9d); background-color: #bede9d; border-color: #7ca425; color: #344b15; } p.flash.warning { background-image: -webkit-gradient(linear, left top, left bottom, from(#f99721), to(#df871d)); background-image: -webkit-linear-gradient(#f99721, #df871d); background-image: -o-linear-gradient(#f99721, #df871d); background-image: linear-gradient(#f99721, #df871d); background-color: #df871d; border-color: #b36c17; color: #fff; } p.flash.alert { background-image: -webkit-gradient(linear, left top, left bottom, from(#ef6252), to(#e7402d)); background-image: -webkit-linear-gradient(#ef6252, #e7402d); background-image: -o-linear-gradient(#ef6252, #e7402d); background-image: linear-gradient(#ef6252, #e7402d); background-color: #e7402d; border-color: #b83223; color: #fff; } /** [Name] Audio player [Section] Media [Description] Audio player UI that wraps around an HTML5 audio element. **/ .audio-player { background: #f6f6f6; border: 1px solid #ccc; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08); position: relative; font-family: "Helvetica Neue", Helvetica, sans-serif; -webkit-tap-highlight-color: transparent; } .audio-player .audio-player-inner { height: 110px; position: relative; } .audio-player .audio-player-image { height: 110px; left: 0; position: absolute; top: 0; width: 110px; } .audio-player .audio-player-image img { -webkit-border-bottom-left-radius: 2px !important; border-bottom-left-radius: 2px !important; -webkit-border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important; -webkit-border-top-left-radius: 2px !important; border-top-left-radius: 2px !important; -webkit-border-top-right-radius: 0 !important; border-top-right-radius: 0 !important; height: 110px; width: 110px; } .audio-player .audio-player-middle { height: 110px; left: 120px; position: absolute; right: 125px; top: 0; } .audio-player .audio-player-controls { left: 0; position: absolute; top: 0; width: 100%; } .audio-player .audio-player-play { background-image: url(/assets/audio-player/play-4707a404e8727cec88ae2a528c25de5f.svg), url(/assets/audio-player/pause-206e3a2c28cf8166614b0c2d5e61b6f2.svg); background-position: 0 0, 0 -50px; background-repeat: no-repeat, no-repeat; background-size: 100%; cursor: pointer; height: 50px; left: 0; position: absolute; top: 54px; -webkit-transition: 0.07s opacity linear; -o-transition: 0.07s opacity linear; transition: 0.07s opacity linear; width: 50px; } .audio-player .audio-player-play:hover { opacity: 0.8; } .audio-player .audio-player-play.playing { background-position: 0 50px, 0 0; } .audio-player .audio-player-current-time { font-size: 13px; font-weight: bold; left: 0; position: absolute; text-shadow: 1px 1px 0 #fff; top: -20px; } .audio-player .audio-player-total-time { font-size: 13px; font-weight: bold; right: 0; position: absolute; text-shadow: 1px 1px 0 #fff; top: -20px; } .audio-player .audio-player-bar-wrapper { left: 60px; position: absolute; right: 0; top: 72px; } .audio-player .super-slider-view { background-color: #dadada; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.05) inset; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.05) inset; cursor: pointer; height: 14px; position: relative; } .audio-player .super-slider-view-track { height: 14px; position: relative; } .audio-player .super-slider-view-slider-inner { background: #d8352a; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08); cursor: pointer; height: 14px; left: 0; position: absolute; top: 0; width: 28px; } .audio-player .audio-player-license { bottom: -17px; font-size: 10px; font-weight: normal; line-height: 1; position: absolute; right: 0; } .audio-player .audio-player-license.audio-player-unsupported-license { bottom: 10px; } .audio-player .audio-player-license span { color: #727272; opacity: 0.5; text-shadow: 0 1px 0 #fff; } .audio-player .audio-player-license a { color: #727272; opacity: 0.5; text-shadow: 0 1px 0 #fff; } .audio-player .audio-player-license a:hover { opacity: 0.7; } .audio-player .audio-player-download { background: #d8d8d8; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; height: 110px; position: absolute; right: 0; top: 0; width: 110px; } .audio-player .audio-player-download:hover { background: #e5e5e5; } .audio-player .audio-player-download a { white-space: normal; display: block; height: 100%; width: 100%; } .audio-player .audio-player-download .audio-player-heading { text-align: center; } .audio-player .audio-player-download-icon { background: url(/assets/audio-player/download-5dbc5552027da95e15bdb10bdea610c5.svg) center no-repeat; background-size: 40%; height: 50px; left: 0; opacity: 0.3; position: absolute; top: 30px; width: 100%; } .audio-player .audio-player-download-info { bottom: 7px; color: #383838; font-size: 10px; font-weight: normal; left: 0; line-height: 1; position: absolute; text-align: center; width: 100%; } .audio-player .audio-player-listen { position: absolute; left: 3px; right: 0; top: 0; } .audio-player .audio-player-title { color: #727272; font-size: 14px; opacity: 0.5; overflow: hidden; position: absolute; -o-text-overflow: ellipsis; text-overflow: ellipsis; text-shadow: 0 1px 0 #fff; top: 27px; white-space: nowrap; width: 100%; } .audio-player .unsupported { position: absolute; font-size: 12px; top: 62px; } .audio-player .audio-player-heading { color: #383838; font-size: 14px; font-weight: bold; left: 0; position: absolute; top: 6px; width: 100%; } .audio-player.no-audio { margin-bottom: 0; } body.refresh-article #article .audio-player.no-audio { margin-bottom: 0 !important; } .audio-player.no-image .audio-player-middle { left: 10px; } .placed .audio-player { margin-top: 6px; } .placed .audio-player + audio + .content { margin-top: 10px; } .placed .audio-player .audio-player-inner { height: 70px; } .placed .audio-player .audio-player-middle { height: 70px; left: 10px; right: 10px; } .placed .audio-player .audio-player-image { display: none; } .placed .audio-player .audio-player-play { top: 10px; } .placed .audio-player .audio-player-bar-wrapper { top: 28px; } .placed .audio-player .audio-player-listen { display: none; } .placed .audio-player .audio-player-download { display: none; } .pages-edit .placed .audio-player { opacity: 0.4; pointer-events: none; } .placed.ui-draggable-dragging .audio-player { display: none; } .blockset article .audio-player { display: none; } .lead-audio .audio-player { margin: 0; } .pages-show-arts .main-column .b-format .audio-player { margin-left: 165px; margin-top: 6px; } #editors-picks .audio-player { display: none; } .content-list article .audio-player { display: none; } .content-list .placed .audio-player + audio + .content { margin-top: 0; } body.topics-show article .audio-player { display: block; margin-bottom: 6px; margin-left: 165px; } body.topics-show article:first-child .audio-player { margin-left: 0; } body.refresh-article .audio-player { margin-bottom: 18px; } body.podcasts .podcast .audio-player { margin-bottom: 12px; } body.presenting-profile #articles article .audio-player { display: none; } @media only screen and (max-width: 599px) { .audio-player .audio-player-middle { left: 117px; right: 7px; } .audio-player .audio-player-listen { right: 5px; } .audio-player .audio-player-download { -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; height: 22px; width: 35px; } .audio-player .audio-player-download .audio-player-heading { display: none; } .audio-player .audio-player-download-info { display: none; } .audio-player .audio-player-download-icon { background-size: 45%; height: 17px; top: 2px; } .audio-player .pages-show-arts .main-column .b-format { margin-left: 0; } body.topics-show article .audio-player { margin-left: 0; } } /** [Name] Audio player fallback caption [Section] Media [Description] Caption with caption and download link that is displayed underneath the native audio tag. Is automatically removed when the JS audio player initialises, but for browsers that don't support HTML5 audio it provides the title, license and download link. **/ .audio-player-caption { color: #666; display: none; font-size: 11px; line-height: 18px; padding-top: 6px; } .audio-player-caption .attribution { color: #ccc; } .audio-player-caption .attribution a { color: #ccc; } .audio-player-caption .attribution a:hover, .audio-player-caption .attribution a:focus { color: #069; } .audio-player-caption .download { float: right; } .audio-player-caption .download a { color: #069; } .audio-player-caption .download a:hover, .audio-player-caption .download a:focus { color: #2d8cd6; } body.refresh-article #article .body .audio-player-caption { margin-bottom: 18px; } body.refresh-article #article .body .audio-player-caption a { font-weight: normal !important; } .placed .audio-player-caption { display: none; } .blockset article .audio-player-caption { display: none; } .pages-show-arts .main-column .b-format .audio-player-caption { margin-left: 165px; margin-top: 6px; } #editors-picks .audio-player-caption { display: none; } @media only screen and (max-width: 599px) { .audio-player-caption .pages-show-arts .main-column .b-format { margin-left: 0; } } /** [Name] Podcast Preview [Section] Media [Description] A small block that displays the podcast the audio article belongs to. It's purpose is to provide an easy way for a listener to find more podcasts after listening to one. [Example]

Listen to more in Speaking with...

Width500 image 1414709443

Speaking with... The Conversation's 'Speaking with' podcast 8 episodes

**/ .podcast-preview { margin: 36px 0; } .podcast-preview a { background: #f6f6f6; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08); display: block; margin-bottom: 20px; padding-right: 39px; position: relative; white-space: normal !important; word-wrap: normal !important; } .podcast-preview a:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .podcast-preview .podcast-preview-image { float: left; height: 100px; margin-right: 13px; width: 100px; } .podcast-preview img { -webkit-border-radius: 2px 0 0 2px !important; border-radius: 2px 0 0 2px !important; display: block; width: 100%; } .podcast-preview p { margin: 0; } .podcast-preview .podcast-preview-title { color: #383838; display: block; font-size: 14px; font-weight: bold; padding-top: 13px; } .podcast-preview .podcast-preview-subtitle { color: #727272; display: block; font-size: 14px; font-weight: normal; opacity: 0.5; overflow: hidden; margin-bottom: 13px; -o-text-overflow: ellipsis; text-overflow: ellipsis; text-shadow: 0 1px 0 #fff; white-space: nowrap; } .podcast-preview .podcast-preview-count { color: #727272; display: block; font-size: 12px; font-weight: normal; opacity: 0.5; text-shadow: 0 1px 0 #fff; } /** [Name] Beta Analytics Banner [Section] Metrics Institution Dashboard [Description] A banner is required whilst Analytics is in beta to encourage users from institutions in the beta to use the new Analytics dashboard. **/ .beta-analytics-banner { background: url(/assets/beta-analytics/background-25a65e46eb8fc02361f0ada306ac6c97.png) center center repeat; color: #ccc; font-size: 14px; padding: 20px 0; } .beta-analytics-banner p { margin: 0; text-align: center; } .beta-analytics-banner p .button { margin: 0; -webkit-box-shadow: none; box-shadow: none; } @media only screen and (max-width: 599px) { .beta-analytics-banner { font-size: 12px; } } @-webkit-keyframes loading-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /** [Name] Default buttons [Section] Buttons [Description] We have four types of button styles, influenced by Bootstrap's options. The button styles reflect the outcome of what happens by pushing/clicking it. ## Examples The default button is what was once historically called `.subtle`. Suitable for use on , Hello **/ } .button:visited { background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0)); background-image: -webkit-linear-gradient(#fff, #f0f0f0); background-image: -o-linear-gradient(#fff, #f0f0f0); background-image: linear-gradient(#fff, #f0f0f0); background-color: #f8f8f8; border: 1px solid #cacaca; -webkit-box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #646464; } .button:hover, .button:visited:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#e3e3e3)); background-image: -webkit-linear-gradient(white, #e3e3e3); background-image: -o-linear-gradient(white, #e3e3e3); background-image: linear-gradient(white, #e3e3e3); background-color: white; -webkit-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #fff; color: #646464; } .button:active { background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(white)); background-image: -webkit-linear-gradient(#f0f0f0, white); background-image: -o-linear-gradient(#f0f0f0, white); background-image: linear-gradient(#f0f0f0, white); background-color: #e3e3e3; -webkit-box-shadow: inset 0 1px 0 0 #ebebeb, 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #ebebeb, 0 1px 0 0 #fff; color: #646464; } .button.loading:before { border: 2px solid #646464; border-top: 2px solid #d7d7d7; } .button.primary { background-image: -webkit-gradient(linear, left top, left bottom, from(#5fa9e2), to(#4989d3)); background-image: -webkit-linear-gradient(#5fa9e2, #4989d3); background-image: -o-linear-gradient(#5fa9e2, #4989d3); background-image: linear-gradient(#5fa9e2, #4989d3); background-color: #5499db; border: 1px solid #2863a7; -webkit-box-shadow: inset 0 1px 0 0 #5fa9e2, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 #5fa9e2, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #fff; margin-bottom: 0; margin-top: 0; } .button.primary:visited { background-image: -webkit-gradient(linear, left top, left bottom, from(#5fa9e2), to(#4989d3)); background-image: -webkit-linear-gradient(#5fa9e2, #4989d3); background-image: -o-linear-gradient(#5fa9e2, #4989d3); background-image: linear-gradient(#5fa9e2, #4989d3); background-color: #5499db; border: 1px solid #2863a7; -webkit-box-shadow: inset 0 1px 0 0 #5fa9e2, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 #5fa9e2, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #fff; } .button.primary:hover, .button.primary:visited:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#75b5e6), to(#347cce)); background-image: -webkit-linear-gradient(#75b5e6, #347cce); background-image: -o-linear-gradient(#75b5e6, #347cce); background-image: linear-gradient(#75b5e6, #347cce); background-color: #68aee4; -webkit-box-shadow: inset 0 1px 0 0 #68aee4, 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #68aee4, 0 1px 0 0 #fff; color: #fff; } .button.primary:active { background-image: -webkit-gradient(linear, left top, left bottom, from(#4989d3), to(#72a4dd)); background-image: -webkit-linear-gradient(#4989d3, #72a4dd); background-image: -o-linear-gradient(#4989d3, #72a4dd); background-image: linear-gradient(#4989d3, #72a4dd); background-color: #347cce; -webkit-box-shadow: inset 0 1px 0 0 #4184d1, 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #4184d1, 0 1px 0 0 #fff; color: #fff; } .button.primary.loading:before { border: 2px solid #fff; border-top: 2px solid #2d6fbc; } .button.success { background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44)); background-image: -webkit-linear-gradient(#5cb85c, #449d44); background-image: -o-linear-gradient(#5cb85c, #449d44); background-image: linear-gradient(#5cb85c, #449d44); background-color: #50ab50; border: 1px solid #2d682d; -webkit-box-shadow: inset 0 1px 0 0 #5cb85c, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 #5cb85c, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #fff; margin-bottom: 0; margin-top: 0; } .button.success:visited { background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44)); background-image: -webkit-linear-gradient(#5cb85c, #449d44); background-image: -o-linear-gradient(#5cb85c, #449d44); background-image: linear-gradient(#5cb85c, #449d44); background-color: #50ab50; border: 1px solid #2d682d; -webkit-box-shadow: inset 0 1px 0 0 #5cb85c, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 #5cb85c, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #fff; } .button.success:hover, .button.success:visited:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec06e), to(#3c8b3c)); background-image: -webkit-linear-gradient(#6ec06e, #3c8b3c); background-image: -o-linear-gradient(#6ec06e, #3c8b3c); background-image: linear-gradient(#6ec06e, #3c8b3c); background-color: #63bb63; -webkit-box-shadow: inset 0 1px 0 0 #63bb63, 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #63bb63, 0 1px 0 0 #fff; color: #fff; } .button.success:active { background-image: -webkit-gradient(linear, left top, left bottom, from(#449d44), to(#5cb85c)); background-image: -webkit-linear-gradient(#449d44, #5cb85c); background-image: -o-linear-gradient(#449d44, #5cb85c); background-image: linear-gradient(#449d44, #5cb85c); background-color: #3c8b3c; -webkit-box-shadow: inset 0 1px 0 0 #419641, 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #419641, 0 1px 0 0 #fff; color: #fff; } .button.success.loading:before { border: 2px solid #fff; border-top: 2px solid #357935; } .button.danger { background-image: -webkit-gradient(linear, left top, left bottom, from(#f43737), to(#c62626)); background-image: -webkit-linear-gradient(#f43737, #c62626); background-image: -o-linear-gradient(#f43737, #c62626); background-image: linear-gradient(#f43737, #c62626); background-color: #dd2f2f; border: 1px solid #861a1a; -webkit-box-shadow: inset 0 1px 0 0 #f43737, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 #f43737, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #fff; margin-bottom: 0; margin-top: 0; } .button.danger:visited { background-image: -webkit-gradient(linear, left top, left bottom, from(#f43737), to(#c62626)); background-image: -webkit-linear-gradient(#f43737, #c62626); background-image: -o-linear-gradient(#f43737, #c62626); background-image: linear-gradient(#f43737, #c62626); background-color: #dd2f2f; border: 1px solid #861a1a; -webkit-box-shadow: inset 0 1px 0 0 #f43737, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 #f43737, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #fff; } .button.danger:hover, .button.danger:visited:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#f54f4f), to(#b12222)); background-image: -webkit-linear-gradient(#f54f4f, #b12222); background-image: -o-linear-gradient(#f54f4f, #b12222); background-image: linear-gradient(#f54f4f, #b12222); background-color: #f54141; -webkit-box-shadow: inset 0 1px 0 0 #f54141, 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #f54141, 0 1px 0 0 #fff; color: #fff; } .button.danger:active { background-image: -webkit-gradient(linear, left top, left bottom, from(#c62626), to(#db4444)); background-image: -webkit-linear-gradient(#c62626, #db4444); background-image: -o-linear-gradient(#c62626, #db4444); background-image: linear-gradient(#c62626, #db4444); background-color: #b12222; -webkit-box-shadow: inset 0 1px 0 0 #bd2424, 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 #bd2424, 0 1px 0 0 #fff; color: #fff; } .button.danger.loading:before { border: 2px solid #fff; border-top: 2px solid #9b1e1e; } .button.link { background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: -webkit-linear-gradient(transparent, transparent); background-image: -o-linear-gradient(transparent, transparent); background-image: linear-gradient(transparent, transparent); background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); -webkit-box-shadow: inset 0 1px 0 0 transparent, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 transparent, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #646464; margin-bottom: 0; margin-top: 0; -webkit-box-shadow: none; box-shadow: none; } .button.link:visited { background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: -webkit-linear-gradient(transparent, transparent); background-image: -o-linear-gradient(transparent, transparent); background-image: linear-gradient(transparent, transparent); background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); -webkit-box-shadow: inset 0 1px 0 0 transparent, 0 1px 0 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 0 transparent, 0 1px 0 0 rgba(255, 255, 255, 0.75); color: #646464; } .button.link:hover, .button.link:visited:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(13, 13, 13, 0)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(rgba(13, 13, 13, 0), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(rgba(13, 13, 13, 0), rgba(0, 0, 0, 0)); background-image: linear-gradient(rgba(13, 13, 13, 0), rgba(0, 0, 0, 0)); background-color: rgba(5, 5, 5, 0); -webkit-box-shadow: inset 0 1px 0 0 rgba(5, 5, 5, 0), 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 rgba(5, 5, 5, 0), 0 1px 0 0 #fff; color: #646464; } .button.link:active { background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(26, 26, 26, 0))); background-image: -webkit-linear-gradient(transparent, rgba(26, 26, 26, 0)); background-image: -o-linear-gradient(transparent, rgba(26, 26, 26, 0)); background-image: linear-gradient(transparent, rgba(26, 26, 26, 0)); background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0), 0 1px 0 0 #fff; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0), 0 1px 0 0 #fff; color: #646464; } .button.link.loading:before { border: 2px solid #646464; border-top: 2px solid rgba(0, 0, 0, 0); } .button.link:visited, .button.link:hover, .button.link:visited:hover, .button.link:active { -webkit-box-shadow: none; box-shadow: none; } .button.small { -webkit-border-radius: 2px; border-radius: 2px; padding: 0 7px; font-size: 11px; } .button.large { -webkit-border-radius: 3px; border-radius: 3px; font-size: 14px; padding: 8px 18px; } .button.x-large { -webkit-border-radius: 4px; border-radius: 4px; font-size: 18px; padding: 14px 30px; } .button.loading { position: relative; padding-left: 28px; } .button.loading:before { content: ""; -webkit-animation: loading-spin 0.75s linear infinite; animation: loading-spin 0.75s linear infinite; -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; height: 10px; margin-left: -20px; margin-right: 8px; vertical-align: text-top; width: 10px; } .button[disabled] { opacity: 0.6; cursor: default; pointer-events: none; } .button[disabled].hint { pointer-events: auto; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** [Name] Primary and Secondary actions in a button row [Section] Buttons [Description] An style to wrap up the presentation of primary and secondary actions in a UI. Used regularly in lightboxes. [Example] **/ .button-row:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .button-row .primary { float: right; margin-left: 20px; } .button-row .secondary { float: left; margin-left: 0; margin-right: 10px; } /** [Name] Indicators [Section] Buttons [Description] Used to display state by way of an 'indicator' light. Shows a coloured LED style indicator to the left of the element. Suitable for use on , **/ .datefilter { position: relative; } .datefilter .datefilter-control { display: none; width: 460px; -webkit-border-radius: 4px 4px 4px 0; border-radius: 4px 4px 4px 0; border: 1px solid #ccc; background-color: #fff; position: absolute; right: 0; top: 40px; z-index: 10000; -webkit-box-shadow: 0 2px 3px #ccc; box-shadow: 0 2px 3px #ccc; } .datefilter .datefilter-control:after { content: ""; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent #eeeeee transparent; top: -20px; right: 8px; } .datefilter .datefilter-control .date-filters { border-bottom: 1px solid #ccc; } .datefilter .datefilter-control .date-filters li { float: left; width: 91px; border-left: 1px solid #ccc; } .datefilter .datefilter-control .date-filters li:first-child { border-left: none; width: 92px; } .datefilter .datefilter-control .date-filters li a { -webkit-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; display: block; padding: 18px 0; font-weight: bold; font-size: 11px; text-align: center; color: #333333; background-color: #fff; } .datefilter .datefilter-control .date-filters li a:hover, .datefilter .datefilter-control .date-filters li a.selected { background-color: #eee; } .datefilter .current-date-time { background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eaeaea)); background-image: -webkit-linear-gradient(#fafafa, #eaeaea); background-image: -o-linear-gradient(#fafafa, #eaeaea); background-image: linear-gradient(#fafafa, #eaeaea); color: #333333; font-weight: bold; font-size: 13px; -webkit-border-radius: 4px; border-radius: 4px; display: block; height: 14px; margin-top: -2px; padding: 7px 0 11px 9px; border: 1px solid #ccc; width: 202px; background-color: #fafafa; } .datefilter .current-date-time:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#efefef)); background-image: -webkit-linear-gradient(#ffffff, #efefef); background-image: -o-linear-gradient(#ffffff, #efefef); background-image: linear-gradient(#ffffff, #efefef); } .datefilter .current-date-time:active { background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#fcfcfc)); background-image: -webkit-linear-gradient(#eaeaea, #fcfcfc); background-image: -o-linear-gradient(#eaeaea, #fcfcfc); background-image: linear-gradient(#eaeaea, #fcfcfc); } .datefilter .current-date-time i { float: right; font-size: 1.8em; padding-top: 2px; } .datefilter.date-time .datetime p { font-size: 11px; padding: 5px 15px; margin: 0; border-bottom: 1px solid #eee; text-align: center; } .datefilter.date-time .datetime div.date input.datepicker-date { width: 90px; } .datefilter.date-time .datetime div.date, .datefilter.date-time .datetime div.time { font-size: 12px; font-style: italic; padding: 15px; border-right: 1px solid #f8f8f8; width: 144px; float: left; position: relative; } .datefilter.date-time .datetime div.date label, .datefilter.date-time .datetime div.time label { display: block; float: left; padding-top: 6px; width: 25%; } .datefilter.date-time .datetime div.date input, .datefilter.date-time .datetime div.date select, .datefilter.date-time .datetime div.time input, .datefilter.date-time .datetime div.time select { float: right; } .datefilter.date-time .datetime div.date select, .datefilter.date-time .datetime div.time select { margin-top: 4px; } .datefilter.date-time .datetime div.date button, .datefilter.date-time .datetime div.time button { display: none; } .datefilter.date-time .datetime div.update { float: left; width: 110px; text-align: center; padding: 20px 0 0; } .datefilter.date-time .datetime div.update button { float: none; } /** [Name] Simple Date Range Picker [Section] Date Pickers [Description] As part of making metrics nicer to use, we redesigned a datepicker that no longer uses jQuery UI. It's significantly simpler, works nicely on mobiles, as it's just links, and resizes itself depending on browser width. This part is the preset selection. Picking a range fires a event (updating whatever is listening for that event), or clicking on ```Custom…``` opens the Calendar. [Example]
24 Mar 2011 – 19 Aug 2014
**/ .date-range-picker { font-size: 16px; font-weight: 200; margin-bottom: 20px; color: #444; position: relative; } .date-range-picker:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .date-range-picker input { display: none; } .date-range-picker .date-range { display: block; top: 0; margin-bottom: 0; padding: 10px; font-weight: 200; border: 1px solid #ccc; background-color: #fafafa; width: 340px; color: #666; } .date-range-picker .date-range:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .date-range-picker .date-range:hover { background-color: #fff; color: #333; } .date-range-picker .date-range .label { margin-right: 20px; } .date-range-picker .date-range .range { font-size: 16px; font-weight: 200; } .date-range-picker .date-range .icon-caret-down { float: right; font-size: 20px; line-height: inherit; width: 18px; text-align: center; } .date-range-picker .date-fields { display: none; clear: both; padding: 0; margin-top: -1px; position: absolute; background-color: #fff; width: 362px; z-index: 100; line-height: normal; } .date-range-picker .date-fields ul.date-field-menu-items { background: #fafafa; border: 1px solid #ccc; list-style: none; position: relative; } .date-range-picker .date-fields ul.date-field-menu-items a { display: block; cursor: pointer; color: #444; padding: 10px; } .date-range-picker .date-fields ul.date-field-menu-items a:hover { background-color: #fff; } .date-range-picker .date-fields ul.date-field-menu-items li + li { border-top: 1px solid #ddd; } .date-range-picker .date-fields .calendars { display: none; } .date-range-picker .date-fields.custom-range ul { display: none; } .date-range-picker .date-fields.custom-range .calendars { display: block; } .date-range-picker.opened:hover { background-color: #fff; } .date-range-picker.opened .date-fields { display: block; } .date-range-picker.opened .date-range { background-color: #fff; color: #333; } @media only screen and (max-width: 599px) { .date-range-picker { width: auto; } .date-range-picker .date-fields { width: 100%; } .date-range-picker .date-fields ul.date-field-menu-items { width: auto; } } /** [Name] Calendars [Section] Date Pickers [Description] As part of making metrics nicer to use, we redesigned a datepicker that no longer uses jQuery UI. It's significantly simpler, works nicely on mobiles, as it's just links, and resizes itself depending on browser width. This part is the calendar view. Opened via the simple date range picker, users select the start date, the end date, and confirms their choice. It then fires an event that updates whatever is listening for it. [Example]
24 Mar 2011 – 19 Aug 2014
Select from date

March, 2011

  1. Su
  2. Mo
  3. Tu
  4. We
  5. Th
  6. Fr
  7. Sa
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  1. 8
  2. 9
  3. 10
  4. 11
  5. 12
  6. 13
  7. 14
  1. 15
  2. 16
  3. 17
  4. 18
  5. 19
  6. 20
  7. 21
  1. 22
  2. 23
  3. 24
  4. 25
  5. 26
  6. 27
  7. 28
  1. 29
  2. 30
  3.  
  4.  
  5.  
  6.  
  7.  
Cancel Done

From

March 24th 2011

To

August 19th 2014
**/ .calendars { display: block; border: 1px solid #ddd; background: #fafafa; position: relative; overflow: hidden; z-index: 100; width: 360px; } .calendars:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .calendars .selected { font-size: 0.9em; } .calendars .selected a { display: none; } .calendars .actions { display: block; clear: both; } .calendars .range { float: right; margin-top: 6px; } .calendars .calendar-container { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-timing-function: cubic-bezier(0.45, 0.28, 0, 1.22); animation-timing-function: cubic-bezier(0.45, 0.28, 0, 1.22); -webkit-animation-duration: 300ms; animation-duration: 300ms; position: relative; width: 400%; } .calendars .calendar-container:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .calendars.step-2 .calendar-container { -webkit-animation-name: step1to2; animation-name: step1to2; left: -100%; } .calendars.step-3 .calendar-container { -webkit-animation-name: step2to3; animation-name: step2to3; left: -200%; } .calendars .tabbed { padding: 0 20px; height: 33px; background-color: #fff; border-bottom: 1px solid #ddd; } .calendars .tabbed .tab { font-size: 0.6em; padding: 6px 20px 0 20px; border: 1px solid #ddd; } .calendars .tabbed .tab.active { border-bottom: 1px solid #fafafa; background-color: #fafafa; } .calendars .calendar { width: 25%; height: 430px; float: left; position: relative; } .calendars .calendar .months { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #f7604e; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; border-bottom: 2px solid #cf4435; margin: 20px 20px 0 20px; zoom: 1; } .calendars .calendar .months:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .calendars .calendar .months .previous-month, .calendars .calendar .months .next-month { width: 15%; float: left; text-align: center; color: #fff; font-size: 0.9em; padding: 9px 0 3px; } .calendars .calendar .months .previous-month.current, .calendars .calendar .months .next-month.current { opacity: 0; pointer-events: none; cursor: default; } .calendars .calendar .months .previous-month:hover, .calendars .calendar .months .next-month:hover { color: #cf4435; } .calendars .calendar .months .selected-date { width: 70%; float: left; text-align: center; padding: 6px 0; margin: 0; } .calendars .calendar .month-data { position: absolute; height: 310px; top: 106px; left: 0; right: 0; margin: 0 20px; background-color: #fff; border-bottom: 1px solid #eee; } .calendars .calendar ol { margin: 0; clear: both; list-style: none; background-color: #fff; } .calendars .calendar ol:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .calendars .calendar ol.days { padding-top: 10px; color: #d8352a; } .calendars .calendar ol li { -webkit-transition: -webkit-transform 250ms; transition: -webkit-transform 250ms; -o-transition: transform 250ms; transition: transform 250ms; transition: transform 250ms, -webkit-transform 250ms; display: block; float: left; font-size: 16px; text-align: center; width: 14%; height: 40px; overflow: visible; position: relative; line-height: 40px; } .calendars .calendar ol li a { margin: -10px; padding: 10px; position: relative; color: #999; } .calendars .calendar ol li.out-of-range a { color: #eee; pointer-events: none; cursor: default; } .calendars .calendar ol li.selected-day a { color: #fff; } .calendars .calendar ol li.selected-day span { background-color: #f7604e; } .calendars .calendar ol li.selected-day:active span { background-color: #86e3ff; } .calendars .calendar ol li.selected-day span:after { -webkit-animation-duration: 250ms; animation-duration: 250ms; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-name: ping; animation-name: ping; position: absolute; display: block; content: ""; top: 0; bottom: 0; left: 0; right: 0; -webkit-border-radius: 42px; border-radius: 42px; z-index: 2; border: 7px solid #f7604e; opacity: 0; } .calendars .calendar ol li span { position: absolute; content: ""; -webkit-transition: background 250ms; -o-transition: background 250ms; transition: background 250ms; -webkit-border-radius: 20px; border-radius: 20px; display: block; width: 40px; height: 40px; left: 50%; margin-left: -20px; } @media only screen and (max-width: 599px) { .calendar { width: auto; } .calendar .selected span { display: none; } } .calendar-view-header { border-bottom: 1px solid #ddd; text-align: center; width: 100%; } .calendar-view-header:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .calendar-view-header span { display: block; padding: 10px 0; } .calendar-view-header a { float: left; width: 50%; padding: 10px 0; } .calendar-view-header a + a { border-left: 1px solid #ddd; margin-left: -1px; } .calendar-view-header a:hover { background-color: #fff; } .custom-date-range-confirmation-view { float: left; width: 25%; height: 435px; position: relative; } .custom-date-range-confirmation-view .selected-dates { margin: -10px 0 0 20px; } .custom-date-range-confirmation-view .selected-dates h2 { padding-top: 30px; font-size: 12px; color: #999; text-transform: uppercase; line-height: normal; } /** [Name] Editorial Admin Menu [Section] Page furniture [Description] The Admin Menu is only for Editorials / Interns to navigate the editorial backend as well as perform actions on certain pages. From the Editorial backend, it provides links to manage the various aspects of the app. From the front-end, it allows Editors to edit pages / articles. **/ .editorial-menu { -webkit-transition: max-height 0.2s; -o-transition: max-height 0.2s; transition: max-height 0.2s; background-color: #373942; max-height: 40px; overflow: hidden; } .editorial-menu .toggle { -webkit-transition: height 0.2s; -o-transition: height 0.2s; transition: height 0.2s; display: none; height: 0; cursor: pointer; } .editorial-menu li { float: left; } .editorial-menu li + li { border-left: 1px solid #434550; } .editorial-menu .dangerous { float: right; } .editorial-menu .dangerous i { color: #e50c20; } .editorial-menu h4 { color: #fff; display: block; font-size: 12px; letter-spacing: -0.02em; line-height: 38px; margin: 0; padding: 0 10px 0 0; text-transform: uppercase; } .editorial-menu h4:after { content: ":"; } .editorial-menu a { -webkit-transition: color 0.2s, background 0.2s; -o-transition: color 0.2s, background 0.2s; transition: color 0.2s, background 0.2s; color: #adb0ba; display: block; line-height: 38px; font-size: 12px; padding: 0 10px; } .editorial-menu a:hover { color: #fff; background: #4e515e; } .editorial-menu .toggle-lock { -webkit-transition: color 0.2s, background 0.2s; -o-transition: color 0.2s, background 0.2s; transition: color 0.2s, background 0.2s; color: #adb0ba; display: block; line-height: 38px; font-size: 12px; padding: 0 10px; background: none; border: none; cursor: pointer; } .editorial-menu .toggle-lock:hover { color: #fff; background: #4e515e; } @media only screen and (max-width: 599px) { .editorial-menu { max-height: 0; } .js .editorial-menu { max-height: 40px; } .js .editorial-menu .toggle { height: 39px; } .editorial-menu .toggle { border-bottom: 1px solid #adb0ba; display: block; text-align: center; } .editorial-menu .toggle .icon-caret-up { display: none; } .editorial-menu li, .editorial-menu .dangerous { -webkit-transition: max-height 0.2s; -o-transition: max-height 0.2s; transition: max-height 0.2s; float: none; max-height: 0; overflow: hidden; } .editorial-menu li + li { border: none; } .editorial-menu.opened { max-height: 100vh; } .editorial-menu.opened .toggle { border-bottom: 1px solid #bec0c8; } .editorial-menu.opened .toggle .icon-caret-up { display: inline-block; } .editorial-menu.opened .toggle .icon-caret-down { display: none; } .editorial-menu.opened li { max-height: 500px; } } /** [Name] Footer [Section] Page furniture [Description] The footer contains a bunch of things: #### The partners logos (these are displayed _differently_ across regions) - Founding Partners - Strategic Partners - Media Partners - Funding Partners - Members #### The sub footer - Links to community / company pages - Newsletter signup #### the **actual** footer - Privacy / Terms & conditions / Corrections - Copyright notice **/ #partners-footer { clear: both; color: #fff; zoom: 1; } #partners-footer:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } #partners-footer .partner-group { margin-bottom: 36px; } #partners-footer .partner-group h6 { font-size: 12px; padding: 0 0 3px 0; color: #7f7f7f; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #f6f6f6; } #partners-footer ul { font-size: 0; list-style: none; margin: 0 0 10px 0; padding: 0; text-align: center; width: 100%; } #partners-footer ul:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } #partners-footer li { margin: 0; padding: 0; zoom: 1; display: inline-block; vertical-align: middle; } #partners-footer a { display: inline-block; width: 100%; height: 100%; padding: 0; margin: 0; max-width: 120px; border: none; text-decoration: none; text-align: center; vertical-align: middle; } #partners-footer img { max-width: 80%; } .region_fr #partners-footer li[class$="-897"] img, .region_fr #partners-footer li[class$="-1031"] img { max-width: 140%; } .region_ca #partners-footer li[class$="-976"] img { max-width: 140%; } #footer { background-color: #cf2522; border-top: 1px solid #ff2740; color: #fff; font-size: 11px; line-height: normal; padding: 1em 0; } #footer:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } #footer a { text-decoration: none; margin-right: 1em; color: #fff; } #footer a:hover { color: #ffa0a5; border-bottom: 1px solid #ffa0a5; } #footer nav { float: left; } #footer p { margin: 0; float: right; } .footer-primary { background-color: #e43a3c; border-bottom: 1px solid #c61b1d; clear: both; color: #fff; padding: 26px 0; } .footer-primary:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .footer-primary header { border-bottom: 1px solid #b8191b; margin-bottom: 20px; } .footer-primary header h2 { text-indent: -10000px; background: url(/assets/logo-white-on-transparent-en-beb62e2904a754cb6c8f85c36987e728.png) no-repeat top left; display: block; width: 150px; height: 12px; margin-bottom: 20px; } .footer-primary header.fr h2 { background: url(/assets/logo-white-on-transparent-fr-149435a4ad2ecb64a50c65e7081c7a68.png) no-repeat top left; } .footer-primary h6 { clear: both; color: #fdb3b8; font-size: 12px; margin-bottom: 0; padding: 0; } .footer-link-list ul { float: left; font-size: 16px; list-style: none; } .footer-link-list li { padding: 0.1em 0; } .footer-link-list a { border-bottom: 1px solid #e43a3c; color: #fff; display: inline-block; font-weight: bold; line-height: 1.7; text-decoration: none; } .footer-link-list a:hover { color: #fdc2c6; border-bottom: 1px solid #ffa0a5; } .footer-link-list a:hover .icon { color: #fdc2c6; } .footer-link-list a .icon { color: #fdb3b8; font-size: inherit; } @media only screen and (max-width: 599px) { .footer-primary header { display: none; } .footer-link-list { display: none; } } .footer-subscription .subscription-newsletter-form label { display: block; height: 0; text-indent: -10000px; } .footer-subscription .subscription-newsletter-form .field-wrapper { overflow: hidden; padding-right: 20px; } .footer-subscription .subscription-newsletter-form .button { -webkit-box-sizing: border-box; box-sizing: border-box; float: right; height: 35px; padding: 0 18px; margin: 0; } .footer-subscription .subscription-newsletter-form .email { width: 100%; height: 35px; padding: 5px 10px; } .footer-subscription .newsletter-signup-form form { border: none; padding: 12px 0 20px; margin-bottom: 20px; border-bottom: 1px solid #c03139; } .footer-subscription .newsletter-signup-form .email { -webkit-transition: background-color 0.5s; -o-transition: background-color 0.5s; transition: background-color 0.5s; background-color: #ffa0a5; border: none; color: #c03139; width: 100%; } .footer-subscription .newsletter-signup-form .email::-webkit-input-placeholder { color: #c03139; } .footer-subscription .newsletter-signup-form .email:-ms-input-placeholder { color: #c03139; } .footer-subscription .newsletter-signup-form .email::-ms-input-placeholder { color: #c03139; } .footer-subscription .newsletter-signup-form .email::placeholder { color: #c03139; } .footer-subscription .newsletter-signup-form .button { background: #c03139; border: none; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); color: #fff; display: block; float: right; padding: 6px 10px 7px; text-shadow: none; width: 86px; } .footer-subscription .newsletter-signup-form .button:hover { background: #97272d; } .footer-subscription .region-select { background: #ffa0a5; border: none; width: 236px; } .footer-subscription .region-select:after { color: #c03139; } .footer-subscription .region-select select { color: #c03139; height: 28px; font-size: 13px; } .sitewide-social-media h6 { float: left; padding-top: 3px; } .sitewide-social-media ul { float: right; list-style: none; margin-top: -8px; } .sitewide-social-media li { float: left; margin-left: 10px; } .sitewide-social-media a { background: #fff; border: 3px solid #e43a3c; -webkit-border-radius: 30px; border-radius: 30px; display: block; font-size: 12px; height: 22px; padding: 11px 0 5px; text-align: center; width: 38px; } .sitewide-social-media a:hover { border: 3px solid #c03139; } @media only screen and (max-width: 599px) { .footer-subscription h5 { margin: 0 0 24px; border-bottom: 4px solid #c03139; padding-bottom: 10px; } .footer-subscription h6 { font-size: 14px; } .sitewide-social-media h6 { float: none; } .sitewide-social-media ul { margin: 0; float: none; text-align: center; } .sitewide-social-media li { float: none; display: inline-block; } .sitewide-social-media a { -webkit-border-radius: 40px; border-radius: 40px; font-size: 30px; height: 34px; padding: 25px 0 5px; width: 64px; } } @media only screen and (min-width: 1466px) { .footer-subscription .region-select { width: 294px; } } /** [Name] [Section] Forms [Description] ### Basic Controls These form styles are a bit janky at the moment and are slowly being refactored away. If you are building something new, or are rewriting lots of form code you should think about using the ```.newforms``` stuff instead. These are the base vanilla font styles as they render using the markup straigt out of ```semantic_form_for``` **/ .formtastic .inputs ol, .formtastic .inputs ul, .formtastic .actions ol, .formtastic .actions ul { list-style: none; } .formtastic .inputs li, .formtastic .actions li { clear: both; margin: -0.5em 0 10px 0; padding: 0.5em 0; } .formtastic .inputs label, .formtastic .actions label { padding: 5px 0; } .formtastic .inputs .input .inline-hints, .formtastic .actions .input .inline-hints { color: #666; margin: 0.5em 0 0 25%; } .formtastic abbr { border: none; } form.newform:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } @media only screen and (max-width: 599px) { form.newform { padding-bottom: 40px; } } form.newform fieldset.actions { clear: both; padding-top: 20px; } form.newform fieldset.inputs { width: 100%; /** [Name] List elements wrappers [Section] Forms [Description] Don’t yell at me about the BS nesting here, blame formtastic - ```.required ``` - Required field - ```.error ``` - Field error state - ```.required.error ``` - Required field with an error [Example]
**/ /** [Name] Radio / Check buttons [Section] Forms [Example]

    Example: ruby, rails, forms

**/ /** [Name] Select boxes [Section] Forms [Description] [Example]
**/ /** [Name] Input Fields [Section] Forms [Description] [Example]

  2. eg. Professor of Geology

**/ /** [Name] Textareas [Section] Forms [Description] [Example]
**/ /** [Name] Multi-select boxes [Section] Forms [Description] [Example]
**/ } form.newform fieldset.inputs:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } @media only screen and (max-width: 599px) { form.newform fieldset.inputs .fragments { padding-left: 0; } form.newform fieldset.inputs .fragments label, form.newform fieldset.inputs .fragments .label { position: static; } } form.newform fieldset.inputs .fragments label { width: 100%; } form.newform fieldset.inputs .fragments .fragments-group { float: left; width: 75%; margin: 0; } form.newform fieldset.inputs .fragments .fragment label input { display: inline; margin: 0; padding: 0; } form.newform fieldset.inputs > legend { color: #65635f; padding: 50px 0 30px; font-size: 18px; font-weight: bold; } form.newform fieldset.inputs li { border-bottom: 1px solid #ddd; clear: both; display: block; margin: 0; padding: 24px 0 36px; position: relative; width: 100%; zoom: 1; } form.newform fieldset.inputs li:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } form.newform fieldset.inputs li.hidden { display: none; } form.newform fieldset.inputs li.error input, form.newform fieldset.inputs li.error textarea, form.newform fieldset.inputs li.error select[multiple] { border-color: #ea3838; } form.newform fieldset.inputs li.error select { border-color: #ea3838; } form.newform fieldset.inputs li.error .inline-errors { display: block; } form.newform fieldset.inputs strong { font-weight: bold !important; } form.newform fieldset.inputs .input .inline-errors, form.newform fieldset.inputs .input .inline-hints { clear: left; float: left; line-height: 12px; font-size: 11px; font-style: normal; margin: 6px 25px 0 25%; color: #999; max-width: 600px; } @media only screen and (max-width: 599px) { form.newform fieldset.inputs .input .inline-errors, form.newform fieldset.inputs .input .inline-hints { margin-left: 0; } } form.newform fieldset.inputs .inline-errors { color: #d8352a; display: none; font-weight: bold; } form.newform fieldset.inputs .inline-errors:first-letter { text-transform: capitalize; } form.newform fieldset.inputs .indented-field-wrapper { padding: 5px 0; margin-left: 25%; } @media only screen and (max-width: 599px) { form.newform fieldset.inputs fieldset > ol { width: 100%; } } form.newform fieldset.inputs fieldset legend { font-weight: bold; padding: 5px 0; float: left; width: 25%; } form.newform fieldset.inputs fieldset legend span { position: static; } form.newform fieldset.inputs fieldset .input label { width: auto; float: none; padding-right: 20px; } form.newform fieldset.inputs fieldset li { width: auto; float: left; clear: none; padding: 0 50px 0 0; border-bottom: none; } form.newform fieldset.inputs fieldset li.inline-hints { margin: 0; } form.newform fieldset.inputs fieldset li.fragment { padding: 0; } form.newform fieldset.inputs fieldset li input { width: 100%; } form.newform fieldset.inputs .boolean legend, form.newform fieldset.inputs .choices legend { display: block; float: left; padding: 0; position: static; width: 25%; } form.newform fieldset.inputs .boolean legend label, form.newform fieldset.inputs .choices legend label { position: static; width: 100%; } form.newform fieldset.inputs .boolean ol, form.newform fieldset.inputs .choices ol { float: left; padding: 0; margin: 0; width: 75%; } form.newform fieldset.inputs .boolean li, form.newform fieldset.inputs .choices li { clear: none; float: left; margin: 0; padding-right: 0; width: 100%; } form.newform fieldset.inputs .boolean label, form.newform fieldset.inputs .choices label { width: auto; } form.newform fieldset.inputs .boolean label input, form.newform fieldset.inputs .choices label input { display: block; float: left; margin: 0 8px 0 0; width: auto; } form.newform fieldset.inputs .boolean label { padding-left: 25%; } form.newform fieldset.inputs .radio p.inline-hints, form.newform fieldset.inputs .check_boxes p.inline-hints { margin-top: 0; } @media only screen and (max-width: 599px) { form.newform fieldset.inputs .date_select .fragments .fragments-group .fragment { margin: 0; width: 30%; } form.newform fieldset.inputs .date_select .fragments .fragments-group .fragment + .fragment { margin: 0 0 0 5%; } } form.newform fieldset.inputs label { width: 25%; float: left; font-weight: bold; display: block; padding: 6px 0; } @media only screen and (max-width: 599px) { form.newform fieldset.inputs label { width: 100%; } } form.newform fieldset.inputs label abbr { color: #ea3838; line-height: 18px; margin-left: 6px; font-size: 16px; font-weight: bold; } form.newform fieldset.inputs input[type="checkbox"], form.newform fieldset.inputs input[type="radio"] { width: auto; padding: 0; } @media only screen and (max-width: 599px) { form.newform fieldset.inputs select { width: 100%; } } form.newform fieldset.inputs input:not([type='submit']), form.newform fieldset.inputs textarea, form.newform fieldset.inputs select[multiple] { -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #bbb; -webkit-box-shadow: 0 1px 1px 0 #ddd inset, 0 1px 0 0 #fff; box-shadow: 0 1px 1px 0 #ddd inset, 0 1px 0 0 #fff; display: inline-block; float: left; font-size: 14px; line-height: 18px; margin: 0; max-width: 100% !important; padding: 6px; width: 75%; } form.newform fieldset.inputs input:not([type='submit']).big, form.newform fieldset.inputs textarea.big, form.newform fieldset.inputs select[multiple].big { font-size: 22px; } form.newform fieldset.inputs input:not([type='submit']).quarter-width, form.newform fieldset.inputs textarea.quarter-width, form.newform fieldset.inputs select[multiple].quarter-width { width: 25%; } form.newform fieldset.inputs input:not([type='submit']).half-width, form.newform fieldset.inputs textarea.half-width, form.newform fieldset.inputs select[multiple].half-width { width: 50%; } form.newform fieldset.inputs input:not([type='submit']).three-quarter-width, form.newform fieldset.inputs textarea.three-quarter-width, form.newform fieldset.inputs select[multiple].three-quarter-width { width: 75%; } form.newform fieldset.inputs input:not([type='submit']).full-width, form.newform fieldset.inputs textarea.full-width, form.newform fieldset.inputs select[multiple].full-width { width: 100%; } form.newform fieldset.inputs input:not([type='submit']):disabled, form.newform fieldset.inputs textarea:disabled, form.newform fieldset.inputs select[multiple]:disabled { background-color: #eaeaea; } form.newform fieldset.inputs input:not([type='submit']):hover, form.newform fieldset.inputs textarea:hover, form.newform fieldset.inputs select[multiple]:hover { border-color: #999; } form.newform fieldset.inputs input:not([type='submit']):focus, form.newform fieldset.inputs textarea:focus, form.newform fieldset.inputs select[multiple]:focus { border-color: #008fd5; outline: none; } form.newform fieldset.inputs input[type=file] { border: none; font-size: inherit; padding: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 0 #fff inset; box-shadow: 0 0 0 0 #fff inset; } @media only screen and (max-width: 599px) { form.newform fieldset.inputs input:not([type='submit']), form.newform fieldset.inputs textarea, form.newform fieldset.inputs select[multiple] { font-size: 16px; width: 100%; } form.newform fieldset.inputs input:not([type='submit']).big, form.newform fieldset.inputs textarea.big, form.newform fieldset.inputs select[multiple].big { font-size: 16px; } form.newform fieldset.inputs input:not([type='submit']).quarter-width, form.newform fieldset.inputs input:not([type='submit']).half-width, form.newform fieldset.inputs input:not([type='submit']).three-quarter-width, form.newform fieldset.inputs input:not([type='submit']).full-width, form.newform fieldset.inputs textarea.quarter-width, form.newform fieldset.inputs textarea.half-width, form.newform fieldset.inputs textarea.three-quarter-width, form.newform fieldset.inputs textarea.full-width, form.newform fieldset.inputs select[multiple].quarter-width, form.newform fieldset.inputs select[multiple].half-width, form.newform fieldset.inputs select[multiple].three-quarter-width, form.newform fieldset.inputs select[multiple].full-width { width: 100%; } form.newform fieldset.inputs .choices legend { width: auto; margin-bottom: 12px; } form.newform fieldset.inputs .choices .choices-group { float: none; } form.newform fieldset.inputs p.inline-errors { right: 0; top: 11px; left: auto; } form.newform label { font-size: 11px; padding: 6px 0; } } .fancy-input { position: relative; } .fancy-input select { -webkit-appearance: button; -moz-appearance: button; -webkit-user-select: none; -moz-user-select: none; -webkit-padding-end: 20px; -moz-padding-end: 20px; -webkit-padding-start: 2px; -moz-padding-start: 2px; } .fancy-input input[type="text"], .fancy-input input[type="password"], .fancy-input input[type="email"], .fancy-input input[type="url"], .fancy-input select { background-color: #fafafa; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #ccc; color: #666; font-size: 13px; height: 41px; margin: 0; overflow: hidden; padding: 10px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .fancy-input input[type="text"]:hover, .fancy-input input[type="password"]:hover, .fancy-input input[type="email"]:hover, .fancy-input input[type="url"]:hover, .fancy-input select:hover { background: #fff; color: #333; } .fancy-input i { font-size: 20px; line-height: inherit; width: 18px; top: 10px; right: 10px; color: #666; text-align: center; pointer-events: none; position: absolute; } /** [Name] Profile badge [Section] Friends of The Conversation [Description] The FOTC badge that is underneath the photo of a Friend's profile. [Example]
**/ .friend-of-the-conversation { -webkit-border-radius: 10px; border-radius: 10px; display: block; position: relative; margin: 10px 0 25px; padding: 10px 10px 10px 50px; border: 1px solid #f7e6e8; text-align: left; } .friend-of-the-conversation .badge { display: block; background: url(/assets/profiles/friend_of_the_conversation_badge-18be3606f552f888f5e8ccdb3f83b7eb.png) no-repeat top left; position: absolute; width: 66px; height: 101px; left: -20px; top: -15px; } .friend-of-the-conversation span.title { font-size: 13px; padding: 0 0 10px 0; margin: 0; color: #e50c20; font-weight: bold; } .friend-of-the-conversation span.links { font-size: 11px; padding-right: 10px; color: #808080; } .friend-of-the-conversation span.links:hover { color: #333; } /** [Name] Comment badge [Section] Friends of The Conversation [Description] The FOTC badge that is alongside the photo of a Friend's comment. [Example] **/ .friend-of-the-conversation-badge { display: inline-block; width: 13px; height: 13px; } .friend-of-the-conversation-badge .tooltip { left: -80px; width: 148px; top: 32px; } .friend-of-the-conversation-badge span { position: relative; display: inline-block; height: 13px; padding-left: 30px; color: #646464; } .friend-of-the-conversation-badge span i { position: absolute; text-align: center; font-size: 16px; top: 0; left: 0; } .friend-of-the-conversation-badge span i.icon-friend-of-tc-heart { -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; color: #e50c20; } /** [Name] Content list of multiple articles [Section] General Elements [Description] - ```.a-format article``` Big swinging articles with photos. Images are floated right. - ```.b-format article``` Medium article size - no photo [Example]
<% ['a-format', 'b-format'].each do |format| %>
Labor’s NBN: too extravagant? Lukas Coch/AAP

NBN cost-benefit analysis signals the end of an era

By Michael de Percy, University of Canberra

The long-awaited cost-benefit analysis of the National Broadband Network suggests the days of politicians shooting from the hip with taxpayer dollars are numbered. As Labor’s NBN unfolds amid reviews and…
<% end %>
**/ .content-list:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .content-list article { margin-bottom: 18px; } .content-list article.b-format figure { display: none; } .content-list article a.crop-link { display: none; } .content-list article figure { width: 170px; margin-left: 10px; float: right; } .content-list article figure img { -webkit-border-radius: 2px; border-radius: 2px; width: 170px; } .content-list article figure figcaption { font-size: 11px; display: none; } .content-list article time { display: block; font-size: 11px; color: #bbb; } .content-list article header h2 { font-size: 18px; line-height: 26px; margin-bottom: 0; } /** [Name] Article list of multiple articles [Section] General Elements [Description] Display a list of articles in a narrow, vertical format. This is a fail, and should probably be rolled up into `.content-list` [Example]
**/ .article-list ol, .article-list li { list-style-type: none; } .article-list .article { margin-bottom: 18px; list-style-type: none; font-size: 13px; } .article-list .article a { display: block; } .article-list .article a.button { display: inline-block; } .article-list .article img { -webkit-border-radius: 2px; border-radius: 2px; display: block; width: 100%; } .article-list .article time { display: block; color: #bbb; font-size: 11px; } /** [Name] Author vertical list [Section] General Elements [Description] Render one or more authors in a vertical list showing their avatar. [Example]
**/ .author-avatar, .contributor-avatar, .article-authors li[itemprop="author"] { position: relative; display: block; list-style-type: none; padding-bottom: 11px; margin-bottom: 12px; } .author-avatar:after, .contributor-avatar:after, .article-authors li[itemprop="author"]:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .author-avatar:last-child, .contributor-avatar:last-child, .article-authors li[itemprop="author"]:last-child { padding-bottom: 0; margin-bottom: 0; } .author-avatar img, .contributor-avatar img, .article-authors li[itemprop="author"] img { -webkit-border-radius: 50%; border-radius: 50%; background: transparent url(/assets/author/thumb48_default-9807a076dae3e7dbe298fab2c8ebf97e.jpg) no-repeat; float: left; display: block; width: 48px; height: 48px; margin-right: 10px; overflow: hidden; } .author-avatar.large img, .contributor-avatar.large img, .article-authors li[itemprop="author"].large img { width: 54px; height: 54px; background-image: url(/assets/author/thumb54_default-756c6d7e1fd83a42ea935727409ab8ae.jpg); } .author-avatar.large p, .author-avatar.large h5, .contributor-avatar.large p, .contributor-avatar.large h5, .article-authors li[itemprop="author"].large p, .article-authors li[itemprop="author"].large h5 { padding-left: 64px; } .author-avatar a h3, .author-avatar a h5, .contributor-avatar a h3, .contributor-avatar a h5, .article-authors li[itemprop="author"] a h3, .article-authors li[itemprop="author"] a h5 { color: #069; } .author-avatar a, .contributor-avatar a, .article-authors li[itemprop="author"] a { font-weight: bold; font-size: 12px; } .author-avatar p, form.formtastic .author-avatar p, .author-avatar h5, .contributor-avatar p, form.formtastic .contributor-avatar p, .contributor-avatar h5, .article-authors li[itemprop="author"] p, form.formtastic .article-authors li[itemprop="author"] p, .article-authors li[itemprop="author"] h5 { padding-left: 58px; padding-right: 0; margin-bottom: 0; line-height: 18px; } .author-avatar h3, .author-avatar h5, .contributor-avatar h3, .contributor-avatar h5, .article-authors li[itemprop="author"] h3, .article-authors li[itemprop="author"] h5 { font-size: 12px; } .author-avatar h3 a, .author-avatar h5 a, .contributor-avatar h3 a, .contributor-avatar h5 a, .article-authors li[itemprop="author"] h3 a, .article-authors li[itemprop="author"] h5 a { float: none; } .author-avatar h3 a:hover, .author-avatar h5 a:hover, .contributor-avatar h3 a:hover, .contributor-avatar h5 a:hover, .article-authors li[itemprop="author"] h3 a:hover, .article-authors li[itemprop="author"] h5 a:hover { text-decoration: none; } .author-avatar span.email, .contributor-avatar span.email, .article-authors li[itemprop="author"] span.email { display: none; } .author-avatar p, .contributor-avatar p, .article-authors li[itemprop="author"] p { color: #727272; font-size: 11px; line-height: 1.4; } .author-avatar h3, .contributor-avatar h3, .article-authors li[itemprop="author"] h3 { display: inline; } /** [Name] Date, author headshot and name [Section] General Elements [Description] Renders the published date for an article, it's author's avatar and name inline. [Example] **/ ul.headshot-name-and-date { clear: none; list-style-type: none; padding-top: 6px; } ul.headshot-name-and-date li { float: left; margin-right: 5px; font-size: 11px; color: #727272; } ul.headshot-name-and-date li.author-headshot-and-name img, ul.headshot-name-and-date li.author-headshot-and-name .author-name { float: left; } ul.headshot-name-and-date li a, ul.headshot-name-and-date li span { display: inline; white-space: nowrap; } ul.headshot-name-and-date li img { -webkit-border-radius: 2px; border-radius: 2px; float: left; margin-right: 5px; } /** [Name] Pagination [Section] General Elements [Description] For all your pagination needs! [Example] **/ .pagination { clear: both; overflow: hidden; line-height: 23px; margin-top: -3px; padding: 0; } .pagination span { display: block; float: left; border: 2px solid transparent; } .pagination span.first, .pagination span.gap, .pagination span.last { display: none; } .pagination span.more { float: left; padding: 5px 0; } .pagination span a, .pagination span.current { padding: 0 8px; float: left; } .pagination span a:hover, .pagination span.current:hover { -webkit-border-radius: 3px; border-radius: 3px; background-color: #069; color: #fff; } .pagination span.current { -webkit-border-radius: 3px; border-radius: 3px; font-weight: bold; border: 2px solid #069; color: #069; } .pagination span.current:hover { background-color: transparent; color: #069; } html.ie .pagination span.prev a, html.ie .pagination span.next a { margin-top: 1px; padding: 0; text-indent: -9999px; } html.ie .pagination span.prev a { width: 29px; background-position: 0 0; } html.ie .pagination span.prev a:hover { background-position: 0 -23px; } html.ie .pagination span.next a { width: 28px; background-position: -29px 0; } html.ie .pagination span.next a:hover { background-position: -29px -23px; } /** [Name] Tabbed navigation [Section] General Elements [Description] The ```nav.tabbed``` block has a few options - ```.tabbed-no-border``` - No border at the bottom - ```.tabbed-margined``` - Added margin at the bottom - ```.tabbed-condensed``` - Everything smaller NOTE: You can optionally add ```.tabbed-no-border``` and ```.tabbed-margined``` for additional styles. And each tab has an active and a hover state. - ```.active``` - Active state for a .tab - ```:hover``` - Hover state for a .tab HOWEVER: The ```.tabbed-section-navigation``` is used for section layouts, includes it's own margin, and uses a table layout to get even-width columns. It's not to be used with the other optional selectors. - ```.tabbed-section-navigation``` - Used on the section layouts [Example] <% ['', 'tabbed-no-border', 'tabbed-margined', 'tabbed-no-border tabbed-margined', 'tabbed-profile-navigation', 'tabbed-section-navigation'].each do |classes| %>
<% end %> **/ .tabbed { border-bottom: 1px solid #999; height: 32px; margin-bottom: 20px; } .tabbed:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .tabbed.tabbed-no-border { border-bottom: none; } .tabbed.tabbed-margined { margin-bottom: 40px; } .tabbed.tabbed-condensed { height: 24px; } .tabbed.tabbed-condensed .tab { font-size: 11px; line-height: 1; height: auto; margin-right: 5px; padding: 6px 18px; } .tabbed .tab { -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; border: 1px solid #bbb; border-bottom: none; bottom: -1px; color: #b2b2b2; display: block; float: left; font-weight: bold; height: 25px; margin-right: 10px; padding: 6px 26px 0; position: relative; z-index: 2; } .tabbed .tab.active { border-color: #999; color: #333333; background-color: #fff; } .tabbed .tab:hover { color: #333333; } .tabbed .tab.right { float: right; } .tabbed.tabbed-profile-navigation { border-bottom: 1px solid #eee; padding-left: 10px; padding-right: 10px; } .tabbed.tabbed-profile-navigation .tab { border: 1px solid #eee; border-bottom: none; margin-right: 2px; background-color: #fafafa; margin-top: -1px; } .tabbed.tabbed-profile-navigation .tab.active { background-color: #fff; border-bottom: 1px solid #fff; } .tabbed.tabbed-section-navigation { border-collapse: collapse; border: 1px solid #bbb; display: table; margin-bottom: 20px; table-layout: fixed; width: 100%; } .tabbed.tabbed-section-navigation:after { display: none; } .tabbed.tabbed-section-navigation .tab { -webkit-border-radius: 0; border-radius: 0; border: 0; bottom: 0; display: table-cell; float: none; font-size: 12px; padding: 3px 0; text-align: center; vertical-align: middle; } .tabbed.tabbed-section-navigation .tab.active, .tabbed.tabbed-section-navigation .tab.selected { background: #2d8cd6; color: #fff; } .tabbed.tabbed-section-navigation .tab:hover { cursor: pointer; } @media only screen and (max-width: 599px) { .tabbed { font-size: 11px; } .tabbed .tab { padding: 6px 8px 0; margin-right: 2px; } } /** [Name] Tabbed navigation header [Section] General Elements [Description] Header row for use in an active tab of tabbed navigation [Example]
Header content can go here, filtering, search, etc…
**/ .tabbed-header { clear: both; border-bottom: 1px solid #cccccc; padding: 12px; margin-bottom: 12px; } .tabbed-header, .tabbed-header label, .tabbed-header input, .tabbed-header h6 { font-size: 12px; line-height: 24px; } .tabbed-header h6, .tabbed-header label { color: #888; font-weight: bold; margin-right: 10px; } .tabbed-header input { width: 250px; margin: 0 20px 0 0; padding: 4px 5px; margin-top: -1px; } .tabbed-header a { color: #999; text-decoration: none; } .tabbed-header a:hover { color: #777; } /** [Name] User activity [Section] General Elements [Description] A list of activity for a user. Used on the profile pages. [Example]
  1. User name replied to your comment on Article title

    This sounds like one of those critical initiatives that, for a small cost, will mitigate a potential disaster; thank you for this article.

  2. User name commented on your article Article title

    Your description of the mixing tobacco with cannabis was actually what I had in mind but didn't say. It's a common thing amongst cannabis users in Australia that started with cannabis first. Long after they stop smoking the weed, it's a pack a day of nicotine (and sometimes alcohol too)...

**/ .activity-list { list-style: none; } .activity-list .activity-row { clear: both; overflow: auto; border-bottom: 1px solid #edf0f2; padding: 0 12px 12px 12px; margin-bottom: 12px; } .activity-list .activity-row .activity-type { color: #999999; float: left; margin-right: 20px; line-height: 36px; } .activity-list .activity-row .relative-time { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .activity-list .activity-row .activity-row-header, .activity-list .activity-row p { margin-left: 40px; } .activity-list .activity-row .activity-row-header { color: #999999; margin-bottom: 6px; } .activity-list .activity-row .activity-row-header img { -webkit-border-radius: 2px; border-radius: 2px; background-color: #eee; margin-right: 9px; border: none; outline: none; } .activity-list .activity-row .activity-row-header time { font-size: 12px; color: #777777; } .activity-list .activity-row .activity-row-header h5 strong { color: #444444; } .activity-list .activity-row p { font-size: 12px; color: #777777; margin-bottom: 0; } /** [Name] Profile contact listing [Section] General Elements [Description] Counter for displaying the number of unread notifications in a user's news feed - ```.subtle``` - More subtle display, useful for nesting in an inactive tab [Example] **/ .profile-details { list-style: none; margin-top: 36px; margin-bottom: 36px; padding: 0; font-size: 11px; } .profile-details li { padding: 2px 0 2px 6px; } .profile-details li, .profile-details li a { color: #757a80; font-size: 12px; } .profile-details li i { margin-right: 6px; font-size: 14px; } /** [Name] Counters [Section] General Elements [Description] Counter for displaying the number of unread notifications in a user's news feed - ```.subtle``` - More subtle display, useful for nesting in an inactive tab [Example] 9 9 **/ .activity-count { -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #d8352a; color: #d8352a; font-weight: bold; font-size: 11px; padding: 0 4px; height: 16px; line-height: 16px; background-color: #fff; } .activity-count.subtle { border-color: #b2b2b2; color: #b2b2b2; } /** [Name] Available for listing [Section] General Elements [Example]
Contact John Citizen for
  • Media Enquiries
  • Media Enquiries
  • Media Enquiries
  • Media Enquiries
**/ .available-for { color: #757a80; margin-top: 36px; margin-bottom: 36px; } .available-for ul { list-style: none; } .available-for ul li { font-size: 12px; margin: 0; padding: 0; } /** [Name] Super friends! [Section] Friends of The Conversation [Description] - ```.super-friennnnnnds``` - - user is a friend of the conversation [Example]
John Citizen is a Friend of The Conversation

Help support independant journalism and become a Friend of The Conversation
**/ .friends-of-tc { background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); background: -webkit-linear-gradient(#ffffff, #fafafa); background: -o-linear-gradient(#ffffff, #fafafa); background: linear-gradient(#ffffff, #fafafa); -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); padding: 12px 18px 12px 12px; border: 1px solid #c7c9cb; max-width: 330px; } .friends-of-tc nav, .friends-of-tc h6 { margin-left: 32px; } .friends-of-tc h6, .friends-of-tc .icon-friend-of-tc { text-shadow: 0 1px 0 #fff; color: #757a80; } .friends-of-tc .icon-friend-of-tc { font-size: 22px; float: left; } .friends-of-tc.super-friennnnnnds h6, .friends-of-tc.super-friennnnnnds .icon-friend-of-tc { color: #e50c20; } .friends-of-tc.super-friennnnnnds nav { font-size: 11px; } .friends-of-tc.super-friennnnnnds nav a { color: #727272; } /** [Name] Profile stats [Section] General Elements [Description] Shows how many articles / comments / favourites a profile has made [Example]

24

Articles

2,449

Comments
**/ .profile-stats { text-align: center; font-weight: bold; color: #595959; } .profile-stats:first-child { border: none; } .profile-stats a { display: block; } .profile-stats a:hover h2, .profile-stats a:hover span { color: #2d8cd6; } .profile-stats a h2 { color: #444; font-size: 20px; margin-bottom: 6px; } .profile-stats a span { color: #808080; font-size: 13px; font-weight: strong; } /** [Name] Filterable List [Section] General Elements [Description] A list of buttons that filter feed of information into sub groups. Used on profile#show - ```.inactive``` - dsfs - ```.active``` - dsfgfd [Example] **/ .filterable-list { margin: 0; padding: 0; } .filterable-list .title { font-size: 12px; font-weight: bold; padding-top: 4px; color: #b3b3b3; float: left; margin: 0 20px 0 0; } .filterable-list ul { float: left; } .filterable-list ul li { list-style: none; float: left; margin-right: 10px; } /** [Name] Empty content message style [Section] General Elements [Example]
Please, Don-Bot … look into your hard drive, and open your mercy file!
**/ .empty-content { color: #ccc; text-align: center; font-size: 18px; padding: 18px 0; margin: 0 auto; width: 80%; } .editable-table { -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); border: 1px solid #b9becb; display: block; } .editable-table td.center, .editable-table th.center { text-align: center; } .editable-table td.break-word { word-break: break-word; } .editable-table .field-error { background: -webkit-gradient(linear, left top, left bottom, from(#ef6252), to(#e7402d)); background: -webkit-linear-gradient(#ef6252, #e7402d); background: -o-linear-gradient(#ef6252, #e7402d); background: linear-gradient(#ef6252, #e7402d); background-color: #e7402d; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #b83223; color: #fff; display: block; font-weight: bold; left: 2px; margin: 3px; max-width: 150px; padding: 0.3em 0.6em; position: absolute; top: 3em; z-index: 0; } .editable-table table { width: 100%; text-align: left; border-collapse: separate; border-spacing: 0; } .ie7 .editable-table table { table-layout: fixed; } .editable-table table thead { background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ececec)); background-image: -webkit-linear-gradient(#fff, #ececec); background-image: -o-linear-gradient(#fff, #ececec); background-image: linear-gradient(#fff, #ececec); padding-bottom: 6px; } .editable-table table thead tr { -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); overflow: hidden; } .editable-table table thead th { font-weight: bold; padding: 6px 12px; font-size: 11px; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid #b9becb; } .editable-table table thead th.row-index { width: 10px; } .editable-table table tbody td { padding: 12px; border-top: 1px solid #eee; } .editable-table table tbody td.separator { width: 24px; text-align: center; padding-left: 0; padding-right: 0; } .editable-table table tbody:first-child td { border-top: none; } .editable-table td { position: relative; } .editable-table tfoot { background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ececec)); background-image: -webkit-linear-gradient(#fff, #ececec); background-image: -o-linear-gradient(#fff, #ececec); background-image: linear-gradient(#fff, #ececec); padding: 10px 12px; font-size: 11px; } .editable-table tfoot td, .editable-table tfoot th { border-top: 1px solid #b9becb; } .editable-table tfoot a { color: #222; font-weight: bold; } .editable-table tfoot i { font-size: 12px; } .editable-table tfoot input.year { width: 60px; } .editable-table tfoot input { margin: 5px; } .editable-table tfoot input.text { width: 80%; } .editable-table tfoot select { margin-left: 4px; padding: 0.15em 0.4em; } .editable-table-footer { background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ececec)); background-image: -webkit-linear-gradient(#fff, #ececec); background-image: -o-linear-gradient(#fff, #ececec); background-image: linear-gradient(#fff, #ececec); -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; border-top: 1px solid #b9becb; padding: 10px 12px; font-size: 11px; } .editable-table-footer a { color: #222; font-weight: bold; } .editable-table-footer i { font-size: 12px; } .avatar-uploader { float: left; position: relative; } .avatar-uploader.size-width170 .avatar-uploader-wrapper { width: 170px; height: 170px; } .avatar-uploader .avatar-image { -webkit-transition: opacity 0.35s ease-in-out; -o-transition: opacity 0.35s ease-in-out; transition: opacity 0.35s ease-in-out; opacity: 1; -webkit-border-radius: 4px; border-radius: 4px; display: block; float: left; width: 100%; } .avatar-uploader .avatar-uploader-wrapper { position: relative; float: left; background-color: #eee; } .avatar-uploader .avatar-uploader-progress { -webkit-transition: opacity 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; opacity: 0; pointer-events: none; position: absolute; left: 0; bottom: 20px; z-index: 2; width: 100%; text-align: center; } .avatar-uploader .avatar-uploader-progress.is-uploading { -webkit-transition: opacity 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; opacity: 1; } .avatar-uploader .avatar-uploader-progress .avatar-uploader-progress { -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.75) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.75) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8); width: 60%; height: 10px; margin: 0 auto; background-color: #222; border: 1px solid #222; } .avatar-uploader .avatar-uploader-progress .avatar-uploader-progress .bar { background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#b5bcc7)); background-image: -webkit-linear-gradient(#f9f9f9, #b5bcc7); background-image: -o-linear-gradient(#f9f9f9, #b5bcc7); background-image: linear-gradient(#f9f9f9, #b5bcc7); -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.5) inset; height: 100%; } .avatar-uploader .avatar-uploader-controls { margin-left: 20px; float: left; } .avatar-uploader .avatar-uploader-controls .inline-hints { margin-left: 0 !important; } .avatar-uploader.is-uploading img { -webkit-transition: opacity 0.35s ease-in-out; -o-transition: opacity 0.35s ease-in-out; transition: opacity 0.35s ease-in-out; opacity: 0.5; } .avatar-uploader.large-inline-edit { float: none; } .avatar-uploader.large-inline-edit:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .avatar-uploader.large-inline-edit .avatar-uploader-controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; } .avatar-uploader.large-inline-edit .avatar-uploader-controls .inline-hints { display: none; } .avatar-uploader.large-inline-edit .avatar-uploader-controls .button input { height: 100%; } .avatar-uploader.large-inline-edit .avatar-uploader-controls .button, .avatar-uploader.large-inline-edit .avatar-uploader-controls .button:active { -webkit-transition: opacity 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; opacity: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75))); background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75)); background: -o-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75)); background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75)); border: none; color: #fff; display: block; height: 20%; left: 0; line-height: 100%; margin: 0; padding-top: 80%; padding: 0; text-align: center; text-shadow: none; top: 0; width: 100%; } .avatar-uploader.large-inline-edit .avatar-uploader-controls .button:hover { -webkit-transition: opacity 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; opacity: 1; } /** [Name] Job and Event Listings [Section] General Elements [Description] Used everywhere we do job/events listings. They look quite similar, so merging the two made sense. [Example]

Monash University Jobs

    <% 4.times.each do %>
  • Job Title

    Lengthy job description…

    • <% end %>
More INSTITUTION NAME University Jobs

Monash University Events

More Events
**/ .jobs-events-list ul { padding: 0; margin: 0; } .jobs-events-list ul li { padding: 15px 0; border-bottom: 1px solid #eee; list-style: none; position: relative; min-height: 16px; } .jobs-events-list ul li.with-logo h5, .jobs-events-list ul li.with-logo p { margin-left: 48px; } .jobs-events-list ul li img { display: block; max-width: 36px; max-height: 36px; position: absolute; zoom: 1; top: 0; bottom: 0; margin: auto; padding: 0 10px 0 5px; } .jobs-events-list ul li.month { min-height: auto; padding: 10px 0; } .jobs-events-list ul li h5 { font-size: 11px; line-height: 1.3; margin-bottom: 0; font-weight: normal; } .jobs-events-list ul li p { line-height: 132%; font-size: 11px; color: #7f7f7f; margin: 0; } .jobs-events-list .view-more { display: block; padding: 10px 0; position: relative; } .jobs-events-list .view-more:hover { background-image: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(#fff9f9), to(#fff)); background-image: -webkit-linear-gradient(left, #fff, #fff9f9, #fff); background-image: -o-linear-gradient(left, #fff, #fff9f9, #fff); background-image: linear-gradient(to right, #fff, #fff9f9, #fff); } .jobs-events-list .view-more + h4 { margin-top: 30px; } .jobs-events-list .view-more i { position: absolute; top: 4px; left: 0; color: #d61924; font-size: 17px; margin: 6px 3px 0 0; } .jobs-events-list .view-more span { line-height: 1.4; display: block; } .jobs-events-list .view-more span.action { letter-spacing: 0; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #333333; margin: 0; margin-left: 24px; } .jobs-events-list .call-to-action { background-image: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(#fff)); background-image: -webkit-linear-gradient(left, #eeeeee, #fff); background-image: -o-linear-gradient(left, #eeeeee, #fff); background-image: linear-gradient(to right, #eeeeee, #fff); background: url(/assets/jobs/section-call-to-action-background-f2c9a21975a74ebe32e7e0417072036b.png) top left no-repeat; border-right: 1px solid #eee; border-bottom: 1px solid #eee; } .jobs-events-list .call-to-action h4 { margin: 0; } .jobs-events-list .call-to-action h4 a { display: block; color: #545454; font-size: 15px; letter-spacing: 0; font-weight: bold; text-transform: none; padding: 23px 33px 23px 15px; background: url(/assets/jobs/section-call-to-action-7067759a2d164481139913d62cd5b98c.png) bottom right no-repeat; } @media only screen and (min-width: 1466px) { .jobs-events-list .call-to-action h4 a { padding: 23px 90px 23px 20px; font-size: 15px; } } .jobs-events-list .call-to-action h4 a:hover { color: #d8352a; } .readmore.hidden { display: none; } .how-we-are-different .call-to-action h4 { margin: 0; } .how-we-are-different .call-to-action h4 a { -webkit-transition: background-color 250ms; -o-transition: background-color 250ms; transition: background-color 250ms; background: #d8352a url(/assets/fotc/section-call-to-action-39a0521e74e07b7f0781e72cd8001a12.png) 114px 0 no-repeat; color: #fff; display: block; font-size: 22px; font-weight: bold; letter-spacing: normal; line-height: 24px; min-height: 55px; padding: 37px 35px 0 10px; text-transform: none; } .how-we-are-different .call-to-action h4 a:hover { background-color: #e8493b; color: #fff; } .how-we-are-different .call-to-action h4 a .numbers { letter-spacing: -0.05em; } @media only screen and (min-width: 1466px) { .how-we-are-different .call-to-action h4 a { padding: 24px 35px 12px 10px; background-position: top right; font-size: 26px; } } /** [Name] Rose explosion [Section] General Elements [Description] A rose explosion. Good for displaying prices, sales or something fancy - ```.big``` - it's big - ```.small``` - it's small [Example]
$599 USD
Playstation 4

$599 USD
PS4
**/ .rose { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: url(/assets/rose-bf1013742d373e3fa991e466e7bb6f5b.svg) no-repeat center; background-size: 112px 112px; height: 112px; width: 112px; margin-left: auto; margin-right: auto; text-align: center; color: #fff; font-size: 12px; } .rose .feature { display: block; font-family: "LeagueGothicRegular", "League Gothic", Impact, sans-serif; font-size: 2.5em; font-weight: normal; text-shadow: 0 0 2px #b50a0b; padding-top: 32%; margin: 0; line-height: 1; } .rose .caption { display: block; font-size: 0.9em; color: #eebbbb; line-height: 1.2; } .rose.big { background-size: 168px 168px; height: 168px; width: 168px; font-size: 150%; } .rose.small { background-size: 84px 84px; height: 84px; width: 84px; font-size: 75%; } .no-svg .rose { background: url(/assets/rose-d5cffe8e64a8bff40069a5304e6403ef.png) no-repeat center; } /** [Name] Highlight panel [Section] General Elements [Description] Used for the 'Welcome' message on (historically) the homepage, as well as the FactCheck page. [Example]

Truth, lies and politics

Fact-checking has been one innovation in this election that just might last.

Not that it’s been perfect or without controversy. Not that political parties have necessarily taken notice. And not that this election campaign has proved more honest and transparent than previous ones – it hasn’t.

Read more
**/ .highlight-panel h3 { border-bottom-color: #e9e3bf; position: relative; } .highlight-panel h3 a { display: block; position: absolute; right: 0; top: 0; font-size: 10px; font-weight: normal; text-transform: uppercase; color: #888; } .highlight-panel h3 a:hover { color: #555; } .highlight-panel div { background-color: #f9f6e3; padding: 20px; } .highlight-panel div.call-to-action { text-align: right; padding: 0; } .highlight-panel div.call-to-action a { margin: 0; } .highlight-panel div h5, .highlight-panel div p { margin: 0; padding: 0 0 20px 0; } .highlight-panel div h5 { font-size: 18px; line-height: 1.4; } .highlight-panel div p { font-size: 12px; line-height: 1.65; } /** [Name] Reference panels [Section] General Elements [Description] Used for TC Global to show off the author advisers [Example]

Reference panels

**/ #reference-panels li { background: transparent url(/assets/bullet-6c6e6fb28ad81d6f2d9471306b11322e.png) no-repeat 0 0; font-size: 13px; font-weight: bold; list-style: none; margin-bottom: 6px; padding-left: 20px; } /** [Name] Hot Topics [Section] Page furniture [Description] The list of topics relevatnt to the page / section. [Example] **/ #hot-topics { font-size: 0.85em; margin-top: 12px; } #hot-topics .icon-tag { top: 0; } #hot-topics a { -webkit-border-radius: 2px; border-radius: 2px; display: block; font-weight: bold; padding: 0 6px; } #hot-topics h3 a { color: #d8352a; font-size: 11px; margin-bottom: 0; margin-left: -4px; padding: 0 4px 0 4px; } #hot-topics h3 a:hover, #hot-topics h3 a.current { background-color: #d8352a; color: #fff; text-decoration: none; } #hot-topics ol { list-style-type: none; } #hot-topics li a { color: #666; white-space: nowrap; } #hot-topics li a:hover, #hot-topics li a.current { background-color: #d8352a; color: #fff; text-decoration: none; } #hot-topics h3, #hot-topics li { float: left; margin-right: 8px; } #hot-topics a.more-topics { border-left: 1px solid #ccc; color: #999; padding-left: 16px; } #hot-topics a.more-topics:hover { background: transparent; color: #ccc; } .inline-content { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .inline-content:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .inline-content > div { margin-left: 1rem; } .inline-content header { font-family: "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; margin-top: 1rem; } .inline-content footer { color: #777; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.5rem; margin-bottom: 1rem; } .inline-content img { float: right; margin-left: 1rem; width: 64px; } .inline-content p { font-size: 1.125rem; font-style: italic; line-height: 1.5rem; margin: 0.5rem 0; } .inline-content p a { text-decoration: none; } /** [Name] Lightboxes [Section] General Elements [Description] We have a common lightbox dialog used across much of the editorial interface. - ```.modal``` - the lightbox cannot be dismissed and the mask does not accept any pointer events - ```.error``` - used to display critical error messages **/ body.lightbox-open { overflow: hidden; } body.lightbox-open .lightbox-inner { -webkit-animation: zoom-in 0.25s ease-out; animation: zoom-in 0.25s ease-out; } @-webkit-keyframes zoom-in { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes zoom-in { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .lightbox { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 2000; } .lightbox .page-header { border-bottom: 1px solid #eee; margin-bottom: 18px; padding-bottom: 9px; } .lightbox.modal .mask { pointer-events: none; } .lightbox.error { -webkit-animation: none; animation: none; } .lightbox.error .lightbox-inner > header { background: #e7402d; } .lightbox.error .lightbox-inner > header h2 { color: #8d2114; } .lightbox ul, .lightbox ol { margin: 12px; } .lightbox ul li, .lightbox ol li { padding-left: 4px; } .lightbox ul li + li, .lightbox ol li + li { margin-top: 6px; } .lightbox code { -webkit-border-radius: 3px; border-radius: 3px; display: block; background-color: #ddd; color: #444; padding: 5px 10px; font-family: "MesloLGMDZ", "Monaco", monospace; font-size: 14px; } .lightbox .lightbox-inner { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); overflow: hidden; position: relative; top: 100px; width: 800px; margin: 0 auto; background: #fff; border: 1px solid #999; } .lightbox .lightbox-inner > div, .lightbox .lightbox-inner > header, .lightbox .lightbox-inner > footer { padding: 20px; } .lightbox .lightbox-inner > header { border-top-radius: 2px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset; padding-top: 14px; background-color: #559fe7; color: #fff; } .lightbox .lightbox-inner > header h1, .lightbox .lightbox-inner > header h2 { font-weight: normal; margin: 0; } .lightbox .lightbox-inner > header hgroup h1 { font-size: 30px; color: #fff; } .lightbox .lightbox-inner > header hgroup h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); font-size: 16px; color: #0860c4; } .lightbox .lightbox-inner textarea { width: 100%; height: 100px; } .lightbox .lightbox-inner .edit-pull-quote textarea { height: auto; } .lightbox .lightbox-inner .edit-pull-quote span { padding-left: 10px; } .lightbox .lightbox-inner > footer { border-bottom-radius: 3px; clear: both; overflow: auto; background-color: #eee; padding: 15px 20px; } @media only screen and (max-width: 599px) { .lightbox { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; } .lightbox .lightbox-inner { width: 100%; } .lightbox .lightbox-inner footer { padding: 12px; } } #masthead { padding-top: 5px; } .region_global #masthead .masthead-home-link:after { position: absolute; top: 5px; color: #d8352a; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; text-transform: uppercase; font-weight: bold; left: 100%; padding-left: 20px; white-space: nowrap; content: "Global Perspectives"; } /** [Name] Navigation [Section] Page furniture [Description] The ```primary``` navigation of The Conversation. This is also the home of miscellaneous changes when a feature section requires flashy active / highlight status. **/ #primary-navigation { position: relative; } #primary-navigation:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } #primary-navigation ol { float: left; list-style: none; margin-bottom: -4px; z-index: 3; width: 100%; } #primary-navigation li { float: left; margin-right: 0.8em; } #primary-navigation li:last-child { margin-right: 0; } #primary-navigation li.custom-nav-link { float: right; margin-left: 20px; } #primary-navigation a { border-bottom: 5px solid transparent; color: #444; display: block; float: left; font-size: 13px; font-weight: bold; line-height: 26px; margin-bottom: -1px; padding-bottom: 5px; } #primary-navigation a:hover, #primary-navigation a.current { border-color: #d8352a; color: #d8352a; text-decoration: none; } #primary-navigation span span { color: #999; } @media only screen and (min-width: 1466px) { #primary-navigation li { margin-right: 1.2em; } #primary-navigation a { font-size: 14px; } } .region_fr #primary-navigation .data { position: relative; } .region_fr #primary-navigation .data a:before, .region_fr #primary-navigation .data a:after { bottom: -1px; content: ""; height: 0; position: absolute; z-index: 4; } .region_fr #primary-navigation .data a:before { background-color: #f5a623; border-top: 5px solid #f5a623; left: 0; width: 66%; } .region_fr #primary-navigation .data a:after { background-color: #50e3c2; border-top: 5px solid #50e3c2; right: 0; width: 33%; } .region_uk #primary-navigation .brexit { position: relative; } .region_uk #primary-navigation .brexit a:after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 0; z-index: 4; background-color: #ffcc00; border-top: 5px dashed #003399; } .newsletter-signup-form form.submitting .spinner-icon { display: block; } .newsletter-signup-form form.success .success-icon { color: #096; display: block; } .newsletter-signup-form form.failure .failure-icon { color: #f36; display: block; } .newsletter-signup-form form.failure .email { border-color: #f36; } .newsletter-signup-form .spinner-icon, .newsletter-signup-form .success-icon, .newsletter-signup-form .failure-icon { position: absolute; top: 8px; right: 12px; font-size: 16px; display: none; } .newsletter-signup-form .subscribe-email-label { display: block; height: 0; text-indent: -10000px; } .newsletter-signup-form .field-wrapper { position: relative; overflow: hidden; padding-right: 20px; } .newsletter-signup-form fieldset.newsletters { padding-bottom: 10px; } .newsletter-signup-form .email { -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1) inset; margin-top: 0; font-size: 13px; line-height: 16px; padding: 5px 10px; height: 35px; width: 100%; float: none; } .newsletter-signup-form .email:focus { outline: none; border-color: #999; } .newsletter-signup-form .button { padding: 8px 10px 9px; font-size: 12px; float: right; text-align: center; -webkit-appearance: none; } @media only screen and (max-width: 599px) { .newsletter-signup-form form fieldset.regions, .newsletter-signup-form form fieldset.newsletters { width: 100%; } .newsletter-signup-form form fieldset.regions select, .newsletter-signup-form form fieldset.newsletters select { width: 100%; } } .subscription-newsletter-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 40px; } .subscription-newsletter { background: #fafafa; -webkit-box-flex: 0; -webkit-flex: 0 1 436px; -ms-flex: 0 1 436px; flex: 0 1 436px; line-height: 1.45; margin-bottom: 20px; padding: 20px; } .subscription-newsletter:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .subscription-newsletter:nth-child(odd) { margin: 0 10px 20px 0; } .subscription-newsletter:nth-child(even) { margin: 0 0 20px 10px; } .subscription-newsletter-logo { background: #fff; border: 1px solid #eee; float: left; margin-right: 20px; width: 104px; } .subscription-newsletter-name { display: block; font-size: 20px; margin-bottom: 0; } .subscription-newsletter-region-name { display: block; font-size: 16px; font-weight: normal; } .subscription-newsletter-frequency { color: #999; } .subscription-newsletter-blurb { clear: both; padding: 20px 0; } .subscription-newsletter-previous-newsletters { clear: both; padding: 0 0 20px 0; } .subscription-newsletter-status { position: relative; } .subscription-newsletter-form label { display: block; height: 0; text-indent: -10000px; } .subscription-newsletter-form .field-wrapper { overflow: hidden; padding-right: 20px; } .subscription-newsletter-form .button { -webkit-box-sizing: border-box; box-sizing: border-box; float: right; height: 35px; padding: 0 18px; margin: 0; } .subscription-newsletter-form .email { width: 100%; height: 35px; padding: 5px 10px; } /** [Name] Page addendum [Section] Page furniture [Description] The addendum block sits below all content pieces, and has related / sitewide links to different items across TC. Depending on the region, what appears there will change, e.g. As Australia has Jobs and Events, but the US doesn't the US will have other elements to go in there (Expert search / want to write) [Example]

Most popular on The Conversation

Jobs

Events

**/ .page-addendum { padding: 48px 0; } .page-addendum .most-popular ul { margin-top: 12px; float: left; width: 50%; } .page-addendum .most-popular li { padding-right: 10px; list-style-type: none; margin-bottom: 12px; } .page-addendum .most-popular ul + ul li { padding-right: 0; padding-left: 10px; } .page-addendum .research-and-expert-database label { display: block; margin-bottom: 12px; } .page-addendum .research-and-expert-database .inputs input { display: block; width: 100%; } .page-addendum .research-and-expert-database h3 { position: relative; } .page-addendum .research-and-expert-database h3 i { position: absolute; right: 0; top: 0; height: 19px; width: 28px; font-size: 24px; color: #d8352a; } .page-addendum .jobs li { padding: 15px 0; } #layout .blockset article:hover { background: rgba(255, 255, 255, 0.4); } #layout .blockset article figure .article-link { min-height: 200px; } .blocks:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } @media only screen and (max-width: 599px) { .blocks { margin: 0 -10px 20px !important; } } #page-area-editors-picks .article--header { padding: 10px; } #page-area-editors-picks .article--header h2 { margin: 0; } .blockset article { position: relative; overflow: hidden; margin-bottom: 20px; } .blockset article h4 { position: absolute; top: 10px; font-size: 11px; font-style: italic; font-weight: normal; background-color: #d8352a; color: #fff; z-index: 3; -webkit-box-shadow: 0 3px 0 #8a211e; box-shadow: 0 3px 0 #8a211e; left: 0; padding: 3px 10px 3px 10px; line-height: 18px; letter-spacing: normal; text-transform: none; } .blockset article h4:after { content: ''; position: absolute; display: block; top: 0; border: 1.1em solid #d8352a; z-index: 2; -webkit-box-shadow: 0 3px 0 #8a211e; box-shadow: 0 3px 0 #8a211e; right: -1em; border-left-width: 0.6em; border-right-color: transparent; } .blockset article input#inline-editing { position: absolute; top: 10px; width: 150px; left: 0; } @media only screen and (max-width: 599px) { .blockset article { margin: 0 !important; } } .blockset article time { display: none; } .blockset article .article--header { bottom: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; position: absolute; width: 100%; } .blockset article header { width: 100%; } .blockset article header a, .blockset article header a:hover, .blockset article header a:visited, .blockset article header a:active { color: #fff; } .blockset article header h2 { margin-bottom: 6px; width: 100%; } .blockset article header h2 a { line-height: 1.2; margin: 0; } .blockset article header h2 a, .blockset article header .byline { text-shadow: 0 0 10px #000; } .blockset article header .byline { color: #fff; display: none; line-height: 1; } .blockset article .content { display: none; } .blockset article figure { width: 100%; height: 100%; } .blockset article figure a.article-link { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.65))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); display: block; } .ie7 .blockset article figure a.article-link, .ie8 .blockset article figure a.article-link, .ie9 .blockset article figure a.article-link { background: url(/assets/ie-gradient-block-background-1fe70ef1525e416932c801fda73b713a.png) bottom repeat-x; } .blockset article figure a.article-link img { z-index: -1; max-width: 100%; display: block; background: #444; position: relative; } .blockset article figure figcaption { display: none; } .blockset article figure figcaption span { display: none; } .blockset article.gallery figure figcaption { display: block; } .blockset article.gallery figure figcaption span { display: block; } .blockset article.gallery .content { display: block; } html.ie7 .blocks-bull, html.ie7 .blocks-3x2, html.ie7 .blocks-2x2, html.ie7 .blocks-2x1, html.ie7 .blocks-1x1 { margin-bottom: 20px; } .blockset { margin-bottom: 0; } .blockset:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .blockset .block:last-child { margin-right: 0; } .blocks-3x2 article { width: 724px; float: left; margin-right: 20px; } .blocks-3x2 article header h2 { font-size: 30px; } @media only screen and (max-width: 599px) { .blocks-3x2 article header h2 { width: 100%; font-size: 20px; } } @media only screen and (min-width: 1466px) { .blocks-3x2 article header h2 { font-size: 40px; } } .blocks-3x2 article header h2 a { bottom: 24px; } .blocks-3x2 article header .byline { display: block; } @media only screen and (min-width: 1466px) { .blocks-3x2 article { width: 1012px; } } @media only screen and (max-width: 599px) { .blocks-3x2 article { width: 100%; } } .blocks-2x2 article { width: 476px; float: left; margin-right: 20px; } .blocks-2x2 article header h2 { font-size: 30px; } @media only screen and (max-width: 599px) { .blocks-2x2 article header h2 { width: 100%; font-size: 20px; } } @media only screen and (min-width: 1466px) { .blocks-2x2 article header h2 { font-size: 40px; } } .blocks-2x2 article header h2 a { bottom: 24px; } .blocks-2x2 article header .byline { display: block; } @media only screen and (min-width: 1466px) { .blocks-2x2 article { width: 668px; } } @media only screen and (max-width: 599px) { .blocks-2x2 article { width: 100%; } } .blocks-2x1 article { width: 476px; float: left; margin-right: 20px; } .blocks-2x1 article header h2 { font-size: 26px; } @media only screen and (max-width: 599px) { .blocks-2x1 article header h2 { width: 100%; font-size: 20px; } } @media only screen and (min-width: 1466px) { .blocks-2x1 article header h2 { font-size: 32px; } } @media only screen and (min-width: 1466px) { .blocks-2x1 article { width: 668px; } } @media only screen and (max-width: 599px) { .blocks-2x1 article { width: 100%; } } .blocks-1x1 article { width: 228px; float: left; margin-right: 20px; } .blocks-1x1 article header h2 { font-size: 15px; } @media only screen and (min-width: 1466px) { .blocks-1x1 article header h2 { font-size: 22px; } } @media only screen and (max-width: 599px) { .blocks-1x1 article header h2 { font-size: 12px; } } .blocks-1x1 article.gallery figure figcaption { display: block; } .blocks-1x1 article.gallery figure figcaption span { display: none; } .blocks-1x1 article.gallery .content { display: block; bottom: 2px; right: 8px; } @media only screen and (max-width: 599px) { .blocks-1x1 article { width: 50%; } } @media only screen and (min-width: 1466px) { .blocks-1x1 article { width: 324px; } } /** [Name] 1 bull [Section] Placements [Example]
**/ .blocks-bull article { width: 100%; } .blocks-bull article header h2 { width: 75%; font-size: 46px; } @media only screen and (max-width: 599px) { .blocks-bull article header h2 { width: 100%; font-size: 20px; } } @media only screen and (min-width: 1466px) { .blocks-bull article header h2 { font-size: 66px; } } .blocks-bull article header h2 a { bottom: 24px; } .blocks-bull article header .byline { display: block; } .blocks-bull .page-area { width: 100%; } .blocks-bull .page-area article { margin-right: 0; } @media only screen and (max-width: 599px) { .blocks-bull article figure a.article-link img { max-width: 200%; width: 200%; margin-left: -50%; } } /** [Name] 1 medium bull, 2 quarter page [Section] Placements [Example]
<% 2.times.each do |item| %> <% end %>
**/ .blocks-1x3x2-2x1x1:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .blocks-1x3x2-2x1x1 .blocks-1x1 article { margin-right: 0; } /** [Name] 2 half page [Section] Placements [Example]
<% 2.times.each do |item| %> <% end %>
**/ .blocks-2x2x2:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .blocks-2x2x2 .blocks-2x2 article + article { margin-right: 0; } /** [Name] 1 half page, 4 quarter blocks [Section] Placements [Example]
<% 4.times.each do |item| %> <% end %>
**/ .blocks-1x2x2-4x1x1:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .blocks-1x2x2-4x1x1 .blocks-1x1 article + article, .blocks-1x2x2-4x1x1 .blocks-1x1 article + article + article + article { margin-right: 0; } .blocks-1x2x2-4x1x1 .blocks-1x1 article + article + article { margin-right: 20px; } /** [Name] 2 quarter blocks, 1 double block [Section] Placements [Example]
<% 2.times.each do |item| %> <% end %>
**/ .blocks-2x1x1-1x2x1:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .blocks-2x1x1-1x2x1 .blocks-1x1 article + article { margin-right: 0; } .blocks-2x1x1-1x2x1 .blocks-2x1 article { margin-right: 0; } /** [Name] 4 quarter blocks [Section] Placements [Example]
<% 4.times.each do |item| %> <% end %>
**/ .blocks-4x1x1:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .blocks-4x1x1 .blocks-1x1 article + article + article + article { margin-right: 0; } /** [Name] quarter blocks vertical [Section] Placements [Description] Used on the article page, on the right hand sidebar for related content. ### NOTE: It really should be maximum ```grid-four```, and minimum ```grid-three```. [Example]
<% 4.times.each do |item| %> <% end %>
**/ .blocks-1x1-vertical:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .blocks-1x1-vertical .blocks-1x1 article { width: 100%; margin-right: 0; } .blocks-1x1-vertical .blocks-1x1.slammed h2 a { padding: 0; font-size: 13px; } @media only screen and (min-width: 1466px) { .blocks-1x1-vertical .blocks-1x1.slammed h2 a { font-size: 18px; } } .region-select { background: #fff; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #bbb; float: left; height: 28px; margin-right: 10px; margin: 10px 10px 0 0; overflow: hidden; position: relative; width: 140px; } .region-select:after { bottom: 0; content: "\F054"; color: #ccc; font-family: "TCFont-Regular"; line-height: 2; position: absolute; right: 10px; top: 0; } .region-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; -moz-outline: none; -moz-user-focus: none; background: transparent; border: none; -webkit-box-shadow: none; box-shadow: none; color: #333; display: block; font-size: inherit; height: 28px; outline: none; padding: 5px 7px; position: absolute; text-indent: 0.01px; -o-text-overflow: ''; text-overflow: ''; width: 120%; z-index: 1; } .region-select select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } .region-select select::-ms-expand { display: none; } /** [Name] Search [Section] Page furniture [Description] The search block styles are used for most, if not all, the search fields on TC. The homepage / the search page / the dashboard search all share common styles. **/ .search-form legend { display: none; } .search-form .input-wrapper { position: relative; } .search-form .input-wrapper label, .search-form .input-wrapper input[type="text"] { display: block; font-size: 12px; line-height: 16px; } .search-form .input-wrapper label { color: #999; padding: 8px 0 0 12px; position: absolute; z-index: 3; } .search-form .input-wrapper label i:before { color: #999; font-size: 14px; left: -4px; position: relative; top: 0; } .search-form .input-wrapper input[type="text"] { background-color: #fff; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #aaa; min-width: 280px; padding: 7px 6px 6px 26px; position: relative; } .search-form .input-wrapper input[type="text"]:focus { border-color: #555; outline: none; } @-webkit-keyframes showNavSidebar { from { -webkit-transform: translate3D(-100%, 0, 0); transform: translate3D(-100%, 0, 0); } to { -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); } } @keyframes showNavSidebar { from { -webkit-transform: translate3D(-100%, 0, 0); transform: translate3D(-100%, 0, 0); } to { -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); } } @-webkit-keyframes hideNavSidebar { from { -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); width: 80%; } to { -webkit-transform: translate3D(-100%, 0, 0); transform: translate3D(-100%, 0, 0); width: 80%; } } @keyframes hideNavSidebar { from { -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); width: 80%; } to { -webkit-transform: translate3D(-100%, 0, 0); transform: translate3D(-100%, 0, 0); width: 80%; } } #small-sidebar { background: #5d5d5d; display: none; height: 100%; overflow-y: auto; position: absolute; top: 0; width: 0; z-index: 101; -webkit-overflow-scrolling: touch; } #small-sidebar.visible { -webkit-animation: showNavSidebar 0.35s cubic-bezier(0.725, 0.67, 0.2, 1.185); animation: showNavSidebar 0.35s cubic-bezier(0.725, 0.67, 0.2, 1.185); width: 80%; margin-left: -50px; padding-left: 50px; } #small-sidebar.hidden { -webkit-animation: hideNavSidebar 0.35s ease-in-out; animation: hideNavSidebar 0.35s ease-in-out; } #small-sidebar-open-button { cursor: pointer; display: none; line-height: normal; position: absolute; padding: 12px; top: auto; z-index: 100; } #small-sidebar-close-button { color: #fff; cursor: pointer; font-size: 0.9em; font-weight: normal; line-height: 24px; margin: -10px; padding: 9px 12px 6px 12px; position: absolute; right: 10px; top: 10px; -webkit-tap-highlight-color: transparent; } .small-sidebar-editions .region-select { border: none; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; width: 100%; height: 33px; } .small-sidebar-editions .region-select:after { right: 5px; top: -2px; } .small-sidebar-editions select { height: 33px; font-size: 15px; padding: 0 4px; } #small-sidebar-search form { position: relative; } #small-sidebar-search input { -webkit-border-radius: 4px; border-radius: 4px; border: none; font-size: 15px; height: 33px; width: 100%; } #small-sidebar-search button { -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; background: #841f18; border: none; -webkit-border-radius: 2px; border-radius: 2px; color: #fff; cursor: pointer; height: 29px; padding: 7px 0; position: absolute; right: 2px; top: 2px; width: 33px; } #small-sidebar-search button:hover, #small-sidebar-search button.focus { background: #d8352a; } .small-sidebar-group { padding: 10px; } .small-sidebar-group:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .small-sidebar-group + .small-sidebar-group { margin-top: 10px; } .small-sidebar-group h3 { border-bottom: 1px solid #f6f6f6; color: #f6f6f6; font-size: 17px; font-weight: normal; line-height: 1; margin: 3px 0 20px; padding: 0 0 10px 0; } .small-sidebar-group h3:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .small-sidebar-group ul { list-style: none; } .small-sidebar-group li { margin: 5px 0 0; } .small-sidebar-group a { background: rgba(255, 255, 255, 0.1); color: #f6f6f6; display: block; font-size: 15px; line-height: 1; padding: 8px 25px 8px 7px; position: relative; } .small-sidebar-group a.active { color: #f6f6f6; background-color: #841f18; } .small-sidebar-group a:hover { color: #fff; } .small-sidebar-group .icon-chevron-right { font-size: 14px; line-height: 1; position: absolute; right: 2px; top: 10px; } #small-sidebar-overlay { background: rgba(0, 0, 0, 0.3); display: block; height: 100%; left: 0; position: absolute; top: 0; width: 0; z-index: 99; -webkit-tap-highlight-color: transparent; } #small-sidebar-overlay.visible { -webkit-animation: showOverlay 0.35s ease-in-out; animation: showOverlay 0.35s ease-in-out; width: 100%; } #small-sidebar-overlay.hidden { -webkit-animation: hideOverlay 0.35s ease-in-out; animation: hideOverlay 0.35s ease-in-out; } @media only screen and (max-width: 319px) { .small-sidebar-group a { font-size: 12px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .small-sidebar-group .icon-chevron-right { font-size: 12px; } } @media only screen and (max-width: 599px) { #small-sidebar, #small-sidebar-open-button { display: block; } } @media only screen and (max-width: 599px) { #topbar .topbar-account-nav .dashboard, #topbar .topbar-account-nav .metrics { display: none; } } /** [Name] Topic list [Section] Widgets [Description] Topic lists are used, unsurprisingly, to show a list of topics. One day, we'll have one style for all list of topics. Today is not that day. This is currently used on the bottom of articles showing what topics it's tagged with, and on topics#show to show related articles. It's not yet used for 'hot' topics. [Example]
**/ .topic-list:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .topic-list .icon-tag { float: left; top: 0; margin-right: 5px; } .topic-list-item { list-style: none; float: left; } .topic-list-item a { background-color: #eee; -webkit-border-radius: 2px; border-radius: 2px; color: #555; display: block; font-size: 11px; font-weight: bold; margin: 0 6px 6px 0; padding: 0 6px; text-decoration: none; white-space: nowrap; } .topic-list-item a:hover { background-color: #d8352a; color: #fff; } .live-user-list { list-style-type: none; } .live-user-list li { border-bottom: 1px solid #f2f2f2; margin-bottom: 12px; padding-bottom: 12px; } .live-user-list li > a, .live-user-list li > a:link, .live-user-list li > a:visited, .live-user-list li > a:hover, .live-user-list li > a:active { display: block; position: relative; } .live-user-list li > a:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 5px; border-radius: 5px; content: ""; display: block; width: 8px; height: 8px; position: absolute; top: -6px; left: -2px; border: 1px solid #707070; background-color: #999999; } .live-user-list li.green > a:after { -webkit-box-shadow: 0 0 10px 0 #00f94b, 0 0 0 2px white; box-shadow: 0 0 10px 0 #00f94b, 0 0 0 2px white; background-color: #00f94b; border-color: #0acc44; } .live-user-list li.yellow > a:after { -webkit-box-shadow: 0 0 10px 0 #f9a400, 0 0 0 2px white; box-shadow: 0 0 10px 0 #f9a400, 0 0 0 2px white; background-color: #f9a400; border-color: #b98d1e; } .live-user-list li.red > a:after { -webkit-box-shadow: 0 0 10px 0 #f90000, 0 0 0 2px white; box-shadow: 0 0 10px 0 #f90000, 0 0 0 2px white; background-color: #f90000; border-color: #c41e2c; } .deadline span.overdue { color: #d24027; } .suggestions { -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #eee; border-bottom: 1px solid #ccc; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #ddd; color: #666; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; line-height: normal; list-style-type: none; padding: 6px 3px; position: absolute; white-space: nowrap; z-index: 5; } .suggestions li, .suggestions a { -webkit-border-radius: 3px; border-radius: 3px; background-color: #fff; color: #666; cursor: pointer; display: inline-block; margin: 0 3px; padding: 6px 12px; border-bottom: 1px solid #ddd; } .suggestions li:hover, .suggestions a:hover { border-bottom-color: #1e68e6; background-color: #3388ee; color: #fff; } /** [Name] Success Message [Section] Widgets [Description] A large grey box with a whopping big green tick! FOR GREAT SUCCESS! ![Great Success](http://media.giphy.com/media/ZP4jnpcaMT51C/giphy.gif) [Example]

Next, check your email—we've sent you instructions to activate your account.

If the email does not arrive within the next hour, please double check your spam or junk mail folder.

**/ .success-message { -webkit-border-radius: 4px; border-radius: 4px; background: #fafafa; padding: 60px 20px; text-align: center; } .success-message i { color: #a6ce39; font-size: 200px; padding-top: 100px; padding-bottom: 100px; } /** [Name] Spinners [Section] Widgets [Description] A lovely spinner that scales with font-size. If you put it elements with a bigger font it will scale appropriately! - ```.big``` - It's big! (no effect inside buttons) - ```.centered``` - Center the spinner within it's parent (no effect inside buttons) [Example]
Your thing is loading

It's loading!

**/ .yet-another-spinner { -webkit-animation: spin 0.8s infinite linear; animation: spin 0.8s infinite linear; display: block; width: 2ex; height: 2ex; margin-top: -0.15ex; margin-left: 0.75ex; margin-right: 0.75ex; float: left; border: 0.5ex solid #d9f3fc; border-top: 0.5ex solid #33bef2; -webkit-border-radius: 100%; border-radius: 100%; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } .yet-another-spinner.hidden { opacity: 0; } .yet-another-spinner.big { font-size: 300%; } .yet-another-spinner.centered { position: absolute; top: 50%; left: 50%; float: none; margin-top: -1.5ex; margin-left: -1.5ex; } .yet-another-spinner.fixed { position: fixed; top: 50%; left: 50%; float: none; margin-top: -1.5ex; margin-left: -1.5ex; } .button .yet-another-spinner { position: static; font-size: 80%; margin-top: 0.1ex; margin-left: -1.55ex; margin-right: 0.75ex; float: left; } .button.large .yet-another-spinner { font-size: 90%; margin-top: 0; margin-left: -1ex; } .button.x-large .yet-another-spinner { font-size: 90%; margin-top: -0.55ex; margin-left: -1.2ex; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /** [Name] Toggle [Section] Widgets [Description] Functionality for simple showing/hiding of content without JS. Both checkbox and label are required, but there can be any content between the label and .toggle-content [Example]

Samuel sez

Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?
**/ .toggle input[type="checkbox"] { display: none; } .toggle input[type="checkbox"]:checked ~ label .hide { display: block; } .toggle input[type="checkbox"]:checked ~ label .show { display: none; } .toggle input[type="checkbox"]:checked ~ .toggle-content { display: block; } .toggle input[type="checkbox"] ~ label .hide { display: none; } .toggle input[type="checkbox"] ~ label .show { display: block; } .toggle input[type="checkbox"] ~ .toggle-content { display: none; } .newform .toggle input[type="checkbox"] { display: none !important; } .newform .toggle input[type="checkbox"]:checked ~ label .hide { display: inline; } .newform .toggle input[type="checkbox"]:checked ~ label .show { display: none; } .newform .toggle input[type="checkbox"]:checked ~ .toggle-content { display: inline; } .newform .toggle input[type="checkbox"] ~ label { width: auto; float: none; display: inline; padding: 0; color: #069; font-weight: normal; } .newform .toggle input[type="checkbox"] ~ label .hide { display: none; } .newform .toggle input[type="checkbox"] ~ label .show { display: inline; } .newform .toggle input[type="checkbox"] ~ .toggle-content { display: none; } /** [Name] Drop zone [Section] Widgets [Description] Simple drop zone template for uploads. [Example]
Drop file here to upload, or click to select.
**/ .drop-zone { position: relative; text-align: center; } .drop-zone input[type="file"] { height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } .drop-zone .drop-zone-label { -webkit-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; background: #eee; border: 1px solid #888; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer; opacity: 0.6; padding: 5px; } @media only screen and (max-width: 599px) { .drop-zone .drop-zone-label { font-size: 13px; line-height: 18px; } } .drop-zone .drop-zone-label.hover, .drop-zone .drop-zone-label:hover { opacity: 0.9; } .drop-zone .drop-zone-label div { border: 1px dashed #888; padding: 20px; } .ie9 .drop-zone { height: 50px; } .ie9 .drop-zone input { background-color: #fff !important; -webkit-filter: none !important; filter: none !important; opacity: 1 !important; } .ie9 .drop-zone .drop-zone-label { display: none; } ul.autocomplete { background-color: #fff; list-style: none; border: 1px solid #ccc; -webkit-border-radius: 3px; border-radius: 3px; margin-top: 3px; max-width: 500px; z-index: 10000; } .autocomplete-item { color: #666; padding: 8px; cursor: pointer; } .autocomplete-item:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .autocomplete-item.selected { background-color: #3388ee; color: #fff; } .autocomplete-item.selected h3 { color: #fff; } .autocomplete-item.selected p { color: #cdeeff; } .chooser-view { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 30px; overflow: visible; position: relative; cursor: pointer; z-index: 1; } .chooser-view i { color: #999; line-height: 30px; position: absolute; right: 0; } .chooser-view i.opened { display: none; } .chooser-view i.closed { display: block; } .chooser-view .chooser-view-autocomplete-wrapper { display: none; position: relative; } .chooser-view .chooser-view-selection-pane { background: #fafafa -webkit-linear-gradient(top, #fafafa 0, #fafafa 30px, white 60px); background: #fafafa -o-linear-gradient(top, #fafafa 0, #fafafa 30px, white 60px); background: #fafafa linear-gradient(to bottom, #fafafa 0, #fafafa 30px, white 60px); -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #bbb; -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; padding: 6px 6px 0; position: absolute; left: 0; right: 0; -webkit-transition: -webkit-box-shadow 1s; transition: -webkit-box-shadow 1s; -o-transition: box-shadow 1s; transition: box-shadow 1s; transition: box-shadow 1s, -webkit-box-shadow 1s; } .chooser-view .chooser-view-selection-pane .autocomplete { border: none; max-width: none; width: auto; -webkit-border-radius: 0; border-radius: 0; max-height: 300px; overflow-y: auto; margin: 6px -6px 0; } .chooser-view .chooser-view-selection-pane .autocomplete li { margin: 0; padding: 6px 12px; } .chooser-view .chooser-view-title { display: block; padding-bottom: 6px; } .chooser-view input { display: block; margin-top: 6px; margin-bottom: 6px; background-color: #fff; width: 100%; } .chooser-view.open i.opened { display: block; } .chooser-view.open i.closed { display: none; } .chooser-view.open .chooser-view-autocomplete-wrapper { display: block; } .chooser-view.open .chooser-view-selection-pane { -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2); } .error .chooser-view .chooser-view-selection-pane { border-color: #ea3838; } form.newform fieldset.inputs .chooser-view { width: 75%; float: left; } form.newform fieldset.inputs .chooser-view .autocomplete { margin-top: 0; } form.newform fieldset.inputs .chooser-view .autocomplete li { width: auto; } form.newform fieldset.inputs .chooser-view input { width: 100%; padding: 5px; margin: 0 0 6px; float: none; font-size: 13px; line-height: normal; } /** [Name] Pill Navigation [Section] Widgets [Description] The pill navigation is used on the Our Team pages. [Example] **/ nav.pill { float: left; margin-bottom: 36px; } nav.pill ul { margin: 0; } nav.pill li { float: left; margin: 0 0 2px 0; padding-right: 0; } nav.pill li:first-child { border-left: 0; margin-right: 2px; } nav.pill li:last-child { border-right: 0; } nav.pill li + li { margin-right: 2px; } nav.pill a { background-color: #eee; -webkit-border-radius: 2px; border-radius: 2px; color: #666; display: block; font-size: 12px; padding: 6px 10px; } nav.pill a:hover { color: #fff; background-color: #d8352a; } @media only screen and (max-width: 599px) { nav.pill { width: 100%; } nav.pill li { float: none; } } @media only screen and (max-width: 319px) { nav.pill { width: 100%; } nav.pill li { float: none; } } /** [Name] Step progression indiator [Section] Widgets [Description] Used to indicate which step of a multi step process a user is on. Optionally, you can display the step number in a span. [Example]
  1. 1.Buy bean sprouts
  2. 2.Cook bean sprouts
  3. 3.Eat bean sprouts
  4. 4.Enjoy bean sprouts
**/ ol.step-progression { background-color: #f6f6f6; -webkit-box-shadow: 4px 0 2px 0 #ddd inset; box-shadow: 4px 0 2px 0 #ddd inset; display: table; list-style: none; margin: 0; table-layout: fixed; width: 100%; overflow: hidden; } ol.step-progression .step-number { margin-right: 1em; } ol.step-progression li { color: #aaa; display: table-cell; font-size: 11px; font-weight: bold; line-height: 48px; padding-left: 20px; position: relative; text-transform: uppercase; z-index: 1; } ol.step-progression li.complete { background-clip: padding-box; background-color: #fff; color: #ccc; } ol.step-progression li.active { background-clip: padding-box; background-color: #fff; border-right: 22px solid transparent; color: #999; } ol.step-progression li.active:before { background-color: #fff; -webkit-box-shadow: 5px -5px 4px -5px #ddd; box-shadow: 5px -5px 4px -5px #ddd; content: ""; display: block; height: 34px; position: absolute; right: -17px; top: 7px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 34px; z-index: -1; } ol.step-progression li.active:last-child { border-right: none; } ol.step-progression li.active:last-child:before { display: none; } /** [Name] Large tooltip [Section] Widgets [Description] Used only in the comments section at the moment, it is meant to be a tooltip or context infobox, for situations where rich content needs to be displayed, e.g. forms, and not just a simple text line. Since this is set absolute, it needs to be correctly positioned after initialised. Optionally, you can add arrow icons by adding classes - `.arrow-top` - `.arrow-right` - `.arrow-bottom` - `.arrow-left` [Example] <% ['', 'arrow-top', 'arrow-right', 'arrow-bottom', 'arrow-left'].each do |direction| %>

Notification settings

<% end %> **/ .large-tooltip { background-color: #fff; -webkit-border-radius: 2px; border-radius: 2px; border: 2px solid #bbb; margin-bottom: 6px; padding: 8px 10px; position: absolute; width: 300px; z-index: 1; } .large-tooltip:after, .large-tooltip:before { border: solid transparent; content: " "; height: 0; pointer-events: none; position: absolute; width: 0; } .large-tooltip.arrow-top:after, .large-tooltip.arrow-top:before { bottom: 100%; left: 50%; } .large-tooltip.arrow-top:after { border-bottom-color: #fff; border-width: 13px; margin-left: -13px; } .large-tooltip.arrow-top:before { border-bottom-color: #bbb; border-width: 16px; margin-left: -16px; } .large-tooltip.arrow-right:after, .large-tooltip.arrow-right:before { left: 100%; top: 50%; } .large-tooltip.arrow-right:after { border-left-color: #fff; border-width: 13px; margin-top: -13px; } .large-tooltip.arrow-right:before { border-left-color: #bbb; border-width: 16px; margin-top: -16px; } .large-tooltip.arrow-right.arrow-right-top:after, .large-tooltip.arrow-right.arrow-right-top:before { left: 100%; top: 26px; } .large-tooltip.arrow-bottom:after, .large-tooltip.arrow-bottom:before { top: 100%; left: 50%; } .large-tooltip.arrow-bottom:after { border-top-color: #fff; border-width: 13px; margin-left: -13px; } .large-tooltip.arrow-bottom:before { border-top-color: #bbb; border-width: 16px; margin-left: -16px; } .large-tooltip.arrow-left:after, .large-tooltip.arrow-left:before { right: 100%; top: 50%; } .large-tooltip.arrow-left:after { border-right-color: #fff; border-width: 13px; margin-top: -13px; } .large-tooltip.arrow-left:before { border-right-color: #bbb; border-width: 16px; margin-top: -16px; } .large-tooltip h4 { border-bottom: 1px solid #ccc; } .large-tooltip p { font-weight: normal; } .large-tooltip.hidden { display: none; } body.not-found .masthead-search { display: none; } body.not-found #primary-navigation { display: none; } body.not-found #topics { display: none; } body.not-found #outer { padding-top: 0; } body.not-found .not-found-message { background: transparent url(/assets/search/shadow-a9d7fa7cf4d373ba4e525012f8b2787e.png) bottom center no-repeat; padding: 42px 0; margin-bottom: 60px; } body.not-found .not-found-message:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } body.not-found h3 { color: #999; } body.not-found .search-form { padding-bottom: 42px; } body.not-found .search-form:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } body.not-found .search-form label, body.not-found .search-form input[type="text"] { font-size: 24px; font-weight: bold; line-height: 30px; } body.not-found .search-form label { display: block; padding: 21px 0 0 20px; } body.not-found .search-form label i:before { font-size: 24px; color: #999; } body.not-found .search-form input[type="text"] { width: 100%; padding: 17px 16px 16px 54px; } body.not-found .search-form .button { visibility: hidden; position: absolute; } body.not-found .search-form nav { padding-top: 6px; } body.not-found .search-form .search-suggestions { color: #999; margin-bottom: 0; margin-top: 0; margin-right: 180px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } body.not-found .search-form .search-suggestions a { font-weight: bold; } body.not-found .search-form .follow-topics { color: #999; display: block; float: right; text-align: right; width: 165px; } body.not-found .search-form .follow-topics a { font-weight: bold; } body.not-found .content-related-articles { clear: left; } /* Pages */ #comments-container { background: #eee url(/assets/comments/inner-shadow-4668783a91ff7c7ea554c5f3fff2f1eb.png) no-repeat top center; -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) inset; border-top: 1px solid #ccc; clear: both; } #comments-container .comments-side { float: right; } .comments-section-view { padding-bottom: 36px; padding-top: 36px; } .comments-section-view ol { list-style-type: none; } .comments-section-view h2 { font-size: 28px; line-height: normal; text-shadow: 0 1px 0 #fff; } .comments-section-view .comment-sorting { text-align: center; background: transparent url(/assets/comments/divider-c2db1f850483cf66a77bdf5d156d18b3.png) no-repeat right; -webkit-box-shadow: 140px 1px 20px -125px #eee inset; box-shadow: 140px 1px 20px -125px #eee inset; } .comments-section-view .tabbed-button-group { display: inline-block; } .comments-section-view .comments-list-view > .comment-view > .comment-replies { margin-left: 60px; } .comments-section-view .comment-count { padding-left: 45px; position: relative; } .comments-section-view .number-of-comments { color: #fff; display: block; width: 42px; text-align: center; text-shadow: none; position: absolute; left: 0; top: -1px; } .comments-section-view .comments-count-sort { position: relative; font-size: 18px; font-weight: bold; line-height: 24px; text-shadow: 0 1px 0 #fff; } .comments-section-view .comments-count-sort i { color: #333; position: absolute; font-size: 42px; left: 0; top: 2px; } .comments-section-view .comments-show-all { clear: both; text-align: center; } .comments-section-view .comments-show-all .button { margin-top: 36px; } .comments-section-view .information { margin-bottom: 0; } .comments-section-view .information.closed { display: none; margin-top: 30px; } .comments-section-view .comments-actions-view .button.open { display: none; } .comments-section-view.closed #comment-form-reply { display: none; } .comments-section-view.closed .comments-actions-view .button.new { display: none; } .comments-section-view.closed .comments-actions-view .button.close { display: none; } .comments-section-view.closed .comments-actions-view .button.open { display: block; } .comments-section-view.closed .comment-recommends-view .button { display: none; } .comments-section-view.closed .comment-view .comment-reply { display: none; } .comments-section-view.closed .comment-sign-in.button { display: none; } .comments-section-view.closed .information.no-comments { display: none; } .comments-section-view.closed .information.closed { display: block; } .comments-section-view.loading { padding: 80px; } .comments-section-view.loading .comment-sorting, .comments-section-view.loading .comments-count-sort, .comments-section-view.loading .comments-side, .comments-section-view.loading .information.closed .comments-show-all { display: none; } .comments-section-view.loading .yet-another-spinner { border-color: #aaa transparent; border-width: 2px; font-size: 50px; margin-left: -1.1ex; top: 95px; } #comment-form-reply { clear: both; position: relative; padding-top: 18px; z-index: 2; } #comment-form-reply .information { margin-top: 6px; margin-bottom: 0; } #comment-form-reply .toggle-comment-help { float: right; color: #aaa; } #comment-form-reply .toggle-comment-help i { font-size: 18px; margin-right: 2px; margin-top: 2px; } #comment-form-reply .toggle-comment-help:hover { color: #888; } #comment-form-reply .toggle-comment-options { float: right; color: #aaa; } #comment-form-reply .toggle-comment-options i { font-size: 18px; } #comment-form-reply .toggle-comment-options:hover { color: #888; } #comment-form-reply .comment-form-reply-write { position: relative; top: -21px; } #comment-form-reply .comment-form-reply-preview { display: none; margin: 0 0 20px 0; padding: 20px 0 0 0; } #comment-form-reply .comment-form-reply-preview .loading { color: #727272; font-size: 0.9em; padding: 10px 0; text-align: center; } #comment-form-reply .comment-form-reply-preview .comment-view { padding-top: 10px; } #comment-form-reply > .tabbed { background-color: #eee; border-bottom: 1px solid #bbb; border-right: 2px solid #eee; height: 30px; position: relative; top: 7px; width: auto; z-index: 1; } #comment-form-reply > .tabbed.preview { width: 100%; } #comment-form-reply > .tabbed.preview .tab.active { background: #eee; } #comment-form-reply > .tabbed .tab { border-color: #bbb; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; font-size: 12px; height: 23px; padding: 6px 0 0; text-align: center; width: 90px; } #comment-form-reply > .tabbed .tab[href="#write"].textarea-focus { background-color: #fff; } #comment-form-reply > .tabbed .tab[href="#write"].textarea-blur { background-color: #fafafa; } #comment-form-reply .comment-form-reply-options { position: absolute; right: 0; top: 28px; z-index: 3; } .comment.preview header { margin-top: 28px !important; } .comment.preview header .preview-message { background-color: #ff8a00; -webkit-border-radius: 3px; border-radius: 3px; color: #fff; display: block; margin-bottom: 6px; padding: 6px 0; position: absolute; text-align: center; top: 0; width: 100%; } form#new_comment label { display: none; } form#new_comment .comment-errors { margin: 0; color: #ea3838; } form#new_comment .comment-errors p { margin: 0 0 1em; } form#new_comment .button.primary { float: right; } form#new_comment .community-standards-link { float: left; line-height: 24px; } form#new_comment textarea { background: #fafafa; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; height: 150px; margin-bottom: 8px; margin-top: 6px; padding: 15px 10px 10px; width: 100%; } form#new_comment textarea:focus { background: #fff; outline: 0; } form#new_comment textarea:active { border-color: #bbb; } .comments-section-view .comment-moderator-reason-view .button { margin: 0; } .comments-section-view .user-notification-settings-view { right: 40px; top: -39px; } .comments-section-view .user-notification-settings-view label { position: relative; top: 2px; } .comments-section-view .comment-formatting-help-view { right: 64px; top: -106px; } .comments-section-view .comment-formatting-help-view .tabbed { margin: 12px 0 6px; } .comments-section-view .comment-formatting-help-view p { margin-bottom: 6px; } .comments-section-view .comment-formatting-help-view dl { padding: 5px; } .comments-section-view .comment-formatting-help-view dt { font-weight: normal; margin: 3px 0; width: 30%; } .comments-section-view .comment-formatting-help-view dd { background: #f5f5f5; color: #727272; font-size: 11px; padding: 2px; } .comments-section-view .comment-formatting-help-view code { font-family: "MesloLGMDZ", "Monaco", monospace; } .comments-section-view .comment-formatting-help-view #comment-format-basic { min-height: 104px; } .comments-section-view .comment-formatting-help-view #comment-format-lists { display: none; min-height: 104px; } .comments-section-view .comment-formatting-help-view #comment-format-lists dt { width: 40%; } .comments-section-view .comment-formatting-help-view #comment-format-lists dd + dt { margin-top: 10px; } .comments-section-view .comment-formatting-help-view #comment-format-lists dd + dt + dd { margin-top: 10px; } .comments-section-view .comment-formatting-help-view #comment-format-lists ul { list-style-type: disc; margin-left: 12px; } .comments-section-view .comment-formatting-help-view #comment-format-lists ol { list-style-type: decimal; margin-left: 12px; } .comments-section-view .comments-actions-view .button { margin-right: 6px; margin-bottom: 6px; float: left; clear: left; } @media only screen and (max-width: 599px) { #comments { padding-bottom: 14px; } #comments .comments-main { padding-top: 40px; } #comments .comment-replies { margin-left: 30px; } #comments .comment-view { font-size: 13px; line-height: 1.65; } #comments .comment-view .author-avatar img { position: relative; left: 0; } #comments .show-comment { text-align: center; width: 100%; } #comments .comments-side { margin-bottom: 40px; } #comments .comments-side .button { clear: none; } #comments .comments-show-all .button { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; height: 50px; line-height: 40px; margin-top: 50px; width: 100%; } #comments .community-standards-link { float: none; font-size: 12px; display: block; margin-bottom: 20px; } #comments .comment-recommends-view { display: none; } #comments .moderation-control { display: none; } #comments .toggle-comment-help, #comments .toggle-comment-options { display: none; } #comments .information { font-size: 12px; padding: 10px 10px 10px 40px; } } .content-authors { font-size: 12px; } .content-authors h3 { font-size: 11px; } .content-authors a { font-weight: bold; } .content-authors .institution_name { font-weight: normal; color: #383838; } .content-authors-synopsis { display: none; } .content-authors-synopsis i { -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #bcbcbc; color: #bcbcbc; height: 16px; line-height: 16px; margin-right: 6px; text-align: center; width: 16px; } .content-authors-synopsis .icon-caret-up { display: none; } .content-authors-group { margin-bottom: 36px; } .content-authors-group ol { list-style: none; padding-top: 6px; } .content-authors-group li { clear: left; } .content-authors-group li + li { margin-top: 24px; } .content-authors-group img { -webkit-border-radius: 50%; border-radius: 50%; float: left; margin: 0 12px 18px -60px; display: block; width: 48px; } .content-post .team-blog .content-authors-group img { display: block; } .content-post .content-authors-group img { display: none; } .content-authors-group .role { color: #727272; font-size: 11px; line-height: 1.4; } @media only screen and (max-width: 599px) { .content-authors h3 { margin-left: 0; } .content-authors-synopsis { display: block; margin-bottom: 12px; } .content-authors-group { display: none; } .content-authors-group img { margin-left: 0; } .open .icon-caret-down { display: none; } .open .icon-caret-up { display: inline-block; } .open .content-authors-group { display: block; } } @media only screen and (min-width: 1466px) { .content-authors-group .role { line-height: 1.4; } } .content-body { padding-bottom: 12px; font-family: "Libre Baskerville", Georgia, Times, "Times New Roman", serif; font-size: 16px; line-height: 1.8; } .content-body a { white-space: pre-wrap; word-wrap: break-word; text-decoration: underline; } .content-body blockquote { border-left: 8px solid #e8e8e8; } .content-body ul, .content-body ol { padding-left: 2em; margin-bottom: 18px; } .content-body table { border-collapse: collapse; border-spacing: 0; border: 1px solid #eee; empty-cells: show; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; margin-bottom: 18px; width: 100%; } .content-body table thead th { border: 1px solid #eee; font-weight: bold; padding: 0.5em 1em; vertical-align: top; } .content-body table tbody td { border: 1px solid #eee; padding: 0.5em 1em; } .content-body figure { margin-bottom: 18px; } .content-body figure table { margin-bottom: 0; } .content-body figure.align-right { float: right; clear: right; margin-left: 20px; width: 237px; } .content-body figure.align-left { float: left; clear: left; margin-right: 20px; width: 237px; } .content-body figure.align-center img { width: 100%; } .content-body figure a, .content-body figure img { display: block; max-width: 100%; text-decoration: none; } .content-body figure figcaption { font-family: "Helvetica Neue", Helvetica, sans-serif; color: #727272; cursor: default; } .content-body figure figcaption a { display: inline; } .content-topics { margin-bottom: 12px; } .content-topics ul { margin-left: 25px; } .content-our-advisers { margin-bottom: 40px; } .content-our-advisers div { background-color: #f7f7f7; padding: 20px; margin-top: 1px; } .content-our-advisers div p { margin: 0; font-size: 15px; } .content-our-advisers div p + p { margin-top: 18px; } @media only screen and (max-width: 599px) { .content-body { font-size: 15px; line-height: 1.6; } .content-body blockquote { margin-left: -10px; } .content-body figure.align-left, .content-body figure.align-right { width: 100%; margin-bottom: 12px; } .content-body figure.align-left img, .content-body figure.align-right img { width: 100%; } } .content-column-header { margin-top: 1px; position: relative; } .content-column-header .column-header { height: 118px; color: #333; display: block; background-color: #fcfcfc; border-bottom: 1px solid #eee; } .content-column-header .column-header:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .content-column-header .column-header:hover h3 { text-decoration: underline; } .content-column-header .content-column-feed { cursor: pointer; position: absolute; display: block; text-align: center; padding-top: 5px; top: 18px; right: 0; z-index: 100; } .content-column-header .content-column-feed-itunes { top: 54px; } .content-column-header img { margin-top: 15px; float: left; -webkit-border-radius: 50%; border-radius: 50%; width: 90px; border: 1px solid #fff; } .content-column-header h3 { padding-top: 40px; font-size: 27px; } @media only screen and (max-width: 599px) { .content-column-header .column-header { height: auto; } .content-column-header .content-column-feed { right: 10px; } .content-column-header .content-column-feed span { display: none; } .content-column-header .content-column-image { position: absolute; } .content-column-header .content-column-image img { width: 60px; } .content-column-header .content-column-title { float: none; margin-left: 80px; margin-right: 45px; width: auto; } .content-column-header h3 { font-size: 22px; padding-top: 20px; margin-bottom: 6px; line-height: 1.2; } .content-column-header .byline { font-size: 12px; line-height: 1.4; margin-bottom: 20px; } } .content-column-header .podcast { height: 117px; background: transparent url(/assets/podcasts/homepage-feature-ca8b9622ff625a813601e2f9d3b6c653.png) no-repeat 0 26px; } .content-column-header .podcast.podcast-speaking-with { background-position: 0 26px; } .content-column-header .podcast.podcast-politics-with-michelle-grattan { background-position: right -173px; } .content-column-header .podcast.podcast-trust-me-podcast { background-position: -10px -1185px; } @media only screen and (max-width: 599px) { .content-column-header .podcast { background: transparent url(/assets/podcasts/homepage-feature-ca8b9622ff625a813601e2f9d3b6c653.png) no-repeat -30px 26px; } } .content-column-podcast-header { font-size: 18px; font-weight: bold; color: #727272; padding: 20px 0; border-bottom: 1px solid #eee; } .content-column-podcast-header a { color: inherit; } .content-column-podcast-header a:hover { color: #262626; } .content-column-podcast-header .podcast-link-title { display: block; font-size: 28px; line-height: 28px; margin-top: 18px; } @media only screen and (max-width: 599px) { .podcast-info .image { display: none; } } .content-disclosure-statement { margin-bottom: 36px; } .content-disclosure-statement h3 { font-size: 11px; } .content-disclosure-statement p { margin-bottom: 0; } .content-disclosure-statement p + p { margin-top: 18px; } @media only screen and (max-width: 599px) { .content-disclosure-statement { line-height: 1.4; display: none; margin-left: 0; } .open .content-disclosure-statement { display: block; } } .content-header { padding-top: 36px; padding-bottom: 36px; } .content-header h1 { color: #000; font-size: 36px; line-height: normal; margin-bottom: 12px; } .content-header time { font-size: 11px; color: #727272; } .content-header .time-separator { font-size: 11px; color: #727272; padding-left: 2px; padding-right: 4px; } @media only screen and (max-width: 599px) { .content-header { padding-top: 12px; padding-bottom: 6px; } .content-header h1 { font-size: 20px; line-height: 1.4; margin-bottom: 6px; } } .content-lead-image { padding-bottom: 36px; } .content-lead-image img { display: block; width: 100%; } @media only screen and (max-width: 599px) { .content-lead-image { padding-bottom: 0; } } .content-partners { margin-bottom: 36px; } .content-partners h3 { font-size: 11px; } .content-partners .disclosure-logo { display: table; width: 100%; text-align: center; } .content-partners .logo { width: 120px; display: table-cell; vertical-align: middle; } .content-partners .funding-statement { border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 12px; } .content-partners .partners-jobs-links { border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 12px; } .content-partners img { margin: 0 auto; width: 100%; max-width: 120px; } .conversation-partners { margin-bottom: 36px; } .conversation-partners h3 { font-size: 11px; } @media only screen and (max-width: 599px) { .content-partners { line-height: 1.4; display: none; margin-left: 0; } .content-partners .disclosure-logo { display: none; } .open .content-partners { display: block; } .conversation-partners { display: none; } .open .conversation-partners { display: block; } } /** [Name] Republishing [Section] Call to actions [Description] Appears below articles to inform users how TC is different. It's variable width, but sits best between a ```grid-three``` or a ```grid-four```. [Example]
Republish this article

Republish our Creative Commons articles for free, online or in print.

**/ .content-republish { margin-bottom: 36px; } .content-republish a { font-weight: bold; } .content-republish .steal-button { -webkit-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; -webkit-box-sizing: border-box; box-sizing: border-box; height: 40px; padding: 12px 22px 8px 22px; position: relative; text-align: center; width: 100%; } .content-republish .steal-button:hover { background-color: #444; } .content-republish p { border-top: 1px solid #eee; margin-top: 25px; padding-top: 1px; position: relative; } .content-republish p:before { border-top: 1px solid #eee; content: ""; display: block; padding-top: 20px; position: relative; } .content-republish .license-logo { display: block; height: 20px; left: 0; pointer-events: none; position: absolute; text-align: center; top: -10px; width: 100%; } @media only screen and (max-width: 599px) { .content-republish { display: none; } } #article .content-related-articles { margin-bottom: 50px; margin-top: 20px; } #article .content-related-articles:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .related-article { width: 100%; min-height: 155px; } .related-article figcaption, .related-article time, .related-article .crop-link, .related-article .change-image, .related-article .content, .related-article .byline, .related-article .category .remove-unplaced { display: none; } .related-article figure.empty-column-figure { background: #fff url(/assets/columnists/bg-5cc9c82ee486e4b58594de644c311eea.png) top center repeat; max-height: 150px; } @media only screen and (min-width: 1466px) { .related-article figure.empty-column-figure { max-height: 215px; } } .related-article header { margin: 10px; } .related-article h2 { font-size: 16px; line-height: normal; position: relative; background-color: #fff; display: block; margin: -50px 0 0; padding: 10px; top: 100%; } .related-article .article-link { display: block; } .related-article img { display: block; width: 100%; } .lt-ie10 .related-article { display: block; width: 25%; float: left; clear: right; } .lt-ie10 .related-article header { margin: 3px 10px 17px 10px; } .lt-ie10 .related-article figure { margin: 10px 10px 0 10px; } .lt-ie10 .related-article h2 { position: static; margin: 0; padding: 0; } @media only screen and (max-width: 599px) { #article .content-related-articles { margin-bottom: 10px; } #article .related-article:not(:first-child) { min-height: auto; padding: 0 10px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } #article .related-article:not(:first-child) .article { width: auto; margin: 10px; } #article .related-article:not(:first-child) .article-link { display: block; } #article .related-article:not(:first-child) article:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } #article .related-article:not(:first-child) figure { float: left; width: 30%; margin: 0; } #article .related-article:not(:first-child) figure img { display: block; } #article .related-article:not(:first-child) header { float: left; width: 70%; margin: 0; } #article .related-article:not(:first-child) header h2 { font-size: 14px; left: 0; margin: 0; padding: 0 10px; position: relative; top: 0; } } .content-social-distribution { padding-bottom: 36px; font-size: 11px; } .content-social-distribution ul { list-style: none; padding-top: 5px; } .content-social-distribution li { position: relative; padding-bottom: 10px; } .content-social-distribution a { color: #727272; } .content-social-distribution a:hover { color: #262626; } .content-social-distribution i { font-size: 12px; } .content-social-distribution .whatsapp { display: none; } .content-social-distribution .fb-messenger { display: none; } .content-social-distribution .data-count { position: absolute; padding: 0 3px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #ddd; color: #727272; right: 0; top: 0; } .gallery-content .content-social-distribution { display: none; } @media only screen and (max-width: 599px) { .content-social-distribution { clear: both; padding-bottom: 0; } .content-social-distribution ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 0 0 12px 0; padding: 6px 0; width: 100%; } .content-social-distribution li { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 3px 0; text-align: center; } .content-social-distribution li + li { border-left: 1px solid #eee; } .content-social-distribution .whatsapp { display: block; } .content-social-distribution .fb-messenger { display: block; } .content-social-distribution a { display: block; width: 100%; } .content-social-distribution i { top: 0; font-size: 20px; } .content-social-distribution i.icon-facebook { top: 0.1em; } .content-social-distribution span { display: none; } .data-count, .print { display: none; } } #article .content-sidebar { float: right; position: relative; } .content-sidebar { font-size: 11px; margin-bottom: 60px; } .content-sidebar section { margin-left: 60px; } .content-sidebar section h3 { font-size: 11px; } .content-sidebar section.column-authors, .content-sidebar section.column-banner { margin-left: 0; } .content-sidebar .related-topics a { font-weight: bold; } .content-sidebar .byline { color: #727272; font-size: 13px; margin-top: 12px; margin-bottom: 12px; } .column-banner { margin-bottom: 36px; } .column-banner .byline { color: #727272; font-size: 11px; font-style: italic; margin-top: 12px; margin-bottom: 12px; } .column-title { border-bottom: 1px solid #eee; display: block; height: 108px; margin-bottom: 12px; margin-top: 28px; position: relative; } .column-title:after { content: ""; position: absolute; width: 100%; bottom: -3px; border-bottom: 1px solid #eee; } .column-title h3 { bottom: 1px; font-size: 15px; margin: 0; padding-bottom: 12px; padding-right: 80px; position: absolute; } .column-title img { bottom: 0; position: absolute; right: 0; } @media only screen and (max-width: 599px) { .content-sidebar { margin-left: 0; margin-bottom: 0; } .content-sidebar section { margin-left: 0; } } .content-targeted-share { margin-bottom: 24px; } .content-targeted-share ul { list-style: none; } .content-targeted-share li { float: left; } .content-targeted-share li + li { margin-left: 10px; } .content-targeted-share .button { border: none; color: #fff; padding: 8px 16px; font-weight: initial !important; } .content-targeted-share .button:hover { color: #fff; } .content-targeted-share .button i:before { color: #fff; } .content-targeted-share .not-small { display: inline; } .content-targeted-share .small-only { display: none; } .content-targeted-share .twitter-button { background: #00b0e9; } .content-targeted-share .twitter-button:hover { background: #04c1ff; } .content-targeted-share .facebook-button { background: #3a5a93; } .content-targeted-share .facebook-button:hover { background: #334f81; } .content-targeted-share .newsletter-button { background: #d8352a; } .content-targeted-share .newsletter-button:hover { background: #dc4940; } .content-targeted-share .data-count { display: none; } @media only screen and (max-width: 599px) { .content-targeted-share ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .content-targeted-share li { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .content-targeted-share .button { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; text-align: center; } .content-targeted-share .small-only { display: block; } .content-targeted-share .not-small { display: none; } .content-targeted-share i { display: block; margin: 0 auto 10px; } } .content-translations ul { list-style: none; } .content-translations-toggle { display: none; } @media only screen and (max-width: 599px) { .content-translations { position: absolute; right: 0; top: 0; } .content-translations h3, .content-translations ul { display: none; } .content-translations.open { background: #fff; -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); min-width: 50%; padding: 10px; z-index: 100; position: absolute; right: 0; top: -10px; } .content-translations.open h3, .content-translations.open ul { display: block; } .content-translations.open .content-translations-toggle { top: 0; } .content-translations.open .content-translations-toggle .icon-caret-up { display: inline-block; } .content-translations.open .content-translations-toggle .icon-caret-down { display: none; } .content-translations-toggle { display: block; height: 40px; line-height: 40px; position: absolute; right: 0; text-align: center; width: 60px; top: -10px; font-size: 20px; } .content-translations-toggle img { width: 26px; vertical-align: middle; } .content-translations-toggle i { -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #bcbcbc; color: #bcbcbc; height: 16px; font-size: 15px; line-height: 16px; text-align: center; width: 16px; } .content-translations-toggle .icon-caret-down { display: inline-block; } .content-translations-toggle .icon-caret-up { display: none; } } body.refresh-article #outer { padding: 0; } body.refresh-article #hot-topics { display: none; } body.refresh-article .audio-player { margin-bottom: 36px; } body.refresh-article .has-desktop-magazine .content-header, body.refresh-article .has-desktop-magazine .content-lead-image { display: none; } @media only screen and (max-width: 599px) { body.refresh-article .has-desktop-magazine .content-header, body.refresh-article .has-desktop-magazine .content-lead-image, body.refresh-article .normal .content-header, body.refresh-article .normal .content-lead-image { display: block; } } .magazine { display: none; padding-bottom: 24px; } .has-desktop-magazine .magazine { display: block; } .magazine .image { background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-behavior: url(/assets/backgroundsize.min-d8d298e0ea1db97929ce8690fb4c12c7.htc); height: 600px; } .magazine .image img { display: none; } .magazine .wrapper { height: 100%; } .magazine-title { position: absolute; bottom: 0; width: 100%; } .magazine-title header { bottom: 70px; position: absolute; } .magazine-title .content-header-block { border-left: 24px solid #fff; display: inline-block; left: -12px; line-height: normal; padding: 4px 0 0 0; position: relative; } .magazine-title h1 { background-color: #fff; color: #333; display: inline; font-size: 36px; line-height: normal; margin: 0; padding: 4px 0 6px; } .magazine-title strong { left: -12px; position: relative; } .magazine-title time { background-color: #fff; color: #727272; display: inline-block; font-size: 11px; margin-left: -12px; padding: 6px 12px; } .magazine-title .time-separator { display: none; } @media only screen and (max-width: 599px) { .magazine { padding-bottom: 0; } .has-desktop-magazine .magazine { display: none; } .has-mobile-magazine .magazine { display: block; } .magazine .image { background-image: none !important; height: auto; } .magazine .image img { display: block; width: 100%; } .magazine-header { height: auto; } .magazine-title { display: none; } .magazine-title header { margin-left: -10px; } .magazine-title .content-header-block { left: -2px; } .magazine-title h1 { font-size: 24px; } .magazine-title time { margin-left: -5px; } } @media screen and (device-aspect-ratio: 40 / 71) { .has-mobile-magazine .magazine .magazine-header { height: 460px; } .has-mobile-magazine .magazine .magazine-header .image { height: 460px; } } .content-gallery-item { background: #f6f7fa; clear: both; margin: 0 0 40px; padding: 10px 10px 0 10px; } .content-gallery-item img { max-width: 100%; max-height: 90%; display: block; } .content-gallery-item figcaption { position: relative; padding: 20px 20px 20px 50px; color: #222; font-size: 15px; font-weight: bold; line-height: 1.4; } .content-gallery-item figcaption .count { color: rgba(0, 0, 0, 0.4); left: 5px; position: absolute; text-align: right; width: 35px; } .content-gallery-item figcaption .source { font-weight: bold; padding-left: 0.75em; color: rgba(0, 0, 0, 0.4); } .content-gallery-item:last-child { cursor: n-resize; } .content-gallery-cover.loading { background-color: rgba(0, 0, 0, 0.9); } .gallery-cover { -webkit-transition: opacity 350ms ease-out; -o-transition: opacity 350ms ease-out; transition: opacity 350ms ease-out; opacity: 1; position: fixed; z-index: 1000; top: 0; bottom: 0; left: 0; width: 100%; height: 150%; background: rgba(0, 0, 0, 0.9); } .gallery-content { -webkit-transition: opacity 750ms ease-in 300ms; -o-transition: opacity 750ms ease-in 300ms; transition: opacity 750ms ease-in 300ms; opacity: 1; position: fixed; z-index: 1001; padding-top: 38px; top: 0; bottom: 0; width: 100%; overflow: scroll; } .gallery-content .close-gallery { position: fixed; top: 10px; right: 26px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .gallery-cover.hidden, .gallery-content.hidden { opacity: 0; } .gallery-content-inner { margin: 0 auto; width: 75%; color: #fff; } .gallery-content-inner header h1 { color: #fff; } .gallery-content-inner header time { color: #999; } .gallery-content-inner .content-gallery-item { background: transparent; cursor: default; } .gallery-content-inner .content-gallery-item img { padding: 5px; background: #fff; margin: 0; } .gallery-content-inner .content-gallery-item:last-child { cursor: default; } .gallery-content-inner .content-gallery-item:last-child img { cursor: n-resize; } .gallery-content-inner .content-gallery-item figcaption { color: #fff; } .gallery-content-inner .content-gallery-item figcaption .count, .gallery-content-inner .content-gallery-item figcaption .source { color: rgba(255, 255, 255, 0.6); } #article .post-navigation { clear: both; margin-bottom: 20px; } #article .post-navigation ol { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #article .post-navigation li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 50%; float: left; } #article .post-navigation li:first-child .post-navigation-option { margin-right: 10px; } #article .post-navigation li:first-child .post-navigation-option:before { content: "\F055"; left: -20px; padding-left: 10px; text-align: left; } #article .post-navigation li:last-child .post-navigation-option { margin-left: 10px; } #article .post-navigation li:last-child .post-navigation-option:before { content: "\F056"; right: -20px; padding-right: 10px; text-align: right; } #article .post-navigation .post-navigation-option { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background: #fdfdfd; border: 1px solid #eaeaea; position: relative; width: 100%; } #article .post-navigation .post-navigation-option:before { background: inherit; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #eaeaea; color: #eaeaea; font-family: "TCFont-Regular"; height: 40px; line-height: 40px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 30px; z-index: 1; } #article .post-navigation .post-navigation-option .article { background: inherit; display: block; min-height: 65px; padding: 20px; position: relative; z-index: 2; } #article .post-navigation .empty { opacity: 0; } #article .post-navigation h4 { letter-spacing: normal; } #article .post-navigation time { display: block; color: #adadad; font-size: 11px; } #article .content-sidebar.column-sidebar .content-authors { margin-top: 60px; } @media only screen and (max-width: 599px) { #article .content-sidebar.column-sidebar .content-authors { margin-top: 12px; } } input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea { -webkit-appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px; border: 1px solid #bbb; -webkit-border-radius: 3px; border-radius: 3px; } input[type="text"]:active, input[type="password"]:active, input[type="email"]:active, input[type="url"]:active, textarea:active { border-color: #888; } body.pages-edit { min-width: 1350px; } input.year, label.year { width: 50px; } .field_with_errors { display: inline; } .field_with_errors input[type="text"], .field_with_errors input[type="password"], .field_with_errors input[type="email"], .field_with_errors input[type="url"] { border: 1px solid #e05e55; } form ul.form-items { list-style-type: none; } fieldset.actions .primary { float: right; } fieldset.actions .link_action a { padding: 3px 12px; display: inline-block; } /** [Name] Author / Collaborator selector [Section] Forms [Description] - ```.author-selector``` - Add to create an author lookup field - ```.author-selector.loading``` - Loading state [Example] **/ input.author-selector, input.collaborator-selector, form.formtastic input.author-selector { padding-left: 24px; background-color: #fff; } input.author-selector.loading, input.collaborator-selector.loading, form.formtastic input.author-selector.loading { background: url(/assets/loading-812779beafabb8b474d9d66888c43713.gif) no-repeat 4px 4px; } ul.ui-autocomplete { z-index: 10 !important; -webkit-box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); } .button.comment-count .number-of-comments { font-weight: normal; } .button.comment-count a, .button.comment-count a:visited { color: #646464; } .button.column-feed { padding-left: 6px; } .button.column-feed a, .button.column-feed a:visited { color: #646464; } /** [Name] Social Media Share Buttons [Section] Widgets [Description] - ```.vertical``` - Orientate the buttons vertically [Example] <% ['horizontal', 'vertical'].each do |style| %>
<% end %> **/ .share ul, .share { list-style: none outside none; margin: 0; padding: 0; } .share.vertical li { clear: left; margin-bottom: 6px; } .share.vertical li a { margin: 0; } .share.horizontal ul + ul { clear: both; } .share li { font-size: 11px; float: left; margin-right: 10px; } .share li.republish a { margin-right: 0; } .share li .button { clear: both; display: block; float: left; margin-bottom: 7px; padding-left: 6px; position: relative; } .share li .button i { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } .share li span.data-count { -webkit-border-radius: 3px; border-radius: 3px; display: inline-block; position: relative; font-size: 11px; font-weight: normal; color: #777; border: 1px solid #c9c9c9; padding: 2px 5px; margin-left: 7px; float: left; } .share li span.data-count:before, .share li span.data-count:after { position: absolute; left: -4px; top: 30%; display: block; content: ""; width: 0; height: 0; border: 4px solid transparent; border-right: 4px solid #c6c6c6; border-left: none; } .share li span.data-count:after { left: -3px; border-right: 4px solid #fff; } body.comments #article-search { text-align: right; } body.comments #article-search #media-search input { padding: 3px 5px; vertical-align: top; } body.comments #article-search #media-search button { padding: 2px 12px 5px; vertical-align: top; } body.comments #article-search div.list-wrapper { text-align: left; float: left; width: 100%; padding: 20px 0; border-bottom: 1px solid #eee; margin-bottom: 20px; } body.comments #article-search div.list-wrapper ul { list-style: disc; padding-left: 32px; } body.comments #article-search div.list-wrapper ul li { list-style: disc; } body.comments .filterable-list { border-bottom: 1px dotted #c2c2c2; margin-bottom: 18px; margin-top: 24px; padding-bottom: 18px; } body.comments .actions { border-bottom: 1px dotted #c2c2c2; margin-bottom: 18px; margin-top: 18px; padding-bottom: 18px; } body.comments .actions ul { display: block; list-style-type: none; } body.comments .actions ul li { float: left; line-height: 36px; margin-right: 1em; } body.comments article { border-bottom: 1px dotted #c2c2c2; padding-bottom: 18px; margin-bottom: 18px; } body.comments article.removed { position: relative; } body.comments article.removed .ribbon h4 { position: absolute; top: 10px; font-size: 11px; font-style: italic; font-weight: normal; background-color: #d8352a; color: #fff; z-index: 3; -webkit-box-shadow: 0 3px 0 #8a211e; box-shadow: 0 3px 0 #8a211e; left: 0; padding: 3px 10px 3px 10px; line-height: 18px; letter-spacing: normal; text-transform: none; } body.comments article.removed .ribbon h4:after { content: ''; position: absolute; display: block; top: 0; border: 1.1em solid #d8352a; z-index: 2; -webkit-box-shadow: 0 3px 0 #8a211e; box-shadow: 0 3px 0 #8a211e; right: -1em; border-left-width: 0.6em; border-right-color: transparent; } body.comments article.removed .ribbon input#inline-editing { position: absolute; top: 10px; width: 150px; left: 0; } body.comments article.removed .comment { opacity: 0.3; } body.comments article.removed aside { margin-top: 40px; opacity: 0.7; } body.comments article div.comment { padding-bottom: 18px; margin-bottom: 17px; } body.comments article div.comment .rankings { font-size: 11px; color: #999; margin-bottom: 6px; } body.comments article div.comment .rankings strong { color: #555; } body.comments article div.comment .rankings strong.abuse { color: #d8352a; } body.comments article aside { color: #666; font-size: 12px; padding-top: 12px; } body.comments article aside.locked .attribution { opacity: 0.5; } body.comments article aside p { clear: both; } body.comments article aside time { color: #999; } body.comments article .comment-actions { float: left; } body.comments article .comment-actions ul { list-style: none; } body.comments article .comment-actions .removed-comment-stats { margin-top: 20px; } body.comments-abuses .report-abuse select { width: 75%; } body.comments-abuses .comments-section-view { -webkit-transition: none; -o-transition: none; transition: none; height: auto; } figure.zoomable { position: relative; } figure.zoomable .enlarge_hint { -webkit-transition: opacity 0.1s ease-in; -o-transition: opacity 0.1s ease-in; transition: opacity 0.1s ease-in; position: absolute; top: 0; right: 0; opacity: 0; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; background: rgba(0, 0, 0, 0.6) url(/assets/icons/16x16search-white-67f83a253e8e71281277c5cf51a362ac.png) no-repeat center center; width: 26px; height: 26px; text-indent: -999em; overflow: hidden; } figure.zoomable:hover { cursor: pointer; } figure.zoomable:hover .enlarge_hint { opacity: 1; } div.imagebox { background-color: rgba(255, 255, 255, 0.8); bottom: 0; cursor: pointer; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff); left: 0; position: fixed; right: 0; top: 0; zoom: 1; } div.imagebox img { -webkit-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; display: block; position: absolute; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 100px rgba(0, 0, 0, 0.5); opacity: 1; } div.imagebox img.appearing { -webkit-transition: opacity 0; -o-transition: opacity 0; transition: opacity 0; opacity: 0; } div.imagebox img.spinner { padding: 6px; background-color: #fff; } .comment-view { zoom: 1; clear: both; padding-top: 36px; position: relative; } .comment-view .author-avatar { position: relative; } .comment-view .author-avatar p, .comment-view .author-avatar h5 { padding-left: 0; } .comment-view .author-avatar img { position: absolute; right: 100%; top: -6px; margin-right: 12px; } .comment-view .comment-replies .author-avatar img { -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); margin-right: 6px; top: -9px; } .comment-view .comment-body { clear: both; } .comment-view .comment-body p, .comment-view .comment-body ul, .comment-view .comment-body li { white-space: pre-wrap; word-wrap: break-word; } .comment-view .comment-body ul { margin: 18px 0 18px 14px; } .comment-view .comment-body ul li { list-style-type: disc; padding: 0 0 0 5px; } .comment-view .comment-body ol { margin: 18px 0 18px 14px; } .comment-view .comment-body ol li { list-style-type: decimal; padding: 0 0 0 5px; } .comment-view .comment-body blockquote > ul:first-child, .comment-view .comment-body blockquote ol:first-child { margin-top: 0; } .comment-view .comment-body blockquote > ul:last-child, .comment-view .comment-body blockquote ol:last-child { margin-bottom: 0; } .comment-view .comment-in-reply-to { clear: both; margin-bottom: 1em; font-size: 11px; color: #727272; } .comment-view .moderation-control { display: block; float: left; border: none; outline: none; background-color: #eee; font-weight: normal; color: #727272; } .comment-view .comment-recommends-view { position: absolute; right: 0; } .comment-view .comment-recommends-view .button { float: right; margin: 6px 0; padding: 0 6px; top: 0; } .comment-view .comment-recommends-view i.icon-favourite { cursor: pointer; display: block; float: right; color: #fd8e08; font-size: 16px; line-height: 16px; margin: 8px 5px 0 6px; top: 0; } .comment-view .comment-recommends-view .tooltip { width: 197px; bottom: -32px; right: -98px; text-align: center; } .comment-view .comment-recommends-view.highly-recommended { background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)); } .comment-view header { padding: 5px; margin: -5px -5px 12px -5px; } .comment-view header a { display: inline; } .comment-view header .attribution { margin-right: 130px; } .comment-view .moderation-control.delete { display: block; } .comment-view .moderation-control.restore { display: none; } .comment-view .comment.editor, .comment-view .comment.author { background: transparent url(/assets/comments/comment-highlight-54f5728ff54cca7ee53e5720c8e27d61.png) no-repeat top center; background-size: 100%; padding-top: 22px; margin-top: -22px; } .comment-view .comment.highlight { background: transparent url(/assets/comments/comment-highlight-white-5b31280678f6ee47d93ce4b130a0acb7.png) no-repeat top center; background-size: 100%; padding-top: 22px; margin-top: -22px; } .comment-view .comment.removed { opacity: 0.5; } .comment-view .comment.removed p.recommends, .comment-view .comment.removed .more .comment-reply, .comment-view .comment.removed aside a[data-method='delete'], .comment-view .comment.removed header nav, .comment-view .comment.removed header nav:hover a { display: none; } .comment-view .comment.removed .moderation-control.remove { display: none; } .comment-view .comment.removed .moderation-control.report { display: none; } .comment-view .comment.removed .moderation-control.delete { display: none; } .comment-view .comment.removed .moderation-control.restore { display: block; } .comment-view .comment.removed .more { padding-top: 24px; } .comment-view .comment.removed .more:before { background-color: #f44; -webkit-border-radius: 3px; border-radius: 3px; color: #fff; content: "This comment has been removed."; display: block; margin-bottom: 6px; padding: 6px 0; position: absolute; text-align: center; top: -22px; width: 100%; } .comment-view .comment.removed.pending .moderation-control.delete { display: block; } .comment-view .comment.removed.pending .more:before { background-color: #ff8a00; content: "This comment is hidden, awaiting further review."; } .comment-view .more { position: relative; margin-bottom: 0; height: 1px; } .comment-view .more .comment-reference-link { color: #727272; } .comment-view .more time { position: relative; display: block; float: left; background-color: #eee; padding: 0; } .comment-view .more > a.moderation-control.last { padding-right: 1em; } .comment-view .more time, .comment-view .more a.moderation-control, .comment-view .more a.comment-reply { font-size: 11px; margin-top: -9px; } .comment-view .more a.moderation-control:before { content: "\2022"; padding: 0.5em; } .comment-view .more .comment-reply { margin-right: 0; color: #646464; border: 1px solid #c6c6c6; line-height: 16px; outline: none; background-color: #eee; font-weight: normal; text-transform: capitalize; } .comment-view .more .comment-reply:hover { color: #2d8cd6; border: 1px solid #2d8cd6; } .comment-view .more .comment-removed { color: #ff0000; line-height: 26px; clear: both; text-align: center; } .comment-body-view .show-comment { bottom: -25px; display: none; position: absolute; } .comment-body-view.truncated { margin: 0 0 45px 0; position: relative; } .comment-body-view.truncated .show-comment { display: block; } .comment-body-view.truncated .comment-body-wrapper { height: 145px; overflow: hidden; } .comment-body-view.truncated:after { background: -webkit-gradient(linear, left bottom, left top, from(#eeeeee), to(rgba(238, 238, 238, 0))); background: -webkit-linear-gradient(bottom, #eeeeee, rgba(238, 238, 238, 0)); background: -o-linear-gradient(bottom, #eeeeee, rgba(238, 238, 238, 0)); background: linear-gradient(to top, #eeeeee, rgba(238, 238, 238, 0)); bottom: 0; content: ""; height: 50px; left: 0; position: absolute; width: 100%; } .topbar-mobile-newsletter-signup { background: #841f18; color: #fff; display: none; font-size: 13px; position: relative; text-align: center; } .topbar-mobile-newsletter-signup:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } .topbar-mobile-newsletter-signup .topbar-mobile-newsletter-signup-subscribe { background: #af2920; -webkit-border-radius: 16px; border-radius: 16px; border-bottom: 1px solid #591510; color: #fff; display: inline-block; margin: 6px 0; padding: 0 6px 0 32px; position: relative; text-align: center; } .topbar-mobile-newsletter-signup .topbar-mobile-newsletter-signup-subscribe:hover { background: #d8352a; } .topbar-mobile-newsletter-signup .topbar-mobile-newsletter-signup-subscribe i { left: 10px; position: absolute; top: 5px; } .topbar-mobile-newsletter-signup .topbar-mobile-newsletter-signup-subscribe span { display: block; padding: 6px 12px 6px 6px; } .topbar-mobile-newsletter-signup .close { color: #fff; height: 32px; position: absolute; right: 0; text-align: center; bottom: 0; margin: 5px 0; width: 32px; } .topbar-mobile-newsletter-signup .close:hover { text-shadow: 0 0 4px #d8352a; } .topbar-mobile-newsletter-signup .close i { top: 3px; } @media only screen and (max-width: 599px) { .topbar-mobile-newsletter-signup { display: block; } }