/*----------------------------------------------------------------------------- MASTER STYLESHEET - global.css Do not directly change the contents of global.css Compress the below code before moving to global.css -----------------------------------------------------------------------------*/ /*------------------------------------ FONT STYLES ------------------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap'); /*------------------------------------ STANDARD STYLES ------------------------------------*/ * { --theme: #222; --color: #D00; margin: 0; padding: 0; } body { background: #f9f9f9; font-family: Inter, Arial, sans-serif; font-weight: 400; } a { color: var(--color); text-decoration: none; } a:hover { border-bottom: 1px solid var(--color); } a.imgbox { border: 0; } h1, h2 { font-weight: 500; font-family: Oswald, Arial, sans-serif; } h3, h4 { font-weight: 400; } .clear { clear: both; } .zero { font-size: 0; } /*------------------------------------ AREA FRAMEWORKS ------------------------------------*/ .container { margin: auto; } main { display: grid; grid-gap: 20px; justify-content: stretch; float: left; padding: 20px; width: calc(100% - 300px); } aside { display: grid; grid-gap: 20px; justify-content: stretch; float: right; padding: 20px; width: 240px; padding-left: 0; } /*------------------------------------ HEADER STYLES ------------------------------------*/ .hdwide { background: #333; color: #fff; font-family: Oswald, Arial, sans-serif; width: 100%; } .hdwide a { color: #fff; border-color: #fff; } .hdwide a span { font-size: .8em; color: var(--color); } .hdwide ul { list-style-type: none; } .hdwide .hdlogo { float: left; height: 120px; width: 286px; } .hdwide .hdlogo a { position: absolute; top: 15px; left: 50px; } .hdwide .hdlogo a:hover { border: 0; } .hdwide .hdnavi ul { font-size: 1.3em; float: left; padding: 15px 30px; } .hdwide .hdnavi ul:first-of-type { padding-left: 0; } .hdwide .hdside { float: right; padding: 15px 20px; text-align: right; } .hdwide .hdside input { background: #777; border: 0; color: #fff; padding: 6px; width: 200px; } .hdwide .hdside button { background: #777; border: 0; padding: 7px 12px; } .hdwide .hdside button:hover { background: #d00; } .hdwide .hdsocial { font-size: 0; margin-top:12px; } .hdwide .hdsocial a:hover { border: 0; } .hdwide .hdsocial .social-icon { margin-right: 6px; } .hdwide .hdsocial .social-icon img { height: 36px; width: 36px; } .hdwide .hdside ::-webkit-input-placeholder { color: #fff; } .kofi-button img { height: 14px; width: 22px; margin: 0 6px 4px 0; } .kofi-button a { background-color: var(--color); border-radius: 2px; display: inline-block; font-size: 14px; line-height: 32px; padding: 2px 12px; vertical-align: middle; } .kofi-button a:hover { background-color: #e33; } .hdsmall { background: #333; color: #fff; display: none; font-family: Oswald, Arial, sans-serif; font-weight: 500; text-align: center; width: 100%; } .hdsmall .hdmenu { font-family: inherit; margin: 0; padding: 1em 0; } .hdsmall .hdnavs { display: none; background: #333; border: 1px solid #222; border-width: 1px 0; position: absolute; text-align: center; width: 100%; z-index: 1; } .hdsmall .hdnavs a { border-bottom: 1px solid #222; color: #fff; display: inline-block; padding: .5em 0; width: 50%; } .hdsmall .hdnavs a:nth-child(even) { border-right: 1px solid #222; width: calc(50% - 1px); } .hdsmall .hdnavs a.navasingle { width: 100%; } .hdsmall .hdnavs a:hover { background-color: var(--color); } .hdsmall:hover .hdnavs { display: block; } /*------------------------------------ FOOTER STYLES ------------------------------------*/ .ftfull { background: #333; color: #fff; font-size: .9em; margin-top: 1em; padding: 1em; text-align: center; width: calc(100% - 2em); } .ftfull a { border-color: #fff; color: #fff; margin: 0 .75em; } .ftfull span { font-weight: 600; margin: 0 .75em; } /*------------------------------------ RESPONSIVE STYLES ------------------------------------*/ @media screen and (max-width:1100px) { main { display: block; max-width: calc(100% - 40px); } aside { display: none; } .hdwide { display: none; } .hdsmall { display: block; } .ftfull { display: none; } } /*----------------------------------------------------------------------------- MASTER STYLESHEET - bit.feed.css Do not directly change the contents of bit.feed.css Compress the below code before moving to bit.feed.css -----------------------------------------------------------------------------*/ /*------------------------------------ AREA FRAMEWORKS ------------------------------------*/ .container.cd-feed { max-width: 1480px; } main.cd-feed { grid-template-columns: [row1] auto [row2] auto [row3] auto [row4]; } aside.cd-feed { grid-template-columns: [row8] 240px [row9]; } /*------------------------------------ FEED STYLES ------------------------------------*/ main.cd-feed h1 { border-bottom: 4px solid var(--color); color: var(--color); font-size: 1.8em; margin: 0; grid-column-start: row1; grid-column-end: row4; } main.cd-feed article { background: #fff; border-bottom: 1px solid #ccc; line-height: 1.6; overflow: hidden; position: relative; } main.cd-feed div.fbox { background-size: cover !important; background-position: center center !important; height: 200px; } main.cd-feed div.fdata { overflow: hidden; padding: .8em; } main.cd-feed h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.15em; font-family: Inter, Arial, sans-serif; font-weight: 700; } main.cd-feed h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; border-top: 1px solid #ccc; font-size: .9em; margin-top: .8em; padding-top: .8em; } main.cd-feed h4 { color: #999; font-size: .8em; margin-top: 1.2em; text-transform: uppercase; } main.cd-feed h4 b { color: var(--color); } main.cd-feed article a:hover + .fdata > h2 > a { border-bottom: 1px solid var(--color); } /*------------------------------------ SIDEBAR STYLES ------------------------------------*/ aside.cd-feed h1 { border-bottom: 4px solid var(--color); color: var(--color); font-size: 1.8em; margin: 0; } .sidebox { background: #fff; border-bottom: 1px solid #ccc; overflow: hidden; } .sidebox:hover { background: var(--color); border-color: var(--color); color: #fff; } .sidebox:hover h4 { color: #fff; } .sidebox:hover a { color: #fff; } .sidebox .sbox { background-size: cover !important; background-position: center center !important; height: 135px; } .sidebox .sbox.daily { height: 240px; } .sidebox h4 { color: var(--color); font-size: .9em; font-weight: 600; overflow: hidden; padding: 8px; text-overflow: ellipsis; white-space: nowrap; } /*----------------------------------------------------------------------------- MASTER STYLESHEET - bit.game.css Do not directly change the contents of bit.game.css Compress the below code before moving to bit.game.css -----------------------------------------------------------------------------*/ /*------------------------------------ AREA FRAMEWORKS ------------------------------------*/ .container.cd-game { max-width: 1296px; } main.cd-game { grid-template-columns: [row1] auto [row2]; } aside.cd-game { grid-template-columns: [row8] 242px [row9]; } /*------------------------------------ HEADER STYLES ------------------------------------*/ #game-heading { padding: 20px; } h1#game-title { font-size: 2.5em; margin: 0; } h3#game-systems { font-size: 1em; font-weight: 600; } h4#game-pages { background: #222; font-size: 1em; font-weight: 600; margin-top: 1em; width: 100%; } h4#game-pages a { color: #fff; display: inline-block; border-right: 2px solid #f9f9f9; padding: .5em 0; text-align: center; width: calc(25% - 2px); } h4#game-pages a:last-of-type { border-right: 0; width: 25%; } h4#game-pages a:hover { background: var(--color); border-bottom: 0; } /*------------------------------------ INFOBOX STYLES ------------------------------------*/ #game-infobox { background: #fff; border: 1px solid #eee; border-radius: .5em; max-width: 242px; overflow: hidden; } #game-infobox div { margin: 1em 0; text-align: center; } #game-infobox div:first-of-type { border-bottom: 1px solid #eee; margin-top: 0; } #gi-icon img { width: 100%; } /*------------------------------------ MAIN SECTION STYLES ------------------------------------*/ h2.game-section { border-bottom: 2px solid var(--color); color: var(--color); font-size: 1.6em; line-height: 1.6; margin-bottom: .6em; } #game-images a img { margin-right: 12px; } #game-images a:nth-of-type(4n+0) img { margin-right: 0; } .game-images-full img { margin-bottom: 12px; } .game-news { clear: both; height: 135px; margin-bottom: 18px; } .game-news .feedbox { display: block; float: left; height: 135px; margin-right: 18px; width: 240px; } .game-news .feedbox:hover { border: 0; } .game-news .feedbox:hover + h3 > a { border-bottom: 1px solid var(--color); } .game-news h3 { border-bottom: 1px dotted var(--color); font-size: 1.1em; font-weight: 600; padding-bottom: .5em; } .game-news h4 { line-height: 1.6; margin-top: .5em; } .game-news h4 span { color: #999; display: block; font-size: .8em; margin: .5em 0 0; text-transform: uppercase; } /*------------------------------------ RELEASE DATA STYLES ------------------------------------*/ .gm-sysgroup { color: var(--color); } .gm-reldata { border: 1px solid #eee; border-radius: .5em; font-size: .9em; height: calc(120px - 2em); line-height: 2; margin-bottom: 1em; padding: 1em 2em; padding-left: calc(2em + 120px); } .gm-reldata h3 { color: var(--color); font-size: 1.1em; font-weight: 600; } .gm-reldata span { color: #999; font-size: .85em; } .gm-reldata b { display: inline-block; width: 90px; } .gm-sysgroup + .gm-reldata { margin-top: 1em; } /*------------------------------------ RESPONSIVE STYLES ------------------------------------*/ @media screen and (max-width:1100px) { h4#game-pages a { display: block; border-bottom: 2px solid #f9f9f9; border-right: 0; width: 100%; } h4#game-pages a:last-of-type { width: 100%; } h4#game-pages a:hover { border-bottom: 2px solid #f9f9f9; } #game-images a img { border: 2px solid #f9f9f9; margin: 0; width: calc(25% - 4px); } .game-news .feedbox { float: none; margin-bottom: 1em; width: 100%; } } /*----------------------------------------------------------------------------- MASTER STYLESHEET - bit.news.css Do not directly change the contents of bit.news.css Compress the below code before moving to bit.news.css -----------------------------------------------------------------------------*/ /*------------------------------------ AREA FRAMEWORKS ------------------------------------*/ .container.cd-news { max-width: 1064px; } main.cd-news { width: 1024px; } /*------------------------------------ NEWS STORY STYLES ------------------------------------*/ h1#news-title { font-size: 2.35em; font-weight: 500; margin: 0; } h1#news-title span { color: var(--color); } h3#news-byline { font-size: 1em; font-weight: 600; line-height: 1.6; } #news-story { } #news-story img { max-width: 100%; width: 100%; } #news-story p:first-of-type { font-weight: 600; } #news-story p { line-height: 2; margin: 1em 0; text-align: justify; } #news-story blockquote { border-left: 2px solid #ccc; color: #999; font-size: .9em; font-style: italic; margin: 2em 1.5em 0; padding: 0 1.5em; text-align: justify; } #news-story ul { line-height: 1.6; padding: 0 2em; text-align: justify; } #news-story ul li { margin: 0 2em; padding-bottom: 1em; } #news-story iframe { height: 576px; width: 1024px; } .news-footer { font-size: 0.9em; font-weight: 600; } .news-footer p { margin-bottom: 1em; } .news-footer span { margin-right: 1em; } /*------------------------------------ GAME INFOBAR STYLES ------------------------------------*/ #news-game { border: 1px solid #ccc; border-width: 1px 0; padding: 20px 0; width: 100%; } #news-game div { margin: 0 0 1em 188px; } #news-game div:first-of-type { margin: 0; } #ng-icon { float: left; margin: 0; width: 168px; } #ng-icon img { width: 100%; } #ng-name h2 { font-size: 1.4em; } /*------------------------------------ RESPONSIVE STYLES ------------------------------------*/ @media screen and (max-width:1100px) { .news-footer { display: none; } #news-game { display: none; } main.cd-news { width: calc(100% - 40px); } } /*----------------------------------------------------------------------------- MASTER STYLESHEET - bit.article.css Do not directly change the contents of bit.article.css Compress the below code before moving to bit.article.css -----------------------------------------------------------------------------*/ /*------------------------------------ AREA FRAMEWORKS ------------------------------------*/ .container.cd-article { max-width: 1064px; } main.cd-article { width: 1024px; } /*------------------------------------ CONTENT STYLES ------------------------------------*/ h1#article-title { font-size: 2.35em; font-weight: 500; margin: 0; } h1#article-title span { color: var(--color); } h2#article-blurb { font-size: 1.25em; padding-top: 8px; } h3#article-byline { font-size: 1em; font-weight: 600; line-height: 1.6; padding-top: 16px; } #article-content { } #article-content img { max-width: 100%; } #article-content p { line-height: 2; margin: 1.5em 0; text-align: justify; } #article-content figure { padding: 1em 0; } #article-content figure:first-of-type { padding-top: 0; } #article-content figcaption { padding-top: .5em; font-weight: 600; text-align: center; } .article-tags { font-size: 0.9em; font-weight: 600; } .article-tags p { margin-bottom: 1em; } .article-tags span { margin-right: 1em; } /*------------------------------------ SCORE STYLES ------------------------------------*/ .art-score { background: #222; border-radius: 1em; color: #fff; padding: 20px; } .art-verdict h1 { font-size: 2.2em; margin: .45em 0 0 0; } .art-verdict span { border-radius: 1em; color: #fff; display: inline-block; font-weight: bold; margin: .5em .5em 0 0; padding: .2em 1em; text-align: center; width: 18px; } .art-verdict span.pro { background: var(--color); } .art-verdict span.con { background: #444; } pie { background-color: var(--color); border: 4px solid var(--color); border-radius: 50%; color: #fff; float: left; height: 10em; margin: 1em 1em 1em 0; text-align: center; width: 10em; } pie span { font-size: 5em; font-family: Oswald, Arial, sans-serif; font-weight: 500; line-height: 1.9em; } .score10 { background-image: linear-gradient(126deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score15 { background-image: linear-gradient(144deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score20 { background-image: linear-gradient(162deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score25 { background-image: linear-gradient(180deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score30 { background-image: linear-gradient(198deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score35 { background-image: linear-gradient(216deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score40 { background-image: linear-gradient(234deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score45 { background-image: linear-gradient(252deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score50 { background-image: linear-gradient(270deg, transparent 50%, #444 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score55 { background-image: linear-gradient(108deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score60 { background-image: linear-gradient(126deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score65 { background-image: linear-gradient(144deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score70 { background-image: linear-gradient(162deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score75 { background-image: linear-gradient(180deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score80 { background-image: linear-gradient(198deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score85 { background-image: linear-gradient(216deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score90 { background-image: linear-gradient(234deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score95 { background-image: linear-gradient(252deg, transparent 50%, var(--color) 50%), linear-gradient(90deg, #444 50%, transparent 50%); } .score00 { background-image: none; } /*------------------------------------ SECOND OPINION STYLES ------------------------------------*/ .article-opinion { border-top: 1px solid #ccc; margin-top: 20px; padding-top: 20px; } .article-opinion h1 { font-size: 1.8em; margin: 0; } .article-opinion h1 a { color: var(--color); } .article-opinion h3 { font-size: 1em; font-weight: 600; padding-top: 8px; } /*------------------------------------ GAME INFOBAR STYLES ------------------------------------*/ #article-game { border: 1px solid #ccc; border-width: 1px 0; padding: 20px 0; width: 100%; } #article-game div { margin: 0 0 1em 188px; } #article-game div:first-of-type { margin: 0; } #ag-icon { float: left; margin: 0; width: 168px; } #ag-icon img { width: 100%; } #ag-name h2 { font-size: 1.4em; } /*------------------------------------ RESPONSIVE STYLES ------------------------------------*/ @media screen and (max-width:1100px) { .article-tags { display: none; } #article-game { display: none; } .art-verdict div:first-of-type { clear: both; } } /*----------------------------------------------------------------------------- MASTER STYLESHEET - bit.dates.css Do not directly change the contents of bit.dates.css Compress the below code before moving to bit.dates.css -----------------------------------------------------------------------------*/ /*------------------------------------ AREA FRAMEWORKS ------------------------------------*/ .container.cd-dates { max-width: 1440px; } main.cd-dates { max-width: 1400px; width: 100%; grid-template-columns: [row1] calc(50% - 10px) [row2] calc(50% - 10px) [row3]; } /*------------------------------------ CALENDAR STYLES ------------------------------------*/ main.cd-dates h1 { border-bottom: 2px solid var(--color); color: var(--color); font-size: 1.6em; line-height: 1.6; margin: 1em 0 0; grid-column-start: row1; grid-column-end: row3; } .date-group { background: #fff; border: 1px solid #eee; border-radius: .5em; display: table; overflow: hidden; } .date-group div { display: table-cell; } .date-icon { width: 120px; } .date-icon img { height: 120px; width: 120px; } .date-game { color: var(--color); padding: 0 1em; max-width: calc(465px - 2em); overflow: hidden; vertical-align: middle; } .date-game h2 { font-size: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .date-game span { color: #777; font-size: .9em; } /*------------------------------------ RESPONSIVE STYLES ------------------------------------*/ @media screen and (max-width:1100px) { .container.cd-dates { width: 100%; } main.cd-dates { width: calc(100% - 40px); } main.cd-dates h1 { margin: 1em 0; } .date-group { display: table; margin-bottom: 1em; } .date-game { width: 100%; } } /*----------------------------------------------------------------------------- MASTER STYLESHEET - bit.pagelist.css Do not directly change the contents of bit.pagelist.css Compress the below code before moving to bit.pagelist.css -----------------------------------------------------------------------------*/ /*------------------------------------ AREA FRAMEWORKS ------------------------------------*/ .container.cd-pagelist { max-width: 1430px; } main.cd-pagelist { max-width: 1390px; width: 100%; grid-template-columns: [row1] auto [row2] auto [row3] auto [row4]; } /*------------------------------------ LIST STYLES ------------------------------------*/ main.cd-pagelist h1 { border-bottom: 4px solid var(--color); color: var(--color); font-size: 1.8em; margin: 0; grid-column-start: row1; grid-column-end: row4; } main.cd-pagelist article { background: #fff; border-bottom: 1px solid #ccc; line-height: 1.6; overflow: hidden; position: relative; } main.cd-pagelist div.fbox { background-size: cover !important; background-position: center center !important; height: 200px; } main.cd-pagelist div.fdata { overflow: hidden; padding: .8em; } main.cd-pagelist h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } main.cd-pagelist h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } main.cd-pagelist h2 { font-size: 1.4em; } main.cd-pagelist h3 { border-top: 1px solid #ccc; font-size: .9em; margin-top: .8em; padding-top: .8em; } main.cd-pagelist h4 { color: #999; font-size: .8em; margin-top: 1.2em; text-transform: uppercase; } main.cd-pagelist h4 b { color: var(--color); } main.cd-pagelist article a:hover + .fdata > h2 > a { border-bottom: 1px solid var(--color); } /*------------------------------------ RESPONSIVE STYLES ------------------------------------*/ @media screen and (max-width:1100px) { .container.cd-pagelist { width: 100%; } main.cd-pagelist { width: calc(100% - 40px); } } /*----------------------------------------------------------------------------- MASTER STYLESHEET - bit.page.css Do not directly change the contents of bit.page.css Compress the below code before moving to bit.page.css -----------------------------------------------------------------------------*/ /*------------------------------------ AREA FRAMEWORKS ------------------------------------*/ .container.cd-page { max-width: 930px; } main.cd-page { max-width: 890px; width: 100%; } main.cd-page h1 { margin: 0; } main.cd-page p { line-height: 2; text-align: justify; } main.cd-page li { margin: 0 0 .5em 2em; }