/* RESET */ * { margin: 0; padding: 0; border: 0; } /* BASIC */ body { font-size: 16px; font-family: "arial"; background-color: #f3f3f3; color: #2e2e2e; } span { line-height: 1.4em; } h1 { font-size: 1.6em; color: #f6f6f6; line-height: 2em; margin: 0em 0.3em; } h2 { font-size: 1.3em; margin: 0.1em 0.4em; padding-top: 0.6em; } h3 { font-size: 1.3em; margin: 0.1em 0.4em; } h4 { font-size: 1.2em; margin: 0.1em 0.4em; } h5 { font-size: 1.1em; margin: 0.1em 0.4em; } h6 { font-size: 1.1em; margin: 0.1em 0.4em; } p { margin: 1.5em 0.75em; line-height: 1.4em; } .page-title { color: #f6f6f6; line-height: 2em; margin: 0em 0.4em; } a { color: #b4000f; } a:visited { color: #b4000f; } a:active { text-decoration: none; } a:hover { color: rgb(0, 0, 0); text-decoration: none; background-color: rgb(241, 241, 241); -webkit-transition: background 0.8s; transition: background 0.8s; border-radius: 0.2em; } section, nav { display: block; } /* LAYOUT */ .cls-ad { min-height: 280px; margin: 0em 0.2em; } .img-cls { min-height: 217; } .social { position: fixed; top: 48%; transform: translateY(-40%); z-index: 9999; left: 8px; } .nav-s { background-image: url(social/spritesheet2.png); background-repeat: no-repeat; display: none; float: right; } .nav-s a { padding: 20px 10px 18px 10px; height: 32px; display: block; } .nav-s a:hover { background-color: #68000900; } .nav-s-smf { width: 20px; height: 40px; background-position: -0px 20px; padding: 4px; } .nav-s-smr { width: 20px; height: 40px; background-position: -20px 20px; padding: 4px; margin-left: 18px; } .nav-s-smt { width: 20px; height: 40px; background-position: -40px 20px; padding: 4px; margin-left: 18px; } .tabs-inner .widget ul { margin-right: 0px; margin-left: 0px; } .sprite { background-image: url(social/social_sprite.png); background-repeat: no-repeat; display: block; } #sprite li { margin: 0px; list-style: none; position: absolute; top: 0; } #sprite a:hover { background-color: rgba(128, 128, 128, 0.548); } #sprite a { height: 32px; display: block; margin-bottom: 8px; } .sprite-1 { width: 32px; height: 38px; background-position: -6px -6px; } .sprite-2 { width: 32px; height: 38px; background-position: -6px -50px; } .sprite-3 { width: 32px; height: 38px; background-position: -6px -94px; } .sprite-4 { width: 32px; height: 38px; background-position: -6px -138px; } .sprite-1 a:hover { background-position: -5px -6px; } .side-img { display: block; margin: 0 auto; border-radius: 6px; max-width: 100%; height: 100%; } .title-bar { position: relative; background: #383236; box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 30%); } .page-title-container { padding-top: 50px; min-height: 0px; } .content-bg { padding-top: 2em; padding-bottom: 2em; background-position: center bottom; background-repeat: no-repeat; background-size: contain; } .dynasties { background: #fcfcfc; color: #000000; font-size: 1.1em; border: 1px solid #f1f1f1; margin-bottom: 10px; box-shadow: 0px 2px 10px 2px #a3a3a357; } .dynasties a:link { display: block; padding: 0.2em; margin: 0.5em 0.75em; } .dynasties img { margin: 10px auto 0px 10px; display: block; border-radius: 3px; max-width: 100%; height: auto; } .dynasties h3 { font-size: 1.2em; margin: 0.4em 0.4em; text-align: center; } .em-content { background: #fcfcfc; color: #000000; font-size: 1.1em; border: 1px solid #d1d0d0; margin-bottom: 10px; box-shadow: 0px 2px 10px 2px #a3a3a357; } .em-content img { display: block; margin: 0.5em 0.5em; border-radius: 3px; max-width: 100%; object-fit: contain; } .em-content h2 { margin-bottom: 1em; } .em-content h3 { display: inline; color: #000; text-decoration: underline; } .em-content h3:hover { color: #b4000f; } .em-content-page { background: #fcfcfc; color: #000000; font-size: 1.1em; border: 1px solid #d1d0d0; margin-bottom: 10px; box-shadow: 0px 2px 10px 2px #a3a3a357; } .em-content-page h4 { text-align: center; display: block; padding-bottom: 8px; } .em-content-page h3 { margin-top: 1em; } .em-content-page b { margin-top: 1em; text-align: center; display: block; } .em-content-page img { display: block; margin: 1.5em auto; border-radius: 3px; max-width: 100%; object-fit: contain; } .war-i { border-radius: 3px; margin: 1em 4px 1.5em 4px; border: 1px solid #960c17; } .war-i h4 { margin: 0.5em; text-align: center; color: #960c17; } .war-d { border-radius: 3px; margin: 1em 4px 1.5em 4px; border: 1px solid #294f7a; } .war-d h4 { margin: 0.5em; text-align: center; color: #294f7a; } .right-menu { background-color: none; } .side-menu { margin-bottom: 10px; padding-bottom: 10px; background: #fcfcfc; border: 1px solid #d1d0d0; box-shadow: 0px 2px 10px 2px #a3a3a357; min-width: 225px; max-width: 225px; min-height: 253px; } .side-menu b { color: #000; text-decoration: underline; display: block; font-size: 1.2em; text-align: center; margin: 8px 0px 8px 0px; } .side-menu b:hover { color: #b4000f; background-color: rgb(230, 230, 230); -webkit-transition: background 0.8s; transition: background 0.8s; border-radius: 0.2em; } .side-menu img { display: block; margin: auto; border-radius: 3px; } .side-menu2 { margin-bottom: 10px; padding-top: 6px; background: #fcfcfc; border: 1px solid #d1d0d0; box-shadow: 0px 2px 10px 2px #a3a3a357; min-width: 225px; max-width: 225px; } .side-menu2 h2 { font-size: 1.3em; margin: 0em 0em; text-align: center; padding: 0px 0px 4px 0px; } .next { text-align: center; font-size: 1em; line-height: 2em; } .next p { display: flex; justify-content: space-between; margin: 8px 0px 0px 0px; } .next a { color: #b4000f; } .footer { background: #383236; color: #fcfcfc; font-size: 0.9em; } .footer a { color: #fcfcfc; } .footer a:visited { color: #fcfcfc; } .footer a:hover { background-color: #383236; } .footer p { display: flex; justify-content: space-between; } /* FIXED NAV */ .fixed-nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; height: 50px; background-color: #960c17; border-bottom: 1px solid #383236; box-shadow: 0px 5px 5px 0px rgb(56 50 54 / 50%); } .fixed-nav-bar li { font-size: 0.9em; list-style-type: none; } .fixed-nav-bar a { line-height: 50px; } .fixed-nav-s-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; height: 50px; background-color: #294f7a; border-bottom: 1px solid #222222; box-shadow: 0px 5px 5px 0px rgb(61 61 62 / 60%); } .fixed-nav-s-bar li { font-size: 0.9em; } .fixed-nav-s-bar a { line-height: 50px; } a.burger { text-decoration: none; } a.burger:hover { background-color: #960c1700; text-decoration: none; } i.menu { background-image: url(burger.svg); background-repeat: no-repeat; background-size: contain; width: 24px; height: 24px; display: block; color: #fff; } .menu { max-width: max-content; margin: 0 auto; } .menu-items { text-align: center; display: inline-block; } .menu-items li { position: relative; } .menu-items li .dropdown { text-align: left; position: absolute; left: 0px; top: 100%; width: auto; background: #383236; display: none; box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2); } .menu-items li:hover .dropdown { display: block; padding: 2px 0; } .menu-items li .dropdown li { display: block; } .menu-items li .dropdown li a { display: block; padding: 1em 2em; line-height: 1em; border-radius: 0.2rem; white-space: nowrap; border-bottom: solid 1px rgb(65 64 64); margin: 0px 2% 0px 2%; } .menu-items li { display: inline-block; margin-right: 2px; margin-left: 2px; } .menu-items li a:hover { color: rgb(0, 0, 0); -webkit-transition: background 0.8s; transition: background 0.8s; border-radius: 0.3em; } .menu-items a, .menu-items a:visited { color: #fff; padding: 2px 8px; border-radius: 0.2rem; text-decoration: none; } .menu-items a:hover, .menu-items a:target { color: #ebebeb; background-color: #ccc; } .show, .hide { display: none; background-color: transparent; background-repeat: no-repeat; background-position: center right; } /* S E A R C H */ input { outline: none; } input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; font-family: inherit; font-size: 80%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } input[type="search"] { background: #ffffff00 url(social/glassw2.png) no-repeat 9px center; margin: 6px 42px 0px 0px; border: solid 2px rgba(255, 255, 255, 0); padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } input[type="search"]:focus { width: 130px; background-color: #fcfcfc; border-color: #999999; } input:-moz-placeholder { color: #999; } input::-webkit-input-placeholder { color: rgb(141, 0, 0); } #demo-2 input[type="search"] { float: right; width: 15px; padding-left: 10px; color: transparent; cursor: pointer; } #demo-2 input[type="search"]:hover { background-color: #fcfcfc; } #demo-2 input[type="search"]:focus { width: 130px; padding-left: 32px; color: #000; background-color: #e9e9e9; cursor: auto; } #demo-2 input:-moz-placeholder { color: transparent; } #demo-2 input::-webkit-input-placeholder { color: transparent; } #demo-2 input[type="search"] { float: right; width: 15px; padding-left: 10px; color: transparent; cursor: pointer; } #demo-2 input[type="search"]:hover { background-color: rgba(255, 255, 255, 0); } #demo-2 input[type="search"]:focus { width: 130px; padding-left: 32px; color: rgb(0, 0, 0); background-color: #e7e7e7; cursor: auto; } #demo-2 input:-moz-placeholder { color: transparent; } #demo-2 input::-webkit-input-placeholder { color: transparent; } .pad { padding: 10px; } .em-search { background: #fcfcfc; color: #000000; font-size: 1.1em; border: 1px solid #d1d0d0; margin-bottom: 10px; box-shadow: 0px 2px 10px 2px #a3a3a357; } .em-search a:hover { color: #960c17; text-decoration: none; background-color: rgb(230, 230, 230); border-radius: 0.1em; } .em-search h3 { padding-top: 0.6em; } .em-search h4 { padding-top: 0.6em; } /* B R E A K P O I N T S */ @media only screen and (min-width: 1201px) { body { background-image: url(6.webp); background-attachment: fixed; } i.menu { background-image: url(burger.svg); display: none; } } @media only screen and (max-width: 1200px) { .em-content-page img { padding: 1em 0.75em; margin: auto; width: auto; height: auto; } .page-title-container { padding-top: 100px; } .fixed-nav-bar { height: 100px; } .fixed-nav-s-bar { height: 100px; } body { background-image: none !important; } .description { padding-top: 100px; } .menu-items li .dropdown { display: none; } .menu-items li:hover .dropdown { display: none; } .menu-items li .dropdown li { display: none; } .menu-items li .dropdown li a { display: none; } .adslot_1 { display: none; } .right-menu { display: none; } .side-menu { display: none; } .side-menu2 { display: none; } .footer { font-size: 0.8em; } input[type="search"] { margin: 6px 0px 0px 0px; } } @media only screen and (max-width: 990px) { .cls-ad { min-height: 150px; } .em-content h3 { font-size: 1.3em; text-align: center; display: block; margin-left: 25%; margin-right: 25%; } .em-content h3:hover { color: rgb(0, 0, 0); text-decoration: none; background-color: rgb(230, 230, 230); border-radius: 0.1em; } .em-content img { margin: auto; width: auto; margin-bottom: 1em; } @media only screen and (max-width: 800px) { body { background-image: none; } .nav-s { display: block; } .page-title-container { padding-top: 50px; } .page-title-s-container { padding-top: 50px; } .fixed-nav-bar { height: 50px; } .fixed-nav-s-bar { height: 50px; } .em-content { font-size: 1em; } .dynasties { font-size: 1em; } .em-content-page { font-size: 1em; } h1 { font-size: 1.4em; margin: 0em 0em; } h2 { font-size: 1.3em; } h3 { font-size: 1.2em; } .menu { position: relative; width: 100%; } .menu-items { display: none; width: 100%; margin-top: 9px; background-color: #666; } .menu-items li { display: block; } .menu-items a { display: block; border-bottom: solid 1px rgb(132 132 132); margin: 0px 2px 0px 2px; } .show, .hide { position: absolute; top: 1em; left: 0; } .show { display: inline-block; } .hide { display: none; } #menu:target .show { display: none; } #menu:target .hide, #menu:target .menu-items { display: inline-block; } .menu { width: 100%; max-width: 960px; } .description { padding-top: 50px; } .social { display: none; } } }