Untitled
unknown
plain_text
2 months ago
95 kB
2
Indexable
@font-face { font-family: Slackey; src: url(/shared/images/fonts/Slackey-Regular.eot); src: url(/shared/images/fonts/Slackey-Regular.woff) format("woff"), url(/shared/images/fonts/Slackey-Regular.ttf) format("truetype"), url(/shared/images/fonts/Slackey-Regular.svg#svgFontName) format("svg"); } #socialGrid { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding-bottom: 2em; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #socialGrid.gamelink div { padding: 10px; } #draper-left { float: left; width: 160px; } #draper-right { float: left; width: 160px; } .dev-ad, .draper-frame { width: 100%; height: 600px; overflow: hidden; } #draper-video { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; position: absolute; top: 0; left: 0; height: 100%; right: 0; opacity: 0.95; z-index: 5000000; display: none; } #draper-video span { display: block; background: #000; color: #fff; font-size: 18px; font-weight: 700; padding: 20px; margin-top: 40%; } .fs-sidewall-container { position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important; overflow: visible !important; width: 0 !important; } html:not(.freetest) .fs-sidewall-container { z-index: 0 !important; } #cardgames_sidewall_right { position: relative; left: 50vw; -webkit-transform: translate(360px, 140px); -moz-transform: translate(360px, 140px); -ms-transform: translate(360px, 140px); -o-transform: translate(360px, 140px); transform: translate(360px, 140px); overflow: hidden !important; width: 300px; height: 600px; } html:not(.freetest) #cardgames_sidewall_right { overflow: hidden !important; width: 300px; height: 600px; } #cardgames_sidewall_left { position: relative; left: 50vw; -webkit-transform: translate(-660px, 140px); -moz-transform: translate(-660px, 140px); -ms-transform: translate(-660px, 140px); -o-transform: translate(-660px, 140px); transform: translate(-660px, 140px); } html:not(.freetest) #cardgames_sidewall_left { overflow: hidden !important; width: 165px; height: 600px; } .qc-cmp2-persistent-link { display: none !important; } #board-wrapper-and-ads { width: 100%; } .centered { text-align: center; } #promo-mini { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; font-size: 14px; font-weight: 700; padding-right: 8px; margin-bottom: 12px; width: 120%; margin-left: -10%; } #promo-mini a { display: inline-block; padding: 4px; } .lang-es #promo-mini #home-link { display: none !important; } #game-link-wrapper { z-index: 850000; color: #fff; width: 100%; position: absolute; top: 0; left: 0; top: min(-900px, -100%); background: #006400; -webkit-transition-property: none; -o-transition-property: none; -moz-transition-property: none; transition-property: none; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; padding-bottom: 40px; -webkit-box-shadow: #000 0 0 14px; -moz-box-shadow: #000 0 0 14px; box-shadow: #000 0 0 14px; opacity: 0.97; } #game-link-wrapper.has-transitions { -webkit-transition-property: top, left; -o-transition-property: top, left; -moz-transition-property: top, left; transition-property: top, left; } .menu-open #game-link-wrapper { left: 0; top: 0; } #game-link-wrapper.customize-open { top: 50px; } .use-custom-links #promo-mini .default-game-link { display: none; } #customize-menu { font-size: 12px; position: absolute; right: 5px; bottom: 5px; color: #fff; } #customize-menu:visited { color: #fff; } #hide-home { font-size: 12px; position: absolute; right: 5px; bottom: 25px; color: #fff; } #hide-home:visited { color: #fff; } .lang-es #hide-home { display: none; } #close-menu { position: absolute; bottom: 20px; left: 50%; font-weight: 700; width: 240px; margin-left: -120px; } #promo-links a input[type="checkbox"] { display: inline-block; margin-left: 10px; position: relative; bottom: 2px; } #close-menu:active:hover { -webkit-touch-callout: none; outline: 0; border-bottom: solid 1px #555 !important; position: absolute !important; top: auto !important; background: #ddd; } #suggest-rematch { display: none; } #promo-links { max-width: 860px; margin: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #promo-links div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; box-sizing: border-box; width: 33%; max-width: 290px; float: left; } #promo-links div a { color: #fff; font-size: 18px; text-align: center; display: block; padding: 8px 6px; width: 70%; margin: auto; } #promo-links div a:hover { background: #005400; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #promo-links div label { margin: 20px 50px 0 50px; display: block; font-size: 20px; font-weight: 700; padding: 5px 0; border-bottom: solid 1px #fff; border-top: solid 1px #fff; text-align: center; } #promo-links div#mobile-options { display: none; } #board-and-header { float: left; } #board-and-header, #textcontent { width: 716px; } * { padding: 0; margin: 0; -webkit-tap-highlight-color: transparent; -ms-touch-action: manipulation; touch-action: manipulation; } html { min-height: 100%; } body { background-color: #afcffe; background-image: -webkit-linear-gradient(#afcffe 400px, #fffaf0 1300px); background-image: -moz-linear-gradient(#afcffe 400px, #fffaf0 1300px); background-image: -o-linear-gradient(#afcffe 400px, #fffaf0 1300px); background-image: linear-gradient(#afcffe 400px, #fffaf0 1300px); font-family: Arial, sans-serif; color: #333; padding-bottom: 5px; -webkit-transition: background-color 0.15s ease-in; -o-transition: background-color 0.15s ease-in; -moz-transition: background-color 0.15s ease-in; transition: background-color 0.15s ease-in; -ms-scroll-chaining: none; overscroll-behavior: contain; } #ot-sdk-btn-floating { display: none !important; } a#ot-sdk-btn { color: #ca0000 !important; border: none !important; font-weight: 700 !important; padding: 0 !important; font-size: 1em !important; } a#ot-sdk-btn:hover { color: #000 !important; background: 0 0 !important; padding: 0 !important; } #random-game { position: absolute; bottom: 160px; width: 150px; left: 50%; margin-left: -75px; background: 0 0; color: #ff0 !important; border: none !important; font-size: 18px; } .appmode #random-game { display: none; } #random-game:active { top: auto; bottom: 159px; } #options-version { text-align: center; font-size: 11px; margin-top: -10px; display: none; } .appmode #options-version { display: block; } .random-selection-process .game-links a { -webkit-transition: background-color 0.2s ease-in, -webkit-transform 0.5s ease-in; transition: background-color 0.2s ease-in, -webkit-transform 0.5s ease-in; -o-transition: background-color 0.2s ease-in, -o-transform 0.5s ease-in; -moz-transition: background-color 0.2s ease-in, transform 0.5s ease-in, -moz-transform 0.5s ease-in; transition: background-color 0.2s ease-in, transform 0.5s ease-in; transition: background-color 0.2s ease-in, transform 0.5s ease-in, -webkit-transform 0.5s ease-in, -moz-transform 0.5s ease-in, -o-transform 0.5s ease-in; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .random-highlight { background-color: #fff; color: #006400 !important; -webkit-box-shadow: #fff 0 0 10px; -moz-box-shadow: #fff 0 0 10px; box-shadow: #fff 0 0 10px; } .random-select { -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); -o-transform: scale(4); transform: scale(4); } #manage-blocklist-menu, #manage-favoritelist-menu { display: none; } #disabled-scripts, #main-scripts-fail { position: absolute; top: 165px; z-index: 9999; width: 500px; left: 47%; padding: 20px; -webkit-transform: TranslateX(-50%); -moz-transform: TranslateX(-50%); -ms-transform: TranslateX(-50%); -o-transform: TranslateX(-50%); transform: TranslateX(-50%); } #disabled-scripts img, #main-scripts-fail img { width: 150px; height: 150px; position: relative; -webkit-transform: TranslateX(-50%); -moz-transform: TranslateX(-50%); -ms-transform: TranslateX(-50%); -o-transform: TranslateX(-50%); transform: TranslateX(-50%); left: 50%; } #main-scripts-fail { display: none; } @media (max-width: 730px) { #manage-blocklist-menu, #manage-favoritelist-menu { display: block; } #random-game { display: none; } #game-link-wrapper { min-height: 100%; } #disabled-scripts, #main-scripts-fail { top: 100px; width: 75%; left: 10%; padding: 2.5%; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); } } @media (max-width: 730px) and (max-height: 530px) { #require-paragraph { display: none; } } #board { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; -webkit-transition: background-color 150ms ease-in, opacity 0.5s linear; -o-transition: background-color 150ms ease-in, opacity 0.5s linear; -moz-transition: background-color 150ms ease-in, opacity 0.5s linear; transition: background-color 150ms ease-in, opacity 0.5s linear; } #matrix { display: none; position: relative; width: 100%; margin-bottom: -621px; top: -631px; height: 616px; padding: 10px; color: #7cfc00; font-family: "Courier New", monospace; background: #000; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; left: 0; border: dashed 3px #7cfc00; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 0; opacity: 0; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s; } #app-prompt { background: #fffaf0; display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 50000000; color: #333; padding: 0 30px 10px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: #333 -4px 0 10px; -moz-box-shadow: #333 -4px 0 10px; box-shadow: #333 -4px 0 10px; } #app-prompt p { font-size: 16px; max-width: 600px; margin: auto; } #app-prompt div { text-align: center; } #app-prompt a { display: inline-block; border: solid 2px #aaa; background: #fff; color: #888 !important; font-weight: 700; padding: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 150px; margin: 6px auto; text-align: center; } #app-prompt-phone { display: none; } #board #app-prompt #get-app { color: green !important; } #app-prompt #app-icon { display: block; width: 50px; height: 50px; margin: 5px auto; background-image: url(/shared/images/site-icon-rounded.png); -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; border-style: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .matrix #matrix { opacity: 1; display: block; } body.matrix:after { content: ""; position: fixed; width: 100%; height: 100%; background-image: -webkit-repeating-linear-gradient( bottom, #000, transparent 2px ); background-image: -moz-repeating-linear-gradient( bottom, #000, transparent 2px ); background-image: -o-repeating-linear-gradient(bottom, #000, transparent 2px); background-image: repeating-linear-gradient(0deg, #000, transparent 2px); opacity: 0.6; pointer-events: none; top: 0; left: 0; z-index: 234523452345; } .matrix *, .matrix a:link, .matrix a:visited { color: #7cfc00 !important; } .matrix .don-draper { opacity: 0; } .matrix #board { opacity: 0; } body { -webkit-transition: background-color 150ms ease-in; -o-transition: background-color 150ms ease-in; -moz-transition: background-color 150ms ease-in; transition: background-color 150ms ease-in; } body.matrix { background: #000; } #matrix textarea { display: block; width: 96%; margin: auto; background: #000; color: #7cfc00; font-family: "Courier New", monospace; font-size: 12px; height: 90%; border-style: none; outline: 0; } #matrix ::-webkit-resizer, #matrix ::-webkit-scrollbar, #matrix ::-webkit-scrollbar-corner { background: #000; border-style: none; } #matrix input { background: #000; outline: 0; font-family: "Courier New", monospace; border-style: none; font-size: 18px; } .matrix a:link, .matrix h1 { color: #7cfc00; } ol, p, ul { font-size: 18px; line-height: 23px; } ol, ul { padding: 10px 40px; } li { margin-bottom: 5px; } p { padding: 5px 10px; } a:link, a:visited { color: #ca0000; text-decoration: none; font-weight: 700; border-style: none; } a:hover { color: #000; } img { border-style: none; } h1, h2, h3, h4, h5, h6 { text-align: center; color: maroon; } #board div h3 { color: maroon; } h1 { margin-top: 10px; color: #fff; font-size: 50px; text-shadow: #444 1px 1px 2px; font-family: Slackey, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Geneva, Arial, Verdana, sans-serif; } h2 { font-size: 28px; margin: 0 0 10px 0; } h3 { font-size: 22px; margin: 25px auto 10px auto; } .game-thumbnail { display: inline-block; margin: 10px; height: 191px; border: solid 2px #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #wrapper { width: 880px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #board { background-color: #00a000; border: solid 3px #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; color: #fff; padding: 5px; -webkit-box-shadow: #333 0 0 7px; -moz-box-shadow: #333 0 0 7px; box-shadow: #333 0 0 7px; margin-bottom: 15px; z-index: 1; } #board h3 { color: #fff; } #board a, #board a:visited { color: #ff0; } #board a:active, #board a:hover { color: orange !important; } #play-page { position: relative; height: 600px; margin: auto; width: 700px; } #translate-proxy { max-width: 500px; margin: 100px auto; } .options-open .options-page { display: block !important; } .options-page { position: absolute; z-index: 99999999; background-color: #fffaf0 !important; display: none; width: 560px; margin-left: -280px; top: 50%; left: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: background-color 0.15s ease-in; -o-transition: background-color 0.15s ease-in; -moz-transition: background-color 0.15s ease-in; transition: background-color 0.15s ease-in; } .options-page .option-mobile { display: none !important; } .options-page h3 { margin-top: 0 !important; } .options-page h4 { margin-top: 10px; } #site-options { border-left: solid 1px #006400; position: relative; left: -1px; padding-left: 10px; padding-right: 10px; } #game-options { border-right: solid 1px #006400; padding-right: 10px; padding-left: 10px; } .options-pane { width: 50%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .options-page small { display: block; text-align: center; border-top: solid 1px #006400; font-size: 12px; width: 90%; margin: 8px auto; padding-top: 7px; clear: both; } .options-page button { width: 100px; height: 30px; display: block; margin: auto; margin-top: 10px; margin-bottom: 15px; } .options-page h2 { color: maroon; font-size: 24px; margin-top: 14px; -webkit-transition: background-color 0.15s ease-in; -o-transition: background-color 0.15s ease-in; -moz-transition: background-color 0.15s ease-in; transition: background-color 0.15s ease-in; } .options-page img { width: auto; height: 84%; margin-top: 3%; } .option-row { position: relative; text-align: left; margin-bottom: 15px; } @media (max-width: 730px) { .option-row { margin: 0; padding-top: 5px; padding-bottom: 5px; } } .option-row .label, .option-row label { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: left; display: inline-block; margin: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .option-row label a, .option-row label a:visited { color: #ea0000 !important; } .option-row label a:active, .option-row label a:hover { color: #000 !important; } .option-row input { opacity: 0; } .option-row p { font-size: 14px; } .option-row.radiobuttons { height: auto; } .option-row.radiobuttons label { display: block; margin-bottom: 15px; } .option-row.radiobuttons input + span { margin-left: -8px; } .option-row.radiobuttons input + span:before { top: 5px; left: -5px; } .option-row.radiobuttons input + span:before, .option-row.range input + span:before { content: ""; -webkit-transition: border 150ms ease-in; -o-transition: border 150ms ease-in; -moz-transition: border 150ms ease-in; transition: border 150ms ease-in; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 20px; height: 20px; position: relative; background: #fff; border: solid 1px #bbb; display: inline-block; cursor: pointer; } .option-row.radiobuttons input:checked + span:before, .option-row.range input:checked + span:before { border: solid 6px #67bc67; } .option-row.range { padding: 0 !important; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .option-row.range input { position: absolute; z-index: -1; } .option-row.range label { position: relative; font-size: 10px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; padding: 0; text-align: center; line-height: 10px; width: 20%; } .option-row.range label span { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; left: 0 !important; line-height: 1.4em; } .option-row.check input + span { position: relative; left: -10px; } .option-row.checkbox input + span { border: solid 1px #bbb; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background: #fff; height: 32px; width: 54px !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; cursor: pointer; -webkit-transition: background-color 150ms ease-in; -o-transition: background-color 150ms ease-in; -moz-transition: background-color 150ms ease-in; transition: background-color 150ms ease-in; position: static; } .option-row.checkbox input + span:after { content: ""; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: solid 0 #aaa; -webkit-box-shadow: #aaa 0 0 7px; -moz-box-shadow: #aaa 0 0 7px; box-shadow: #aaa 0 0 7px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #fff; height: 30px !important; width: 30px !important; display: block; margin-left: 0 !important; -webkit-transition-property: margin-left; -o-transition-property: margin-left; -moz-transition-property: margin-left; transition-property: margin-left; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } .option-row.checkbox input:checked + span { background: #67bc67; border-color: #67bc67; } .option-row.checkbox input:checked + span:after { margin-left: 22px !important; } .option-row.colors { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; gap: 3px; } .option-row.colors .label { margin-right: auto; } .option-row.colors .label, .option-row.colors label { display: block; position: static !important; } .option-row.colors input { position: absolute; } .option-row.colors input + span { display: block; width: 36px; height: 36px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: static; left: 0; top: 0; cursor: pointer; } .option-row.colors label { display: block; height: 36px; width: 36px; right: 4px; top: 4px; } .option-row.colors label:last-child { right: 44px; } .option-row.colors input[value="red"] + span { background-image: url(/shared/images/svg/redpiece.svg); opacity: 0.5; } .option-row.colors input[value="white"] + span { background-image: url(/shared/images/svg/whitepiece.svg); opacity: 0.5; } .option-row.colors input[value="black"] + span { background-image: url(/shared/images/svg/blackpiece.svg); opacity: 0.5; } .option-row.colors input:checked + span { opacity: 1; } #speed-option-label { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #speed-option-label label { display: block; } .dialog { color: #333; background-color: #edf35a; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: #222 0 0 5px; -moz-box-shadow: #222 0 0 5px; box-shadow: #222 0 0 5px; } #board .dialog h3 { color: maroon; text-shadow: none; } #beta-screen { display: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; -webkit-border-radius: 26px; -moz-border-radius: 26px; border-radius: 26px; width: 100%; z-index: 500000000; background: green; height: 100%; padding-top: 30%; } .beta #beta-screen { display: block; } #beta-screen p { max-width: 500px; margin: auto; } #beta-screen button, #beta-screen input { display: block; margin: 5px auto; } .error { color: red; font-weight: 700; } #more-games-link { color: #ff0 !important; display: inline-block; font-family: Verdana, Arial; text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red; } #more-games-link:active, #more-games-link:hover { color: #000 !important; text-shadow: none; } .newest-game { color: #ff0 !important; display: inline-block; font-family: Verdana, Arial; letter-spacing: 1.1px; text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red; } #space-link { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; color: #0bedc8 !important; } #space-link:hover { text-shadow: #fff 0 0 15px; } .newest-game:hover { color: #000 !important; text-shadow: none; } #menucontainer { margin-bottom: 3px; margin-top: -10px; } #menu { padding: 2px; position: relative; margin: auto; text-align: center; } #menu li { display: inline; list-style: none; font-size: 18px; } .don-draper { width: 160px; height: 620px; margin-top: 117px; float: left; -webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; -moz-transition: opacity 1s linear; transition: opacity 1s linear; } #draper-inline-video { display: none; position: absolute; background: #000; left: 0; width: 100%; top: 0; height: 100%; z-index: 99999999999; } .don-draper label { display: block; text-align: center; height: 20px; padding: 0; width: 100%; font-size: 12px; } .don-draper label:only-child { display: none; } #draper-right { margin-left: 75px; } #draper-video { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; opacity: 0.95; z-index: 5000000; display: none; } #draper-left { margin-right: 75px; display: none; } #about { margin-top: 20px; } #ownership-info, #privacy, #version-check, #version-info { text-align: center; margin: auto; font-size: 12px; } #version-check { border: solid 1px #000; } .avatar { position: absolute; height: 70px; } .theme-hidden { display: none; } .avatar small { position: absolute; display: block; text-align: center; margin-top: 5px; font-size: 13px; min-width: 100%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } #bottom-player small, #top-player small { width: 210%; left: -55%; } #right-player small { right: 0; } #left-player small, #right-player small { max-width: 75px; } .show-after-names { display: none !important; } .avatar div { border: solid 0 #fff; cursor: pointer; } .face-thumb { width: 20px; height: 20px; position: relative; background-repeat: no-repeat; display: inline-block; } .face-small { width: 50px; height: 50px; position: relative; background-repeat: no-repeat; } .face-medium { width: 80px; height: 80px; } .face-large { width: 120px; height: 120px; } .face-large, .face-medium, .face-small, .face-thumb { background-position: center !important; background-repeat: no-repeat; } .bubble { position: absolute; width: 130px; height: 97px; display: none; z-index: 500001; background-repeat: no-repeat; background-position: center; -webkit-background-size: 114px 83px !important; -moz-background-size: 114px 83px !important; -o-background-size: 114px 83px !important; background-size: 114px 83px !important; pointer-events: none; } .bubble p { color: #000; text-align: center; font-size: 16px; margin-top: 12px; margin-left: 18px; padding: 0 !important; width: 85px; height: 45px; line-height: 45px; display: block; font-size: 11px; } .bubble p span { display: inline-block; vertical-align: middle; line-height: normal; font-size: 11px; } .new-game::after { content: "NEW"; color: red; text-shadow: #000 1px 1px 0; font-size: 11px; font-weight: 700; position: relative; top: -8px; left: 4px; } #top-player-bubble p { margin-top: 29px; margin-left: 20px; } #right-player-bubble p { margin-top: 14px; margin-left: 20px; } #left-player-bubble { background-image: url(/shared/images/svg/speech-left.svg); top: -55px; left: 40px; } #right-player-bubble { background-image: url(/shared/images/svg/speech-right.svg); top: -55px; right: 44px; } #top-player-bubble { background-image: url(/shared/images/svg/speech-top.svg); top: 30px; right: 40px; } #bottom-player-bubble { background-image: url(/shared/images/svg/speech-left.svg); bottom: 33px; left: 40px; } .bubble-emoji { font-size: 30px !important; } #left-player { top: 50%; left: 2px; display: none; } #right-player { top: 50%; right: 2px; display: none; } #left-player, #right-player { margin-top: -50px; } #top-player { top: 2px; left: 50%; } #bottom-player { bottom: 2px; left: 50%; } #bottom-player, #top-player { margin-left: -25px; } #player-count { position: absolute; width: auto; left: 362px; top: 310px; } #release-notes ul li ul { padding-left: 30px; font-size: 12px; } #play-page { text-align: center; } #result-box { display: none; text-align: center; min-width: 310px; max-width: 96%; position: relative; } #win-reason { font-size: 14px; margin-top: -20px; } .show-results #result-box { display: inline-block !important; z-index: 50000; } #result-box h3 { padding: 14px; font-size: 20px; margin: 0; } @media (min-width: 731px) { #result-box h3 { white-space: nowrap; } } #result-box p img { float: right; margin-left: 5px; } .button-panel { clear: both; text-align: center; padding: 10px; height: 30px; } #open-player-picker { position: absolute; z-index: 5000; bottom: 90px; width: 200px; font-size: 12px; left: 50%; text-align: center; margin-left: -100px; font-weight: 400; } .option-control { width: 23%; display: inline-block; height: 32px; } #speed-text { width: 100% !important; } #messageBox { position: absolute; width: 100%; top: 365px; left: 0; padding: 0; } #messageBox p { width: 50%; min-height: 35px; font-size: 12px; font-family: CardSuits, Arial, sans-serif; line-height: 16px; margin: 0 auto; text-align: left; padding: 3px 6px; color: #333; background-color: #edf35a; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-shadow: none; } #authorpic { float: left; padding: 10px 10px 0 10px; } #authorpic img { border: solid 1px #fff; } .winner-img { display: none; } #menu li a.selected { text-decoration: underline; } .playlink { display: block; text-align: center; } button { color: #333 !important; font-family: Arial, sans-serif; font-weight: 400 !important; font-size: 14px; padding: 3px 9px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #555 !important; background: #ddd; background: -webkit-gradient( linear, left top, left bottom, from(#fff), to(#ddd) ); background: -webkit-linear-gradient(#fff, #ddd); background: -moz-linear-gradient(#fff, #ddd); background: -o-linear-gradient(#fff, #ddd); background: linear-gradient(#fff, #ddd); -webkit-touch-callout: none; outline: 0; } button.big { font-size: 20px; font-weight: 700; padding: 7px 12px; width: 170px; } button.small { font-size: 11px; padding: 3px 5px; } button:hover { -webkit-touch-callout: none; outline: 0; cursor: pointer; color: #222 !important; background: -webkit-gradient( linear, left top, left bottom, from(#ddd), to(#fff) ); background: -webkit-linear-gradient(#ddd, #fff); background: -moz-linear-gradient(#ddd, #fff); background: -o-linear-gradient(#ddd, #fff); background: linear-gradient(#ddd, #fff); } button:disabled { background: #ddd; opacity: 0.5; cursor: auto; } button:active:hover { -webkit-touch-callout: none; outline: 0; position: relative; top: 1px; background: #ddd; } .result-table { padding: 1px; display: inline-block; background-color: #fff; margin: 5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: solid 2px #333; font-family: Arial, sans-serif; } .result-table table { border-collapse: collapse; border: solid 1px #000; width: 100%; min-width: 284px; } .result-table .totals { font-weight: 700; } .result-table table td, .result-table table th { text-align: right; border: solid 1px #000; padding: 2px; white-space: nowrap; } .result-table table th { font-weight: 700; text-align: center; } .result-table .thick-bottom { border-bottom: solid 2px #000; } .result-table .thick-top { border-top: solid 2px #000; } .trophy { display: inline-block; background-position: center; background-repeat: no-repeat; background-image: url(/shared/images/svg/trophy.svg); width: 53px; height: 80px; } .trophy.mini { width: 40px; height: 40px; } .trophy.medium { width: 80px; height: 120px; } .trophy.big { width: 240px; height: 360px; } #theme-opt-in, #theme-opt-out { text-align: center; font-family: Arial, sans-serif; display: none; padding-bottom: 10px; } #messageBox p a, #messageBox p a:visited { color: #00f; } .underboard-message { text-align: center; font-family: Arial, sans-serif; margin-bottom: 30px; margin-top: 5px; font-size: 14px; padding-left: 10px; padding-right: 10px; padding-top: 10px; } .underboard-message img { margin: 4px 4px; -webkit-box-shadow: #006400 0 0 2px; -moz-box-shadow: #006400 0 0 2px; box-shadow: #006400 0 0 2px; } .underboard-message img:hover { -webkit-box-shadow: #006400 0 0 6px; -moz-box-shadow: #006400 0 0 6px; box-shadow: #006400 0 0 6px; } .adslot_1 { display: none; } .fake-ad { width: 100%; height: 100%; background: #fff; } #debug-console { font-family: "Lucida Console", monospace; font-size: 16px; background: #000; color: #fff; width: 100%; overflow-y: scroll; padding: 5px; height: 300px; } @font-face { font-family: CardSuits; font-style: normal; font-weight: 700; src: url(/shared/images/fonts/CardSuits.eot) format("embedded-opentype"), url(/shared/images/fonts/CardSuits.woff) format("woff"), url(/shared/images/fonts/CardSuits.ttf) format("truetype"); } @font-face { font-family: CardSuits; font-style: normal; font-weight: 400; src: url(/shared/images/fonts/CardSuits.eot) format("embedded-opentype"), url(/shared/images/fonts/CardSuits.woff) format("woff"), url(/shared/images/fonts/CardSuits.ttf) format("truetype"); } #mandalorian { display: none; background: #fffaf0; -webkit-box-shadow: gold 0 0 30px; -moz-box-shadow: gold 0 0 30px; box-shadow: gold 0 0 30px; border: solid 5px gold; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; width: 80%; left: 10%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 100px; position: absolute; z-index: 10000004; } #mandalorian-face { width: 120px; height: 120px; background-image: url(/shared/images/svg/face-19.svg); display: inline-block; margin-bottom: 10px; } #mandalorian button { width: 120px; } #mandalorian div a, #mandalorian div a:visited { text-align: center; color: #ca0000 !important; width: 100%; display: inline-block; margin: 10px 0 20px 0; font-size: 18px; } #mandalorian div a:hover { color: #000 !important; } #mandalorian div.stars { height: 50px; width: 50px; } #mandalorian .stars { background-image: url(/shared/images/svg/goldstar.svg); -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; -o-background-size: 50px 50px; background-size: 50px 50px; background-repeat: no-repeat; display: inline-block; background-position: center; margin-top: 20px; } #mandalorian .achievement-heading h2 { font-size: 30px; display: inline-block; position: relative; top: -12px; color: #daa520; text-shadow: none; } #mandalorian .achievement-heading { text-align: center; } #mandalorian p { padding: 0 30px; color: #a57809 !important; margin-bottom: 15px; } #mobile-menu, #mobile-options, .show-mobile { display: none; } #title { position: relative; padding: 0; } #title h1 { height: 71px; margin-top: 0; white-space: nowrap; } .dark-theme body { background: #252120; } .dark-theme body a { color: #f9b147; } .dark-theme #menu a:hover, .dark-theme body a:hover { color: #fff; } .dark-theme #facebook-promo, .dark-theme #textcontent p, .dark-theme #theme-opt-in, .dark-theme #theme-opt-out, .dark-theme .don-draper, .dark-theme body li { color: #dadada; } .dark-theme #textcontent h2, .dark-theme #textcontent h3, .dark-theme #textcontent h4, .dark-theme #title h1 { color: #fffaf0; text-shadow: none; } .dark-theme #board { background-color: #040 !important; border: solid 3px #080 !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #oldbrowser { background-color: #006400; border: 3px solid #fff; position: absolute; top: 25%; left: 5%; z-index: 1000000; width: 90%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; display: none; } #oldbrowser .lefticon { display: inline-block; padding-left: 15%; padding-right: 5%; font-size: 12px; } #oldbrowser .righticon { display: inline-block; padding-left: 5%; padding-right: 15%; font-size: 12px; } #oldbrowser .caption { display: block; } #hidebutton { display: inline-block; margin-left: 80%; color: #fff !important; padding-bottom: 5px; cursor: pointer; } .paused { -webkit-filter: blur(15px); filter: blur(15px); pointer-events: none; } .pause-dialog { text-align: center; position: absolute; top: 250px; z-index: 50000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: #000 0 0 5px; -moz-box-shadow: #000 0 0 5px; box-shadow: #000 0 0 5px; display: none; left: 50%; width: 310px; margin-left: -155px; height: 100px; margin-top: -100px; } .pause-dialog h3 { margin: 15px auto; } .pause-dialog button { width: 180px; } .confetti-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000000; } .firework-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -5; } .confetti #menu, .confetti #promo-mini { z-index: 10000001 !important; position: relative; } .confetti #mobile-menu, .confetti #result-box, .confetti #results-div, .confetti #win-screen { z-index: 10000001 !important; } #google-play { width: 120px; } .dealer .face-small:after { background: url(/shared/images/svg/dealerhat.svg) !important; background-repeat: no-repeat; width: 100% !important; height: 66% !important; content: ""; z-index: 50000; top: -36% !important; left: 0 !important; position: absolute; } .dealer .face-small.hair-3:after { top: -33% !important; } .dealer .face-small.hair-10:after, .dealer .face-small.hair-4:after { top: -40% !important; } .dealer .face-small.hair-11:after { top: -34% !important; } .dealer .face-small.hair-5:after { top: -25% !important; } #buy-premium .amount_label { font-style: italic; font-weight: 700; } #buy-premium { display: none; position: absolute; left: 50%; top: 33%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 66%; padding: 0.5em; z-index: 999; } #buy-premium #premium-button-wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; width: 80%; justify-items: center; margin-left: 10%; } #adfree-bought { display: none; } #buy-premium #premium-button-wrapper button { width: 33%; height: 3em; } @media (max-width: 730px) { #mandalorian { width: 96%; left: 2%; } } @media (max-width: 550px) { #buy-premium { width: 100%; } #mandalorian .achievement-heading h2 { width: 190px; top: 0; font-size: 24px; } #mandalorian p { font-size: 14px; padding: 0 10px; } #mandalorian { top: 10%; } } @media (max-width: 350px) { #mandalorian .achievement-heading h2 { width: 170px; top: -6px; font-size: 20px; } #mandalorian { top: 0; } } @media (max-width: 730px) and (max-height: 530px) { .achievement-unlocked { top: 50px; bottom: 0; overflow: scroll; } } .lang-wrapper { position: absolute; right: 15px; border: 0; background: #94add2; padding: 4px; top: 0; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .lang-wrapper:after { content: "▼"; font-size: 10px; margin-left: -7px; display: inline-block; color: #fff; margin-right: 4px; vertical-align: middle; position: relative; z-index: 0; } .lang-wrapper .lang-selector { border: 0; background: 0 0; color: #fff; vertical-align: text-bottom; font-family: sans-serif; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 13px; padding: 1px 3px; cursor: pointer; margin-left: -20px; margin-right: -8px; padding-left: 21px; padding-right: 11px; position: relative; z-index: 1; } .lang-wrapper .lang-selector:focus { outline: 0; } .lang-selector option { background-color: #fff; color: #000; } @media (max-width: 847px) { .lang-wrapper { display: none; } } .footer-language { font-size: 12px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 15px; text-align: center; margin: 15px 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -webkit-justify-content: space-evenly; -moz-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } @media (min-width: 1116px) and (max-width: 1205px) { #wrapper { width: 1100px; } #draper-right { width: 300px; } } @media (min-width: 960px) and (max-width: 1115px) { #wrapper { width: 960px; } #draper-right { width: 160px; } } @media (min-width: 1206px) { #wrapper { width: 1190px; } #draper-left { display: block; } #textcontent { margin-left: 235px; } .adslot_1 { display: block; } } @media (min-width: 1347px) { #wrapper { width: 1330px; } #draper-right { width: 300px; } } @media (max-width: 1346px) { #draper-left.freestar { margin-right: 20px; } #cardgames_sidewall_right { -webkit-transform: translate(325px, 140px); -moz-transform: translate(325px, 140px); -ms-transform: translate(325px, 140px); -o-transform: translate(325px, 140px); transform: translate(325px, 140px); } #cardgames_sidewall_left { -webkit-transform: translate(-600px, 140px); -moz-transform: translate(-600px, 140px); -ms-transform: translate(-600px, 140px); -o-transform: translate(-600px, 140px); transform: translate(-600px, 140px); } } @media (max-width: 1205px) { #cardgames_sidewall_right { -webkit-transform: translate(235px, 140px); -moz-transform: translate(235px, 140px); -ms-transform: translate(235px, 140px); -o-transform: translate(235px, 140px); transform: translate(235px, 140px); } #cardgames_sidewall_left { display: none; } } @media (max-width: 1114px) { #cardgames_sidewall_right { -webkit-transform: translate(270px, 140px); -moz-transform: translate(270px, 140px); -ms-transform: translate(270px, 140px); -o-transform: translate(270px, 140px); transform: translate(270px, 140px); } #cardgames_sidewall_left { display: none; } } @media (max-width: 975px) { #cardgames_sidewall_right { display: none; } } @media (max-width: 1044px) { #wrapper { width: 961px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #board { width: 700px; } #board-and-header { width: 716px; margin-left: 5px; } } #cardgames_leaderboard_btf { display: none; } @media (max-width: 975px) { #wrapper { width: 716px; } .dev-ad, .draper-frame { height: 110px; } #cardgames_leaderboard_btf { display: inherit; } #draper-right { width: 716px; margin: 0 auto; height: 110px; float: none; margin-top: 1em; } #draper-right.freestar { height: auto; } #textcontent { margin-top: 40px; } .underboard-message { height: 130px; margin: 0 0; font-size: 16px; display: table-cell; vertical-align: middle; } .theme-hidden { display: none; } #board { margin-bottom: 0; } #board-and-header { margin: 0 auto; width: 100%; float: none; } .don-draper { float: none; } } #mobile-menu { z-index: 990000; width: 40px; cursor: pointer; border-style: none !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: 0 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 0; position: absolute; left: 2px; top: 10px !important; } #mobile-menu:active { top: 10px; position: absolute !important; } .menu-open #mobile-menu, .menu-open #mobile-menu:active { position: fixed !important; } .appmode .rules-open .menu-row-1, .appmode .subview-open .menu-row-1, .menu-open #mobile-menu .menu-row-1, .options-open #mobile-menu .menu-row-1 { -webkit-transform: translateY(9px) rotate(45deg); -moz-transform: translateY(9px) rotate(45deg); -ms-transform: translateY(9px) rotate(45deg); -o-transform: translateY(9px) rotate(45deg); transform: translateY(9px) rotate(45deg); } .appmode .rules-open .menu-row-2, .appmode .subview-open .menu-row-2, .menu-open #mobile-menu .menu-row-2, .options-open #mobile-menu .menu-row-2 { opacity: 0; } .appmode .rules-open .menu-row-3, .appmode .subview-open .menu-row-3, .menu-open #mobile-menu .menu-row-3, .options-open #mobile-menu .menu-row-3 { -webkit-transform: translateY(-9px) rotate(-45deg); -moz-transform: translateY(-9px) rotate(-45deg); -ms-transform: translateY(-9px) rotate(-45deg); -o-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg); } #mobile-menu span { transition-property: transform, opacity, -webkit-transform; -webkit-transition-duration: 250ms; -moz-transition-duration: 250ms; -o-transition-duration: 250ms; transition-duration: 250ms; display: block; width: 80%; height: 4px; margin: 5px auto; background: #fff; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } @media (min-width: 600px) and (max-device-height: 450px) and (orientation: landscape) { .appmode #mobile-menu { display: none !important; } } @media (max-width: 730px), (min-width: 500px) and (max-height: 450px) and (orientation: landscape) and (max-device-width: 450px), (min-width: 500px) and (max-height: 450px) and (orientation: landscape) and (max-device-height: 450px) { body { background: #fffaf0 !important; padding-top: 0 !important; } #game-link-wrapper { top: 0; left: -100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; opacity: 1; } .menu-open #game-link-wrapper { left: 0; } #promo-links { width: 100%; max-width: 100%; } #promo-links div { width: 100%; max-width: 100%; } #promo-links div a { font-size: 24px; } #promo-links div label { font-size: 28px; } #mobile-menu { display: block !important; z-index: 9999999999; } #board-and-ads-wrapper, #header, #title { background: #00a000; } #title h1 { height: 100%; font-weight: 400; } #header { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 47px; } h1 { padding-top: 7px; font-size: 28px; } .kingsinthecorners h1 { padding-top: 7px; font-size: 26px; } .hide-mobile { display: none !important; } .show-mobile { display: block !important; } #board { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-style: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 0; } #board, #play-page, #wrapper { width: 100%; } #draper-right { display: none; } #wrapper { overflow-y: hidden; } #beta-screen { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .underboard-message p { width: 100%; } #mobile-options label { margin-top: 10px !important; } #promo-links div#mobile-options { display: block; } #textcontent { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; margin-top: 0; padding: 4px; } .pause-dialog { margin-top: 150px; } .pause-dialog button { width: 180px !important; } #deal { left: 50% !important; top: 50% !important; margin-left: -85px; } #site-options { border-left: none; margin-top: 30px; } #game-options { border-right: none; } #site-options h3 { margin-top: 25px !important; } .options-page { position: absolute; width: 96%; margin: 0 !important; left: 2%; top: 3px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; background: #fffaf0; } .options-page button { max-width: 140px; } #game-options h3 { display: none; } .options-page .option-desktop { display: none !important; } .options-page .option-mobile { display: block !important; } .option-row { border-top: solid 1px #bbb; width: 100%; } #speed-option { border-top: none; } #game-options .option-row { margin-left: 0; } .option-row:last-child { border-bottom: solid 1px #bbb; } .options-page small { border-top: none; } .options-pane { width: 100%; } .options-pane { float: none; } .dark-theme body { background: #252120 !important; } .dark-theme #board { border: none !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .dark-theme #promo-links { background-color: #040 !important; color: #f2f2de; } .dark-theme #title { background-color: #040 !important; } .dark-theme #title h1 { color: #f2f2de; } #open-player-picker { font-size: 16px; } .avatar { height: 65px; } .avatar small { font-size: 12px; } .avatar .face-small { height: 45px; width: 45px; } #left-player, #right-player { top: 38%; margin-top: -22px; } #bottom-player, #top-player { margin-left: -22px; } #cookie-banner div { display: block; } #app-prompt { padding: 0; } #app-prompt-tablet { display: none; } #app-prompt-phone { display: inline; } #app-prompt a { display: block; } } @media (max-width: 630px) { #oldbrowser .lefticon { padding-left: 1%; padding-right: 1%; font-size: 10px; } #oldbrowser .righticon { padding-left: 1%; padding-right: 1%; font-size: 10px; } } @media (max-width: 450px) { #result-box { max-width: 96% !important; } } @media (min-width: 500px) and (max-height: 450px) and (orientation: landscape) and (max-device-width: 450px), (min-width: 500px) and (max-height: 450px) and (orientation: landscape) and (max-device-height: 450px) { .appmode #mobile-menu { display: none !important; } } .appmode #textcontent, .appmode #wrapper { width: 100%; } #appmode #title, #appmode.dark-theme #title, .appmode #board, .appmode #board-and-header, .appmode #header, .appmode.dark-theme #board, .appmode.dark-theme #board-and-header, .appmode.dark-theme #header { background: 0 0 !important; } #promo-links div #ad-settings { display: none; } .appmode #mobile-menu { position: fixed; } .appmode h1 { overflow: hidden; } .appmode .appmode-hide, .appmode .appmode-remove { display: none !important; } .appmode body { background: #00a000 !important; padding-bottom: 0; } .appmode #textcontent { background: #fffaf0; margin: auto; } .appmode #rules { max-width: 700px; margin: auto; } .appmode.dark-theme #textcontent { background: #111; } .appmode.dark-theme body { background-color: #040 !important; } .appmode #mobile-menu, .appmode #mobile-options, .appmode body { padding-top: env(safe-area-inset-top, 20px) !important; } .appmode :not(input, textarea, p) { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } .appmode * { -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent !important; } .appmode .options-page { background: #fffaf0; } .appmode .rules-open #textcontent { display: block !important; z-index: 1; } .appmode .rules-open #menucontainer { visibility: hidden; } .appmode #textcontent { background: #fffaf0; } .appmode #rules { padding-top: 10px; padding-bottom: 20px; } .appmode .rules-open #play-page { display: none !important; } .appmode #textcontent { position: absolute; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; left: 0; width: 100%; } .appmode .subview { display: none; position: absolute; border-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #00a000; left: 0; width: 100%; top: 47px; top: -webkit-calc(env(safe-area-inset-top) + 47px); top: -moz-calc(env(safe-area-inset-top) + 47px); top: calc(env(safe-area-inset-top) + 47px); height: -webkit-calc(100vh - 47px); height: -moz-calc(100vh - 47px); height: calc(100vh - 47px); height: -webkit-calc(100vh - env(safe-area-inset-top) - 47px); height: -moz-calc(100vh - env(safe-area-inset-top) - 47px); height: calc(100vh - env(safe-area-inset-top) - 47px); -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; z-index: 1; } .appmode .avatars-subview-open #avatars-subview { display: block; } .appmode .statistics-subview-open #statistics-subview { display: block; } .appmode .subview-open #play-page { display: none; } .appmode.dark-theme .subview { background: #040; } .appmode.statistics { max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .appmode.opponents { overflow-y: hidden; } .appmode.statistics #wrapper { max-height: none !important; } .appmode.statistics #body { padding-top: 0 !important; } .appmode.statistics #header, .appmode.statistics #mobile-menu { display: none !important; } .appmode.avatars #header, .appmode.avatars #mobile-menu { display: none !important; } .appmode.avatars body { padding-top: 0 !important; } .appmode.statistics #wrapper { overflow-y: scroll; } .appmode.statistics body { overflow: scroll; } .appmode #result-box { max-height: 98%; overflow-y: auto; } .appmode #promo-links div label { font-family: Slackey; text-shadow: #030 1px 1px 0; } .appmode .growboard #play-page { max-height: none; } .appmode #game-nr-options, .appmode #loser-screen, .appmode .pause-dialog { background: #fffaf0; } @media (max-width: 730px), (min-width: 500px) and (max-height: 450px) and (orientation: landscape) { .appmode #wrapper { max-height: 100vh; max-height: -webkit-calc(100vh - env(safe-area-inset-top)); max-height: -moz-calc(100vh - env(safe-area-inset-top)); max-height: calc(100vh - env(safe-area-inset-top)); } .appmode .board.growboard { overflow-y: auto; height: -webkit-calc(100vh - 47px) !important; height: -moz-calc(100vh - 47px) !important; height: calc(100vh - 47px) !important; height: -webkit-calc(100vh - env(safe-area-inset-top) - 47px) !important; height: -moz-calc(100vh - env(safe-area-inset-top) - 47px) !important; height: calc(100vh - env(safe-area-inset-top) - 47px) !important; } .appmode #textcontent { top: 47px; top: -webkit-calc(env(safe-area-inset-top) + 47px); top: -moz-calc(env(safe-area-inset-top) + 47px); top: calc(env(safe-area-inset-top) + 47px); height: -webkit-calc(100vh - 47px); height: -moz-calc(100vh - 47px); height: calc(100vh - 47px); height: -webkit-calc(100vh - env(safe-area-inset-top) - 47px); height: -moz-calc(100vh - env(safe-area-inset-top) - 47px); height: calc(100vh - env(safe-area-inset-top) - 47px); } .appmode #game-link-wrapper { height: 100vh; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .appmode #play-page { height: -webkit-calc(100vh - 47px) !important; height: -moz-calc(100vh - 47px) !important; height: calc(100vh - 47px) !important; height: -webkit-calc(100vh - env(safe-area-inset-top) - 47px) !important; height: -moz-calc(100vh - env(safe-area-inset-top) - 47px) !important; height: calc(100vh - env(safe-area-inset-top) - 47px) !important; max-height: 650px; } .appmode.frontpage #play-page { max-height: 20650px; } .appmode .options-page { position: fixed; top: 47px !important; top: -webkit-calc(env(safe-area-inset-top) + 47px) !important; top: -moz-calc(env(safe-area-inset-top) + 47px) !important; top: calc(env(safe-area-inset-top) + 47px) !important; width: 100% !important; left: 0 !important; right: 0 !important; bottom: 0 !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: scroll; -webkit-overflow-scrolling: touch; } } @media (max-width: 730px) and (min-height: 700px) { .appmode:not(.frontpage) #board:not(.growboard) { padding-top: -webkit-calc((100vh - 700px)/ 2); padding-top: -moz-calc((100vh - 700px)/ 2); padding-top: calc((100vh - 700px) / 2); padding-top: -webkit-calc( (100vh - 700px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/ 2 ); padding-top: -moz-calc( (100vh - 700px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/ 2 ); padding-top: calc( (100vh - 700px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2 ); } } @media (min-width: 731px) and (min-height: 451px) { .appmode body { height: 100vh; height: -webkit-calc(100vh - env(safe-area-inset-top)); height: -moz-calc(100vh - env(safe-area-inset-top)); height: calc(100vh - env(safe-area-inset-top)); } .appmode #board { border-style: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; margin: auto; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; padding: 0 !important; } .appmode #title h1 { font-size: 38px; line-height: 66px; } .appmode .frontpage #play-page { margin-top: -20px; } .appmode #game-link-wrapper { width: 375px; top: 0; left: -400px; height: 100%; height: 100vh; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; } .appmode.frontpage #menucontainer, .appmode.opponents #menucontainer { visibility: hidden; } .appmode .growboard { margin-top: 0 !important; } .appmode .growboard #play-page { height: -webkit-calc(100vh - 100px) !important; height: -moz-calc(100vh - 100px) !important; height: calc(100vh - 100px) !important; height: -webkit-calc(100vh - env(safe-area-inset-top) - 100px) !important; height: -moz-calc(100vh - env(safe-area-inset-top) - 100px) !important; height: calc(100vh - env(safe-area-inset-top) - 100px) !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .appmode .options-page { top: 40%; } .appmode #options-version { text-align: right; margin-top: 0; position: absolute; bottom: 10px; right: 8px; } .appmode .menu-open #game-link-wrapper { left: 0; top: 0; } .appmode #promo-links { margin-top: -8px; } .appmode #promo-links div { width: 100%; max-width: none; float: none; } .appmode #promo-links div a { font-size: 20px; } .appmode #promo-links div label { font-size: 24px; } .appmode #menu a, .appmode #menu li { color: #fff; text-shadow: #006400 1px 1px 0; } .appmode #mobile-menu { width: 50px; } .appmode #mobile-menu span { height: 5px; margin: 7px auto; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .appmode .menu-open #mobile-menu .menu-row-1, .appmode .options-open #mobile-menu .menu-row-1, .appmode .rules-open .menu-row-1, .appmode .subview-open .menu-row-1 { -webkit-transform: translateY(12px) rotate(45deg); -moz-transform: translateY(12px) rotate(45deg); -ms-transform: translateY(12px) rotate(45deg); -o-transform: translateY(12px) rotate(45deg); transform: translateY(12px) rotate(45deg); } .appmode .menu-open #mobile-menu .menu-row-2, .appmode .options-open #mobile-menu .menu-row-2, .appmode .rules-open .menu-row-2, .appmode .subview-open .menu-row-2 { opacity: 0; } .appmode .menu-open #mobile-menu .menu-row-3, .appmode .options-open #mobile-menu .menu-row-3, .appmode .rules-open .menu-row-3, .appmode .subview-open .menu-row-3 { -webkit-transform: translateY(-12px) rotate(-45deg); -moz-transform: translateY(-12px) rotate(-45deg); -ms-transform: translateY(-12px) rotate(-45deg); -o-transform: translateY(-12px) rotate(-45deg); transform: translateY(-12px) rotate(-45deg); } .appmode #mobile-options { display: block !important; } .appmode #board-and-header { margin: auto; float: none; } .appmode #mobile-menu { display: block; } .appmode #textcontent { top: 67px; top: -webkit-calc(env(safe-area-inset-top) + 67px); top: -moz-calc(env(safe-area-inset-top) + 67px); top: calc(env(safe-area-inset-top) + 67px); height: -webkit-calc(100vh - 67px); height: -moz-calc(100vh - 67px); height: calc(100vh - 67px); height: -webkit-calc(100vh - env(safe-area-inset-top) - 67px); height: -moz-calc(100vh - env(safe-area-inset-top) - 67px); height: calc(100vh - env(safe-area-inset-top) - 67px); } .appmode .subview { top: 60px; top: -webkit-calc(env(safe-area-inset-top) + 60px); top: -moz-calc(env(safe-area-inset-top) + 60px); top: calc(env(safe-area-inset-top) + 60px); height: -webkit-calc(100vh - 60px); height: -moz-calc(100vh - 60px); height: calc(100vh - 60px); height: -webkit-calc(100vh - env(safe-area-inset-top) - 60px); height: -moz-calc(100vh - env(safe-area-inset-top) - 60px); height: calc(100vh - env(safe-area-inset-top) - 60px); } } @media (min-width: 731px) and (min-height: 700px) { .appmode #board:not(.growboard):not(.frontpage) #play-page { margin-top: 20px; } } @media (min-width: 1080px) and (min-height: 810px) { .appmode #board:not(.growboard):not(.frontpage) #play-page { margin-top: 50px; } } @media (min-width: 731px) { html:not(.appmode) .hide-desktop { display: none !important; } } .card { width: 69px; height: 94px; position: absolute; cursor: pointer; overflow: hidden; -ms-touch-action: manipulation; touch-action: manipulation; } .facedown, .faceup { -webkit-background-size: 100% 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-repeat: no-repeat; width: 100%; height: 100%; display: block; } .faceup { display: none; } .card.up .faceup { display: block; } .card.up .facedown { display: none; } .card.right { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .card.left { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .card.top { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .trick { position: absolute; background-repeat: no-repeat; background-position: center; } .trick.vertical { width: 33px; height: 45px; -webkit-background-size: 100% 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-image: url(/shared/images/cards/vertical-trick.png); } .trick.horizontal { width: 45px; height: 33px; -webkit-background-size: 100% 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-image: url(/shared/images/cards/horizontal-trick.png); } @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), 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-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .trick.vertical { background-image: url(/shared/images/cards/vertical-trick2x.png); } .trick.horizontal { background-image: url(/shared/images/cards/horizontal-trick2x.png); } } @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) { .trick.vertical { background-image: url(/shared/images/cards/vertical-trick3x.png); } .trick.horizontal { background-image: url(/shared/images/cards/horizontal-trick3x.png); } } #deal { position: absolute; width: 170px; left: 360px; top: 260px; } #sortHand { position: absolute; left: 385px; bottom: 40px; display: none; } .featured { color: orange !important; text-shadow: #000 0 0 1px; font-size: 16px; } .trick-count { position: absolute; color: #fff; font-family: Arial, sans-serif; font-size: 18px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #bottom-player-trick-count, #top-player-trick-count { width: 30px; height: 45px; line-height: 45px; } #left-player-trick-count, #right-player-trick-count { width: 45px; height: 30px; line-height: 30px; } .mini-card.d, .mini-card.h { color: red; } .mini-card.bj, .mini-card.rj { color: green; } .mini-card { font-family: Arial, sans-serif; font-weight: 700; font-size: 14px; color: #000; padding-right: 1px; padding-left: 1px; } .mini-card { font-family: CardSuits, Arial, Helvetica, sans-serif; } .mini-card-outlined { border: solid 1px #000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #fff; padding: 0 2px; white-space: nowrap; } #player-count { text-align: center; } #player-count button { width: 30px; height: 30px; border-style: none !important; } #player-count button.selected { font-weight: 700 !important; -webkit-box-shadow: #006400 0 0 10px; -moz-box-shadow: #006400 0 0 10px; box-shadow: #006400 0 0 10px; font-size: 16px; width: 34px; height: 34px; } #pile-marker { position: absolute; border: solid 1px #fff; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; display: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #inline-score-wrapper { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; right: 0; padding-left: 23px; bottom: 10px; width: 50%; text-align: center; } #inline-score { padding: 2px; background: #fff; color: #000; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; margin: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #inline-score table { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-collapse: collapse; border: solid 1px #000; width: 100%; } .score-name, .scorecard-names { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .scorecard-names { min-width: 85px; max-width: 150px; } #inline-score table td, #inline-score table th { padding: 0 2px; font-size: 12px; border: solid 1px #000; text-align: center; white-space: nowrap; } @media (max-width: 730px) { #inline-score table td, #inline-score table th { font-size: 11px; line-height: 11px; height: 12px; } } @media (max-width: 600px) { .score-name { max-width: 92px; } } @media (max-width: 412px) { .score-name { max-width: 80px; } } @media (max-width: 372px) { .score-name { max-width: 58px; } } @media (max-width: 730px) { #messageBox { display: none; } #messageBox p { width: 95%; max-width: 363px; } #sortHand { width: 50%; padding-left: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; left: 50%; bottom: 24px; text-align: left; } #sortHand button { font-size: 15px !important; width: 60px; height: 28px; } #player-count { left: 50%; margin-left: -83px; top: 50%; margin-top: 50px; } #pile-marker { display: block; } } .multiplayergame #multiplayer-buttons { right: auto; left: 50%; margin-left: 25px; } .multiplayergame #speak { width: 50px; } @media (min-width: 731px) { .multiplayergame #inline-score-wrapper { padding-left: 70px; } } @media (max-width: 731px) { .multiplayergame #inline-score-wrapper { bottom: 18px; } .multiplayergame #multiplayer-buttons { bottom: -4px; margin-left: 35px; } .multiplayergame #speak { height: 20px; } } #passCards { position: absolute; top: 220px; left: 50%; margin-left: -60px; display: none; cursor: pointer; width: 120px; height: 120px; background-position: center; background-repeat: no-repeat; } #moon-link { font-size: 12px; color: #00f !important; font-weight: 400 !important; display: none; } #moon-explanation { font-size: 13px !important; line-height: 16px; display: none; } .no-winner { display: inline-block; height: 22px; line-height: 20px; } #passCards.right { background-image: url(/hearts/images/arrow-right.svg); } #passCards.left { background-image: url(/hearts/images/arrow-left.svg); } #passCards.across { background-image: url(/hearts/images/arrow-up.svg); } #queen-notice { text-align: center; position: absolute; top: 160px; width: 630px; } #mr-refresh { display: none; color: red; } .player-cell { min-width: 40px; max-width: 76px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .result-table { position: relative; } .result-table table td { text-align: center; } .result-table { display: inline-block; } table#results-table { border-collapse: collapse; margin: auto; } #totals-winner-img { z-index: 1000; position: absolute; margin: auto; top: 50%; margin-top: -60px; left: 0; right: 0; opacity: 0.5; display: block; } td, th { padding: 2px 6px; font-size: 13px; } .winnerColumn { text-align: center !important; border-left: solid 2px #000 !important; } td img { margin: auto; } th { font-weight: 700; text-align: center; border-bottom: solid 1px #000; } td { text-align: right; } td.win { font-weight: 700; } tr.totals td { border-top: solid 1px #000; } td.handNr, th.handNr { border-right: solid 2px #000 !important; font-weight: 700; } .perfect-game-sign { font-family: Slackey, Arial, sans-serif; font-size: 65px; text-align: center; position: absolute; width: 100%; top: 58px; -webkit-animation-name: perfectGameAnimation; -moz-animation-name: perfectGameAnimation; -o-animation-name: perfectGameAnimation; animation-name: perfectGameAnimation; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: 5; -moz-animation-iteration-count: 5; -o-animation-iteration-count: 5; animation-iteration-count: 5; text-shadow: #006400 4px 4px 2px; } #inline-score-wrapper { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; right: 0; padding-left: 23px; padding-right: 2px; bottom: 10px; width: 50%; text-align: center; } #inline-score { display: none; } .show-scorecard #inline-score { display: inline-block; } #inline-score table th { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; min-width: 35px; max-width: 60px; } @-webkit-keyframes perfectGameAnimation { 0% { opacity: 1; color: #fff; } 50% { opacity: 0; color: purple; } 99% { opacity: 1; color: #fff; } } @-moz-keyframes perfectGameAnimation { 0% { opacity: 1; color: #fff; } 50% { opacity: 0; color: purple; } 99% { opacity: 1; color: #fff; } } @-o-keyframes perfectGameAnimation { 0% { opacity: 1; color: #fff; } 50% { opacity: 0; color: purple; } 99% { opacity: 1; color: #fff; } } @keyframes perfectGameAnimation { 0% { opacity: 1; color: #fff; } 50% { opacity: 0; color: purple; } 99% { opacity: 1; color: #fff; } } #current-score { position: absolute; bottom: 30px; left: 350px; font-size: 14px; display: block; margin-left: 30px; display: none; } .show-scorecard #current-score { left: 160px; margin-left: 0; } .lang-es .show-scorecard #current-score { left: 130px; } #hide-scorecard { display: none; } #hide-scorecard a { font-size: 12px; color: #00f !important; font-weight: 400 !important; } #hide-scorecard a:hover { color: red !important; } #show-scorecard { position: absolute; top: 350px; width: 100%; text-align: center; display: none; } #google-play { left: 15%; } .trick-count { display: block; } @media (max-width: 730px) { #passCards { top: 30%; width: 90px; height: 90px; margin-left: -45px; } #sounds { left: 50%; border: solid 1px #000; margin-left: -50px; } .perfect-game-sign { font-size: 30px; top: 70px; } .player-cell { max-width: 68px; } #inline-score table th { min-width: 35px; max-width: 39px; } #current-score { left: 50%; } .show-scorecard #current-score { bottom: -2px; font-size: 12px; left: 0; padding-right: 36px; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: right; padding-bottom: 0; } .lang-es .show-scorecard #current-score { left: 0; text-align: left; } } @media (max-width: 520px) { #current-score { margin-left: 15px; } } @media (max-width: 413px) { .player-cell { max-width: 56px; } #inline-score table th { min-width: 25px; max-width: 34px; } } @media (max-width: 374px) { .player-cell { max-width: 40px; } #inline-score table th { min-width: 22px; max-width: 27px; } } .multiplayer-dialog { color: #333; background-color: #fffaf0; position: absolute; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: #222 0 0 5px; -moz-box-shadow: #222 0 0 5px; box-shadow: #222 0 0 5px; left: 50%; top: 45%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99999999; width: 94%; max-width: 360px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: auto; } #online-list-dialog { display: none; max-width: 550px; } #multiplayer-challenge-lobby { max-width: 550px; height: 70%; top: 50%; z-index: 99999998 !important; } #multiplayer-challenge-lobby .button-container { position: absolute; bottom: 0; left: 0; width: 100%; } #challenge-lobby-message { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height: 50px; padding-bottom: 0; } .dark-theme .underboard-message { color: #dadada; } #cover { position: fixed; background: #000; opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; z-index: 500000; display: none; } #disconnect-lobby:active, #disconnect:active { color: #000 !important; } body #disconnect-lobby:hover, body #disconnect:hover { color: red !important; font-weight: 700; } #disconnect, #disconnect-lobby { position: absolute; right: 10px; color: #666 !important; font-weight: 400; bottom: 5px; font-size: 12px; } .online-players-list { margin: 4px auto; width: 94%; text-align: center; display: block; height: 255px; overflow-y: auto; overflow-x: hidden; padding: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #multiplayer-challenge-lobby .online-players-list { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; width: 100%; padding: 8px; } .multiplayer-dialog p { font-size: 14px; padding: 0 20px 10px 20px; text-align: center; } .start-multiplayer #players { height: 95%; } .multiplayer-dialog { display: none; } #challenge-sent { display: none; } .multiplayer-dialog .button-container { text-align: center; height: 57px; } .multiplayer-dialog button { width: 100px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; height: 22px; display: inline-block; margin-top: 10px; margin-bottom: 15px; } .online-player { display: inline-block !important; cursor: pointer; width: 60px; margin-bottom: 8px; } .online-player small { font-size: 11px; overflow: hidden; text-align: center; white-space: nowrap; } .online-player .face-small { margin: auto; } .player-image { display: block; height: 150px; width: 150px; margin: auto; cursor: pointer; background-repeat: no-repeat; background-position: center; position: relative; } .employee small { font-weight: 700; } .multiplayer-dialog h2 { margin-top: 14px; font-size: 24px; } #players button { display: inline-block; margin-right: 5px; width: 111px; overflow-y: auto; } .online-player:hover { cursor: pointer; } .bubble-text { font-size: 12px; display: inline-block; margin: 5px; line-height: auto; padding: auto; } .speak-bubble { text-align: center; font-size: 12px; border: solid 1px #000; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; color: #000; background-color: #fff; padding: 8px 5px; display: inline-block; margin: 5px 2px; min-width: 40px; } .speak-bubble:hover { cursor: pointer; } .multiplayer-bubble-text { font-size: 12px !important; } .multiplayer-bubble-emoji { font-size: 30px !important; } #phrases { display: none; z-index: 999999999; position: absolute; max-width: 420px; width: 95%; left: 50%; bottom: 80px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); text-align: center; background-color: #fffaf0 !important; } #phrase-title { font-size: 16px; padding: 10px; } #phrases-list { text-align: center; display: inline; } #emoji-list, .bubble-emoji { font-family: "Segoe UI Emoji", Arial, sans-serif; } #emoji-list { margin-top: 2px; margin-bottom: 2px; height: 40px; } .emoji-speak { display: inline-block; font-size: 20px; width: 30px; text-align: center; cursor: pointer; } .bubble-option { display: inline; } .bubble-option:hover { cursor: pointer; } .bubble p { margin-top: 15px; margin-left: 20px; } #cancel-speak { margin: 5px; } #active-game, #many-players-online, #only-one-online { display: none; } .enter-name { display: none; } #name-change, #name-new { display: block; margin: auto; height: 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 50%; font-size: 16px; } #name-change { margin: 10px auto; } .face-small.employee::after { content: ""; width: 80%; height: 80%; position: absolute; left: 10%; top: -60%; background-position: center; background-repeat: no-repeat; background-image: url(/shared/images/svg/employeehat.svg); } #name-error p { font-size: 14px; color: red; } #decline-multiplayer { margin-left: 5px; } #decline-and-block-multiplayer { display: none; width: 234px; margin: -8px auto 10px auto; } #confirm-join-blocked-player { z-index: 999999999999999; } #accept-multiplayer { margin-right: 5px; } #start-new-game { min-width: 100px; } #multiplayer-buttons { display: inline-block; position: absolute; bottom: 37px; right: 50%; margin-right: 37px; text-align: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 11px; height: 25px; } #multiplayer-buttons button { width: 80px; height: 27px; padding: 0; position: relative; } #multiplayer-refresh-countdown { color: #000; font-size: 12px; text-align: center; display: none; } .multiplayergame .multiplayer-hide { display: none !important; } .multiplayergame-not-active { display: inline-block; } .multiplayergame-active { display: none; } .multiplayergame .multiplayergame-not-active { display: none !important; } .multiplayergame .multiplayergame-active { display: inline-block; } #multiplayer-buttons button.multiplayer-lobby-link { display: inline-block; } #promo-links div a.multiplayer-lobby-link { display: block; } #menu li.multiplayer-lobby-link { display: inline; } #multiplayer-lobby { display: none; background: #fffaf0; width: 90%; height: 90%; left: 5%; top: 5%; position: absolute; z-index: 99999999999999; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: solid 2px #006400; -webkit-box-shadow: #333 0 0 3px; -moz-box-shadow: #333 0 0 3px; box-shadow: #333 0 0 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #222; } #multiplayer-lobby.banned #multiplayer-lobby-tables { opacity: 0.25; pointer-events: none; } #multiplayer-lobby.banned #lobby-message { font-weight: 700; color: red; } .multiplayer-close-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; bottom: 0; left: 0; width: 100%; } #multiplayer-lobby h3 span { position: relative; } #multiplayer-lobby-close { margin: 10px auto; } .multiplayer-table { position: relative; display: inline-block; width: 130px; height: 130px; margin: 5px; background: #00a000; -webkit-border-radius: 20%; -moz-border-radius: 20%; border-radius: 20%; -webkit-box-shadow: #000 0 0 2px; -moz-box-shadow: #000 0 0 2px; box-shadow: #000 0 0 2px; border: solid 2px #fff; cursor: pointer; } #lobby-message { padding-top: 5px; font-size: 15px; } #lobby-message button { margin-bottom: -4px; } .joined .multiplayer-table { opacity: 0.5; } #leave-table { margin-left: 8px; display: none; } .joined #leave-table { display: inline-block; } #private { font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; position: absolute; bottom: 50px; left: 0; width: 100%; } #private a:link, #private a:visited { color: maroon; } #private a:hover { color: #000; } .buttons { text-align: center; } .joined .multiplayer-table.my-table { opacity: 1; } .private-table { border-color: #000; } .multiplayer-table .code { display: none; position: absolute; width: 100%; top: 43%; text-align: center; font-size: 12px; color: #ff0; } #table-code { text-align: center; font-weight: 700; font-size: 24px; border-style: none; background: 0 0; width: 120px; } #join-table-code { font-size: 20px; text-align: center; width: 110px; } .premium-table::before { content: "✓"; position: absolute; border: solid 2px #fff; width: 30%; height: 30%; left: 35%; top: 35%; color: #fff; background: #00b000; font-size: 30px; line-height: 38px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .private-table .code { display: block; } .lobby-dialog-buttons { text-align: center; } .finisher small { color: green; } .finisher .face-small::after, .player-image.finisher::after, .table-player.finisher::after, span.checkmark { content: "✓"; width: 12px; height: 12px; font-size: 11px; border: solid 2px #fff; background: #00b000; color: #fff; display: block; position: absolute; right: 0; bottom: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: green 0 0 3px; -moz-box-shadow: green 0 0 3px; box-shadow: green 0 0 3px; line-height: 13px; font-family: Arial, sans-serif; } .favorite-player .face-small::after, .player-image.favorite-player::after, .table-player.favorite-player::after, span.favoriteheart { font-family: CardSuits, Arial, sans-serif; content: "\2665\FE0E"; width: 12px; height: 12px; font-size: 11px; border: solid 2px #fff; background: #f24; z-index: 100000; color: #fff; display: block; position: absolute; right: 0; bottom: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: #800066 0 0 3px; -moz-box-shadow: #800066 0 0 3px; box-shadow: #800066 0 0 3px; line-height: 13px; } .player-image.favorite-player::after, .player-image.finisher::after { width: 34px; height: 34px; font-size: 32px; line-height: 34px; border-width: 3px; } span.checkmark { position: static; display: inline-block; } .lobby-dialog { display: none; position: absolute; z-index: 5; left: 50%; top: 50%; width: 310px; margin-left: -155px; margin-top: -130px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fffaf0; color: #333; border: solid 1px #333; -webkit-box-shadow: #333 0 0 5px; -moz-box-shadow: #333 0 0 5px; box-shadow: #333 0 0 5px; font-size: 14px; } #error-message-box p { text-align: left; } .lobby-dialog h3 { margin: 14px auto 0 auto; } .lobby-dialog p { font-size: 13px; } .lobby-dialog input { display: block; width: 90%; margin: auto; } .lobby-dialog button { display: inline-block; margin: 12px auto; width: 100px; } .lobby-dialog h3 { color: maroon; } #multiplayer-lobby-tables { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; min-height: 100px; height: 345px; width: 100%; text-align: center; overflow-y: auto; overflow-x: hidden; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; } #multiplayer-lobby-tables.increase-margin .multiplayer-table { margin-bottom: 28px; } #connection-error { font-weight: 700; color: #d00; font-size: 18px; margin-top: 30px; } #connection-error div { color: #333; font-size: 14px; font-weight: 400; } .table-player { width: 32%; height: 32%; background-position: center; background-repeat: no-repeat; color: #fff; font-size: 11px; position: absolute; } .table-player label { display: block; position: absolute; width: 100%; bottom: -14px; left: 0; overflow-x: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; cursor: pointer; text-align: center; white-space: nowrap; } .table-player.bottom { left: 34%; bottom: 14px; } .table-player.top { left: 34%; top: 2%; } .table-player.left { left: 2%; bottom: 38%; } .table-player.right { right: 2%; bottom: 38%; } .avatar .offline { opacity: 0.5; } .avatar .offline.bot { opacity: 1; } #ask-to-turn-off-timer { margin: 6px auto; } .add-bot { position: absolute; top: 104%; left: 50%; width: 70px; margin-left: -35px; } .add-bot:active:hover { position: absolute !important; top: 104% !important; } #rematch-faces, #turn-off-timer-faces { text-align: center; } .rematch-face, .turn-off-timer-face { display: inline-block; margin: 2px; width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; -webkit-background-size: 75% 75%; -moz-background-size: 75%; -o-background-size: 75%; background-size: 75%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #eee; border: solid 3px #ddd; } #suggest-rematch { display: none; } #rematch-text { height: 50px; } .rematch-face.rematch-yes, .turn-off-timer-face.turn-off-timer-yes { border-color: #4caf50; background-color: #dfd; } .rematch-face.rematch-no, .turn-off-timer-face.turn-off-timer-no { border-color: #f44336; background-color: #fdd; } #rematch-cancel, #rematch-fail, #turn-off-timer-ok { display: none; } #block-mute .button-container { height: auto; } #cancel-block-mute { width: 224px; margin-top: -4px; } .muted::after { content: "MUTED"; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; background-color: #006400; color: #fff; width: 50%; left: 25%; bottom: 20%; padding: 4px; border: solid 2px #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .blocked::before { content: "BLOCKED"; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; background-color: #d00; color: #fff; width: 70%; left: 15%; bottom: 45%; padding: 4px; border: solid 2px #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #multiplayer-lobby .blocked::before { content: ""; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; background-color: #d00; color: #fff; width: 70%; left: 15%; bottom: 45%; padding: 4px; border: solid 2px #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .avatar.muted::after { padding: 1px; border: solid 1px #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: 7px; bottom: 43%; width: 70%; left: 13%; } .avatar.blocked::before { padding: 1px; border: solid 1px #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: 7px; bottom: 61%; width: 80%; left: 8%; z-index: 2; } @media (max-width: 730px) { #multiplayer-lobby { width: 98%; left: 1%; } #multiplayer-challenge-lobby { height: 90%; max-height: 500px; } #challenge-lobby-message { font-size: 13px; line-height: 17px; height: 70px; } #lobby-message { height: 50px; } #multiplayer-lobby h3 { margin: 15px auto 0 auto; } #multiplayer-lobby-close { margin: 0 auto 10px auto; } .underboard-message p { padding-top: 10px; font-size: 14px; padding: 0; } #multiplayer-buttons { bottom: 34px; margin-right: 30px; } #multiplayer-buttons button { font-size: 12px; width: 70px; } #phrases { bottom: 75px; } .no-names #phrases { bottom: 55px; } .no-names #multiplayer-buttons { bottom: 18px; } #multiplayer-lobby-tables { height: 200px; } } @media (max-width: 374px) { #multiplayer-buttons button { font-size: 11px; width: 60px; } #challenge-lobby-message { height: 92px; } } @media (max-width: 419px) { .online-player .avatar { width: 40px; height: 40px; } #emoji-list { height: 70px; } } @media (min-width: 420px) { .multiplayer-open .start-multiplayer { max-height: 392px; } }
Editor is loading...
Leave a Comment