/** screen.css - compiled from screen.scss (SASS file) Screen styling for the DFAT Trade Through Time Website */ /** reset.css Reset CSS source from http://meyerweb.com/eric/tools/css/reset/ */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-font-smoothing: antialiased; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /** colous.scss - SASS colour varaibles for the DFAT Trade Through Time website */ @font-face { font-family: 'Dosis'; src: url("../fonts/Dosis-SemiBold.otf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ubuntu-B'; src: url("../fonts/Ubuntu-B.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ubuntu-L'; src: url("../fonts/Ubuntu-L.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ubuntu-LI'; src: url("../fonts/Ubuntu-LI.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ubuntu-M'; src: url("../fonts/Ubuntu-M.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ubuntu-R'; src: url("../fonts/Ubuntu-R.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ubuntu-RI'; src: url("../fonts/Ubuntu-RI.ttf"); font-weight: normal; font-style: normal; } html { background-color: #000; } body { font-family: 'Ubuntu-R', sans-serif; color: #000; background: #fff; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body.highcontrast .contrast-control { background: #000; } p { margin: 10px 0; line-height: 1.3; } h1 { font-family: 'Ubuntu-B', sans-serif; } h2 { font-family: 'Ubuntu-B', sans-serif; } h3 { font-family: 'Ubuntu-B', sans-serif; } h2 { font-weight: 600; } h3 { font-weight: 600; font-size: 24px; } strong { font-weight: 600; } em { font-style: italic; } blockquote { padding-left: 1em; padding-right: 1em; font-style: italic; } section { margin: 0 0 30px; } section > footer { padding: 0 0 30px; border-bottom: 1px solid #a3aaaa; } section > footer > p { color: #485865; } button, a { outline: none; } .hide { display: none !important; } .hidden { visibility: hidden !important; } .effect-bounce { animation-name: bounce; animation-duration: .3s; animation-timing-function: ease-out; transform-origin: 50% 50%; /* Safari and Chrome: */ -webkit-animation-name: bounce; -webkit-animation-duration: .3s; -webkit-animation-timing-function: ease-out; -webkit-transform-origin: 50% 50%; } .effect-drop { animation-name: drop; animation-duration: .25s; animation-timing-function: ease-out; transform-origin: 50% 50%; /* Safari and Chrome: */ -webkit-animation-name: drop; -webkit-animation-duration: .25s; -webkit-animation-timing-function: ease-out; -webkit-transform-origin: 50% 50%; } img.loader { display: inline-block; position: absolute; z-index: 1; top: 50%; left: 50%; margin-top: -44px; margin-left: -44px; animation-name: loading; animation-duration: .6s; animation-timing-function: linear; animation-play-state: running; animation-iteration-count: infinite; /* Safari and Chrome: */ -webkit-animation-name: loading; -webkit-animation-duration: .6s; -webkit-animation-timing-function: linear; -webkit-animation-play-state: running; -webkit-animation-iteration-count: infinite; } p.loader { display: block; position: absolute; z-index: 1; top: 50%; margin: auto; margin-top: -10px; text-align: center; font-size: 36px; color: #fff; width: 100%; } .cite { font-size: 80%; } .close-button, #carousel .carousel-close { position: absolute; top: 50px; right: 60px; height: 24px; line-height: 26px; padding: 0 35px 0 10px; text-decoration: none; font-size: 14px; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; color: #f3f3f3; background-color: #485865; border: none; cursor: pointer; border-radius: 6px; } .close-button:before, #carousel .carousel-close:before { content: ''; position: absolute; display: block; top: 0; right: 0; bottom: 0; width: 24px; background-image: url(../images/close-icon.png); background-position: 0 0; background-repeat: no-repeat; background-color: #a3aaaa; border-radius: 0 6px 6px 0; } .close-button:hover, #carousel .carousel-close:hover, .close-button:focus, #carousel .carousel-close:focus { color: #fff; } .highcontrast .close-button, .highcontrast #carousel .carousel-close, #carousel .highcontrast .carousel-close { background: #333e47; } .highcontrast .close-button:before, .highcontrast #carousel .carousel-close:before, #carousel .highcontrast .carousel-close:before { background-color: #485865; } .continue-button { position: absolute; top: auto; left: 50px; bottom: 40px; height: 24px; line-height: 26px; padding: 0 35px 0 10px; text-decoration: none; font-size: 14px; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; color: #f3f3f3; background: #409f67; border: none; border-radius: 6px; cursor: pointer; } .continue-button:before { content: ''; position: absolute; display: block; top: 0; right: 0; bottom: 0; width: 24px; background-image: url(../images/continue-icon-filter.png); background-position: 0 0; background-repeat: no-repeat; background-color: #fff; border-radius: 0 6px 6px 0; } .continue-button:hover, .continue-button:focus { color: #fff; } .highcontrast .continue-button { background: #235638; } .readmore-button, #carousel .carousel-more { position: absolute; height: 30px; width: 150px; line-height: 30px; text-decoration: none; text-indent: 15px; font-size: 14px; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; color: #f3f3f3; background: #485865; border: none; border-radius: 0 6px 0 0; cursor: pointer; } .readmore-button:hover, #carousel .carousel-more:hover, .readmore-button:focus, #carousel .carousel-more:focus { color: #fff; } .clear-all-button, .apply-filter-button { position: relative; line-height: 26px; margin-right: 20px; padding: 0 35px 0 10px; text-decoration: none; font-size: 14px; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; color: #f3f3f3; background: #409f67; border: none; border-radius: 6px; cursor: pointer; } .clear-all-button:before, .apply-filter-button:before { content: ''; position: absolute; display: block; top: 0; right: 0; bottom: 0; width: 24px; background-image: url(../images/continue-icon-filter.png); background-position: 0 0; background-repeat: no-repeat; background-color: #fff; border-radius: 0 6px 6px 0; } .clear-all-button:hover, .clear-all-button:focus, .apply-filter-button:hover, .apply-filter-button:focus { color: #fff; } .highcontrast .clear-all-button, .highcontrast .apply-filter-button { background: #235638; } .shade { position: fixed; z-index: 9; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); } .shade.shade-dark { background: rgba(0, 0, 0, 0.9); } body.ie8 .shade.shade-dark, body.ie7 .shade.shade-dark, body.ie6 .shade.shade-dark { background-image: url(../images/shade.dark.ie.png); background-position: 0 0; background-repeat: repeat; } body.ie8 .shade, body.ie7 .shade, body.ie6 .shade { background-image: url(../images/shade.ie.png); background-position: 0 0; background-repeat: repeat; } .confirm { box-sizing: border-box; -moz-box-sizing: border-box; position: fixed; z-index: 15; top: 35%; overflow: hidden; background: #fff; padding: 20px 30px 25px; border-radius: 12px; } .confirm .confirm-controls { position: relative; margin-top: 20px; text-align: right; } .confirm .confirm-controls button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border-radius: 0; display: inline-block; min-height: 30px; height: 30px; padding: 2px 10px 0; text-align: center; vertical-align: top; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 1em; text-transform: uppercase; color: #fff; background-color: #317b4f; border: none; border-radius: 6px; cursor: pointer; outline: none; -webkit-transition: background 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out; -ms-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; margin-left: 15px; } .confirm .confirm-controls button:hover, .confirm .confirm-controls button:focus { text-decoration: none; background-color: #296541; } .confirm .confirm-controls button[disabled] { background-color: #a3aaaa; } .confirm .confirm-controls button[disabled]:hover, .confirm .confirm-controls button[disabled]:focus { background-color: #a3aaaa; cursor: default; } .modal { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; z-index: 10; top: 60px; left: 0; right: 0; bottom: 60px; overflow: hidden; min-height: 400px; max-width: 1020px; min-width: 820px; border-radius: 12px; } .modal.modal-info { bottom: auto; max-height: 90%; color: #000; background: #fff; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .ie9 .modal.modal-info { top: 60px; } .modal.modal-info h2 { box-sizing: border-box; -moz-box-sizing: border-box; padding: 40px 160px 40px 65px; margin-right: 0; margin-bottom: 0; color: #fff; background: #409f67; height: 130px; } .highcontrast .modal.modal-info h2 { background-color: #317b4f; } .modal.modal-info img { display: block; margin: 0.6em auto 1.4em; } .modal.modal-info ul.bullets { list-style: disc; margin-top: 14px; margin-left: 30px; line-height: 1.4; font-size: 20px; } .modal.modal-info .modal-content { top: 150px; padding: 20px 65px 30px 65px; } .modal.modal-info .modal-content div :first-child { margin-top: 0; padding-top: 0; } .modal.modal-info .modal-content a { color: #317b4f; word-wrap: break-word; } .modal.modal-info .close-button, .modal.modal-info #carousel .carousel-close, #carousel .modal.modal-info .carousel-close { background-color: #317b4f; } .modal.modal-info .close-button:before, .modal.modal-info #carousel .carousel-close:before, #carousel .modal.modal-info .carousel-close:before { background-image: url(../images/close-icon-filter.png); background-position: 0 0; background-repeat: no-repeat; background-color: #fff; } .highcontrast .modal.modal-info .close-button, .highcontrast .modal.modal-info #carousel .carousel-close, #carousel .highcontrast .modal.modal-info .carousel-close { background-color: #235638; } .modal.modal-quiz { color: #000; background-color: #fff; background-image: url(../images/welcome.jpg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .ie9 .modal.modal-quiz { top: 60px; } .modal.modal-quiz h2 { box-sizing: border-box; -moz-box-sizing: border-box; padding: 40px 160px 40px 65px; margin-right: 0; margin-bottom: 0; color: #fff; background: #409f67; height: 120px; } .highcontrast .modal.modal-quiz h2 { background-color: #317b4f; } .modal.modal-quiz p { font-size: 20px; } .modal.modal-quiz .modal-content { top: 120px; left: 0; right: 0; bottom: 100px; overflow: hidden; padding-top: 30px; background-color: transparent; -webkit-transition: background-color 0.25s ease-in-out; -moz-transition: background-color 0.25s ease-in-out; -ms-transition: background-color 0.25s ease-in-out; -o-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } .modal.modal-quiz .modal-content.quiz-started { background-color: #fff; } .modal.modal-quiz .modal-content a { color: #317b4f; } .modal.modal-quiz .modal-content form > ul { display: block; position: relative; left: 0; -webkit-transition: left 0.35s ease-in-out; -moz-transition: left 0.35s ease-in-out; -ms-transition: left 0.35s ease-in-out; -o-transition: left 0.35s ease-in-out; transition: left 0.35s ease-in-out; } .modal.modal-quiz .modal-content form > ul > li { display: block; width: 100%; } .modal.modal-quiz .modal-content form > ul > li.intro-slide, .modal.modal-quiz .modal-content form > ul > li.conclusion-slide { box-sizing: border-box; -moz-box-sizing: border-box; color: #fff; padding: 30px 140px 0; } .modal.modal-quiz .modal-content form > ul > li.intro-slide h3, .modal.modal-quiz .modal-content form > ul > li.conclusion-slide h3 { margin: 0 0 20px; line-height: 1.3; font-size: 36px; font-weight: 500; text-transform: uppercase; } .modal.modal-quiz .modal-content form > ul > li.intro-slide h3 span, .modal.modal-quiz .modal-content form > ul > li.conclusion-slide h3 span { white-space: nowrap; } .modal.modal-quiz .modal-content form > ul > li.intro-slide p, .modal.modal-quiz .modal-content form > ul > li.conclusion-slide p { font-size: 32px; } .modal.modal-quiz .modal-content form > ul > li img { float: left; display: block; max-width: 360px; max-height: 400px; margin: 0 30px 0 30px; } .modal.modal-quiz .modal-content form > ul > li fieldset { display: block; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; padding: 0; } .modal.modal-quiz .modal-content form > ul > li fieldset.correct { color: #317b4f; } .modal.modal-quiz .modal-content form > ul > li fieldset.correct button.selected { background-color: #317b4f; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset.correct { color: #235638; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset.correct button.selected { background-color: #235638; } .modal.modal-quiz .modal-content form > ul > li fieldset.incorrect { color: #c05a2c; } .modal.modal-quiz .modal-content form > ul > li fieldset.incorrect button.selected { background-color: #c05a2c; } .modal.modal-quiz .modal-content form > ul > li fieldset.incorrect p.correct { color: #317b4f; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset.incorrect { color: #9e532d; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset.incorrect button.selected { background-color: #9e532d; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset.incorrect p.correct { color: #235638; } .modal.modal-quiz .modal-content form > ul > li fieldset legend { display: block; width: 100%; margin-top: 0; margin-bottom: 20px; font-weight: 600; line-height: 1.3; } .modal.modal-quiz .modal-content form > ul > li fieldset ol { display: block; } .modal.modal-quiz .modal-content form > ul > li fieldset ol li { display: block; } .modal.modal-quiz .modal-content form > ul > li fieldset button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border-radius: 0; display: inline-block; min-height: 30px; height: 30px; padding: 2px 10px 0; text-align: center; vertical-align: top; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 1em; text-transform: uppercase; color: #fff; background-color: #409f67; border: none; border-radius: 6px; cursor: pointer; outline: none; -webkit-transition: background 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out; -ms-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; font-family: 'Ubuntu-R', sans-serif; width: 100%; height: auto; line-height: 1.2; display: block; margin-bottom: 0.8em; padding: .4em 0.8em; border-radius: 12px; } .modal.modal-quiz .modal-content form > ul > li fieldset button:hover, .modal.modal-quiz .modal-content form > ul > li fieldset button:focus { text-decoration: none; background-color: #317b4f; } .modal.modal-quiz .modal-content form > ul > li fieldset button[disabled] { background-color: #a3aaaa; } .modal.modal-quiz .modal-content form > ul > li fieldset button[disabled]:hover, .modal.modal-quiz .modal-content form > ul > li fieldset button[disabled]:focus { background-color: #a3aaaa; cursor: default; } .modal.modal-quiz .modal-content form > ul > li fieldset button.selected { color: #fff; background-color: #000; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset button { background-color: #235638; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset button:hover, .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset button:focus { background-color: #1b442c; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset button[disabled] { background-color: #333e47; } .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset button[disabled]:hover, .highcontrast .modal.modal-quiz .modal-content form > ul > li fieldset button[disabled]:focus { background-color: #333e47; } .modal.modal-quiz .progress-button-container { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 100px; background-color: #d8dbdb; } .modal.modal-quiz .progress-button-container .progress-bar { position: absolute; top: 50%; left: 30px; height: 40px; width: 520px; margin-top: -20px; background-color: #fff; border-radius: 6px; } .modal.modal-quiz .progress-button-container .progress-bar .progress-bar-text { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; font-size: 16px; line-height: 40px; text-align: center; } .modal.modal-quiz .progress-button-container .progress-bar .progress-bar-inner { position: absolute; top: 0; left: 0; bottom: 0; width: 0; background-color: #409f67; -webkit-transition: width 0.25s ease-in-out; -moz-transition: width 0.25s ease-in-out; -ms-transition: width 0.25s ease-in-out; -o-transition: width 0.25s ease-in-out; transition: width 0.25s ease-in-out; border-radius: 6px; } .highcontrast .modal.modal-quiz .progress-button-container .progress-bar .progress-bar-inner { background-color: #235638; } .modal.modal-quiz .progress-button-container button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border-radius: 0; display: inline-block; min-height: 30px; height: 30px; padding: 2px 10px 0; text-align: center; vertical-align: top; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 1em; text-transform: uppercase; color: #fff; background-color: #317b4f; border: none; border-radius: 6px; cursor: pointer; outline: none; -webkit-transition: background 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out; -ms-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; right: 30px; position: absolute; height: 40px; font-size: 28px; top: 50%; margin-top: -20px; line-height: 1; border-radius: 6px; } .modal.modal-quiz .progress-button-container button:hover, .modal.modal-quiz .progress-button-container button:focus { text-decoration: none; background-color: #296541; } .modal.modal-quiz .progress-button-container button[disabled] { background-color: #a3aaaa; } .modal.modal-quiz .progress-button-container button[disabled]:hover, .modal.modal-quiz .progress-button-container button[disabled]:focus { background-color: #a3aaaa; cursor: default; } .highcontrast .modal.modal-quiz .progress-button-container button { background-color: #235638; } .highcontrast .modal.modal-quiz .progress-button-container button:hover, .highcontrast .modal.modal-quiz .progress-button-container button:focus { background-color: #1b442c; } .highcontrast .modal.modal-quiz .progress-button-container button[disabled] { background-color: #333e47; } .highcontrast .modal.modal-quiz .progress-button-container button[disabled]:hover, .highcontrast .modal.modal-quiz .progress-button-container button[disabled]:focus { background-color: #333e47; } .modal.modal-quiz .close-button, .modal.modal-quiz #carousel .carousel-close, #carousel .modal.modal-quiz .carousel-close { background-color: #317b4f; } .modal.modal-quiz .close-button:before, .modal.modal-quiz #carousel .carousel-close:before, #carousel .modal.modal-quiz .carousel-close:before { background-image: url(../images/close-icon-filter.png); background-position: 0 0; background-repeat: no-repeat; background-color: #fff; } .highcontrast .modal.modal-quiz .close-button, .highcontrast .modal.modal-quiz #carousel .carousel-close, #carousel .highcontrast .modal.modal-quiz .carousel-close { background-color: #235638; } .modal.modal-quiz .facebook-link { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border-radius: 0; display: block; height: 80px; width: 80px; padding: 40px 0 0; text-indent: -1000em; overflow: hidden; background-image: url(../images/facebook.png); background-position: 0 0; background-repeat: no-repeat; -webkit-transition: background 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out; -ms-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } .modal.modal-help { padding: 0; top: 0; left: 0; right: 0; bottom: 0; top: 50%; margin-top: -375.5px; } .modal.modal-help .modal-content { left: 0; right: 0; top: 0; bottom: 0; padding: 0; overflow: hidden; } .modal.modal-help .modal-content > div { position: relative; } .modal.modal-help h2 { font-size: 0; height: 0; overflow: hidden; margin: 0; } .modal.modal-help img { display: block; max-width: 100%; margin: 0 auto; border-radius: 12px; } .modal.modal-help .close-button, .modal.modal-help #carousel .carousel-close, #carousel .modal.modal-help .carousel-close { display: none; } .modal.modal-help .start-button { display: block; position: absolute; z-index: 1; bottom: 140px; right: 12px; padding: 5px 15px; line-height: 1.3; font-size: 18px; text-transform: uppercase; text-decoration: none; color: #fff; background: #409f67; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .modal.modal-help .start-button:hover, .modal.modal-help .start-button:focus { background-color: #317b4f; } .modal.modal-acknowlegements .modal-content { margin-left: 0; padding: 20px 65px 30px; max-height: 100%; } .modal.modal-acknowlegements .modal-content > div { height: 100%; } .modal.modal-article .modal-content { padding-top: 10px; padding-right: 55px; } .modal.modal-article .modal-content em.strong { font-weight: bold; } .modal.modal-article .modal-content img { max-width: 100%; margin: 1em 0; } .modal.modal-article .modal-content ul { list-style: disc; font-size: 20px; line-height: 1.4; margin-left: 30px; } .modal.modal-article .modal-content ol { list-style: decimal; font-size: 20px; line-height: 1.4; margin-left: 30px; } .modal.modal-article .modal-content sup { vertical-align: super; font-size: 70%; } .modal.modal-article .modal-content table { width: 100%; margin-top: 40px; font-size: 20px; line-height: 1.4; border-collapse: collapse; text-align: left; } .modal.modal-article .modal-content table caption { font-size: 22px; text-align: left; } .modal.modal-article .modal-content table th, .modal.modal-article .modal-content table td { padding: 10px; border: 1px solid #a3aaaa; } .modal.modal-article .modal-content table thead th { font-size: 22px; font-weight: 600; text-align: center; } .modal.modal-article .modal-content table tbody th { width: 25%; } .modal.modal-article .modal-content .author, .modal.modal-article .modal-content .footnotes { margin-top: 40px; padding-top: 30px; border-top: 1px solid #a3aaaa; } .modal.modal-article .modal-content .author dl dt { float: left; display: block; max-width: 100px; font-weight: 600; margin-right: 15px; } .modal.modal-article .modal-content .author dl dd { display: block; margin-left: 100px; } .modal.modal-pre-federation { color: #fff; background: #333e47; } .modal.modal-pre-federation .modal-content::-webkit-scrollbar-track { background-color: rgba(64, 159, 103, 0.4); } .modal.modal-pre-federation .modal-content::-webkit-scrollbar-thumb { background-color: rgba(64, 159, 103, 0.8); } .modal.modal-pre-federation .modal-content::-webkit-scrollbar-thumb:hover { background-color: #409f67; } .modal.modal-pre-federation .modal-content a { color: #57bb80; } .modal.modal-pre-federation .modal-content img { margin: 0; } .modal.modal-pre-federation .modal-content footer { padding-top: 40px; font-size: 18px; border-bottom-color: #485865; } .modal.modal-pre-federation .modal-content footer > p { color: #d8dbdb; } .modal.modal-pre-federation .modal-content .position-left { display: block; float: left; margin-right: 50px; } .modal.modal-pre-federation .modal-content .position-left ~ footer { clear: both; } .modal.modal-pre-federation .modal-content .position-right { display: block; float: right; margin-left: 50px; } .modal.modal-pre-federation .modal-content .position-right ~ footer { clear: both; } .highcontrast .modal.modal-pre-federation .modal-content a { color: #fff; } .modal.modal-australia, .modal.modal-world { bottom: auto; max-height: 90%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .ie9 .modal.modal-australia, .ie9 .modal.modal-world { top: 60px; } .modal.modal-australia .modal-content, .modal.modal-world .modal-content { padding: 20px 50px 0 60px; font-size: 26px; font-weight: 300; } .modal.modal-australia h2, .modal.modal-world h2 { margin-right: 200px; } .modal.modal-australia { color: #fff; background-color: #007c88; } .modal.modal-australia .modal-content::-webkit-scrollbar-track { background-color: rgba(0, 87, 95, 0.4); } .modal.modal-australia .modal-content::-webkit-scrollbar-thumb { background-color: rgba(0, 87, 95, 0.8); } .modal.modal-australia .modal-content::-webkit-scrollbar-thumb:hover { background-color: #00575f; } .modal.modal-australia .close-button, .modal.modal-australia #carousel .carousel-close, #carousel .modal.modal-australia .carousel-close { background-color: #00575f; } .modal.modal-australia .close-button:before, .modal.modal-australia #carousel .carousel-close:before, #carousel .modal.modal-australia .carousel-close:before { background-image: url(../images/close-icon-australia.png); } .modal.modal-australia .modal-year, .modal.modal-australia .modal-feature-icon { background-color: #00575f; } .modal.modal-australia .modal-item-icon { background-image: url(../images/australia-inverted.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-australia .modal-feature-video a:before { background-color: #00575f; } .modal.modal-australia figure figcaption { background-color: #00575f; } .highcontrast .modal.modal-australia { background-color: #00575f; } .highcontrast .modal.modal-australia .close-button, .highcontrast .modal.modal-australia #carousel .carousel-close, #carousel .highcontrast .modal.modal-australia .carousel-close { background-color: #00363c; } .highcontrast .modal.modal-australia .modal-year, .highcontrast .modal.modal-australia .modal-feature-icon { background-color: #00363c; } .highcontrast .modal.modal-australia .modal-feature-video a:before { background-color: #00363c; } .highcontrast .modal.modal-australia figure figcaption { background-color: #00363c; } .modal.modal-world { color: #fff; background-color: #c05a2c; } .modal.modal-world .modal-content::-webkit-scrollbar-track { background-color: rgba(192, 90, 44, 0.4); } .modal.modal-world .modal-content::-webkit-scrollbar-thumb { background-color: rgba(192, 90, 44, 0.8); } .modal.modal-world .modal-content::-webkit-scrollbar-thumb:hover { background-color: #974722; } .modal.modal-world .close-button, .modal.modal-world #carousel .carousel-close, #carousel .modal.modal-world .carousel-close { background-color: #974722; } .modal.modal-world .close-button:before, .modal.modal-world #carousel .carousel-close:before, #carousel .modal.modal-world .carousel-close:before { background-image: url(../images/close-icon-world.png); } .modal.modal-world .modal-year, .modal.modal-world .modal-feature-icon { background-color: #974722; } .modal.modal-world .modal-item-icon { background-image: url(../images/world-inverted.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-world .modal-feature-video a:before { background-color: #974722; } .modal.modal-world figure figcaption { background-color: #974722; } .highcontrast .modal.modal-world { background-color: #974722; } .highcontrast .modal.modal-world .close-button, .highcontrast .modal.modal-world #carousel .carousel-close, #carousel .highcontrast .modal.modal-world .carousel-close { background-color: #6d3319; } .highcontrast .modal.modal-world .modal-year, .highcontrast .modal.modal-world .modal-feature-icon { background-color: #6d3319; } .highcontrast .modal.modal-world .modal-feature-video a:before { background-color: #6d3319; } .highcontrast .modal.modal-world figure figcaption { background-color: #6d3319; } .modal.modal-filter, .modal.modal-snapshot { bottom: auto; max-height: 90%; top: 50%; color: #fff; background: #333e47; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .ie9 .modal.modal-filter, .ie9 .modal.modal-snapshot { top: 60px; } .modal.modal-filter .modal-content::-webkit-scrollbar-track, .modal.modal-snapshot .modal-content::-webkit-scrollbar-track { background-color: rgba(64, 159, 103, 0.4); } .modal.modal-filter .modal-content::-webkit-scrollbar-thumb, .modal.modal-snapshot .modal-content::-webkit-scrollbar-thumb { background-color: rgba(64, 159, 103, 0.8); } .modal.modal-filter .modal-content::-webkit-scrollbar-thumb:hover, .modal.modal-snapshot .modal-content::-webkit-scrollbar-thumb:hover { background-color: #409f67; } .modal.modal-filter .close-button, .modal.modal-filter #carousel .carousel-close, #carousel .modal.modal-filter .carousel-close, .modal.modal-snapshot .close-button, .modal.modal-snapshot #carousel .carousel-close, #carousel .modal.modal-snapshot .carousel-close { background: #409f67; } .modal.modal-filter .close-button:before, .modal.modal-filter #carousel .carousel-close:before, #carousel .modal.modal-filter .carousel-close:before, .modal.modal-snapshot .close-button:before, .modal.modal-snapshot #carousel .carousel-close:before, #carousel .modal.modal-snapshot .carousel-close:before { background-image: url(../images/close-icon-filter.png); background-position: 0 0; background-repeat: no-repeat; background-color: #fff; } .highcontrast .modal.modal-filter .close-button, .highcontrast .modal.modal-filter #carousel .carousel-close, #carousel .highcontrast .modal.modal-filter .carousel-close, .highcontrast .modal.modal-snapshot .close-button, .highcontrast .modal.modal-snapshot #carousel .carousel-close, #carousel .highcontrast .modal.modal-snapshot .carousel-close { background: #235638; } .modal.modal-filter { max-width: 890px; min-height: 600px; } .modal.modal-filter .modal-content { padding: 20px 60px; } .modal.modal-filter h2 { width: 250px; margin-bottom: 70px; } .modal.modal-filter .filter-controls { position: absolute; left: 50px; bottom: 40px; } .modal.modal-filter button[name="filter"] { border: none; display: block; float: left; width: 45%; margin: 0 5% 0 0; padding: 10px 20px 10px 0; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 24px; color: #fff; background: transparent; cursor: pointer; text-align: left; } .modal.modal-filter button[name="filter"]:before { content: ''; box-sizing: border-box; -moz-box-sizing: border-box; display: inline-block; position: relative; top: -2px; vertical-align: middle; margin-right: 12px; width: 17px; height: 17px; border: 1px solid #fff; } .modal.modal-filter button[name="filter"].checked:before { background: #317b4f; background-image: url(../images/checked-icon-filter.png); background-position: 50% 50%; background-repeat: no-repeat; } .highcontrast .modal.modal-filter button[name="filter"].checked:before { background-image: url(../images/checked-icon-filter-contrast.png); } .modal.modal-snapshot { max-width: 940px; min-height: 900px; overflow: hidden; } .modal.modal-snapshot .modal-content { top: 0; right: 0; bottom: 0; left: 0; padding-top: 40px; overflow: hidden; } .modal.modal-snapshot h3 { margin: 0 11px 50px; font-size: 40px; font-family: 'Ubuntu-R', sans-serif; } .modal.modal-snapshot h4 { margin-left: 265px; margin-bottom: 20px; font-size: 22px; color: #fff; text-transform: uppercase; font-weight: 300; } .modal.modal-snapshot h4 > span { text-transform: none; } .modal.modal-snapshot p { font-size: 28px; } .modal.modal-snapshot .close-button, .modal.modal-snapshot #carousel .carousel-close, #carousel .modal.modal-snapshot .carousel-close { right: 40px; } .modal.modal-snapshot .snapshot-pagination-left-container, .modal.modal-snapshot .snapshot-pagination-right-container { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; z-index: 3; display: block; top: 0; bottom: 0; width: 41px; background-color: #333e47; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .modal.modal-snapshot .snapshot-pagination-left-container:before, .modal.modal-snapshot .snapshot-pagination-right-container:before { content: ''; position: absolute; z-index: 1; display: block; top: 50%; height: 400px; margin-top: -180px; width: 1px; background: -webkit-linear-gradient(top, #333e47, #485865 40%, #485865 60%, #333e47); background: -moz-linear-gradient(top, #333e47, #485865 40%, #485865 60%, #333e47); background: -ms-linear-gradient(top, #333e47, #485865 40%, #485865 60%, #333e47); background: -o-linear-gradient(top, #333e47, #485865 40%, #485865 60%, #333e47); background: linear-gradient(top, #333e47, #485865 40%, #485865 60%, #333e47); } .modal.modal-snapshot .snapshot-pagination-left-container { left: 0; } .modal.modal-snapshot .snapshot-pagination-left-container:before { right: 0; } .modal.modal-snapshot .snapshot-pagination-left-container.disabled { left: -41px; } .modal.modal-snapshot .snapshot-pagination-right-container { right: 0; } .modal.modal-snapshot .snapshot-pagination-right-container:before { left: 0; } .modal.modal-snapshot .snapshot-pagination-right-container.disabled { right: -41px; } .modal.modal-snapshot .snapshot-pagination-left, .modal.modal-snapshot .snapshot-pagination-right { position: absolute; z-index: 3; width: 40px; height: 330px; top: 50%; margin-top: -130px; border: none; overflow: hidden; text-indent: 80px; font-size: 0; word-wrap: none; background: #333e47; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .modal.modal-snapshot .snapshot-pagination-left:hover, .modal.modal-snapshot .snapshot-pagination-left:focus, .modal.modal-snapshot .snapshot-pagination-right:hover, .modal.modal-snapshot .snapshot-pagination-right:focus { background-color: #333e47; } .modal.modal-snapshot .snapshot-pagination-left { left: 0; background-image: url(../images/paginate-left.png); background-position: 11px 50%; background-repeat: no-repeat; } .modal.modal-snapshot .snapshot-pagination-right { right: 0; background-image: url(../images/paginate-right.png); background-position: 12px 50%; background-repeat: no-repeat; } .modal.modal-snapshot .snapshot > ul { position: absolute; top: 50%; left: 70px; right: 70px; margin-top: -180px; padding-top: 50px; } .modal.modal-snapshot .snapshot > ul > li { display: block; width: 100%; } .modal.modal-snapshot .snapshot > ul > li:first-child { margin-left: 0; } .modal.modal-snapshot .snapshot > ul > li .lists { margin-left: 265px; } .modal.modal-snapshot .snapshot > ul > li .lists h4 { margin-left: 0; } .modal.modal-snapshot .snapshot > ul > li .lists > div, .modal.modal-snapshot .snapshot > ul > li .lists > ol, .modal.modal-snapshot .snapshot > ul > li .lists > ul { box-sizing: border-box; -moz-box-sizing: border-box; float: left; display: block; width: 50%; } .modal.modal-snapshot .snapshot > ul > li .lists p { clear: both; width: 80%; font-size: 15px; font-weight: 200; } body.debug .modal.modal-snapshot .snapshot > ul > li { background: black; } .modal.modal-snapshot .snapshots-graphic { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; width: 215px; height: 260px; margin-right: 50px; margin-bottom: 50px; background-position: 50% 50%; background-repeat: no-repeat; background-color: #409f67; border-radius: 6px; } .modal.modal-snapshot .snapshots-graphic[data-icon="australia"] { background-image: url(../images/snapshot-australia.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="japan"] { background-image: url(../images/snapshot-japan.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="usa"] { background-image: url(../images/snapshot-usa.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="uk"] { background-image: url(../images/snapshot-uk.png); background-position: 50% 10px; } .modal.modal-snapshot .snapshots-graphic[data-icon="china"] { background-image: url(../images/snapshot-china.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="goods"] { background-image: url(../images/snapshot-goods.png); background-position: 50% 80px; } .modal.modal-snapshot .snapshots-graphic[data-icon="imports"] { background-image: url(../images/snapshot-imports.png); background-position: 50% 80px; } .modal.modal-snapshot .snapshots-graphic[data-icon="wool"] { background-image: url(../images/item_icon_wool.svg); background-size: 150px auto; background-position: 50% 76px; } .modal.modal-snapshot .snapshots-graphic[data-icon="wheat"] { background-image: url(../images/item_icon_wheat.svg); background-size: 160px auto; background-position: 50% 72px; } .modal.modal-snapshot .snapshots-graphic[data-icon="mining"] { background-image: url(../images/item_icon_mining.svg); background-size: 150px auto; background-position: 50% 76px; } .modal.modal-snapshot .snapshots-graphic[data-icon="oil"] { background-image: url(../images/item_icon_oil.svg); background-size: 150px auto; background-position: 50% 76px; } .modal.modal-snapshot .snapshots-graphic[data-icon="person"] { background-image: url(../images/snapshot-person.png); background-position: 50% 5px; } .modal.modal-snapshot .snapshots-graphic[data-icon="car"] { background-image: url(../images/item_icon_car.svg); background-size: 150px auto; background-position: 50% 76px; } .modal.modal-snapshot .snapshots-graphic[data-icon="indicator"] { background-image: url(../images/snapshot-indicator.png); background-position: 50% 10px; } .highcontrast .modal.modal-snapshot .snapshots-graphic { background-color: #317b4f; } .modal.modal-snapshot .snapshots-graphic > span { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; display: block; top: 0; left: 0; height: 44px; line-height: 44px; padding: 0 10px 0 54px; text-decoration: none; font-size: 24px; text-transform: uppercase; font-family: 'Ubuntu-L', sans-serif; color: #fff; background: #317b4f; white-space: nowrap; border: none; border-radius: 6px 0 6px 0; } .modal.modal-snapshot .snapshots-graphic > span:before { content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; width: 44px; background-color: #fff; border-radius: 6px 0 0 0; } .highcontrast .modal.modal-snapshot .snapshots-graphic > span { background: #235638; } .modal.modal-snapshot .snapshots-know h4 { margin-left: 0; } .modal.modal-snapshot .snapshots-export ol, .modal.modal-snapshot .snapshots-import ol, .modal.modal-snapshot .snapshots-goods ol { list-style: none; margin-left: 265px; } .modal.modal-snapshot .snapshots-export ol > li, .modal.modal-snapshot .snapshots-import ol > li, .modal.modal-snapshot .snapshots-goods ol > li { box-sizing: border-box; -moz-box-sizing: border-box; display: block; width: 50%; margin-bottom: 18px; padding-right: 10px; font-size: 20px; font-weight: 500; } .modal.modal-snapshot .snapshots-export ol > li:first-child, .modal.modal-snapshot .snapshots-import ol > li:first-child, .modal.modal-snapshot .snapshots-goods ol > li:first-child { width: 100%; height: 95px; margin-bottom: 20px; } .modal.modal-snapshot .snapshots-export ol > li:first-child > strong, .modal.modal-snapshot .snapshots-import ol > li:first-child > strong, .modal.modal-snapshot .snapshots-goods ol > li:first-child > strong { box-sizing: border-box; -moz-box-sizing: border-box; font-size: 64px; font-weight: 500; width: 54px; line-height: 92px; text-align: center; color: #409f67; background: transparent; border: 1px solid #409f67; border-radius: 6px; } .modal.modal-snapshot .snapshots-export ol > li:first-child > strong:before, .modal.modal-snapshot .snapshots-import ol > li:first-child > strong:before, .modal.modal-snapshot .snapshots-goods ol > li:first-child > strong:before { content: ''; display: block; position: absolute; top: 50%; height: 1px; background: #409f67; right: 100%; width: 50px; margin-right: 1px; } .highcontrast .modal.modal-snapshot .snapshots-export ol > li:first-child > strong, .highcontrast .modal.modal-snapshot .snapshots-import ol > li:first-child > strong, .highcontrast .modal.modal-snapshot .snapshots-goods ol > li:first-child > strong { background: transparent; } .modal.modal-snapshot .snapshots-export ol > li:first-child > span, .modal.modal-snapshot .snapshots-import ol > li:first-child > span, .modal.modal-snapshot .snapshots-goods ol > li:first-child > span { margin-left: 66px; font-size: 38px; line-height: 45px; color: #409f67; } .modal.modal-snapshot .snapshots-export ol > li:first-child > span > span, .modal.modal-snapshot .snapshots-import ol > li:first-child > span > span, .modal.modal-snapshot .snapshots-goods ol > li:first-child > span > span { font-weight: 500; } .modal.modal-snapshot .snapshots-export ol > li:first-child > span small, .modal.modal-snapshot .snapshots-import ol > li:first-child > span small, .modal.modal-snapshot .snapshots-goods ol > li:first-child > span small { margin-left: 3px; font-weight: 200; font-size: 0.55em; } .modal.modal-snapshot .snapshots-export ol > li:first-child + li, .modal.modal-snapshot .snapshots-import ol > li:first-child + li, .modal.modal-snapshot .snapshots-goods ol > li:first-child + li { clear: both; } .modal.modal-snapshot .snapshots-export ol > li:first-child + li + li + li, .modal.modal-snapshot .snapshots-import ol > li:first-child + li + li + li, .modal.modal-snapshot .snapshots-goods ol > li:first-child + li + li + li { clear: both; } .modal.modal-snapshot .snapshots-export ol > li > strong, .modal.modal-snapshot .snapshots-import ol > li > strong, .modal.modal-snapshot .snapshots-goods ol > li > strong { position: absolute; display: block; font-weight: 500; width: 27px; line-height: 45px; margin-right: 10px; text-align: center; font-size: 30px; font-weight: 500; color: #fff; background-color: #409f67; border-radius: 6px; } .modal.modal-snapshot .snapshots-export ol > li > strong + span, .modal.modal-snapshot .snapshots-import ol > li > strong + span, .modal.modal-snapshot .snapshots-goods ol > li > strong + span { display: block; } .highcontrast .modal.modal-snapshot .snapshots-export ol > li > strong, .highcontrast .modal.modal-snapshot .snapshots-import ol > li > strong, .highcontrast .modal.modal-snapshot .snapshots-goods ol > li > strong { background: #235638; } .modal.modal-snapshot .snapshots-export ol > li > span, .modal.modal-snapshot .snapshots-import ol > li > span, .modal.modal-snapshot .snapshots-goods ol > li > span { display: block; position: relative; margin-left: 36px; top: 2px; } .modal.modal-snapshot .snapshots-export ol > li > span > span, .modal.modal-snapshot .snapshots-import ol > li > span > span, .modal.modal-snapshot .snapshots-goods ol > li > span > span { font-weight: 500; } .modal.modal-snapshot .snapshots-export ol > li > span small, .modal.modal-snapshot .snapshots-import ol > li > span small, .modal.modal-snapshot .snapshots-goods ol > li > span small { position: relative; font-size: 65%; color: #d8dbdb; } .modal.modal-snapshot .snapshots-export ol > li ~ li, .modal.modal-snapshot .snapshots-import ol > li ~ li, .modal.modal-snapshot .snapshots-goods ol > li ~ li { float: left; } .modal.modal-snapshot .snapshots-economic-stocks h4, .modal.modal-snapshot .snapshots-services-trades h4, .modal.modal-snapshot .snapshots-services-locations h4, .modal.modal-snapshot .snapshots-economic-trade h4 { margin-bottom: 10px; } .modal.modal-snapshot .snapshots-economic-stocks h5, .modal.modal-snapshot .snapshots-services-trades h5, .modal.modal-snapshot .snapshots-services-locations h5, .modal.modal-snapshot .snapshots-economic-trade h5 { margin-bottom: 12px; text-transform: none; font-weight: 500; font-size: 20px; line-height: 22px; color: #409f67; } .modal.modal-snapshot .snapshots-economic-stocks h5 span, .modal.modal-snapshot .snapshots-services-trades h5 span, .modal.modal-snapshot .snapshots-services-locations h5 span, .modal.modal-snapshot .snapshots-economic-trade h5 span { display: block; } .modal.modal-snapshot .snapshots-economic-stocks ol, .modal.modal-snapshot .snapshots-services-trades ol, .modal.modal-snapshot .snapshots-services-locations ol, .modal.modal-snapshot .snapshots-economic-trade ol { list-style: none; } .modal.modal-snapshot .snapshots-economic-stocks ol > li, .modal.modal-snapshot .snapshots-services-trades ol > li, .modal.modal-snapshot .snapshots-services-locations ol > li, .modal.modal-snapshot .snapshots-economic-trade ol > li { box-sizing: border-box; -moz-box-sizing: border-box; display: block; margin-bottom: 18px; padding-right: 10px; font-size: 20px; line-height: 22px; font-weight: 200; } .modal.modal-snapshot .snapshots-economic-stocks ol > li > strong, .modal.modal-snapshot .snapshots-services-trades ol > li > strong, .modal.modal-snapshot .snapshots-services-locations ol > li > strong, .modal.modal-snapshot .snapshots-economic-trade ol > li > strong { float: left; position: relative; display: inline-block; font-weight: 500; width: 27px; line-height: 45px; margin-right: 15px; text-align: center; font-size: 30px; font-weight: 500; color: #fff; background-color: #409f67; border-radius: 6px; } .modal.modal-snapshot .snapshots-economic-stocks ol > li > strong ~ span, .modal.modal-snapshot .snapshots-services-trades ol > li > strong ~ span, .modal.modal-snapshot .snapshots-services-locations ol > li > strong ~ span, .modal.modal-snapshot .snapshots-economic-trade ol > li > strong ~ span { display: block; margin-left: 40px; } .highcontrast .modal.modal-snapshot .snapshots-economic-stocks ol > li > strong, .highcontrast .modal.modal-snapshot .snapshots-services-trades ol > li > strong, .highcontrast .modal.modal-snapshot .snapshots-services-locations ol > li > strong, .highcontrast .modal.modal-snapshot .snapshots-economic-trade ol > li > strong { background: #235638; } .modal.modal-snapshot .snapshots-economic-stocks ol > li > span, .modal.modal-snapshot .snapshots-services-trades ol > li > span, .modal.modal-snapshot .snapshots-services-locations ol > li > span, .modal.modal-snapshot .snapshots-economic-trade ol > li > span { position: relative; top: 2px; font-weight: 200; } .modal.modal-snapshot .snapshots-economic-stocks ol > li > span > span, .modal.modal-snapshot .snapshots-services-trades ol > li > span > span, .modal.modal-snapshot .snapshots-services-locations ol > li > span > span, .modal.modal-snapshot .snapshots-economic-trade ol > li > span > span { font-weight: 500; } .modal.modal-snapshot .snapshots-economic-stocks ol > li small, .modal.modal-snapshot .snapshots-services-trades ol > li small, .modal.modal-snapshot .snapshots-services-locations ol > li small, .modal.modal-snapshot .snapshots-economic-trade ol > li small { position: relative; display: inline-block; top: 2px; color: #d8dbdb; font-size: 65%; } .modal.modal-snapshot .snapshots-economic-stocks ul, .modal.modal-snapshot .snapshots-services-trades ul, .modal.modal-snapshot .snapshots-services-locations ul, .modal.modal-snapshot .snapshots-economic-trade ul { list-style: none; } .modal.modal-snapshot .snapshots-economic-stocks ul > li, .modal.modal-snapshot .snapshots-services-trades ul > li, .modal.modal-snapshot .snapshots-services-locations ul > li, .modal.modal-snapshot .snapshots-economic-trade ul > li { box-sizing: border-box; -moz-box-sizing: border-box; display: block; position: relative; line-height: 22px; margin-bottom: 18px; padding-left: 30px; padding-right: 10px; font-size: 20px; font-weight: 200; } .modal.modal-snapshot .snapshots-economic-stocks ul > li:before, .modal.modal-snapshot .snapshots-services-trades ul > li:before, .modal.modal-snapshot .snapshots-services-locations ul > li:before, .modal.modal-snapshot .snapshots-economic-trade ul > li:before { content: ''; position: absolute; display: block; left: 8px; top: 5px; border-style: solid; border-width: 6px 0px 6px 11px; border-color: transparent transparent transparent #409f67; } .modal.modal-snapshot .snapshots-economic-stocks ul > li.emphasise, .modal.modal-snapshot .snapshots-services-trades ul > li.emphasise, .modal.modal-snapshot .snapshots-services-locations ul > li.emphasise, .modal.modal-snapshot .snapshots-economic-trade ul > li.emphasise { color: #409f67; } .modal.modal-snapshot .snapshots-economic-stocks ul > li > span, .modal.modal-snapshot .snapshots-services-trades ul > li > span, .modal.modal-snapshot .snapshots-services-locations ul > li > span, .modal.modal-snapshot .snapshots-economic-trade ul > li > span { font-weight: 200; } .modal.modal-snapshot .snapshots-economic-stocks ul > li > span:first-child, .modal.modal-snapshot .snapshots-services-trades ul > li > span:first-child, .modal.modal-snapshot .snapshots-services-locations ul > li > span:first-child, .modal.modal-snapshot .snapshots-economic-trade ul > li > span:first-child { display: block; font-weight: 500; } .modal.modal-snapshot .snapshots-economic-stocks ul > li small, .modal.modal-snapshot .snapshots-services-trades ul > li small, .modal.modal-snapshot .snapshots-services-locations ul > li small, .modal.modal-snapshot .snapshots-economic-trade ul > li small { position: relative; display: inline-block; color: #d8dbdb; font-size: 65%; } .modal.modal-snapshot .snapshots-economic-stocks ul > li, .modal.modal-snapshot .snapshots-economic-stocks ol > li { font-size: 18px; } .modal.modal-snapshot .snapshots-goods .snapshots-graphic span:before, .modal.modal-snapshot .snapshots-export .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-export.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .snapshots-import .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-import.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .snapshots-services-trades .snapshots-graphic span:before, .modal.modal-snapshot .snapshots-services-locations .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-services.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .snapshots-economic-trade .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-info.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .snapshots-economic-stocks .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-bills.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .summary { clear: both; margin-top: 0; margin-bottom: 0; margin-left: 20px; padding-top: 40px; font-size: 22px; font-weight: 200; } .modal.modal-snapshot .summary > span { display: block; } .modal.modal-chart { font-size: 18px; color: #000; background: #fff; } .modal.modal-chart .legend { position: absolute; top: 20px; left: 255px; color: #007c88; } .modal.modal-chart .legend:before { content: ''; display: block; position: absolute; top: 1px; right: 100%; margin-right: 10px; width: 23px; height: 23px; background-image: url(../images/list-logo.png); background-position: 0 0; background-repeat: no-repeat; background-size: contain; } .highcontrast .modal.modal-chart .legend { color: #235638; } .modal.modal-chart .modal-content { top: 55px; left: 190px; padding-right: 15px; } .modal.modal-chart .modal-content::-webkit-scrollbar-track { background-color: #cccccc; border-radius: 3px; } .modal.modal-chart .modal-content::-webkit-scrollbar-thumb { background-color: #000; border-radius: 3px; } .modal.modal-chart .modal-content::-webkit-scrollbar-thumb:hover { background-color: #409f67; } .modal.modal-chart .charts > div { border-top: 1px solid #A7A9AC; padding-top: 35px; padding-bottom: 15px; } .modal.modal-chart .charts > div:first-child { border-top: none; padding-top: 0; } .modal.modal-chart .charts .chart { position: relative; } .modal.modal-chart .charts .chart img { width: 100%; height: auto; } .modal.modal-chart .charts .chart .chart-tooltip { position: absolute; top: 0; left: 0; width: 200px; padding: 10px; font-size: 15px; background: #fff; border: 1px solid #cccccc; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; -webkit-transition: -webkit-transform .15s, opacity .1s ease-in-out; -moz-transition: -moz-transform .15s, opacity .1s ease-in-out; -o-transition: -o-transform .15s, opacity .1s ease-in-out; transition: transform .15s, opacity .1s ease-in-out; } .modal.modal-chart .charts .chart .chart-tooltip.open { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .modal.modal-chart .charts .chart .chart-tooltip p { margin: 0; } .modal.modal-chart h2 { margin-bottom: 15px; padding-left: 35px; font-size: 26px; text-transform: none; font-weight: 300; color: #007c88; } .highcontrast .modal.modal-chart h2 { color: #235638; } .modal.modal-chart h3 { position: relative; margin-top: 10px; font-size: 26px; line-height: 1.25; padding-left: 35px; color: #007c88; outline: none; cursor: pointer; } .highcontrast .modal.modal-chart h3 { color: #00363c; } .modal.modal-chart area { outline: none; cursor: default; } .modal.modal-chart .collapsible.open h3:before { left: 10px; border-width: 10px 6px 0 6px; border-color: #007c88 transparent transparent transparent; } .modal.modal-chart .collapsible h3:focus { background-color: #f2f2f2; } .modal.modal-chart .collapsible h3:before { content: ''; display: block; position: absolute; top: 10px; left: 12px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #007c88; } .modal.modal-chart .collapsible > div { display: none; } .modal.modal-chart ul { margin-left: 35px; } .modal.modal-chart ul > li { position: relative; margin-bottom: 10px; } .modal.modal-chart ul > li:before { content: ''; display: inline-block; position: absolute; top: 1px; right: 100%; margin-right: 10px; width: 23px; height: 23px; background-image: url(../images/list-logo.png); background-position: 0 0; background-repeat: no-repeat; background-size: contain; } .modal.modal-chart ol { list-style: decimal; margin-top: 20px; margin-bottom: 10px; margin-bottom: 40px; } .modal.modal-chart ol > li { margin-bottom: 10px; line-height: 1.3; } .modal.modal-chart li ul, .modal.modal-chart li ol { margin-top: 10px; margin-left: 30px; } .modal.modal-chart .close-button, .modal.modal-chart #carousel .carousel-close, #carousel .modal.modal-chart .carousel-close { top: 20px; right: 31px; } .modal.modal-chart .modal-chart-menu-control { position: absolute; top: 0; left: 0; z-index: 2; margin: 0; width: 40px; height: 40px; background-image: url(../images/menu.gif); background-position: 50% 50%; background-repeat: no-repeat; background-color: #409f67; border: none; text-indent: 40px; white-space: nowrap; cursor: pointer; } .modal.modal-chart .modal-chart-menu-control.active { background-image: url(../images/close-menu.gif); background-position: 50% 50%; background-repeat: no-repeat; background-color: #a3aaaa; } .highcontrast .modal.modal-chart .modal-chart-menu-control { background-color: #235638; } .highcontrast .modal.modal-chart .modal-chart-menu-control.active { background-color: #969e9e; } .modal.modal-chart .modal-chart-menu { display: block; position: absolute; top: 0; bottom: 0; z-index: 1; width: 200px; color: #A7A9AC; background: #333e47; font-size: 18px; -webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -ms-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } .modal.modal-chart .modal-chart-menu ol { display: block; list-style: none; margin-top: 20px; } .modal.modal-chart .modal-chart-menu ol li { display: block; margin: 0 20px; line-height: 1; } .modal.modal-chart .modal-chart-menu ol li a { display: block; padding: 20px 0; color: #A7A9AC; border-bottom: 1px solid #A7A9AC; text-decoration: none; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .modal.modal-chart .modal-chart-menu ol li a:hover, .modal.modal-chart .modal-chart-menu ol li a:focus { color: #fff; } .modal.modal-chart .modal-chart-menu ol li a.active { color: #fff; } .modal h2 { margin-right: 160px; margin-bottom: 40px; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 41px; line-height: 1.25; } .modal h3 { font-family: 'Ubuntu-L', sans-serif; margin-top: 1.1em; margin-bottom: .8em; } .modal h3.modal-year { position: relative; display: inline-block; line-height: 44px; margin-bottom: 15px; margin-top: 0; padding-left: 50px; padding-right: 8px; color: #fff; border-radius: 6px; } .modal h3.modal-year .modal-item-icon { position: absolute; top: 0; left: 0; bottom: 0; width: 44px; overflow: hidden; text-indent: 50px; white-space: nowrap; font-size: 0; border-radius: 6px 0 0 6px; } .modal .modal-content { overflow: auto; display: block; position: absolute; top: 20px; bottom: 20px; left: 0; right: 10px; padding: 20px 30px 0; font-size: 20px; line-height: 1.3; } .modal .modal-content::-webkit-scrollbar { width: 6px; height: 6px; } .modal .modal-content::-webkit-scrollbar-track { background-color: #f2f2f2; border-radius: 3px; } .modal .modal-content::-webkit-scrollbar-thumb { background-color: #cccccc; border-radius: 3px; } .modal .modal-content::-webkit-scrollbar-thumb:hover { background-color: #409f67; } .modal .modal-content .supporters { padding-top: 35px; text-align: center; } .modal .modal-content .supporters h3 { margin-top: 50px; margin-bottom: 30px; } .modal .modal-feature-video, .modal .modal-feature-icon { display: block; width: 65%; height: auto; float: right; margin-left: 40px; margin-bottom: 30px; } .modal .modal-feature-video img, .modal .modal-feature-icon img { display: block; width: 100%; height: auto; } .modal figure { display: block; width: 65%; height: auto; float: right; margin-left: 40px; margin-bottom: 30px; } .modal figure img { display: block; width: 100%; height: auto; } .modal figure figcaption { padding: 15px; font-size: 14px; } .modal .modal-feature-video { background: #000; width: 490px; height: 368px; } .modal .modal-feature-video a { position: relative; display: block; width: inherit; height: inherit; } .modal .modal-feature-video a:before { content: ''; display: block; position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; background-image: url(../images/play-icon.png); background-position: 50% 50%; background-repeat: no-repeat; text-indent: 50px; z-index: 1; } .modal .modal-feature-video iframe { width: 100% !important; } .modal .modal-feature-icon { box-sizing: border-box; -moz-box-sizing: border-box; height: 320px; width: 320px; border: 50px solid transparent; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; text-indent: 320px; overflow: hidden; white-space: nowrap; border-radius: 12px; } .modal .modal-feature-icon.modal-feature-icon-agriculture { background-image: url(../images/item_icon_agriculture.svg); } .modal .modal-feature-icon.modal-feature-icon-australia { background-image: url(../images/item_icon_australia.svg); } .modal .modal-feature-icon.modal-feature-icon-chemicals { background-image: url(../images/item_icon_chemicals.svg); } .modal .modal-feature-icon.modal-feature-icon-china { background-image: url(../images/item_icon_china.svg); } .modal .modal-feature-icon.modal-feature-icon-dairy { background-image: url(../images/item_icon_dairy.svg); } .modal .modal-feature-icon.modal-feature-icon-decrease { background-image: url(../images/item_icon_decrease.svg); } .modal .modal-feature-icon.modal-feature-icon-decreaseline { background-image: url(../images/item_icon_decreaseline.svg); } .modal .modal-feature-icon.modal-feature-icon-dollar { background-image: url(../images/item_icon_dollar.svg); } .modal .modal-feature-icon.modal-feature-icon-down { background-image: url(../images/item_icon_down.svg); } .modal .modal-feature-icon.modal-feature-icon-education { background-image: url(../images/item_icon_education.svg); } .modal .modal-feature-icon.modal-feature-icon-euro { background-image: url(../images/item_icon_euro.svg); } .modal .modal-feature-icon.modal-feature-icon-export { background-image: url(../images/item_icon_export.svg); } .modal .modal-feature-icon.modal-feature-icon-global { background-image: url(../images/item_icon_global.svg); } .modal .modal-feature-icon.modal-feature-icon-gold { background-image: url(../images/item_icon_gold.svg); } .modal .modal-feature-icon.modal-feature-icon-handshake { background-image: url(../images/item_icon_handshake.svg); } .modal .modal-feature-icon.modal-feature-icon-import { background-image: url(../images/item_icon_import.svg); } .modal .modal-feature-icon.modal-feature-icon-increase { background-image: url(../images/item_icon_increase.svg); } .modal .modal-feature-icon.modal-feature-icon-increaseline { background-image: url(../images/item_icon_increaseline.svg); } .modal .modal-feature-icon.modal-feature-icon-japan { background-image: url(../images/item_icon_japan.svg); } .modal .modal-feature-icon.modal-feature-icon-manufacturing { background-image: url(../images/item_icon_manufacturing.svg); } .modal .modal-feature-icon.modal-feature-icon-mining { background-image: url(../images/item_icon_mining.svg); } .modal .modal-feature-icon.modal-feature-icon-money { background-image: url(../images/item_icon_money.svg); } .modal .modal-feature-icon.modal-feature-icon-oil { background-image: url(../images/item_icon_oil.svg); } .modal .modal-feature-icon.modal-feature-icon-pound { background-image: url(../images/item_icon_pound.svg); } .modal .modal-feature-icon.modal-feature-icon-sugar { background-image: url(../images/item_icon_sugar.svg); } .modal .modal-feature-icon.modal-feature-icon-tourism { background-image: url(../images/item_icon_tourism.svg); } .modal .modal-feature-icon.modal-feature-icon-uk { background-image: url(../images/item_icon_uk.svg); } .modal .modal-feature-icon.modal-feature-icon-usa { background-image: url(../images/item_icon_usa.svg); } .modal .modal-feature-icon.modal-feature-icon-up { background-image: url(../images/item_icon_up.svg); } .modal .modal-feature-icon.modal-feature-icon-wheat { background-image: url(../images/item_icon_wheat.svg); } .modal .modal-feature-icon.modal-feature-icon-wine { background-image: url(../images/item_icon_wine.svg); } .modal .modal-feature-icon.modal-feature-icon-wool { background-image: url(../images/item_icon_wool.svg); } .modal .modal-feature-icon.modal-feature-icon-world { background-image: url(../images/item_icon_world.svg); } .modal .modal-feature-icon.modal-feature-icon-yen { background-image: url(../images/item_icon_yen.svg); } .modal .modal-feature-icon ~ p { margin-right: 320px; } .modal .modal-media-only .modal-feature-image, .modal .modal-media-only .modal-feature-video, .modal .modal-media-only .modal-feature-icon { margin: 0 auto; float: none; } .overlay { position: fixed; z-index: 2; top: 70px; bottom: 100px; left: 0; right: 0; width: 1120px; margin: 0 auto; /* background: $white; opacity: .5; */ } .overlay.overlay-trendlines { background: rgba(255, 255, 255, 0.95); } .overlay.overlay-trendlines h2 { font-size: 0; } .overlay .trendlines-canvas { position: absolute; top: 100px; bottom: 100px; left: 30px; right: 30px; } .overlay .trendlines-controls { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; bottom: 0; left: 0; right: 0; height: 50px; text-align: center; padding-top: 14px; } .overlay .trendlines-controls button { box-sizing: border-box; -moz-box-sizing: border-box; position: relative; display: inline-block; height: 24px; margin: 0; padding: 2px 6px 2px 44px; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 14px; text-transform: uppercase; border: none; color: #fff; background-color: #969e9e; cursor: pointer; } .overlay .trendlines-controls button:hover, .overlay .trendlines-controls button:focus { background-color: #000; } .overlay .trendlines-controls button:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 40px; background-color: #a3aaaa; background-position: 50% 50%; background-repeat: no-repeat; } .overlay .trendlines-controls button.trendlines-radio-gdp:before { background-image: url(../images/trendline-icon-solid.png); } .overlay .trendlines-controls button.trendlines-radio-tradeopenness:before { background-image: url(../images/trendline-icon-thin.png); } .overlay .trendlines-controls button.trendlines-radio-unemployment:before { background-image: url(../images/trendline-icon-dashed.png); } .overlay .trendlines-controls button.selected:before { background-color: #409f67; } .highcontrast .overlay .trendlines-controls button.selected:before { background-color: #235638; } .overlay .trendlines-controls button ~ button { margin-left: 10px; } .wrap { box-sizing: border-box; -moz-box-sizing: border-box; } #welcome { position: absolute; z-index: 12; top: 0; left: 0; right: 0; min-height: 560px; height: 100%; color: #fff; overflow: auto; background-color: #000; } #welcome .ttt-logo { display: inline-block; position: absolute; top: 0; left: 5px; width: 165px; height: auto; } #welcome h1 { position: absolute; top: 175px; left: 0; width: 240px; margin-bottom: 20px; font-size: 2.1em; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; } #welcome h1 ~ h2, #welcome h1 ~ p { margin-left: 285px; } #welcome h2 { margin-bottom: 20px; font-size: 2em; } #welcome p { font-weight: 300; } #welcome #welcomecontinue { display: block; right: 0; left: auto; top: auto; bottom: auto; margin-left: auto; margin-bottom: 0; margin-top: 40px; margin-bottom: 0; font-size: 18px; height: 40px; line-height: 40px; padding: 0 45px 0 20px; } #welcome #welcomecontinue:before { width: 32px; background-size: contain; background-position: 50% 50%; } #welcome .welcome-logo { display: block; position: absolute; top: 0; left: 0; z-index: 1; } #welcome .welcome-content { position: absolute; z-index: 1; top: 15% !important; padding-bottom: 24px; } #welcome .welcome-image { display: block; position: fixed; z-index: 2; top: 0; left: 0; bottom: 0; right: 0; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } #welcome .welcome-wrapper { position: relative; height: 100%; z-index: 3; } #welcome .welcome-wrapper:before { content: ''; display: block; position: absolute; z-index: 1; top: 0; left: 0; right: calc(50% + 384px); height: 120px; background-image: url(../images/DFAT-Banner-texture-left-reversed.png); background-position: 100% 0; background-repeat: repeat; } #welcome .welcome-wrapper:after { content: ''; display: block; position: absolute; z-index: 1; top: 0; right: 0; left: calc(50% + 384px); height: 79px; background-image: url(../images/DFAT-Banner-texture-right-reversed.png); background-position: 0 0; background-repeat: repeat; } #welcome .welcome-wrapper > img { position: relative; z-index: 2; display: block; margin: auto; } #welcome .welcome-wrapper > div { position: relative; max-width: 768px; height: calc(100% - 120px); margin: auto; } #welcome .welcome-wrapper .hidden { display: none; } #welcome .welcome-wrapper .welcome-coat-of-arms { display: block; margin-left: auto; } #welcome .welcome-footer { position: absolute; left: 0; bottom: 0; right: 0; padding: 20px 10px; } #welcome .welcome-footer .welcome-aust { display: inline-block; margin-left: 256px; } #about { display: none; } #disclaimer { display: none; } #historical_data { display: none; } #sources { display: none; } #acknowlegements { display: none; } #pre_federation_article, #article { display: none; } #glossary { display: none; } #main { min-width: 1020px; } #main .wrap { max-width: 1200px; margin: 0 auto; } body.debug #main { background: pink; } #depricate { position: absolute; z-index: 15; top: 0; left: 0; right: 0; min-height: 80px; text-align: center; padding-top: 10px; font-size: 20px; background: #fff; } #depricate p { margin: auto; max-width: 720px; } #canvas > div { height: 800px; background: #fff; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } #canvas > div button.article-button { left: 0; } .debug #canvas > div { background: #06f8bc; } #header { position: relative; z-index: 4; height: 70px; color: #fff; background: #485865; min-width: 1000px; } #header:before { content: ''; display: block; position: absolute; z-index: 5; top: 100%; left: 0; right: calc(50% + 384px); height: 41px; background: #485865; } #header:after { content: ''; display: block; position: absolute; z-index: 5; top: 100%; left: calc(50% - 384px); width: 262px; height: 41px; background-image: url(../images/header-shape.png); background-position: 0 0; background-repeat: no-repeat; background-size: contain; } #header > .masthead:before { content: ''; display: block; position: absolute; z-index: 5; left: 0; right: 0; height: 70px; background: #485865; } #header .wrap { position: relative; } #header .wrap > .controls { list-style: none; display: block; position: absolute; z-index: 5; top: 22px; right: 40px; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 14px; text-transform: uppercase; } #header .wrap > .controls li { display: inline-block; margin-left: 20px; margin-left: 5px; } #header .wrap > .controls li a { display: inline-block; color: #f3f3f3; text-decoration: none; padding: 5px; border-radius: 6px; } #header .wrap > .controls li a:hover, #header .wrap > .controls li a:focus { color: #fff; } #header #logo { display: inline-block; position: relative; z-index: 6; height: 71px; margin-left: 20px; padding: 25px 0 15px; color: #fff; } #header #logo img { display: inline-block; width: auto; height: 40px; margin-top: 10px; *float: left; } #header .h1 { position: relative; display: inline-block; *display: inline; top: 6px; margin-left: 18px; font-size: 24px; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; vertical-align: top; } .highcontrast #header { background-color: #283138; } .highcontrast #header > .masthead:before { background: #283138; } .highcontrast #header:before { background: #283138; } .highcontrast #header:after { background-image: url(../images/header-shape-contrast.png); } #timeline_wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; background-color: #fff; } body.debug #timeline_wrapper { background: pink; } #timeline { position: absolute; top: 48%; right: 0; left: 0; width: 1000px; /*min-*/ height: 800px; margin: -400px auto 0; overflow: hidden; z-index: 1; } #timeline.timeline-paginated .timeline-icon-australia { top: auto; bottom: 50%; margin: 0; border-bottom: 51px solid #007c88; border-radius: 6px 0 0 0; } #timeline.timeline-paginated .timeline-icon-world { margin: 0; border-top: 51px solid #c05a2c; border-radius: 0 0 0 6px; } #timeline.carousel-displayed .timeline-pagination-left, #timeline.carousel-displayed .timeline-pagination-right, #timeline.carousel-displayed .timeline-icon-australia, #timeline.carousel-displayed .timeline-icon-world, #timeline.carousel-displayed .timeline-icon-trendline { display: none; visibility: hidden; } #timeline .timeline-pagination-left, #timeline .timeline-pagination-right { position: absolute; z-index: 3; top: 50%; width: 40px; height: 102px; border: none; margin-top: -51px; text-indent: 80px; font-size: 0; word-wrap: none; background: #969e9e; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } #timeline .timeline-pagination-left:hover, #timeline .timeline-pagination-left:focus, #timeline .timeline-pagination-right:hover, #timeline .timeline-pagination-right:focus { background-color: #000; } #timeline .timeline-pagination-left.disabled, #timeline .timeline-pagination-right.disabled { background-color: #a3aaaa; cursor: default; } #timeline .timeline-pagination-left:before, #timeline .timeline-pagination-right:before { content: ''; display: block; position: absolute; width: 1px; height: 350px; top: -125px; z-index: 2; background-image: url(../images/border.png); background-position: 0 0; background-repeat: no-repeat; } #timeline .timeline-pagination-left { left: 0; background-image: url(../images/paginate-left.png); background-position: 13px 50%; background-repeat: no-repeat; border-radius: 6px 0 0 6px; } #timeline .timeline-pagination-left:before { right: 0px; } #timeline .timeline-pagination-right { right: 0; background-image: url(../images/paginate-right.png); background-position: 10px 50%; background-repeat: no-repeat; border-radius: 0 6px 6px 0; } #timeline .timeline-pagination-right:before { left: 0px; } #timeline .timeline-pagination-right.disabled { opacity: 0; } #timeline .timeline-icon-australia { position: absolute; top: 50%; left: 0; bottom: 0; width: 40px; height: 40px; overflow: hidden; text-indent: 50px; white-space: nowrap; font-size: 0; background-position: 50% 50%; margin-top: -60px; background-image: url(../images/australia.svg); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; background-color: #007c88; border-radius: 6px 0 0 6px; } #timeline .timeline-icon-world { position: absolute; top: 50%; left: 0; bottom: 0; width: 40px; height: 40px; overflow: hidden; text-indent: 50px; white-space: nowrap; font-size: 0; background-position: 50% 50%; margin-top: 20px; background-image: url(../images/world.svg); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; background-color: #c05a2c; border-radius: 6px 0 0 6px; } #timeline .timeline-icon-trendline { position: absolute; top: 50%; left: 0; bottom: 0; width: 40px; height: 40px; overflow: hidden; text-indent: 50px; white-space: nowrap; font-size: 0; background-position: 50% 50%; margin-top: -90px; left: auto; right: 0; z-index: 1; background-image: url(../images/trendline.gif); background-position: 50% 50%; background-repeat: no-repeat; background-color: #409f67; border: none; cursor: pointer; } #timeline button.article-button { position: absolute; z-index: 1; display: block; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-L', sans-serif; font-size: 16px; height: 40px; line-height: 40px; top: 50%; margin-top: -20px; left: 20px; padding: 0 10px; color: #fff; background-color: #409f67; border: none; border-radius: 6px; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } #timeline button.article-button:hover, #timeline button.article-button:focus { color: #fff; background-color: #317b4f; } .highcontrast #timeline button.article-button { background-color: #235638; } #controlbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2; height: 100px; min-width: 1020px; } #decadecontrolbar { box-sizing: border-box; -moz-box-sizing: border-box; height: 50px; font-size: 14px; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; color: #a7a9ac; background: #485865; } #decadecontrolbar .wrap { padding-left: 60px; padding-right: 60px; } #decadecontrolbar ul { display: table; width: 100%; } #decadecontrolbar ul li { display: table-cell; /* &:first-child { a { border-left: 1px solid $black; } } */ } #decadecontrolbar ul li a { position: relative; display: block; text-align: center; color: inherit; line-height: 50px; text-decoration: none; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } #decadecontrolbar ul li a span { display: block; /* padding: { top: 20px; bottom: 20px; } */ } #decadecontrolbar ul li a span.button { *position: absolute; padding: 0; margin: 0; display: block; overflow: hidden; height: 0; font-size: 0; } #decadecontrolbar ul li a.selected { color: #fff; } #decadecontrolbar ul li a.selected:before { content: ''; display: block; position: absolute; z-index: 1; top: 0; left: 50%; margin-left: -3px; border-style: solid; border-width: 3px 3px 0 3px; border-color: #fff transparent transparent transparent; } #decadecontrolbar ul li a:hover, #decadecontrolbar ul li a:focus { color: #fff; } .highcontrast #decadecontrolbar { background-color: #333e47; } .highcontrast #decadecontrolbar ul li a { color: #fff; } #footer { box-sizing: border-box; -moz-box-sizing: border-box; height: 50px; padding-top: 11px; padding-bottom: 13px; text-transform: uppercase; font-family: 'Ubuntu-M', sans-serif; font-weight: 600; color: #a3aaaa; background: #f3f3f3; /* .charts-button { // BUTTON element position: absolute; top: 0; right: 20px; color: $white; background: $jade; border-color: $dark-jade; &:hover, &:focus { color: $white; background-color: $dark-jade; } } */ } #footer > .wrap { position: relative; padding-left: 20px; padding-right: 20px; *zoom: 1; } #footer > .wrap:before, #footer > .wrap:after { content: " "; display: table; } #footer > .wrap:after { clear: both; } #footer > .wrap > .controls { text-align: center; } #footer > .wrap > .controls button:first-child { margin-left: 0; } #footer .filter-button-wrapper { position: relative; display: inline-block; } #footer .filter-button-wrapper > .filter-badge { display: block; position: absolute; top: -10px; right: -14px; min-width: 20px; height: 20px; line-height: 20px; padding: 0 2px; font-size: 14px; font-family: 'Ubuntu-L', sans-serif; text-align: center; color: #fff; background: #409f67; border-radius: 10px; } .highcontrast #footer .filter-button-wrapper > .filter-badge { background-color: #235638; } #footer button { position: relative; display: inline-block; min-width: 53px; margin-left: 20px; margin-right: 0; padding-top: 3px; padding-left: 35px; padding-right: 10px; height: 30px; text-transform: uppercase; font-family: 'Dosis', 'Ubuntu-L', sans-serif; font-size: 16px; color: #fff; background-color: #409f67; border: 1px solid #fff; border-radius: 6px; cursor: pointer; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } #footer button:hover, #footer button:focus { color: #fff; background-color: #317b4f; } #footer button[disabled] { cursor: default; opacity: .4; } #footer button:before { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 28px; border-right: 1px solid #fff; border-radius: 6px 0 0 6px; } #footer button.filter-button:before { background-image: url(../images/filter-icon.png); background-position: 50% 50%; background-repeat: no-repeat; } #footer button.show-full-timeline-button:before { background-image: url(../images/full-timeline-icon.png); background-position: 50% 50%; background-repeat: no-repeat; } #footer button.historical-data:before { background-image: url(../images/history-icon.png); background-position: 50% 50%; background-repeat: no-repeat; } #footer button.snapshots-button { min-width: 180px; } #footer button.snapshots-button:before { background-image: url(../images/snapshots-icon.png); background-position: 50% 50%; background-repeat: no-repeat; } #footer button.charts-button:before { background-image: url(../images/charts-icon.png); background-position: 50% 50%; background-repeat: no-repeat; } #footer button.article-button:before { background-image: url(../images/article-icon.png); background-position: 50% 50%; background-repeat: no-repeat; } #footer button.quiz-button:before { background-image: url(../images/quiz-icon.png); background-position: 50% 50%; background-repeat: no-repeat; } .highcontrast #footer button { background-color: #235638; } #select_decade { position: absolute; z-index: 2; top: 70px; left: 0; right: 0; bottom: 0; min-width: 1020px; overflow: hidden; color: #fff; background: #333e47; } #select_decade .wrap { width: 900px; margin: auto; } #select_decade h2 { margin-top: 10px; margin-bottom: 40px; font-size: 42px; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif; text-transform: uppercase; } #select_decade ul.decades { list-style: none; } #select_decade ul.decades > li { position: relative; display: inline-block; width: 202px; margin-right: 30px; margin-bottom: 27px; } #select_decade ul.decades > li.decade-select-1930 { margin-right: 0; } #select_decade ul.decades > li.decade-select-1970 { margin-right: 0; } #select_decade ul.decades > li.decade-select-2010 { margin-right: 0; } #select_decade ul.decades > li > a { padding-left: 80px; } #select_decade ul.decades > li > a > img { position: absolute; top: 0; left: 0; bottom: 0; width: 80px; border-radius: 6px 0 0 6px; } #select_decade a { display: block; position: relative; vertical-align: middle; top: -25px; height: 80px; line-height: 80px; font-family: 'Ubuntu-L', sans-serif; color: #fff; background: #409f67; font-size: 30px; text-align: center; text-decoration: none; opacity: 0; border-radius: 6px; -webkit-transition: all 0.09s linear; -moz-transition: all 0.09s linear; -ms-transition: all 0.09s linear; -o-transition: all 0.09s linear; transition: all 0.09s linear; } #select_decade a.slide-into-view { top: 0; opacity: 1; } #select_decade a.decade-select-pre-federation, #select_decade a.decade-select-all { width: 434px; margin-left: auto; margin-right: auto; text-transform: uppercase; } #select_decade a.decade-select-pre-federation { margin-bottom: 27px; } #select_decade a:hover, #select_decade a:focus { background-color: #317b4f; } .highcontrast #select_decade a { background: #235638; } #data { position: fixed; z-index: 1; top: 100%; bottom: 0; overflow: auto; background: #fff; background: rgba(255, 255, 255, 0.95); padding: 15px; } #data.wrap { margin-bottom: 120px; } #data.show { top: 70px; } #data h2 { margin-top: 15px; font-weight: bold; } #data h3 { margin-top: 15px; font-weight: bold; } #data h4 { margin-top: 15px; font-weight: bold; } #data h5 { margin-top: 15px; font-weight: bold; } #data h2 { font-size: 20px; } #data h3 { font-size: 18px; } #data h4 { font-size: 16px; } #data h5 { font-size: 14px; } #data ul, #data ol { display: block; margin: 15px 20px 0; } #data ul ul, #data ul ol, #data ol ul, #data ol ol { margin-top: 5px; } #data ul { list-style: disc; } #data ul ul { list-style: circle; } #data li { display: list-item; margin-top: 10px; } #data .trendline { display: inline-block; padding-top: 20px; margin-right: 60px; vertical-align: top; } #data .trendline table { width: 300px; } #data .trendline table caption { margin: 6px 0; text-align: left; color: #485865; } #data .trendline table th, #data .trendline table td { padding: 4px 10px; border: 1px solid #d8dbdb; text-align: center; } #data .trendline table thead th { background: #000; color: #fff; } #data .snapshots { clear: both; padding-top: 20px; } #data .snapshots ul { display: block; margin: 0; } #data .snapshots ul li { display: inline-block; margin-right: 20px; } #data .snapshots ul li dl dt, #data .snapshots ul li dl dd { display: inline-block; } #data .snapshots ul li dl dt { float: left; clear: both; font-weight: bold; } #data .snapshots ul li dl dd { margin-left: 10px; } #carousel { position: absolute; bottom: 240px; top: 240px; left: 40px; right: 40px; z-index: 5; overflow: hidden; background: #f3f3f3; } #carousel.paginated .carousel-pagination-left-container, #carousel.paginated .carousel-pagination-right-container { visibility: visible; margin-left: 0; margin-right: 0; } #carousel h1 { font-family: 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 24px; } #carousel h2 { font-family: 'Ubuntu-L', sans-serif; } #carousel h2 { font-family: 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 24px; } #carousel h2 { font-family: 'Ubuntu-L', sans-serif; } #carousel h3 { font-family: 'Ubuntu-R', 'Ubuntu-M', sans-serif; font-size: 24px; } #carousel h2 { font-family: 'Ubuntu-L', sans-serif; } #carousel .carousel-close { z-index: 2; top: 7px; right: 70px; color: #f3f3f3; background: #485865; } #carousel .carousel-viewer { overflow: hidden; } body.debug #carousel .carousel-viewer { background: cornsilk; } #carousel .carousel-tray { position: relative; z-index: 2; } body.debug #carousel .carousel-tray { background: pink; } #carousel .carousel-pagination-left-container, #carousel .carousel-pagination-right-container { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; z-index: 3; display: block; top: 0; bottom: 0; width: 40px; background-color: #f3f3f3; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } #carousel .carousel-pagination-left-container:before, #carousel .carousel-pagination-right-container:before { content: ''; position: absolute; z-index: 1; display: block; top: 0; bottom: 0; width: 1px; background: -webkit-linear-gradient(top, #b0b6b6, #969e9e 40%, #969e9e 60%, #b0b6b6); background: -moz-linear-gradient(top, #b0b6b6, #969e9e 40%, #969e9e 60%, #b0b6b6); background: -ms-linear-gradient(top, #b0b6b6, #969e9e 40%, #969e9e 60%, #b0b6b6); background: -o-linear-gradient(top, #b0b6b6, #969e9e 40%, #969e9e 60%, #b0b6b6); background: linear-gradient(top, #b0b6b6, #969e9e 40%, #969e9e 60%, #b0b6b6); } #carousel .carousel-pagination-left-container { left: 0; margin-left: -40px; border-right: 1px solid #ebecec; } #carousel .carousel-pagination-left-container:before { right: 0; } #carousel .carousel-pagination-right-container { right: 0; margin-right: -40px; border-left: 1px solid #ebecec; } #carousel .carousel-pagination-right-container:before { left: 0; } #carousel .carousel-pagination-left, #carousel .carousel-pagination-right { position: absolute; z-index: 3; width: 40px; height: 100px; top: 50%; margin-top: -50px; border: none; overflow: hidden; text-indent: 80px; font-size: 0; word-wrap: none; background: #969e9e; cursor: pointer; opacity: 1; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } #carousel .carousel-pagination-left:hover, #carousel .carousel-pagination-left:focus, #carousel .carousel-pagination-right:hover, #carousel .carousel-pagination-right:focus { background-color: #000; } #carousel .carousel-pagination-left.disabled, #carousel .carousel-pagination-right.disabled { background-color: #a3aaaa; cursor: default; } #carousel .carousel-pagination-left { left: 0; background-image: url(../images/paginate-left.png); background-position: 13px 50%; background-repeat: no-repeat; border-radius: 6px 0 0 6px; } #carousel .carousel-pagination-right { right: 0; background-image: url(../images/paginate-right.png); background-position: 10px 50%; background-repeat: no-repeat; border-radius: 0 6px 6px 0; } #carousel .carousel-item { box-sizing: border-box; -moz-box-sizing: border-box; display: inline-block; position: relative; overflow: hidden; padding-top: 52px; padding-bottom: 10px; vertical-align: top; font-size: 23px; background: #fff; border-radius-bottom-right: 6px; } #carousel .carousel-item.carousel-item-minwidth h3.carousel-heading-video, #carousel .carousel-item.carousel-item-minwidth h3.carousel-heading-image { margin-left: 15px; margin-right: 15px; } #carousel .carousel-item.carousel-item-minwidth .icon-wrap { bottom: auto; width: 44px; height: 44px; padding: 8px; border-radius: 0 0 0 6px; } #carousel .carousel-item.carousel-item-halfwidth h3.carousel-heading-video, #carousel .carousel-item.carousel-item-halfwidth h3.carousel-heading-image { font-size: 24px; } #carousel .carousel-item.carousel-item-halfwidth h3.carousel-heading-icon { font-size: 24px; } .debug #carousel .carousel-item.carousel-item-halfwidth { background: purple; } #carousel .carousel-item.carousel-item-fullwidth h3.carousel-heading-video, #carousel .carousel-item.carousel-item-fullwidth h3.carousel-heading-image { font-size: 26px; } #carousel .carousel-item.carousel-item-fullwidth h3.carousel-heading-icon { font-size: 26px; } .debug #carousel .carousel-item.carousel-item-fullwidth { background: lightblue; } #carousel .carousel-item .carousel-year { position: absolute; display: inline-block; top: 0; line-height: 44px; padding-left: 50px; padding-right: 8px; color: #fff; border-radius: 0 0 6px 0; } #carousel .carousel-item .carousel-year .carousel-item-icon { position: absolute; top: 0; left: 0; bottom: 0; width: 44px; overflow: hidden; text-indent: 50px; white-space: nowrap; font-size: 0; } #carousel .carousel-item .carousel-year .carousel-item-icon.carousel-scope-australia { background-image: url(../images/australia.svg); background-position: 0 0; background-repeat: no-repeat; background-size: contain; background-color: #00575f; } #carousel .carousel-item .carousel-year .carousel-item-icon.carousel-scope-world { background-image: url(../images/world.svg); background-position: 0 0; background-repeat: no-repeat; background-size: contain; background-color: #974722; } #carousel .carousel-item h3 { margin: 0 25px 15px; font-size: 28px; line-height: 1.2; text-transform: uppercase; font-weight: 300; } #carousel .carousel-item h3.carousel-heading-more { font-size: 32px; } #carousel .carousel-item h3.carousel-heading-video, #carousel .carousel-item h3.carousel-heading-image { margin-bottom: 0; font-size: 22px; } #carousel .carousel-item h3.carousel-heading-icon { margin-bottom: 0; } #carousel .carousel-item h3.carousel-heading-only { text-transform: none; } #carousel .carousel-item h3.carousel-heading-hidden { display: none; } #carousel .carousel-item .carousel-content { margin: 15px 15px 0 25px; margin-top: 10px; } #carousel .carousel-item .carousel-content p { margin-top: 0; margin-bottom: 0; } #carousel .carousel-item.carousel-scope-australia { color: #007c88; } #carousel .carousel-item.carousel-scope-australia .carousel-year { background-color: #007c88; } #carousel .carousel-item.carousel-scope-australia .carousel-more { background-color: #007c88; } #carousel .carousel-item.carousel-scope-australia .carousel-link-video:before { background-color: #007c88; } #carousel .carousel-item.carousel-scope-australia .icon-wrap { background-color: #007c88; } .highcontrast #carousel .carousel-item.carousel-scope-australia .carousel-year, .highcontrast #carousel .carousel-item.carousel-scope-australia .carousel-more, .highcontrast #carousel .carousel-item.carousel-scope-australia .carousel-link-video:before { background-color: #00363c; } .highcontrast #carousel .carousel-item.carousel-scope-australia .icon-wrap { background-color: #00363c; } #carousel .carousel-item.carousel-scope-world { color: #c05a2c; } #carousel .carousel-item.carousel-scope-world .carousel-year { background-color: #c05a2c; } #carousel .carousel-item.carousel-scope-world .carousel-more { background-color: #c05a2c; } #carousel .carousel-item.carousel-scope-world .carousel-link-video:before { background-color: #c05a2c; } #carousel .carousel-item.carousel-scope-world .icon-wrap { background-color: #c05a2c; } .highcontrast #carousel .carousel-item.carousel-scope-world .carousel-year, .highcontrast #carousel .carousel-item.carousel-scope-world .carousel-more, .highcontrast #carousel .carousel-item.carousel-scope-world .carousel-link-video:before { background-color: #6d3319; } .highcontrast #carousel .carousel-item.carousel-scope-world .icon-wrap { background-color: #6d3319; } #carousel a.carousel-link-image, #carousel a.carousel-link-video { display: block; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; background-size: cover; background-position: 50% 20%; text-indent: -1000em; overflow: hidden; } #carousel a.carousel-link-video:before { content: ''; display: block; position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; background-image: url(../images/play-icon.png); background-position: 50% 50%; background-repeat: no-repeat; text-indent: 50px; border-radius: 6px 0 0 0; } #carousel .carousel-item-minwidth h3 { margin-bottom: 0; } #carousel .carousel-item-halfwidth a.carousel-link-video, #carousel .carousel-item-halfwidth a.carousel-link-image, #carousel .carousel-item-halfwidth .icon-wrap { top: 0; left: 290px; right: 0; bottom: 0; } #carousel .carousel-item-halfwidth a.carousel-link-video ~ h3, #carousel .carousel-item-halfwidth a.carousel-link-video ~ .carousel-content, #carousel .carousel-item-halfwidth a.carousel-link-image ~ h3, #carousel .carousel-item-halfwidth a.carousel-link-image ~ .carousel-content, #carousel .carousel-item-halfwidth .icon-wrap ~ h3, #carousel .carousel-item-halfwidth .icon-wrap ~ .carousel-content { width: 230px; } #carousel .carousel-item-fullwidth a.carousel-link-video, #carousel .carousel-item-fullwidth a.carousel-link-image, #carousel .carousel-item-fullwidth .icon-wrap { top: 0; left: 380px; right: 0; bottom: 0; } #carousel .carousel-item-fullwidth a.carousel-link-video ~ h3, #carousel .carousel-item-fullwidth a.carousel-link-video ~ .carousel-content, #carousel .carousel-item-fullwidth a.carousel-link-image ~ h3, #carousel .carousel-item-fullwidth a.carousel-link-image ~ .carousel-content, #carousel .carousel-item-fullwidth .icon-wrap ~ h3, #carousel .carousel-item-fullwidth .icon-wrap ~ .carousel-content { width: 340px; } #carousel .icon-wrap { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; top: 0; bottom: 0; right: 0; height: inherit; overflow: hidden; white-space: nowrap; text-indent: -1000em; padding: 15px; } #carousel .carousel-icon { height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } #carousel .carousel-icon.carousel-icon-agriculture { background-image: url(../images/item_icon_agriculture.svg); } #carousel .carousel-icon.carousel-icon-australia { background-image: url(../images/item_icon_australia.svg); } #carousel .carousel-icon.carousel-icon-chemicals { background-image: url(../images/item_icon_chemicals.svg); } #carousel .carousel-icon.carousel-icon-china { background-image: url(../images/item_icon_china.svg); } #carousel .carousel-icon.carousel-icon-dairy { background-image: url(../images/item_icon_dairy.svg); } #carousel .carousel-icon.carousel-icon-decrease { background-image: url(../images/item_icon_decrease.svg); } #carousel .carousel-icon.carousel-icon-decreaseline { background-image: url(../images/item_icon_decreaseline.svg); } #carousel .carousel-icon.carousel-icon-dollar { background-image: url(../images/item_icon_dollar.svg); } #carousel .carousel-icon.carousel-icon-down { background-image: url(../images/item_icon_down.svg); } #carousel .carousel-icon.carousel-icon-education { background-image: url(../images/item_icon_education.svg); } #carousel .carousel-icon.carousel-icon-euro { background-image: url(../images/item_icon_euro.svg); } #carousel .carousel-icon.carousel-icon-export { background-image: url(../images/item_icon_export.svg); } #carousel .carousel-icon.carousel-icon-global { background-image: url(../images/item_icon_global.svg); } #carousel .carousel-icon.carousel-icon-gold { background-image: url(../images/item_icon_gold.svg); } #carousel .carousel-icon.carousel-icon-handshake { background-image: url(../images/item_icon_handshake.svg); } #carousel .carousel-icon.carousel-icon-import { background-image: url(../images/item_icon_import.svg); } #carousel .carousel-icon.carousel-icon-increase { background-image: url(../images/item_icon_increase.svg); } #carousel .carousel-icon.carousel-icon-increaseline { background-image: url(../images/item_icon_increaseline.svg); } #carousel .carousel-icon.carousel-icon-japan { background-image: url(../images/item_icon_japan.svg); } #carousel .carousel-icon.carousel-icon-manufacturing { background-image: url(../images/item_icon_manufacturing.svg); } #carousel .carousel-icon.carousel-icon-mining { background-image: url(../images/item_icon_mining.svg); } #carousel .carousel-icon.carousel-icon-money { background-image: url(../images/item_icon_money.svg); } #carousel .carousel-icon.carousel-icon-oil { background-image: url(../images/item_icon_oil.svg); } #carousel .carousel-icon.carousel-icon-pound { background-image: url(../images/item_icon_pound.svg); } #carousel .carousel-icon.carousel-icon-sugar { background-image: url(../images/item_icon_sugar.svg); } #carousel .carousel-icon.carousel-icon-tourism { background-image: url(../images/item_icon_tourism.svg); } #carousel .carousel-icon.carousel-icon-uk { background-image: url(../images/item_icon_uk.svg); } #carousel .carousel-icon.carousel-icon-usa { background-image: url(../images/item_icon_usa.svg); } #carousel .carousel-icon.carousel-icon-up { background-image: url(../images/item_icon_up.svg); } #carousel .carousel-icon.carousel-icon-wheat { background-image: url(../images/item_icon_wheat.svg); } #carousel .carousel-icon.carousel-icon-wine { background-image: url(../images/item_icon_wine.svg); } #carousel .carousel-icon.carousel-icon-wool { background-image: url(../images/item_icon_wool.svg); } #carousel .carousel-icon.carousel-icon-world { background-image: url(../images/item_icon_world.svg); } #carousel .carousel-icon.carousel-icon-yen { background-image: url(../images/item_icon_yen.svg); } #carousel .carousel-more { left: 0; bottom: 0; position: absolute; width: auto; margin: 0; padding: 0 8px; text-indent: 0; } #carousel .carousel-new-item-above, #carousel .carousel-new-item-below { position: absolute; } rect.timebox { stroke: #000; stroke-width: 0; fill: #969e9e; } .highcontrast rect.timebox { fill: #333e47; } text.timebox-text { fill: #fff; font-size: 14px !important; font-family: 'Ubuntu-L', sans-serif !important; } .flag-box { position: absolute; overflow: auto; width: 0; height: 0; color: #fff; background-color: #969e9e; overflow: hidden; border-radius: 6px; cursor: pointer; } .flag-box.flag-box-australia { background-color: #007c88; } .flag-box.flag-box-australia h2 { background-color: #00575f; } .highcontrast .flag-box.flag-box-australia { background-color: #00575f; } .highcontrast .flag-box.flag-box-australia h2 { background-color: #00363c; } .flag-box.flag-box-world { background-color: #c05a2c; } .flag-box.flag-box-world h2 { background-color: #974722; } .highcontrast .flag-box.flag-box-world { background-color: #974722; } .highcontrast .flag-box.flag-box-world h2 { background-color: #6d3319; } .flag-box .icon-wrap { box-sizing: border-box; -moz-box-sizing: border-box; padding: 5px; } .flag-box h2 { padding: 5px; line-height: 14px; font-family: 'Ubuntu-L', sans-serif; font-size: 12px; text-transform: uppercase; } .flag-box .img { overflow: hidden; height: 62px; } .flag-box .img img { width: 100%; } .flag-box .img-icon-agriculture { width: 132px; height: 52px; background-image: url(../images/item_icon_agriculture.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-australia { width: 132px; height: 52px; background-image: url(../images/item_icon_australia.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-chemicals { width: 132px; height: 52px; background-image: url(../images/item_icon_chemicals.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-china { width: 132px; height: 52px; background-image: url(../images/item_icon_china.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-dairy { width: 132px; height: 52px; background-image: url(../images/item_icon_dairy.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-decrease { width: 132px; height: 52px; background-image: url(../images/item_icon_decrease.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-decreaseline { width: 132px; height: 52px; background-image: url(../images/item_icon_decreaseline.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-dollar { width: 132px; height: 52px; background-image: url(../images/item_icon_dollar.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-down { width: 132px; height: 52px; background-image: url(../images/item_icon_down.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-education { width: 132px; height: 52px; background-image: url(../images/item_icon_education.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-euro { width: 132px; height: 52px; background-image: url(../images/item_icon_euro.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-export { width: 132px; height: 52px; background-image: url(../images/item_icon_export.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-global { width: 132px; height: 52px; background-image: url(../images/item_icon_global.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-gold { width: 132px; height: 52px; background-image: url(../images/item_icon_gold.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-handshake { width: 132px; height: 52px; background-image: url(../images/item_icon_handshake.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-import { width: 132px; height: 52px; background-image: url(../images/item_icon_import.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-increase { width: 132px; height: 52px; background-image: url(../images/item_icon_increase.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-increaseline { width: 132px; height: 52px; background-image: url(../images/item_icon_increaseline.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-japan { width: 132px; height: 52px; background-image: url(../images/item_icon_japan.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-manufacturing { width: 132px; height: 52px; background-image: url(../images/item_icon_manufacturing.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-mining { width: 132px; height: 52px; background-image: url(../images/item_icon_mining.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-money { width: 132px; height: 52px; background-image: url(../images/item_icon_money.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-oil { width: 132px; height: 52px; background-image: url(../images/item_icon_oil.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-pound { width: 132px; height: 52px; background-image: url(../images/item_icon_pound.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-sugar { width: 132px; height: 52px; background-image: url(../images/item_icon_sugar.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-tourism { width: 132px; height: 52px; background-image: url(../images/item_icon_tourism.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-uk { width: 132px; height: 52px; background-image: url(../images/item_icon_uk.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-usa { width: 132px; height: 52px; background-image: url(../images/item_icon_usa.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-up { width: 132px; height: 52px; background-image: url(../images/item_icon_up.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-wheat { width: 132px; height: 52px; background-image: url(../images/item_icon_wheat.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-wine { width: 132px; height: 52px; background-image: url(../images/item_icon_wine.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-wool { width: 132px; height: 52px; background-image: url(../images/item_icon_wool.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-world { width: 132px; height: 52px; background-image: url(../images/item_icon_world.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .flag-box .img-icon-yen { width: 132px; height: 52px; background-image: url(../images/item_icon_yen.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } rect.flag-box-container { border: 0; stroke: #fff; } rect.canvas-pin, text.canvas-pin { cursor: pointer; } path.canvas-pin.australia { stroke: #007c88; } .highcontrast path.canvas-pin.australia { stroke: #00575f; } path.canvas-pin.world { stroke: #c05a2c; } .highcontrast path.canvas-pin.world { stroke: #974722; } rect.canvas-pin.australia { fill: #007c88; } rect.canvas-pin.australia[data-active] { fill: #fff; stroke-width: 1; stroke: #00575f; } .highcontrast rect.canvas-pin.australia { fill: #00363c; } .highcontrast rect.canvas-pin.australia[data-active] { fill: #fff; stroke: #00575f; } rect.canvas-pin.world { fill: #c05a2c; } rect.canvas-pin.world[data-active] { fill: #fff; stroke-width: 1; stroke: #974722; } .highcontrast rect.canvas-pin.world { fill: #9e532d; } .highcontrast rect.canvas-pin.world[data-active] { fill: #fff; stroke: #974722; } text.canvas-pin { fill: #fff; font-family: 'Dosis', 'Ubuntu-B', 'Ubuntu-R', 'Ubuntu-M', sans-serif !important; font-weight: 200 !important; font-size: 18px !important; } text.canvas-pin.australia[data-active] { fill: #007c88; } .highcontrast text.canvas-pin.australia[data-active] { fill: #00363c; } text.canvas-pin.world[data-active] { fill: #c05a2c; } .highcontrast text.canvas-pin.world[data-active] { fill: #6d3319; } #overlay { position: fixed; z-index: 3; top: 70px; left: 0; bottom: 0; right: 0; } #overlay .overlay-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 100px; background: #fff; } body.debug #overlay .overlay-bg { opacity: .7; } #progress { box-sizing: border-box; -moz-box-sizing: border-box; position: relative; margin: auto; top: 0; background-color: #485865; border: 1px solid #485865; } #progressbar { position: absolute; top: 0; left: 0; bottom: 0; background: #fff; } #progresstext { position: absolute; left: 0; right: 0; color: #000; bottom: 100%; font-size: 20px; margin-bottom: 12px; text-align: center; } #img-load { position: absolute; } .canvas-decade { float: left; } /* @media only screen and (min-width: 1200px) { #main { min-width: $display-width-max; .wrap { min-width: $display-width-max; } } } */ @media only screen and (max-width: 800px) { #welcome .welcome-footer .welcome-coat-of-arms { padding-right: 120px; } } @media only screen and (max-height: 750px) { #header { height: 50px; } #header > .wrap > .controls { top: 13px; } #header:before, #header:after { display: none; } #header #logo { height: 40px; padding: 20px 0 0; } #header #logo img { height: 32px; width: auto; } #header .h1 { margin-left: 14px; font-size: 18px; } #header .h1 br { display: none; } #header .snapshot-container { height: 0; text-align: right; max-width: 1200px; margin: 0 auto; position: static; padding-right: 40px; } #select_decade { top: 50px; } #controlbar { height: 85px; } #decadecontrolbar { height: 35px; } #decadecontrolbar ul li a { line-height: 35px; } } .snapshot-container { box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; right: 0; height: 41px; top: 100%; z-index: 4; left: calc(50% - 200px); padding-left: 5%; padding-top: 5px; background: #409f67; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -ms-transition: transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; } .snapshot-container.snapshot-button-ready { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .snapshot-container.snapshot-button-ready > button.snapshots-button { opacity: 1; } .snapshot-container > button.snapshots-button { position: relative; display: inline-block; opacity: 0; min-width: 180px; margin-left: 20px; margin-right: 0; padding-top: 3px; padding-left: 45px; padding-right: 20px; height: 30px; font-family: 'Dosis', 'Ubuntu-L', sans-serif; font-size: 17px; color: #fff; background-color: #409f67; border: none; border-radius: 6px; cursor: pointer; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .snapshot-container > button.snapshots-button:hover, .snapshot-container > button.snapshots-button:focus { color: #fff; background-color: #317b4f; } .snapshot-container > button.snapshots-button[disabled] { cursor: default; opacity: .4; } .snapshot-container > button.snapshots-button:before { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 44px; border-right: 1px solid #fff; border: none; border-radius: 6px 0 0 6px; background-image: url(../images/snapshots-icon.png); background-position: 50% 50%; background-repeat: no-repeat; } .highcontrast .snapshot-container > button.snapshots-button { background-color: #235638; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2) { .close-button:before, #carousel .carousel-close:before { background-image: url(../images/close-icon@2x.png); background-size: 100%; } .modal.modal-australia .close-button:before, .modal.modal-australia #carousel .carousel-close:before, #carousel .modal.modal-australia .carousel-close:before { background-image: url(../images/close-icon-australia@2x.png); background-size: 100%; } .modal.modal-world .close-button:before, .modal.modal-world #carousel .carousel-close:before, #carousel .modal.modal-world .carousel-close:before { background-image: url(../images/close-icon-world@2x.png); background-size: 100%; } .modal.modal-filter .close-button:before, .modal.modal-filter #carousel .carousel-close:before, #carousel .modal.modal-filter .carousel-close:before { background-image: url(../images/close-icon-filter@2x.png); background-size: 100%; } .continue-button:before { background-image: url(../images/continue-icon-filter@2x.png); background-size: 100%; } #header:after { background-image: url(../images/header-shape@2x.png); } .highcontrast #header:after { background-image: url(../images/header-shape-contrast@2x.png); } #welcome .welcome-wrapper:before { background-image: url(../images/DFAT-Banner-texture-left-reversed@2x.png); background-size: contain; } #welcome .welcome-wrapper:after { background-image: url(../images/DFAT-Banner-texture-right-reversed@2x.png); background-size: contain; } #footer button.filter-button:before { background-image: url(../images/filter-icon@2x.png); background-size: 14px 13px; } #footer button.show-full-timeline-button:before { background-image: url(../images/full-timeline-icon@2x.png); background-size: 14px 14px; } #footer button.historical-data:before { background-image: url(../images/history-icon@2x.png); background-size: 20px 18px; } #footer button.snapshots-button:before { background-image: url(../images/snapshots-icon@2x.png); background-size: 14px 11px; } #footer button.charts-button:before { background-image: url(../images/charts-icon@2x.png); background-size: 19px 9px; } #footer button.article-button:before { background-image: url(../images/article-icon@2x.png); background-size: 18px 16px; } #footer button.quiz-button:before { background-image: url(../images/quiz-icon@2x.png); background-size: 10px 18px; } #carousel .carousel-item .carousel-year .carousel-item-icon.carousel-scope-australia { background-image: url(../images/australia@2x.png); background-position: 0 0; background-repeat: no-repeat; background-size: 44px 44px; } #carousel .carousel-item .carousel-year .carousel-item-icon.carousel-scope-world { background-image: url(../images/world@2x.png); background-position: 0 0; background-repeat: no-repeat; background-size: 44px 44px; } #carousel .carousel-pagination-left { background-image: url(../images/paginate-left@2x.png); background-size: 18px 64px; } #carousel .carousel-pagination-right { background-image: url(../images/paginate-right@2x.png); background-size: 18px 64px; } #carousel .carousel-close:before { background-image: url(../images/close-icon@2x.png); background-size: 24px 24px; } .modal.modal-quiz .facebook-link { background-image: url(../images/facebook-2x.png); background-size: 100%; } .modal.modal-australia .modal-item-icon { background-image: url(../images/australia-inverted@2x.png); background-size: 100%; } .modal.modal-world .modal-item-icon { background-image: url(../images/world-inverted@2x.png); background-size: 100%; } .modal.modal-filter button[name="filter"].checked:before { background-image: url(../images/checked-icon-filter@2x.png); background-size: 100%; } .highcontrast .modal.modal-filter button[name="filter"].checked:before { background-image: url(../images/checked-icon-filter-contrast@2x.png); } .modal.modal-chart .legend:before { background-image: url(../images/list-logo@2x.png); } .modal.modal-chart .modal-chart-menu-control { background-image: url(../images/menu@2x.gif); background-size: 16px; } .modal.modal-chart .modal-chart-menu-control.active { background-image: url(../images/close-menu@2x.gif); } .modal.modal-chart ul > li:before { background-image: url(../images/list-logo@2x.png); } .modal.modal-snapshot .snapshots-graphic { background-size: 100%; } .modal.modal-snapshot .snapshots-graphic[data-icon="australia"] { background-image: url(../images/snapshot-australia@2x.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="japan"] { background-image: url(../images/snapshot-japan@2x.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="usa"] { background-image: url(../images/snapshot-usa@2x.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="china"] { background-image: url(../images/snapshot-china@2x.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="uk"] { background-image: url(../images/snapshot-uk@2x.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="goods"] { background-image: url(../images/snapshot-goods@2x.png); background-size: 124px auto; } .modal.modal-snapshot .snapshots-graphic[data-icon="imports"] { background-image: url(../images/snapshot-imports@2x.png); background-size: 124px auto; } .modal.modal-snapshot .snapshots-graphic[data-icon="person"] { background-image: url(../images/snapshot-person@2x.png); } .modal.modal-snapshot .snapshots-graphic[data-icon="indicator"] { background-image: url(../images/snapshot-indicator@2x.png); } .modal.modal-snapshot .snapshots-graphic span:before { background-size: 100%; } .modal.modal-snapshot .snapshots-goods .snapshots-graphic span:before, .modal.modal-snapshot .snapshots-export .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-export@2x.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .snapshots-import .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-import@2x.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .snapshots-services-trades .snapshots-graphic span:before, .modal.modal-snapshot .snapshots-services-locations .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-services@2x.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .snapshots-economic-trade .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-info@2x.png); background-position: 0 0; background-repeat: no-repeat; } .modal.modal-snapshot .snapshots-economic-stocks .snapshots-graphic span:before { background-image: url(../images/snapshot-icon-bills@2x.png); background-position: 0 0; background-repeat: no-repeat; } #carousel a.carousel-link-video:before, .modal .modal-feature-video a :before { background-image: url(../images/play-icon@2x.png); background-size: 15px auto; } .overlay .trendline-controls button.trendlines-radio-gdp:before { background-image: url(../images/trendline-icon-solid@2x.png); } .overlay .trendline-controls button.trendlines-radio-tradeopenness:before { background-image: url(../images/trendline-icon-thin@2x.png); } .overlay .trendline-controls button.trendlines-radio-unemployment:before { background-image: url(../images/trendline-icon-dashed@2x.png); } } @keyframes loading { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loading { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } } @keyframes bounce { 0% { -webkit-transform: scale(1); } 55% { -webkit-transform: scale(1.15); } 100% { -webkit-transform: scale(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: scale(1); } 55% { -webkit-transform: scale(1.15); } 100% { -webkit-transform: scale(1); } } @keyframes drop { 0% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes drop { 0% { -webkit-transform: translateY(-10px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } /*# sourceMappingURL=screen.css.map */