/*! * @project The Codex Mythica * * @copyright Copyright 2017-2018 Eric Woodward * @license CC0 Public Domain License v1.0 * http://creativecommons.org/publicdomain/zero/1.0/ * */ @font-face { font-family: 'liberation_serif'; src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.eot'); src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.woff') format('woff'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.ttf') format('truetype'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Regular-webfont.svg#liberation_serif') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'liberation_serif'; src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.eot'); src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.woff') format('woff'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.ttf') format('truetype'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Italic-webfont.svg#liberation_serif') format('svg'); font-weight: 400; font-style: italic; } @font-face { font-family: 'liberation_serif'; src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.eot'); src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.woff') format('woff'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.ttf') format('truetype'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-Bold-webfont.svg#liberation_serif') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'liberation_serif'; src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-BoldItalic-webfont.eot'); src: url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-BoldItalic-webfont.woff') format('woff'), url('https://mythicwarsgame.com/fonts/ls/LiberationSerif-BoldItalic-webfont.ttf') format('truetype'), url('https://mythicwarsgame.com/fonts/LiberationSerif-BoldItalic-webfont.svg#liberation_serif') format('svg'); font-weight: 600; font-style: italic; } @font-face { font-family: 'marcellus_sc'; src: url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.eot'); src: url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.eot?#iefix') format('embedded-opentype'), url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.woff') format('woff'), url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.ttf') format('truetype'), url('https://mythicwarsgame.com/fonts/msc/MarcellusSC.svg#marcellus_sc') format('svg'); font-weight: 400; font-style: normal; } /**************************************************************************** * Palette settings (http://paletton.com) ****************************************************************************/ /* Palette URL: http://paletton.com/#uid=11J0u0kenvS54RW9DHii+r8ntmN */ /* Generated by Paletton.com © 2002-2014 */ /* As hex codes */ .color-primary-0 { color: #FEF78C } /* Main Primary color - bright golden yellow */ .color-primary-1 { color: #FFFDD7 } /* practically white */ .color-primary-2 { color: #FFFAB2 } .color-primary-3 { color: #D8D058 } .color-primary-4 { color: #B6AD30 } /* golden greeish */ /* As RGBa codes */ .rgba-primary-0 { color: rgba(254,247,140,1) } /* Main Primary color */ .rgba-primary-1 { color: rgba(255,253,215,1) } .rgba-primary-2 { color: rgba(255,250,178,1) } .rgba-primary-3 { color: rgba(216,208, 88,1) } .rgba-primary-4 { color: rgba(182,173, 48,1) } /**************************************************************************** * Site styles ****************************************************************************/ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background-color: #281c1c; background: url('/images/tile-bg.jpg'); color: #FFFDD7; font-family: 'liberation_serif', serif; font-size: 12pt; line-height: 1.2em; } a { border-bottom: 1px solid #91803a; color: #fef78c; font-weight: bold; text-decoration: none; -webkit-transition: .3s background-color, .3s color; transition: .3s background-color, .3s color; } a:hover { border: none; background-color: #91803a; color: #fffdd7; } h1 { font-family: 'marcellus_sc', serif; text-align: center; } h2 { text-align: center; } p { text-align: justify; } .card { font-size: 1em; margin: 0 auto 2em; max-width: 50em; padding: 1em; text-align: center; } .card-ability > dd { display: inline; margin-left: 0; } .card-ability > dt { display: inline; font-weight: bold; margin-left: 0; } .card-ability > dt::after { content: " \2014 "; } .card-element { max-width: 1.1em; vertical-align: middle; } .card-data { margin: 1em auto; max-width: 30em; width: 100%; } .card-image { border-radius: .7em; margin: 1em auto; max-width: 14em; vertical-align: middle; width: 100%; } .card-info { display: block; } .card-info > img { } .card-pantheon { max-width: 1.1em; vertical-align: middle; } .card-score { max-width: 1.1em; vertical-align: middle; } .dataBox { text-align: left; } .dataBox > dd { float: left; margin-left: .5em; } .dataBox > dt { clear: left; float: left; font-weight: bold; } .dataBox > dt:after { content: ":"; } .footer { border-top: 1px solid #FFFDD7; clear: both; margin: 1em auto; padding: 0 1em; width: 100% } .footer-inner { font-size: .8em; width: 100% } .footer-logo-excal-link { float: right; margin: 1em 0 1em 1em; } .footer-logo-excal-img { height: auto; max-width: 20em; } .footer-nav:before { content:"Pages: "; } .footer-nav { clear: both; display: none; border-top: 1px solid #B6AD30; list-style: none; margin-top: 1em; padding: .5em; } .footer-nav li { display: inline; } .footer-nav li:before { content:" | "; } .footer-nav li:first-child:before { content:""; } .intro { font-size: larger; } .linkButton { color: #fef78c; display: block; font-family: 'Verdana', sans-serif; margin: auto; padding: .5em; text-align: center; text-decoration: none; -webkit-transition: .3s background-color, .3s color; transition: .3s background-color, .3s color; } .linkButton:hover { background-color: #91803a; color: #FFFDD7; } .linkButton-navMenu { width: 4em; } .linkButton-pageMenu { float: right; } .main { margin: 0 auto; max-width: 50em; padding: .5em; text-align: center; width: 100%; } .main-inner { font-size: 1.2em; width: 100%; } .mwCardLink { display: inline-block; margin: 1em 1em; max-width: 14em; padding: .3em .3em .1em; } .mwCardThumb { border-radius: 0.6em; } .navMenu { } .navMenu ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } .navMenu ul li { display: inline-block; margin: auto; width: 100%; } .navMenu ul li h1 { font-size: 2em; letter-spacing: .1em; margin: 0; padding: .5em; line-height: 1em; } .navMenu-logoBtn { border: none; } .navMenu-logoImg { height: auto; max-width: 18em; vertical-align: middle; width: auto; } .navMenu-search-fieldset { border: none; margin-top: .9em; padding: 0; } .navMenu-title { clear: left; } .preview { border: 1px solid #ccc; font-size: .9em; margin: 0 auto 2em; max-width: 50em; padding: 1em; text-align: left; } .preview p { margin: 0 auto; text-align: justify; } .preview-element { max-width: 1em; vertical-align: middle; } .preview-info { align-items: center; display: grid; grid-template-columns: 1fr 3fr; } .preview-info > img { border-radius: .7em; margin: .5em; max-width: 8em; vertical-align: middle; } .preview-pantheon { max-width: 1em; vertical-align: middle; } .preview-score { max-width: 1em; vertical-align: middle; } .searchForm { border: 1px solid #666; display: block; margin: 2em auto 1em; max-width: 44em; text-align: left; width: 100%; } .searchForm legend { color: #FFFDD7; } .searchForm ul { list-style-type: none; padding: 0; } .searchForm-controlSet { border: none; } .searchForm-controlSet > legend { position: absolute; top: -9999px; left: -999px; } .searchForm-controlSet > ul { margin: 1em; text-align: center; } .searchForm-controlSet > ul > li { align-items: center; display: inline; } .searchForm-controlSet > ul > li:not(:last-child) { margin-bottom: 1em; } .searchForm-filterSet { border: none; } .searchForm-filterSet > legend { font-size: 1.5em; } .searchForm-filterSet > ul { margin: 1em; } .searchForm-filterSet > ul > li { align-items: center; display: flex; flex-wrap: wrap; } .searchForm-filterSet > ul > li:not(:last-child) { margin-bottom: 1em; } .searchForm-filterSet > ul > li > label { flex: 1 0 8em; max-width: 8em; padding-right: 1em; text-align: right; } .searchForm-filterSet > ul li ul li { align-items: center; display: inline-block; flex: 1 0 8em; flex-wrap: wrap; justify-content: space-between; list-style-type: none; margin: 0 .8em 0 0; padding: 0; } .searchForm-filterSet > ul > li > label + * { flex: 1 0 8em; } .searchForm-searchSet { border: none; margin: 1em 0; } .searchForm-searchSet > legend { font-size: 1.5em; } .searchForm-searchSet > ul { margin: 1em; } .searchForm-searchSet > ul > li { align-items: center; display: flex; flex-wrap: wrap; } .searchForm-searchSet > ul > li:not(:last-child) { margin-bottom: 1em; } .searchForm-searchSet > ul > li > label { flex: 1 0 8em; max-width: 8em; padding-right: 1em; text-align: right; } .searchForm-searchSet > ul li ul li { align-items: center; display: inline-block; flex-wrap: wrap; justify-content: space-between; list-style-type: none; margin: 0 .8em 0 0; padding: 0; flex: 1 0 8em; } .searchForm-searchSet > ul li ul li input[type="checkbox"] { vertical-align: bottom; } .searchForm-searchSet > ul > li > label + * { flex: 1 0 8em; } .searchForm-element { max-width: 1.5em; vertical-align: top; } .searchForm-filterNotes { font-style: italic; overflow-y: hidden; max-height: 0; /* hidden unless JS is active */ text-align: center; transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .searchForm-pantheon { max-width: 1.5em; vertical-align: top; } .setLink { font-style: italic; } .topLink { display: block; margin: 1em auto; text-align: center; white-space: nowrap; width: 6em; } /**************************************************************************** * JS classes ****************************************************************************/ .js .js-checkToggle { cursor: pointer; } .js .js-searchForm-filterNotes { max-height: 10em; /* just in case */ } .js.js-hasFontsLoaded body { font-size: 14pt; } /* * Didn't use this, saving it unless I decie to use it later. .js .js-ulToggle { cursor: pointer; } .js .js-ulToggle::after { content: ' \25BC'; font-size: .5em; vertical-align: text-top; } .js .js-ulToggle-hidden ul { display: none; } .js .js-ulToggle-hidden .js-ulToggle::after { content: ' \25B2'; } */ /**************************************************************************** * Responsive Media Queries ****************************************************************************/ @media screen and (min-width: 30em) { .dataBox { display: grid; grid-template-columns: repeat(auto-fill, minmax(5em, 1fr)); } .dataBox > dd { float: none; grid-column: auto / span 3; margin: 0; text-align: left; } .dataBox > dt { float: none; font-weight: bold; margin: 0 .5em; text-align: right; } } @media screen and (min-width: 33em) { .dataBox { grid-template-columns: repeat(auto-fill, minmax(6em, 1fr)) ; } } @media screen and (min-width: 37em) { .dataBox { grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)) ; } } @media screen and (min-width: 40em) { .navMenu ul li { display: block; width: auto; } .navMenu ul li h1 { white-space: nowrap; } .navMenu-logoBtn { float: left; } .navMenu-search { float: right; } } @media screen and (min-width: 58em) { .card-data { grid-column: auto / span 2; max-width: 35em; width: auto; } .card-image { display: block; width: auto; } .card-info { align-items: center; display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)) ; } .dataBox { grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)) ; } } @media screen and (min-width: 67em) { .navMenu-title { clear: none; } } /**************************************************************************** * Helper classes ****************************************************************************/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .pullRight{ float: right; } code, kbd, pre, samp { font-size: .8em; } /**************************************************************************** * Print styles ****************************************************************************/ @media print { * { text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } select { background: #FFFDD7 !important; } .navbar { display: none; } .table td, .table th { background-color: #FFFDD7 !important; } .btn > .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px solid #000; } .table { border-collapse: collapse !important; } .table-bordered th, .table-bordered td { border: 1px solid #ddd !important; } }