MediaWiki:Common.css

/* For elements which only display in the mobile view */ .mobileonly { display: none; }

/* this CSS governs the responsive 3 column main page layout */ .fpmain { width: 100%; overflow: hidden; z-index: 1; }

.fpbanner { border: 1px solid #876942; margin: 0 5px 5px 5px; padding: 5px; min-height: 80px; }

.fpbannertable { display: table; border: none; background: transparent; width: 100%; min-height: 75px; margin: 0; padding: 5px; }

.fpbannercell { display: table-cell; text-align: center; vertical-align: middle; }

.fpbannerblock { border: none; font-weight: bold; text-shadow: 0 0 8px rgba(255, 255, 255, 0.75); font-size: 132%; width: 100%; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpmidsections { float: left; width: 100%; overflow: hidden; }

.fpbox { margin: 5px; margin-bottom: 10px; padding: 15px; overflow: auto; border: none; border-radius: 5px; background: rgba(255,255,255,0.2); box-shadow: inset 0px 0px 4px rgba(255,255,255,0.6),0px 0px 3px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,0.35); }

.fpbox .mainheading, .fpbox-dark .mainheading, .fpbox-intro .mainheading{ border: none; font-size: 28px; font-weight: bold; margin: 0 0 10px 0; padding: 0 0 5px 0; overflow: auto; font-family: "Vollkorn"; color: #000; }

.fpbox-dark{ border: solid 5px transparent; box-shadow: none; border-radius: 5px; background: #171717; color: #ffffff; text-shadow: 1px 1px 0px #000000; padding: 20px; margin: 6px; margin-bottom: 25px; text-align: center;

border-image-outset: 5px; border-image-repeat: stretch; border-image-slice: 14 14 14 14 fill; border-image-source: url("https://www.madottergames.com/forums/styles/villagersandheroes/images/squareborder.png"); border-image-width: 14px 14px 14px 14px; border-image-repeat: round;

text-shadow: 0px 0px 1px #000,0px 0px 2px #000,0px 0px 4px #000; }

.fpbox-dark .mainheading{ color: #ffffff; margin-bottom: 0px; text-transform: uppercase; font-size: 22px; letter-spacing: 2px; }

.fpbox-intro{ padding: 0px 5px 15px 5px; text-align: center; }

.fpbox-intro .mainheading{ border: solid rgba(0,0,0,0); border-bottom-width: 28px; border-image: url(https://static.wikia.nocookie.net/villagersandheroes_gamepedia_en/images/1/10/Separator.png/revision/latest) 0 0 360 0 stretch; margin-bottom: 5px; padding-bottom: 10px; text-align: center; }

.fpbox .heading { background: transparent; font-weight: bold; text-align: center; color: #000; overflow: auto; font-family: "Vollkorn"; font-size: 24px; border: solid rgba(0,0,0,0); border-bottom-width: 28px; border-image: url("https://static.wikia.nocookie.net/villagersandheroes_gamepedia_en/images/1/10/Separator.png/revision/latest") 0 0 360 0 stretch; margin-bottom: 15px; }

.columns-auto{ column-count: 3; }

.columns-auto p:first-child{ margin-top: 0; }

@media only screen and (max-width: 1200px) { .columns-auto{ column-count: 2; } }

@media only screen and (max-width: 700px) { .columns-auto{ column-count: 1; } }

.fpmain .columns .leftcol { width: 100%; margin: 0; padding: 0; }

.fpmain .columns .rightcol { width: 100%; margin: 0; padding: 0; }

.fpsection1, .fpsection2, .fpsection3, .fpsection4 { float: left; clear: both; width: 100%; }

div.fp2columnonly, div.fp3columnonly { display: none; }

@media (min-width: 790px) { .fpsection1 { float: left; clear: none; width: 50%; }

.fpmidsections { clear: none; float: right; width: 50%; }

.fpsection4 { float: left; clear: none; width: 50%; }

div.fp2columnonly { display: block; } }

@media (min-width: 990px) { .fpmain .columns .leftcol { float: left; width: 50%; margin: 0; padding: 0; }

.fpmain .columns .rightcol { float: right; width: 50%; margin: 0; padding: 0; } }

@media (min-width: 1390px) { .fpmidsections { clear: none; float: right; width: 66.667%; }

.fpsection1 { clear: none; width: 33.333%; }

.fpsection2 { clear: none; width: 50%; }

.fpsection3 { clear: none; width: 50%; } .fpsection4 { clear: left; width: 33.333%; }

div.fp2columnonly { display: none; }

div.fp3columnonly { display: block; } }

.fpbox.plain { background: transparent; border: none; box-shadow: none; padding-top: 0px; }

.fpimagelist ul { list-style-type: none; list-style-image: none; }

.fpvideos { margin: 0 auto; overflow: hidden; text-align: center; }

.fpvideo { display: inline-block; margin: 0 5px; }

.mainpage-top{

} .mainpage-left{ float:left; width: 60%; } .mainpage-right{ float:right; width: 40%; }

@media only screen and (max-width: 850px) { .mainpage-left{ float:none; width: 100%; }   .mainpage-right{ float:none; width: 100%; } }

.image-fluid img{ width: 100%; height: auto; }