/*----- FONTS -------*/ @import url('https://fonts.wsj.net/wsj-fonts.css'); /*----- BASE & TOUCH RESETS -------*/ html { position: fixed; top: 0px; bottom: 0px; width: 100%; } html, button, input, select, textarea { color: #000; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } html, body { font-family: Arial, sans-serif; min-width: 300px; height: 100%; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); } a { color: #000; outline: none !important; border-bottom: none; } form * { -webkit-appearance: none; } li { font-size: 12px; } .tracker { display: none !important; } .keyboard-holder { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; } .fixed h2 { position: fixed; z-index: 4; } .playable-area { position: absolute; } .ios-h2-across, .ios-h2-down { display: none; } ::selection { background: transparent; /* Safari */ } ::-moz-selection { background: transparent; /* Firefox */ } body { margin: 0 auto; position: relative; font-family:'Chronicle SSm'; } @media only screen and (min-width: 750px) { } @media only screen and (min-width: 860px) { body { margin: 0 auto; position: relative; padding: 0; } } @media only screen and (min-width: 940px) { body { margin: 0 auto; position: relative; padding: 0; } } @media only screen and (min-width: 1024px) { body { max-width: 950px; margin: 0 auto; position: relative; padding: 0; } body.jumbo { max-width: 1150px; padding: 0 0 0 20px; } } /*----- NO JAVASCRIPT MESSAGE -------*/ .no-js-message { position: relative; z-index: 100001; padding: 10px; text-align: center; } .ie-message { position: relative; z-index: 100001; padding: 10px; text-align: center; display: none; } /*----- CROSSWORDS -------*/ .playable-area { position: absolute; } .puzzle-scroll { overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; left: 0; top: 0; right: 0; bottom: 10px; } @media only screen and (min-width: 620px) { .puzzle-scroll, .playable-area { position: static; } } /*----- PUZZLE GRID -------*/ .cell, .crossword { width: 100%; height: 100%; } .grid-holder { height: 100%; position: absolute; top: 0; left: 0; width: 100%; } .grid { height: 100%; position: relative; -webkit-overflow-scrolling: touch; } .puzzle { padding: 0; -webkit-transform-origin: left top; transform-origin: left top; display: inline-block; } .puzzle table { border: 1px solid #000; margin: 0 auto; table-layout: fixed;border-color: #333334 !important; } .puzzle table td { border-right: 1px solid #2b3333; border-bottom: 1px solid #2b3333; vertical-align: middle; margin: 0; padding: 0; font-weight: 600;border-color: #333334 !important; } .puzzle table .blank { background: #333334 !important; border-color: #333334 !important; } .letter { color: #3b4343 !important; font-family:'Whitney SSm' !important; } .puzzle table .pencil .letter, .box.pencil { font-weight: 300; color: #3b4343 !important; } .puzzle table .error { background: #fcc; } .puzzle table .selected-word.error { background: #f99; } .puzzle table .selected-word { background: #cce6f3 !important; } .puzzle table .current { background: #0080c3 !important; } .box { color: #3b4343 !important; } .clues .on .box { border-color: transparent; } .clues .boxes .current { background: #fff !important; border-color: #2b3333; } .current .letter, .current .number { color: #fff !important; } .clues .boxes span { text-align: center; line-height: 25px; display: block; font-weight: 700; } .clues .boxes span.pencil { font-weight: 300; } .show-demarcation .clues .boxes .box.dmark, .show-demarcation .clues .boxes .box.dmark-hyphen { margin-right: 20px; position: relative; } .show-demarcation .clues .boxes .box.dmark-hyphen:after { content: ''; position: absolute; right: -15px; width: 10px; height: 3px; background: #666; display: block; top: 50%; margin-top: -1px; } .puzzle table .current.error { color: #fff !important; } .square { display: block; position: relative; } .number { position: absolute; font-size: 10px; left: 0; top: 0; color: #3b4343 !important; font-weight: 400; font-family:'Whitney SSm'; background: #fff; z-index: 2; padding: 0 2px; } .puzzle table td { vertical-align: middle; } .square, .letter { width: 100%; text-align: center; } .square { position: relative; } .letter { display: block; font-size: 16px; font-weight: 600; position: absolute; left: 0; right: 0; text-align: center; top: 50%; transform: translateY(-40%); z-index: 2; } .selected-word .number { background: #cce6f3; } .current.selected-word .number { background: #0080c3; } .show-demarcation .dmark-right .square { border-right: 1px solid #000; } .show-demarcation .puzzle table td.dmark-right { border-right-color: #000; } .show-demarcation .dmark-bottom .square { border-bottom: 1px solid #000; } .show-demarcation .puzzle table td.dmark-bottom { border-bottom-color: #000; } .show-demarcation .dmark-hyphen-right .square:after { position: absolute; content: ''; display: block; width: 8px; height: 2px; background: #000; right: -5px; bottom: 10px; } .show-demarcation .dmark-hyphen-bottom .square:before { position: absolute; content: ''; display: block; width: 2px; height: 8px; background: #000; bottom: -5px; left: 50%; margin-left: -1px; } .bar-grid-borders { position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; } .bar-grid-border-l .bar-grid-borders { border-left: 2px solid #000; } .bar-grid-border-r .bar-grid-borders { border-right: 2px solid #000; } .bar-grid-border-b .bar-grid-borders { border-bottom: 2px solid #000; } .bar-grid-border-t .bar-grid-borders { border-top: 2px solid #000; } @media only screen and (max-width: 619px) { .puzzle { display: block; } .puzzle table { width: 100%; margin: 0; } .puzzle table td, .puzzle table .square { width: 27px; height: 28px; } .number { font-size: 8px; top: 1px; left: 1px; line-height: 1; } } @media only screen and (min-width: 620px) { .puzzle { display: block; padding: 0 0 20px; } .puzzle table { width: 100%; } .cols-13 td, .cols-13 .square { height: 37px; } .cols-15 td, .cols-15 .square { height: 25px; } .cols-15 .number { font-size: 8px; } .cols-21 table { width: 630px; } .cols-21 .square { height: 30px; } .cols-21 .number { font-size: 8px; } .playable-area { width: 62.5%; position: fixed; top: 106px; padding-right: 10px; } .action-buttons { padding: 20px 0 20px !important; } } @media only screen and (min-width: 768px) { .puzzle { display: block; padding: 0 0 20px; } .puzzle table { width: 100%; } .cols-13 td, .cols-13 .square { height: 37px; } .cols-15 td, .cols-15 .square { height: 31px; } .cols-15 .number { font-size: 8px; } .cols-21 table { width: 680px; } .cols-21 .square { height: 30px; } .cols-21 .number { font-size: 8px; } .playable-area { width: 62.5%; position: fixed; top: 110px; padding-right: 10px; } .action-buttons { padding: 20px 0 20px !important; } .masthead { border-bottom: 4px solid #d4d8d7; height: 40px; } } @media only screen and (min-width: 860px) { .puzzle { display: block; padding: 0 0 20px; } .puzzle table { width: 100%; } .cols-13 td, .cols-13 .square { height: 39px; } .cols-15 td, .cols-15 .square { height: 34px; } .cols-15 .number { font-size: 8px; } .cols-21 table { width: 680px; } .cols-21 .square { height: 32px; } .cols-21 .number { font-size: 8px; } .playable-area { width: 62.5%; position: fixed; top: 110px; padding-right: 10px; } .action-buttons { padding: 20px 0 20px !important; } } @media only screen and (min-width: 940px) { .puzzle table { width: 460px; } .cols-13 td, .cols-13 .square { height: 34px; } .cols-15 td, .cols-15 .square { height: 29px; } .cols-21 table { width: 630px; } .cols-21 .square { height: 30px; } .cols-21 .number { font-size: 8px; } .playable-area { width: 50%; position: fixed; top: 110px; } } @media only screen and (min-width: 1024px) { .puzzle table { width: 460px; } .cols-13 td, .cols-13 .square { height: 35px; } .cols-15 td, .cols-15 .square { height: 30px; } .cols-21 table { width: 630px; } .cols-21 .square { height: 30px; padding-top: 2px; } .cols-21 .number { font-size: 8px; } .playable-area { width: 460px; position: fixed; top: 110px; padding-right: 0; } .jumbo .playable-area { width: auto; left: 20px; right: 490px; position: absolute; } } @media only screen and (min-width: 1024px) and (max-height: 768px) { .puzzle { width: 429px; padding: 0 0 20px; } .action-buttons { padding: 10px 0 10px !important; } .puzzle table { width: 429px; } .cols-13 td, .cols-13 .square { height: 32px; } .cols-15 td, .cols-15 .square { height: 28px; } .cols-15 .number { font-size: 8px; } .cols-21 table { width: 630px; } .cols-21 .square { height: 30px; } .cols-21 .number { font-size: 8px; } .playable-area { width: 429px; position: fixed; top: 110px; } .touch .action-buttons { width: 429px; top: auto; bottom: 0 !important; position: absolute !important; padding: 10px 0 !important; } .touch .playable-area { width: 429px; position: fixed; top: 70px; padding: 0; border-top: 1px solid #2b3333; } .touch .puzzle-scroll { overflow: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 74px; } .touch .puzzle table { border-top: none; border-bottom: none; margin: 0; } } /*----- INDIVIDUAL CLUE -------*/ .individual-clue-holder { position: fixed; width: 100%; z-index: 9; left: 0; } .individual-clue { position: relative; width: 100%; background: #eceded !important; } .next-prev { margin: 0; padding: 0; position: absolute; } .next-prev li { list-style: none; padding: 0; } .individual-clue-holder { bottom: 227px; transition: bottom 150ms; display: table; height: 35px; } .individual-clue { height: auto; background: #dcdddf; padding: 0 40px; color: #111; transition: height 150ms; min-height: 55px; display: table-cell; vertical-align: middle; } .clues-maximised .individual-clue-holder { display: none; } .next-prev { left: 0; top: 50%; width: 100%; height: 30px; margin-top: -15px; } .btn-prev, .btn-next { width: 60px; text-align: center; display: block; height: 30px; } .btn-prev .icon { background-size: 100% auto; background-repeat: no-repeat; background-position: center center; float: left; width:8px; height: 100%; text-indent: -9999em; margin-left: 12px; } .btn-next .icon { background-size: 100% auto; background-repeat: no-repeat; background-position: center center; float: right; width:8px; height: 100%; text-indent: -9999em; margin-right: 12px; } .btn-prev-holder { position: absolute; left: 0; top: 0; bottom: 0; } .btn-next-holder { position: absolute; right: 0; top: 0; bottom: 0; } .individual-clue p { margin: 0; font-size: 12px; line-height: 12px; text-align: center; } .text-size-medium .individual-clue p { font-size: 14px; line-height: 14px; } .text-size-large .individual-clue p { font-size: 16px; line-height: 16px; } .individual-clue-number { font-family: 'Whitney SSm'; font-weight: 300; color: #111; margin: 0 5px 0 0; text-transform: uppercase; } .btn-pen-holder, .btn-pencil-holder { display: none; } .btn-pen-holder.on, .btn-pencil-holder.on { display: block; } @media only screen and (min-width: 500px) { .individual-clue-holder { bottom: 265px; } .individual-clue { padding: 20px 50px; } .individual-clue p { margin: 0; line-height: 1.4; } .keyboard-minimised .individual-clue-holder { bottom: 70px; } } @media only screen and (min-width: 500px) { .individual-clue-holder { bottom: 265px; } .individual-clue p { margin: 0; line-height: 1.4; } .keyboard-minimised .individual-clue-holder { bottom: 70px; } .clues-maximised .individual-clue-holder { display: none; } } @media only screen and (min-width: 620px) { .individual-clue-holder { bottom: 210px; padding: 0 10px; display: none; height: 0; overflow: hidden; } } /*----- KEYS -------*/ .keyboard-holder { position: fixed; left: 0; bottom: 0; right: 0; z-index: 8; } .keyboard { background: #eceded; text-align: center; position: relative; } .keys { margin: 0; padding: 0; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; } .keys li { display: inline-block; } .keys li a { display: block; background: #fff; text-align: center; border-radius: 3px; overflow: hidden; color: #121212; font-weight: 400; text-decoration: none; font-size: 22px; transition: background 200ms; border-bottom: 1px solid #919295;} .keys li a:active { background: #d5d6d8 } .keyboard-icon { position: absolute; display: block; background: url(../img/icons.png) no-repeat; } .keyboard-holder { height: 145px; } .keyboard { padding: 10px 0 0; height: 145px; } .keys li { margin: 0 1px 7px 0; } .keys li a { width: 26px; height: 36px; line-height: 36px; } .keys li a.key-backspace { width: 36px; background: #abb3be; position: relative; } .keys li a.keyboard-collapse { width: 36px; background: #abb3be; position: relative; } .keys li a .text { text-indent: -9999em; display: inline-block; } .keys li a.key-direction { width: 36px; background: #c2c5c9; position: relative; transition: opacity 300ms; } .key-backspace .icon { width: 22px; height: 17px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMnB4IiBoZWlnaHQ9IjE3cHgiIHZpZXdCb3g9IjAgMCAyMiAxNyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjIgMTciIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjAuMTU1LDAuMzgySDguMjk1Yy0wLjY4Mi0wLjA2MS0xLjM4MSwwLjE2LTEuOTAyLDAuNjgxTDAuODM2LDYuNjE5Yy0wLjkzNiwwLjkzNS0wLjkzNiwyLjQ1MiwwLDMuMzg4CglsNS41NTYsNS41NTdjMC41MjMsMC41MjEsMS4yMjYsMC43NCwxLjkxLDAuNjhoMTEuODUzYzEuMDYzLDAsMS45MjItMC44NTksMS45MjItMS45MjRWMi4zMDQKCUMyMi4wNzcsMS4yNDMsMjEuMjE4LDAuMzgyLDIwLjE1NSwwLjM4MnogTTE2LjU2NywxMi42OTdsLTMuMTgzLTMuMTg0bC0zLjE4NCwzLjE4NEw5LDExLjQ5OWwzLjE4NC0zLjE4NUw5LjAwMSw1LjEzMWwxLjE5OS0xLjIwMQoJbDMuMTg0LDMuMTg0bDMuMTg1LTMuMTg1bDEuMTk4LDEuMjAxbC0zLjE4MywzLjE4NGwzLjE4NSwzLjE4NUwxNi41NjcsMTIuNjk3eiIvPgo8L3N2Zz4=); background-repeat: no-repeat; background-size: 100%; left: 50%; top: 50%; margin: -9px 0 0 -11px; position: absolute; } .keys li a.key-backspace:active, .keys li a.key-direction:active { background: #fff; } .keyboard-collapse { position: relative; display: none !important; } .keyboard-collapse .icon { background-repeat: no-repeat; background-size: 26px; background-position: center center; width: 100%; height: 100%; left: 0; top: 0; margin: 0;} .keyboard-minimised .keyboard-holder { height: 0 !important; overflow: hidden; } .keyboard-minimised .action-buttons { bottom: 0 !important; } .keyboard-minimised .individual-clue-holder, .keyboard-minimised .clues-list-holder { bottom: 55px !important; } .keyboard-minimised .playable-area { bottom: 114px !important; } @media only screen and (max-width: 599px) { .keyboard { border-left: none; border-right: none; } .keys .mobile-only.collapse-hide { display: inline-block; } .keys .mobile-only.collapse-show { display: none; } .keys li.keyboard-push-left { margin-right: 6px; } .keys li.keyboard-push-right { margin-left: 5px; } } @media only screen and (min-width: 500px) { .keyboard-holder { bottom: 0; padding: 0; height: 195px; } .keyboard { padding: 20px 0 0; height: 195px; } .keys li a { width: 45px; height: 42px; line-height: 42px; } .keys .keyboard-push-left { margin-right: 40px; } .keys .keyboard-push-right { margin-left: 40px; } .keys li a.key-direction { width: 50px; } .keys li a.key-backspace { width: 50px; } } @media only screen and (min-width: 500px) { .keyboard-holder { bottom: 0; padding: 0; height: 180px; } .keyboard { padding: 20px 0 0; height: 180px; } .keys li a { width: 45px; height: 42px; line-height: 42px; } .keys .keyboard-push-left { margin-right: 40px; } .keys .keyboard-push-right { margin-left: 40px; } .keys li a.key-direction { width: 50px; } .keys li a.key-backspace { width: 50px; } .btn-prev, .btn-next { width: 100px; } } @media only screen and (min-width: 768px) { .keyboard-holder { height: 225px; } .keyboard { padding: 20px 0 0; height: 225px; } .keys li { margin: 0 4px 7px; } .keys li a { width: 57px; height: 57px; line-height: 57px; border-radius: 5px; font-size: 22px; } .keys .keyboard-push-left { margin-right: 40px; } .keys li a.keyboard-collapse { width: 57px; } .keys li a.key-backspace { width: 57px; } .keyboard-minimised .playable-area { bottom: 70px !important; } } @media only screen and (min-width: 1024px) { .keyboard-holder { height: 184px; } .keyboard { padding: 10px 0 0; height: 184px; } .keys li, .keys .keyboard-push-left { margin: 0 5px 7px; } .keys li a { width: 54px; height: 50px; line-height: 50px; border-radius: 5px; font-size: 24px; } .keys li a.keyboard-collapse { width: 54px; } .keys li a.key-direction { width: 54px; } .keys li a.key-backspace { width: 54px; } .keyboard-minimised .playable-area { bottom: 0 !important; } } /*----- PUZZLE TITLE -------*/ h1 { font-size: 20px; margin: 0 0 10px; font-weight: 500; color: #000; } .title-info-holder { width: 100%; } .title-info { text-align: left; } .title-info-holder { min-height: 36px; overflow: hidden; } .no-intro .title-info-holder p { display: none; } .puzzle-title, .setter-title { font-family:'Chronicle SSm' !important; } .setter-title { font-style: italic; color: #3b4343; } @media only screen and (max-width: 619px) { .title-info-holder { position: absolute; left: 12px; top: 42px; right: 12px; width: auto; } .title-info h1 { font-size: 14px; font-weight: 700; line-height: 20px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setter-name { font-size: 10px; line-height: 10px; font-style: italic; } .setter-title { font-size: 13px; margin: 0; font-weight: 300; display: block; text-align: left; height: auto; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media only screen and (min-width: 620px) { .title-info-holder { position: static; min-height: 70px; display: flex; align-items: center; } .title-info h1 { margin: 0; line-height: 21px; font-size: 13px; color: #878f8f !important; } .setter-title { font-size: 13px; margin: 0; width: 100%; font-weight: 300; line-height: 21px; } .title-info { width: 62.5%; padding-right: 10px; } } @media only screen and (min-width: 940px) { .title-info { width: 50%; } } @media only screen and (min-width: 1024px) { .setter-title { width: 460px; } } @media only screen and (min-width: 1024px) and (max-height: 768px) { .setter-title { width: 429px; } } /*----- CLUES -------*/ .clues-list-holder { position: absolute; left: 0; top: 0; width: 100%; z-index: 5; display: none; transition: padding 300ms; } .clues-list { background: #fff; overflow: auto; text-align: left; height: 100%; clear: both; -webkit-overflow-scrolling: touch; } .clues-list h2 { background: #fff; text-transform: uppercase; font-family:'Whitney SSm'; font-size: 11px; margin: 0; padding: 5px 10px; color: #231f20; font-weight: 600; } .clues { list-style: none; padding: 0; margin: 0; } .answer { display: none !important; } .show-solution .answer { display: block; } .multiple-clue-sets .clues-list-holder { padding-bottom: 311px; } .clue-text-size { margin: 0; padding: 0; position: absolute; right: 30px; top: 2px; z-index: 4; } .touch .clue-text-size { right: 10px; } .clue-text-size li { list-style: none; padding: 0; display: inline-block; margin: 0 0 0 4px; } .tracker { position: absolute; background: #fff; width: 8px; height: 100%; right: 0; top: 29px; border: 1px solid #a7afaf; z-index: 6; } .tracker-bar { border-radius: 2px; background: #ccc; width: 4px; height: 30%; position: absolute; top: 20px; left: 1px; } .set-tracker, .across-tracker, .down-tracker { display: none; } .across-clues, .down-clues { position: relative; } .clues li.on { background:#0080c3 !important; color: #fff !important; } .clues li.on-related { background:#F4F4F4 !important; color: #fff !important; } .clues li.on-related.error, .clues li.on.error { background:#ea765b !important; color: #fff !important; } .clues li.on-related.correct, .clues li.on.correct { background:#28cc6f !important; color: #fff !important; } .on .text-clue, .clues li.on strong { color: #fff !important; } .dmjsClue2 { display:none; } .clues-select { display: none; } .multiple-clues .clues-select { display: block; background: #fff; position: absolute; left: 0; top: 0; z-index: 3; width: 100%; } .clues-list-holder .expand-minimise { right: 5px; top: 4px; } .no-touch .clues-list-holder .expand-minimise { right: 25px; top: 4px; } .touch .clues-list-holder .expand-minimise { right: 10px; } .clues li { position: relative; padding: 20px 10px 20px 40px; border-bottom: 1px solid #a7afaf; cursor: pointer; } .clues li.fade { opacity: 0.5; } .clues li.fade.on { opacity: 1; } .clues li.error { background: #fcc; } .clues li.error.fade, .clues li.correct.fade { opacity: 1; } .clues li strong { position: absolute; text-align: left; left: 12px; top: 20px; width: 20px; font-family:'Whitney SSm'; font-weight: 300; color: #3b4343; } .answer { padding: 2px 0 0; margin: 0; position: relative; text-transform: uppercase; } .clues-maximised .clues li .answer strong { left: 0; position: static; padding-left: 5px; } .clues li .answer strong { top: 2px; left: -23px; } .boxes { display: block; height: auto; padding: 2px 0; } .box { height: 25px; width: 25px; float: left; border: 1px solid #c7c7c7; margin: 0 2px 2px 0; background: #fff; font-family:'Whitney SSm' !important; font-weight: 600; } .clues-select { margin: 0; padding: 0; height: 29px; border-bottom: 1px solid #c7c7c7; } .clues-select li { list-style: none; float: left; width: auto; text-align: center; margin: 0; padding: 0; font-size: 12px; } .clues-select li:first-child{ margin-right: 2px; } .crossword .clues-select li a { height: 28px; display: block; line-height: 28px; background: #a7afaf; border: 1px solid #a7afaf; color: #333; font-size: 12px; text-transform: uppercase; text-decoration: none; padding: 0 20px; border-bottom: none; position: relative; top: 1px; z-index: 1; } .clues-select li a.on { background: #fff; } .clues-select li a span { display: none; } .btn-text-reduce span { background-position: -19px -19px; } .btn-text-increase span { background-position: -19px -38px; } .clues li, .text-size-small .clues li { font-size: 13px; line-height: 18px; } .text-size-medium .clues li { font-size: 15px; line-height: 20px; } .text-size-large .clues li { font-size: 18px; line-height: 23px; } .clues li:before, .clues li:after { content: " "; display: table; } .clues li:after { clear: both; } .clues-maximised .list-clues { display: none; } .clues-maximised .hide-clues { display: block; } .text-clue { color: #3b4343 !important; font-weight: 300; } .clues .on .text-clue { color: #fff !important; } .box.current { background: #fff !important; } @media only screen and (max-width: 619px) { .clues .text-clue { color: #3b4343 !important; } /*put in to override should a dark background colour be chosen for the non-list view necessitating a white text colour*/ .clues-maximised .clues-list { overflow: auto; -webkit-overflow-scrolling: touch; } .clues-maximised .clues-list-holder { display: block; z-index: 10; border-top: 1px solid #a7afaf; } .clues-maximised .clues-set { height: auto; } .clues-maximised .across-clues, .clues-maximised .down-clues { float: none; width: 100%; height: auto; } .clues-maximised.multiple-clues .across-clues, .clues-maximised.multiple-clues .down-clues { padding-top: 58px; } .clues-maximised .across-clues > div, .clues-maximised .down-clues > div {overflow: auto; max-height: auto; } .clues-maximised .across-clues { border-right: 1px solid #a7afaf; } .clues-maximised .clues-list h2 { border-bottom: 1px solid #a7afaf; } } @media only screen and (min-width: 620px) { .boxes { display: none; } .set-tracker { display: block; } .across-tracker, .down-tracker { display: none; } .clues-maximised .across-clues, .clues-maximised .down-clues { width: 100%; float: none; } .multiple-clues .across-clues { padding-top: 58px; } .multiple-clues .down-clues, .down-clues { padding-top: 0; } .multiple-clues .clues-list .across-clues h2 { top: 29px; } .clues-list .down-clues h2 { position: static; } .clues-list .across-clues h2, .clues-list .down-clues h2 { border-bottom: 1px solid #a7afaf; border-top: 1px solid #878f8f; height: 55px; line-height: 52px; padding: 0 0 0 40px; background: #fff; color: #3b4343 !important; } .clues-list-holder { right: 0; left: auto; width: 37.5%; top: 106px; bottom: 0; display: block; } .keyboard-minimised .clues-list-holder { bottom: 10px !important; } } @media only screen and (min-width: 620px) { .boxes { display: none; } .set-tracker { display: block; } .across-tracker, .down-tracker { display: none; } .clues-maximised .across-clues, .clues-maximised .down-clues { width: 100%; float: none; } .multiple-clues .across-clues { padding-top: 58px; } .multiple-clues .down-clues, .down-clues { padding-top: 0; } .multiple-clues .clues-list .across-clues h2 { top: 29px; } .clues-list .down-clues h2 { position: static; } .clues-list .across-clues h2, .clues-list .down-clues h2 { border-bottom: 1px solid #a7afaf; border-top: 1px solid #878f8f; height: 55px; line-height: 52px; padding: 0 0 0 40px; background: #fff; color: #3b4343 !important; } .clues-list-holder { right: 0; left: auto; width: 37.5%; top: 106px; bottom: 0; display: block; } .keyboard-minimised .clues-list-holder { bottom: 10px !important; } } @media only screen and (min-width: 620px) and (max-width: 939px) { .across-clues, .down-clues { position: absolute; left: 10px; top: 55px; right: 0; bottom: 0; border-top: 1px solid #878f8f; z-index: 0; } .across-clues { z-index: 1; } .down-clues .clues { display: none; } .down-selected .down-clues { z-index: 1; } .down-selected .across-clues { z-index: 0; } .down-selected .down-clues .clues { display: block; } .down-selected .across-clues .clues { display: none; } .clues-list .across-clues h2 { width: 50%; position: absolute; left: 0; top: -55px; padding: 0 0 0 12px; border: none; cursor: pointer; height: 53px; border-top: 1px solid #878f8f; } .clues-list .down-clues h2 { width: 50%; position: absolute; right: 0; top: -55px; padding: 0 12px 0 0; text-align: right; border: none; cursor: pointer; height: 53px; border-top: 1px solid #878f8f; } .down-clues h2 { opacity:0.5;} .down-selected .down-clues h2 { opacity:1; } .down-selected .across-clues h2 { opacity:0.5;} .clues { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 1;} } @media only screen and (min-width: 940px) { .clues-list-holder { display: block; width: 50%; left: auto; right: 0; top: 106px; bottom: 10px; padding: 0 0 0 10px; } .keyboard-minimised.clues-maximised .clues-list-holder { padding-bottom: 57px; } .across-clues, .down-clues { width: 50%; float: left; } .clues-list .across-clues h2, .clues-list .down-clues h2 { position: absolute; left: 0; top: 0; right: 0; font-weight: 500; font-family:'Whitney SSm' !important; color: #3B4343 !important; } .down-clues { float: right; } .boxes { display: none; } .clues-list { overflow: hidden; -webkit-overflow-scrolling: touch; } .clues-set { height: 100%; } .across-clues, .down-clues { height: 100%; position: relative; } .set-tracker { display: none; } .across-tracker, .down-tracker { display: block; } .across-clues, .down-clues { height: 100%; } .clues { position: absolute; top: 55px; bottom: 0; left: 0; right: 0; overflow: auto; -webkit-overflow-scrolling: touch; } .ios-h2-across, .ios-h2-down { position: fixed; right: 10px; top: 0; color: #000; width: 210px; z-index: 6; margin: 0; background: #fff; font-size: 14px; padding: 5px 10px; text-transform: uppercase; border: 1px solid #a7afaf; text-align: left; display: none; } .ios-h2-across { right: 220px; } .ios .multiple-clues .ios-h2-across, .ios .multiple-clues .ios-h2-down { top: 29px; } .keyboard-minimised .clues-list-holder { bottom: 10px !important; } .clues { padding-right: 0; } .clues-list .across-clues h2 { right: 10px; } .clues-list .down-clues h2 { left: 10px; } .across-clues .clues { padding-right: 10px; } .down-clues .clues { padding-left: 10px; } } @media only screen and (min-width: 1024px) { .clues-list-holder { width: 460px; padding: 0; } .clues { padding-right: 12px !important; left: auto; } .clues-list .across-clues h2, .clues-list .down-clues h2 { right: 12px; } .across-clues, .down-clues { width: 227px; float: left; } } @media only screen and (min-width: 1024px) and (max-height: 768px) { .clues-list-holder { width: 490px; margin-right: -10px; } .across-clues, .down-clues { width: 50%; } } /*----- TIMER -------*/ .timer { font-family:'Whitney SSm' !important; } @media only screen and (max-width: 619px) { .timer { position: fixed; left: 65px; top: 3px !important; } } @media only screen and (max-width: 619px) { .timer { display: block; text-align: center; font-style: normal; font-weight: 300; color: #0080c3; height: 35px; line-height: 35px; } } @media only screen and (min-width: 620px) { .timer { float: right; font-style: normal; font-weight: 300; color: #0080c3; } } .hide-timer .timer { display: none; } /*----- MOBILE PUZZLE NUMBER -------*/ /*----- ACTION BUTTONS AND ICONS -------*/ .action-buttons { background: #dcdddf; position: fixed; left: 0; right: 0; height: 66px; bottom: 195px; margin: 0; padding: 0; list-style: none; transition: bottom 150ms; z-index: 11; border-top: 1px solid #fff; } .burger-actions { list-style: none; } .action-buttons li { float: left; } .action-buttons li { position: relative; } .burger-actions li a, .action-buttons li a, .action-buttons-mobile li a{ display: block; text-align: center; font-size: 10px; text-decoration: none; position: relative; font-family:'Whitney SSm'; font-weight: 300; color: #3b4343 !important; } .burger-actions li a { font-size: 11px; } .burger-actions li .icon { margin-bottom: 5px; } .icon { display: block; background-repeat: no-repeat; background-position: center center; width: 32px; height: 32px; left: 50%; top: 0; margin: 0 auto 10px; background-size: cover; } .zoom-toggle-out { display: none; } #triggerPrint-icon { width: 36px; height: 36px; margin: 0 auto 6px; } .action-buttons-mobile { position: fixed; left: 120px; right: 44px; top: 5px; margin: 0; padding: 0; list-style: none; z-index: 11; display: flex; } .action-buttons-mobile li { flex: 1; text-align: center; position: relative; } .action-buttons-mobile li span { margin: 0; } .action-buttons-mobile li a { padding: 4px; display: block; margin: 0 auto; } .action-buttons-mobile li .icon { width: 24px; height: 24px; margin: 0 auto; } @media only screen and (max-width: 350px) { .action-buttons-mobile { left: 90px; } .timer { left: 54px !important; } } .hide-info .icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojMkIzMzMzO30NCjwvc3R5bGU+DQo8dGl0bGU+d3NqX3h3ZF88L3RpdGxlPg0KPGc+DQoJPGcgaWQ9IkxheWVyXzFfMV8iPg0KCQk8cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCgk8Zz4NCgkJPGc+DQoJCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzAsMjMuNGMwLjEsMC4yLDAuMiwwLjMsMC4zLDAuNWMwLjEsMC4xLDAuMiwwLjMsMC4zLDAuNGMwLjEsMC4xLDAuMywwLjMsMC40LDAuNGMwLjEsMC4xLDAuMywwLjIsMC41LDAuMw0KCQkJCWMwLjIsMC4xLDAuMywwLjEsMC42LDAuMmMwLjIsMCwwLjQsMCwwLjYsMGMwLjIsMCwwLjQsMCwwLjYsMGMwLjIsMCwwLjMtMC4xLDAuNS0wLjJoMGMwLjItMC4xLDAuMy0wLjIsMC41LTAuMw0KCQkJCWMwLjEtMC4xLDAuMy0wLjIsMC40LTAuM2wwLDBjMC4xLTAuMSwwLjItMC4zLDAuMy0wLjRzMC4yLTAuMywwLjItMC40YzAsMCwwLDAsMC0wLjFjMC4xLTAuMiwwLjEtMC40LDAuMi0wLjZjMC0wLjIsMC0wLjQsMC0wLjYNCgkJCQljMC0wLjIsMC0wLjQsMC0wLjZzLTAuMS0wLjMtMC4yLTAuNmMtMC4xLTAuMy0wLjMtMC42LTAuNS0wLjhjMCwwLDAsMC0wLjEtMC4xYy0wLjEtMC4xLTAuMy0wLjItMC40LTAuMw0KCQkJCWMtMC4yLTAuMS0wLjMtMC4yLTAuNS0wLjNjLTAuMi0wLjEtMC4zLTAuMS0wLjUtMC4yYy0wLjIsMC0wLjQsMC0wLjYsMHMtMC40LDAtMC42LDBjLTAuMiwwLTAuMywwLjEtMC41LDAuMmgwDQoJCQkJYy0wLjIsMC4xLTAuMywwLjItMC41LDAuM2MtMC4yLDAuMS0wLjMsMC4yLTAuNCwwLjNjLTAuMSwwLjEtMC4zLDAuMy0wLjMsMC40Yy0wLjEsMC4xLTAuMiwwLjMtMC4zLDAuNQ0KCQkJCWMtMC4xLDAuMi0wLjEsMC4zLTAuMiwwLjVjMCwwLjIsMCwwLjQsMCwwLjZjMCwwLjIsMCwwLjQsMCwwLjZDMjkuOSwyMy4xLDI5LjksMjMuMywzMCwyMy40eiIvPg0KCQkJPHBhdGggY2xhc3M9InN0MSIgZD0iTTM2LDM5LjNoLTFWMjguN2MwLTAuNi0wLjUtMS4xLTEuMS0xLjFoLTQuNWMtMC42LDAtMS4xLDAuNS0xLjEsMS4xVjMxYzAsMC42LDAuNSwxLjEsMS4xLDEuMWgwLjl2Ny4yaC0wLjkNCgkJCQljLTAuNiwwLTEuMSwwLjUtMS4xLDEuMXYyLjNjMCwwLjYsMC41LDEuMSwxLjEsMS4xSDM2YzAuNiwwLDEuMS0wLjUsMS4xLTEuMXYtMi4zQzM3LjEsMzkuOCwzNi42LDM5LjMsMzYsMzkuM3oiLz4NCgkJCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zMi43LDhDMTkuNiw4LDksMTguNiw5LDMxLjdzMTAuNiwyMy43LDIzLjcsMjMuN3MyMy43LTEwLjYsMjMuNy0yMy43UzQ1LjcsOCwzMi43LDh6IE0zMi43LDUyLjINCgkJCQljLTExLjMsMC0yMC42LTkuMi0yMC42LTIwLjZzOS4yLTIwLjYsMjAuNi0yMC42czIwLjYsOS4yLDIwLjYsMjAuNlM0NCw1Mi4yLDMyLjcsNTIuMnoiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K); } .show-info .icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojMkIzMzMzO30NCgkuc3Qye2ZpbGw6bm9uZTtzdHJva2U6IzJCMzMzMztzdHJva2Utd2lkdGg6NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPHRpdGxlPndzal94d2RfPC90aXRsZT4NCjxnPg0KCTxnIGlkPSJMYXllcl8xXzFfIj4NCgkJPHJlY3QgY2xhc3M9InN0MCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggY2xhc3M9InN0MSIgZD0iTTMwLDIzLjRjMC4xLDAuMiwwLjIsMC4zLDAuMywwLjVjMC4xLDAuMSwwLjIsMC4zLDAuMywwLjRjMC4xLDAuMSwwLjMsMC4zLDAuNCwwLjRjMC4xLDAuMSwwLjMsMC4yLDAuNSwwLjMNCgkJCQljMC4yLDAuMSwwLjMsMC4xLDAuNiwwLjJjMC4yLDAsMC40LDAsMC42LDBjMC4yLDAsMC40LDAsMC42LDBjMC4yLDAsMC4zLTAuMSwwLjUtMC4yaDBjMC4yLTAuMSwwLjMtMC4yLDAuNS0wLjMNCgkJCQljMC4xLTAuMSwwLjMtMC4yLDAuNC0wLjNsMCwwYzAuMS0wLjEsMC4yLTAuMywwLjMtMC40czAuMi0wLjMsMC4yLTAuNGMwLDAsMCwwLDAtMC4xYzAuMS0wLjIsMC4xLTAuNCwwLjItMC42YzAtMC4yLDAtMC40LDAtMC42DQoJCQkJYzAtMC4yLDAtMC40LDAtMC42cy0wLjEtMC4zLTAuMi0wLjZjLTAuMS0wLjMtMC4zLTAuNi0wLjUtMC44YzAsMCwwLDAtMC4xLTAuMWMtMC4xLTAuMS0wLjMtMC4yLTAuNC0wLjMNCgkJCQljLTAuMi0wLjEtMC4zLTAuMi0wLjUtMC4zYy0wLjItMC4xLTAuMy0wLjEtMC41LTAuMmMtMC4yLDAtMC40LDAtMC42LDBzLTAuNCwwLTAuNiwwYy0wLjIsMC0wLjMsMC4xLTAuNSwwLjJoMA0KCQkJCWMtMC4yLDAuMS0wLjMsMC4yLTAuNSwwLjNjLTAuMiwwLjEtMC4zLDAuMi0wLjQsMC4zYy0wLjEsMC4xLTAuMywwLjMtMC4zLDAuNGMtMC4xLDAuMS0wLjIsMC4zLTAuMywwLjUNCgkJCQljLTAuMSwwLjItMC4xLDAuMy0wLjIsMC41YzAsMC4yLDAsMC40LDAsMC42YzAsMC4yLDAsMC40LDAsMC42QzI5LjksMjMuMSwyOS45LDIzLjMsMzAsMjMuNHoiLz4NCgkJCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zNiwzOS4zaC0xVjI4LjdjMC0wLjYtMC41LTEuMS0xLjEtMS4xaC00LjVjLTAuNiwwLTEuMSwwLjUtMS4xLDEuMVYzMWMwLDAuNiwwLjUsMS4xLDEuMSwxLjFoMC45djcuMmgtMC45DQoJCQkJYy0wLjYsMC0xLjEsMC41LTEuMSwxLjF2Mi4zYzAsMC42LDAuNSwxLjEsMS4xLDEuMUgzNmMwLjYsMCwxLjEtMC41LDEuMS0xLjF2LTIuM0MzNy4xLDM5LjgsMzYuNiwzOS4zLDM2LDM5LjN6Ii8+DQoJCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzIuNyw4QzE5LjYsOCw5LDE4LjYsOSwzMS43czEwLjYsMjMuNywyMy43LDIzLjdzMjMuNy0xMC42LDIzLjctMjMuN1M0NS43LDgsMzIuNyw4eiBNMzIuNyw1Mi4yDQoJCQkJYy0xMS4zLDAtMjAuNi05LjItMjAuNi0yMC42czkuMi0yMC42LDIwLjYtMjAuNnMyMC42LDkuMiwyMC42LDIwLjZTNDQsNTIuMiwzMi43LDUyLjJ6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8bGluZSBjbGFzcz0ic3QyIiB4MT0iMTMuOSIgeTE9IjUxLjQiIHgyPSI1My40IiB5Mj0iMTEuOSIvPg0KPC9zdmc+DQo=); } .show-title .show-info { display: none; } .hide-title .hide-info { display: none; } .hide-title .title-info-holder h1 { display: none; } .hide-title .title-info-holder .setter-name { display: none; } .action-buttons a { transition: opacity 100ms; } /*.touch .print-puzzle { display: none !important; }*/ .burger-actions .print-puzzle { display: none; } @media only screen and (max-width: 619px) { .zoom-toggle-in, .print-puzzle, .zoom-toggle-out { display: none !important; } .action-buttons { background: #e7e7e7 !important; padding: 10px 12px 5px; display: none; } .action-buttons .icon { margin: 0 auto 4px; } .burger-actions .print-puzzle { display: block !important; } #triggerPrint-icon { width: 36px; height: 36px; margin: 0 auto 1px; } } .submit-comp { opacity: .6; } .submit-comp.enabled { opacity: 1; } @media only screen and (min-width: 620px) { .action-buttons-mobile { display: none; } .action-buttons { height: auto; padding: 0; } .action-buttons li { height: auto; } .action-buttons { width: 100%; position: static; margin: 0 auto; } .list-clues, .hide-clues { display: none; } } @media only screen and (min-width: 768px) { .action-buttons { height: auto; padding: 0; } .action-buttons li { height: auto; } .action-buttons { width: 476px; position: static; margin: 0 auto; } .list-clues, .hide-clues { display: none; } } @media only screen and (min-width: 1024px) { .action-buttons { width: 460px; } } @media only screen and (min-width: 1024px) and (max-height: 768px) { .action-buttons { width: 429px; } } /*.toggle-text-size .icon, .text-size-small .toggle-text-size .icon { background-size: 24px 24px; background-position: center bottom; transition: background-size .1s ease; } .text-size-medium .toggle-text-size .icon { background-size: 28px 28px; } .text-size-large .toggle-text-size .icon { background-size: 32px 32px; }*/ .action-buttons li .action-popout a, .action-buttons-mobile li .action-popout a { height: 24px; line-height: 24px; text-align: center; text-transform: uppercase; padding: 0; border-top: 1px solid #fff; font-weight: 500; font-size: 11px; } .action-buttons li .action-popout a:first-child, .action-buttons-mobile li .action-popout a:first-child { border-top: none; } @media only screen and (max-width: 619px) { .action-popout { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 20px 0 0; background: #ddd; padding: 0; width: 72px; display: none; } .action-popout.active { display: block; } .action-popout::after { content: ''; display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ddd; position: absolute; left: 50%; top: -10px; margin-left: -10px; } .action-buttons li .action-popout a, .action-buttons-mobile li .action-popout a { border-top: 1px solid #ccc; } } @media only screen and (min-width: 620px) { .action-buttons { z-index: 7; } .action-popout { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin: 0 0 20px; background: #ddd; padding: 0; width: 72px; display: none; } .action-popout.active { display: block; } .action-popout::after { content: ''; display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #ddd; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; } } /*----- BURGER MENU -------*/ .burger-controls { position: absolute; right: 13px; top: 13px; z-index: 200; } .burger-menu { display: block; height: 40px; width: 40px; border-radius: 4px; position: absolute; right: 0; top: 2px; padding: 4px 0 4px 4px; z-index: 201; } .burger-menu svg { height: 32px; width: 32px; } .burger-actions-holder { position: fixed; right: -100%; top: 0; background: #fff; padding: 0 23px 23px; width: 100%; margin: 0; height: 100%; z-index: 11; box-shadow: 0 0 10px rgba(0,0,0,.4); display: none; } .burger-actions-holder h2 { text-align: center; font-size: 13px; font-family:'Whitney SSm'; font-weight: 400; margin: 14px 0 13px; } .burger-actions-holder.open { display: block; right: 0; } .burger-actions { margin: 0 -23px; padding: 13px 23px; border-top: 1px solid #d3d7d7; display: flex; } .burger-actions li { flex: 1; } .burger-actions li a { color: #3b4343; } .burger-actions li.toggle-columns { display: none; } @media only screen and (max-width: 619px) { .burger-actions-holder { position: fixed; right: -110%; display: block; } .burger-actions .change-text-size { display: none; } } @media only screen and (min-width: 629px) { .burger-actions .show-info, .burger-actions .hide-info { display: none; } } .burger-menu.active { } .burger-menu.active .strip { background: #fff; } .config { margin: 0; padding: 0; list-style: none; text-align: left; color: #3b4343; border-top: 1px solid #d3d7d7; } .config li { position: relative; font-size: 13px; margin: 0; padding: 10px 0; border-bottom: 1px solid #d3d7d7; font-family:'Whitney SSm'; font-weight: 300; color: #3b4343 !important; } .custom-checkbox input[type="checkbox"] + label { cursor: pointer; display: block; height: 36px; line-height: 36px; position: relative; } .custom-checkbox input[type="checkbox"] { position: absolute; left: -9999em; } .custom-checkbox input[type="checkbox"] + label:before { content: ''; display: block; position: absolute; right: 0; top: 50%; background: #fff; width: 38px; height: 24px; border: 1px solid #e4e6e7; border-radius: 12px; transition: all .25s; transform: translateY(-50%); } .custom-checkbox input[type="checkbox"] + label:after { content: ''; display: block; position: absolute; right: 18px; top: 50%; background: #fff; width: 24px; height: 24px; transition: right .25s, background .25s; border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,.7); transform: translateY(-50%); } .custom-checkbox input[type="checkbox"]:checked + label:after { right: 1px; } .custom-checkbox input[type="checkbox"]:checked + label:before { background: #1381c4; border-color: #1381c4; } .burger-bg { position: fixed; z-index: 10; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); display: none; } .active + .burger-bg { display: block; } @media only screen and (max-width: 619px) { .burger-controls { position: absolute; right: 0; top: -1px !important; z-index: 200; } } @media only screen and (min-width: 620px) { .burger-actions-holder { position: absolute; width: 300px; z-index: 200; height: auto; right: 13px; top: 48px; } .burger-actions li.toggle-columns { display: block; } .burger-menu { right: 13px; top: 49px; } .burger-actions-holder, .burger-menu { right: -7px; } .burger-actions .reset { display: none; } } @media only screen and (min-width: 768px) { .burger-actions-holder, .burger-menu { right: -7px; } } @media only screen and (min-width: 1024px) { .burger-controls { right: 0; } .burger-actions-holder, .burger-menu { right: -7px; } } /*----- OVERLAYS -------*/ .overlay-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); z-index: 20; display: none; } .overlay { position: absolute; top: 0; left: 0; border: none !important; z-index: 21; font-weight: normal; display: none; } .crossword .close-overlay { width: 40px; height: 40px; background-repeat: no-repeat; background-size: 15px 15px; display: block; text-indent: -9999px; border-radius: 50%; position: absolute; top: 0; right: 0; left: auto; border: none; z-index: 2; background-position: center center; } .reset-overlay p { margin: 0 0 20px; } .yes-no { list-style: none; padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #7E7F7F; } .yes-no li { margin: 0; padding: 0; float: left; width: 50%; } .yes-no li:first-child a { border-right:1px solid #7E7F7F; } .yes-no a { border: none; border-radius: 0; display: block; text-align: center; width: 100%; height: 40px; line-height: 40px; font-size: 14px; text-decoration: none; color: #7E7E7E; text-transform: uppercase; font-weight: 600; } .the-sun .yes-no a { color: #3b4343 !important; } .dmjsYes { float: left; } .yes-no .dmjsNo { float: right; color: #F49E40; } .yes-no .dmjsNo a { color: #F49E40; } .yes-no a:active { background-color: #d5d6d8; } .submit-overlay.custom-overlay { height: auto; } .custom-overlay label { display: inline-block; width: 100px; } .custom-overlay form { margin: 0 0 20px; } .submit-overlay .terms-h2 { font-size: 14px; margin: 0 0 5px; } .custom-overlay .btn-submit { text-align: right; } .custom-overlay .btn-submit button { display: inline-block; } .custom-overlay .terms-p { margin: 0; font-size: 12px; } .custom-overlay input { width: 265px; } .submit-overlay.custom-overlay { margin: -190px 0 0 -215px; } .settings-overlay, .reset-overlay { margin: 0; display: none; background: #fff; border-radius: 20px; } .settings-content, .overlay-content { background: #fff; height: 100%; width: 100%; padding: 35px 0; position: relative; } .overlay-content { padding: 35px 0 50px; } .settings-overlay h2, .overlay-content h2 { margin: 0 15px 35px; font-size: 16px; font-weight: normal; text-align: center; font-family:'Chronicle SSm'; line-height:1.2; color: #3b4343; } .settings-overlay p { text-align: left; } .settings-overlay .yes-no, .overlay-content .yes-no { position: absolute; bottom: 0; left: 0; margin: 0; width: 100%; } .settings { margin: 0; padding: 0; list-style: none; } .settings li { background: #f8f8f9; text-align: left; padding: 13px 10px; position: relative; color: #454545; } .settings li span { float: right; position: absolute; right: 10px; top: 6px; } .overlay { width: 246px; height: 290px; position: absolute; top: 50%; left: 50%; margin: -145px 0 0 -123px; border-radius: 0; overflow: hidden; } .overlay.reset-overlay { height: auto; padding-top: 10px; width: 280px; margin: -87px 0 0 -140px; } /*----- OVERLAYS -------*/ .overlay-bg, .menu-bg { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.3); z-index: 2499; display: none; } .overlay-bg { position: fixed; } .menu-bg { background: rgba(0,0,0,0.25); z-index: 1000; } .overlay { position: absolute; left: 50%; top: 50%; width: 276px; height: 162px; background: #fff; margin: -81px 0 0 -138px; overflow: hidden; padding: 40px 0 0; z-index: 2500; display: none; } .close-overlay { width: 40px; height: 40px; background-repeat: no-repeat; background-size: 15px; display: block; text-indent: -9999px; border-radius: 50%; position: absolute; top: 0; right: 0; border: none; z-index: 2; background-position: center center; } .competition-overlay { left: 0; right: 0; top: 0; bottom: 0; margin: 0; width: auto; height: auto; padding: 0; overflow-y: auto; } .competition-overlay-content { padding: 35px 10px 50px; overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; text-align: center; color: #3b4343; font-family:'Whitney SSm' !important; font-weight: 300; } .competition-form select, .competition-form input[type=text], .competition-form input[type=email], .mobile-address-toggle, .competition-form input[type=number] { padding: 8px 10px 7px; background: #f4f4f4; border: 1px solid #f4f4f4; font-family:'Whitney SSm' !important; font-weight: 300; color: #3b4343; width: 100%; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } input:focus { border-color: #0080c3 !important; background: #fff !important; } .prize-info { font-size: 16px; color: #3b4343; text-align: justify; max-width: 500px; } ::-webkit-input-placeholder { color: #3b4343; } :-moz-placeholder { color: #3b4343; opacity: 1; } ::-moz-placeholder { color: #3b4343; opacity: 1; } :-ms-input-placeholder { color: #3b4343; } .overlay-content .competition-heading { font-size: 18px; margin: 10px 0 10px; color: #3b4343 !important; font-family:'Whitney SSm' !important; font-weight: 300; } .instructions-p { font-size: 12px; line-height: 16px; margin: 0 0 20px; color: #3b4343; font-family:'Whitney SSm' !important; font-weight: 300; } .competition-edit { text-decoration: none; text-transform: uppercase;display: inline-block; height: 36px; line-height: 36px; background: #fbfbfb; text-align: center; color: #626262; font-size: 12px; padding: 0 10px; } .competition-buttons, .btn-submit { font-family:'Whitney SSm' !important; font-weight: 300; } .competition-submit { width: 100%; text-align: center; background: #0080c3; font-size: 15px; color: #fff; border: none; text-transform: uppercase; font-family:'Whitney SSm' !important; font-weight: 600; padding: 12px 36px; letter-spacing: 0.1em; } .competition-buttons a { display: inline-block; height: 36px; line-height: 36px; text-align: center; color: #626262; text-decoration: none; text-transform: uppercase; font-size: 12px; } .competition-buttons { margin: 0; } .comp-completion-button { width: 100%; text-align: center; background: #0080c3; font-size: 15px; color: #fff; border: none; text-transform: uppercase; font-family:'Whitney SSm' !important; font-weight: 600; padding: 12px 36px; letter-spacing: 0.1em; text-decoration: none; } .competition-thanks-content .instructions-p { margin: 0 0 40px; font-size: 28px; line-height: 1.2; text-align: center; } .competition-overlay-content.competition-thanks-content { text-align: center; } .half-width-form, .full-width-form { margin: 0 0 20px; } .form-footer { height: 80px; } .submiterror { color: #ea765b; } @media only screen and (max-width: 350px) { .competition-buttons a { font-size: 11px; } } @media only screen and (max-width: 499px) { .competition-buttons a { width: 48%; } .competition-buttons a + a { float: right; } } @media only screen and (max-width: 749px) { .extended-address-information { height: 0; overflow: hidden; } .extended-address-information.open { height: auto; } } @media only screen and (min-width: 500px) and (max-width: 749px) { .competition-buttons a { width: 166px; margin: 0 0 0 5px; float: left; } .competition-submit { float: right; } } @media only screen and (min-width: 560px) { .competition-overlay-content { height: 100%; } .half-width-form { width: 50%; float: left; padding: 0 10px 0 0; } .half-width-form + .half-width-form { padding: 0 0 0 10px; } } @media only screen and (min-width: 750px) { .competition-overlay { left: 50%; right: auto; top: 50%; bottom: auto; margin: 0; width: 500px; height: auto; padding: 0; overflow-y: auto; transform: translate(-50%,-50%); } .competition-edit { position: absolute; left: 10px; top: 17px; font-family:'Whitney SSm' !important; font-weight: 300; } .competition-form select, .competition-form input[type=text], .competition-form input[type=email], .mobile-address-toggle, .competition-form input[type=number] { } select { background: #fff !important; } .competition-overlay-content { margin-top: 0; } .competition-overlay-content.competition-thanks-content { text-align: center; padding: 50px; } .mobile-address-toggle { display: none; } .extended-address-information { display: block; } .competition-form input[type=text].forename, .competition-form input[type=text].small-input + .small-input { float: none; } .competition-overlay-content { padding: 20px; } .form-footer { } .competition-buttons a { width: 166px; margin: 0 0 0 5px; } } /*----- INCORRECT OVERLAY -------*/ .overlay h1 { text-align: center; font-size: 18px; margin: 0 0 25px; } .overlay.incorrect, .overlay.complete { padding: 40px 20px 0; } .overlay.incorrect .close-overlay, .overlay.complete .close-overlay { right: 10px; top: 10px; } .overlay.incorrect, .overlay.complete { width: 100%; height: 100%; margin: 0; overflow: hidden; left: 0; top: 0; right: 0; bottom: 0; } .overlay.incorrect h2, .overlay.complete h2 { font-size: 32px; margin: 0 0 5px; font-family:'Chronicle SSm' !important; line-height:1.2; color: #333 !important; font-weight: 500; letter-spacing: -.1rem; } .overlay.incorrect p, .overlay.complete p { font-size: 16px; margin: 0 0 25px; font-family:'Whitney SSm' !important; line-height: 1.6; color: #333 !important; font-weight: 400; } .incorrect-content, .puzzle-completed { } .jsCompletionTime { font-weight: 900; } @media only screen and (min-width: 640px) { .overlay.incorrect, .overlay.complete { width: 634px; height: 527px; margin: 0; transform: translate(-50%,-50%); overflow: hidden; left: 50%; right: auto; bottom: auto; top: 50%; padding: 55px 50px 0; } } @media only screen and (max-width: 639px) { .incorrect .btn-yes { display: block; } .incorrect .btn-yes a, .incorrect .btn-no a { text-indent: -9999em; text-decoration: none; display: block; width: 50px; height: 50px; position: absolute; bottom: 40px; left: 50%; border: none; background-size: 50px 50px; } .incorrect .yesno li:first-child a { border: none; } /*.incorrect-content h2 { display: none; }*/ .incorrect .btn-yes a { margin-left: -60px; background: url(../img/mobile-home.png) no-repeat; background-size: 50px 50px; } .incorrect .btn-no a { margin-left: 10px; background: url(../img/mobile-replay.png) no-repeat; background-size: 50px 50px; } .incorrect .btn-yes a, .incorrect .btn-no a { bottom: 20px; } } /*----- CORRECT OVERLAY -------*/ .incorrect-content .jsStartOver { display: none; } .puzzle-completed, .incorrect-content { height: 100%; overflow: auto; } .back-to-home, .play-again { width: 200px; bottom: 0; height: 40px; line-height: 40px; text-align: center; background: #0080c3; text-decoration: none; text-transform: uppercase; font-size: 14px; color: #fff !important; display: block; margin: 0 auto; font-family:'Whitney SSm' !important; font-weight: 600; } .incorrect .play-again { margin: -10px 0 30px; } .completion-cross-sell { position: relative; padding: 25px 0 13px; margin: 0 0 17px; } .completion-cross-sell::after, .completion-cross-sell::before { position: absolute; content: ''; display: block; width: 100%; height: 2px; background: #f4f4f4; left: 0; max-width: 355px; } .completion-cross-sell::before { top: 0; } .completion-cross-sell::after { bottom: 0; } .completion-cross-sell h3 { font-size: 14px; margin: 0 0 15px; font-family:'Whitney SSm' !important; line-height: 1.6; color: #333 !important; font-weight: 400; } .completion-other-crosswords { list-style: none; margin: 0; padding: 0; } .completion-other-crosswords li { margin: 0 0 22px; padding: 0; } .completion-other-crosswords a { text-decoration: none; display: block; } .completion-crossword-title { font-size: 20px; font-family:'Chronicle SSm' !important; font-weight: 500; color: #000; display: block; margin: 0; letter-spacing: -.05rem; } .completion-other-crosswords a:hover .completion-crossword-title { color: #0080c3; } .completion-crossword-date { font-family:'Whitney SSm' !important; line-height: 1.6; color: #ff1b15 !important; font-weight: 600; } .completion-view-all { text-decoration: none; font-family:'Whitney SSm' !important; line-height: 1.6; color: #0080c3 !important; } .completion-view-all:hover { text-decoration: underline; } /*----- PRIZE OVERLAY -------*/ .prize-overlay { left: 0; top: 0; right: 0; bottom: 0; margin: 0; width: auto; height: auto; text-align: left; padding: 112px 48px 48px; overflow: auto; color: #333; } .prize-overlay .competition-overlay-heading { font-size: 16px; margin: 0 0 25px; line-height: 24px; font-family:'Chronicle SSm'; font-weight: 400; } .prize-overlay .prize-info { -moz-text-align-last: center; text-align-last: center; } .prize-overlay-rosette { height: 80px; width: 80px; position: absolute; left: 12px; top: 12px; } .prize-overlay p { font-size: 16px; line-height: 24px; font-family:'Chronicle SSm'; } .prize-overlay .competition-overlay-clue { font-size: 28px; line-height: 32px; } .prize-overlay a { color: #0080c3; text-decoration: none; } .prize-overlay .competition-overlay-heading .competition-date { font-family: 'Whitney SSm'; color: #999; } .competition-setter { font-style: italic; } @media only screen and (min-width: 768px) and (min-height: 366px) { .prize-overlay { left: 50%; top: 50%; right: auto; bottom: auto; width: 622px; height: 600px; transform: translate(-50%,-50%); padding: 125px 90px 0; overflow: visible; } .prize-overlay-rosette { width: 116px; height: 116px; left: 52px; top: -20px; } } @media only screen and (min-width: 1024px) and (min-height: 640px) { .prize-overlay { left: 50%; top: 50%; right: auto; bottom: auto; width: 780px; height: 600px; transform: translate(-50%,-50%); padding: 160px 130px 0; overflow: visible; } .prize-overlay-rosette { width: 150px; height: 150px; left: 85px; top: -20px; } } /*----- YES/NO BUTTONS -------*/ .yesno { list-style: none; padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #7E7F7F; } .yesno li { margin: 0; padding: 0; float: left; width: 50%; } .yesno li:first-child a { border-right:1px solid #7E7F7F; } .yesno a { display: block; text-align: center; width: 100%; height: 40px; line-height: 40px; font-size: 20px; text-decoration: none; color: #7E7E7E; text-transform: uppercase; } .btn-yes { float: left; } .yesno .btn-no { float: right; color: #F49E40; } .yesno .btn-no a { color: #F49E40; } .yesno a:active { background-color: #d5d6d8; } .incorrect .yesno a { font-size: 18px; } /*----- MOBILE LINKS -------*/ .complete-puzzle-links { display: none; } @media only screen and (max-width: 540px) { .complete-puzzle-links { display: block; margin: 0 auto 20px; padding: 20px 0 0; list-style: none; text-align: center; width: 250px; } .complete-puzzle-links li { display: inline-block; margin: 0 7px 14px; } .complete-puzzle-links a { display: block; height: 58px; width: 58px; } .the-times .complete-puzzle-links li:nth-child(1) { margin-left: 30px; } .the-times .complete-puzzle-links li:nth-child(2) { margin-right: 30px; } .the-times .mobile-puzzle-link { background: url(../img/mobile-links-sprite-tt.png) no-repeat; background-size: 242px 116px; } .the-sunday-times .mobile-puzzle-link { background: url(../img/mobile-links-sprite-st.png) no-repeat; background-size: 242px 116px; } .mobile-puzzle-link.completed { background-image: url(../img/mobile-links-sprite.png) !important; } .mobile-lexica a { background-position: 0 0 !important; } .mobile-polygon a { background-position: -175px -58px !important; width: 66px !important; } .mobile-suko a { background-position: -116px 0 !important; } .mobile-kenken a { background-position: -174px 0 !important; } .mobile-cellblocks a { background-position: 0 -58px !important; } .mobile-futoshiki a { background-position: -58px -58px !important; } .mobile-setsquare a { background-position: -116px -58px !important; } .the-sunday-times .mobile-lexica, .the-sunday-times .mobile-setsquare, .the-sunday-times .mobile-futoshiki { display: none; } } @media only screen and (max-height: 540px) and (orientation: portrait) and (max-width: 540px) { .complete-puzzle-links { padding-top: 0; } .puzzle-completed p { margin: 0 0 20px; } /* .overlay.incorrect { padding-top: 0; } .overlay.incorrect h1 { font-size: 55px; }*/ .overlay.complete { overflow-y: scroll; } .success-message-first-slide, .success-message-second-slide { min-height: 400px; } .the-sunday-times .overlay.incorrect { padding-top: 40px; } .the-sunday-times .overlay.incorrect p { margin: 0 0 30px; } } @media only screen and (min-height: 540px) and (max-height: 564px) and (max-width: 540px) { .complete-puzzle-links { bottom: 90px; } .puzzle-completed p { margin: 0 0 20px; } .overlay.incorrect { padding-top: 30px; } .the-sunday-times .overlay.incorrect { padding-top: 40px; } .the-sunday-times .overlay.incorrect p { margin: 0 0 30px; } } @media only screen and (min-height: 565px) and (max-height: 800px) and (max-width: 540px) { .complete-puzzle-links { bottom: 110px; } .puzzle-completed p { margin: 0 0 20px; } .overlay.incorrect { padding-top: 30px; } .the-sunday-times .overlay.incorrect { padding-top: 60px; } .the-sunday-times .overlay.incorrect p { margin: 0 0 30px; } } /*----- HELPERS -------*/ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } .hidden { display: none !important; visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .hide { display: none; } .no-touch .keyboard-holder { display: none; height: 0; overflow: hidden; } .btn-action { text-decoration: none; font-size: 16px; display: inline-block; width: 65px; height: 40px; line-height: 40px; color: #909090 } .btn-action.dmjsNo { color: #fab157; } .show-keyboard, .hide-clues { display: none; } .grid-zoomed-in .zoom-toggle-out { display: block; } .grid-zoomed-in .zoom-toggle-in { display: none; } .clues li.error { background: #fff; } .solution .clues li.error.on { background: #f99; } .solution .clues li.on .answer { display: block !important; clear: both } .solution .clues li.on.fade { opacity: 1; } .rotate-warning { display: none; } /*----- OVERRIDES OWING TO URL PARAMETERS -------*/ .no-mobile-menu .mobile-trigger { display: none; } .no-mobile-menu .timer { margin-right: 10px; } .no-header .page-header { display: none !important; height: 0 !important; overflow: hidden !important; } .no-header .navigation-trigger { display: none !important; } .no-header .btn-relaunch { display: none !important; } .source-web .puzzle-border { border: none; } .source-web .puzzle-completed h2, .source-web .why-not-try h2 { background: #fff; } .source-web .puzzle-completed p { margin: 0 0 20px; } .source-web .success-message-first-slide { border: none; } .source-web .incorrect .yesno { border-top: none; bottom: 40px; text-align: center; } .source-web .incorrect .yesno li.btn-yes { display: none; } .source-web .incorrect .yesno li { float: none; display: inline-block; width: auto; } .source-web .incorrect .yesno a { width: 160px; background: #000; line-height: 38px; height: 38px; color: #fff !important; margin: 0 10px; } @media only screen and (min-width: 541px) { .source-web .incorrect .btn-no a, .source-web .back-to-home, .source-web .play-again { text-indent: 0 !important; } } /*.source-web .back-to-home, .play-again,*/ .source-web .complete-puzzle-links { display: none !important; } .source-web .mobile-home { display: none !important; } /*----- MASTHEAD -------*/ @media only screen and (min-width: 0) and (max-width: 619px) { .masthead { position: fixed; left: 0; top: 10px; padding: 0 10px 7px; border-bottom: 1px solid #ccc; right: 0; } .mobile-logo { display: block; } .medium-logo { display: none; } } @media only screen and (min-width: 620px) { .masthead { position: relative; left: 50%; width: 100vw; margin: 0 0 0 -50vw; border-bottom: 2px solid #d4d8d7; padding: 8px 0 0; text-align: center; height: 36px; } .masthead a { display: inline-block; } .masthead img { height: 20px; } .mobile-logo { display: none; } .medium-logo { display: block; } } .circle .square::after { display: block; content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; top: 1px; border: 1px solid #333334; border-radius: 50%; }