Template:HeroSkin/styles.css

/* For Template:HeroSkin */

/* Container */
.skincontainer {
	margin: 0 auto 15px;
	width: 80%;
	background: #154352;
	border: 3px solid #3FB9BE;
	overflow: hidden; }

/* Tables */
.skinblock {
	border-collapse: collapse;
	width: calc(100% - 260px); }
.skinrow {
	padding: 5px 15px; }
.skintitle {
	font-size: 20px;
	font-family: 'MuseoSans500';
	font-weight: bold;
	text-transform: uppercase;
	color: #FBFAD9;
	background: #3FB9BE; }
.skinlore {
	height: auto; }

/* Image */
.skinimage {
	float: right;
	padding: 10px;
	background: linear-gradient(#F0F0F0, #DFE3E3); }
.skinimage:hover { /* Changes to dark on hover (won't work on mobile) */
	background: linear-gradient(#093340,#06191f); }

/* Small screens */
@media only screen and (max-width:850px) {
	.skincontainer {
		width: 97%; }
	.skinblock {
		width: 100% !important; }
	.skinflip { /* Flips title/type with image */
		display: flex;
		flex-direction: column-reverse; }
	.skinlore {
		height: unset; }
	.skinimage {
		float: none;
		width: 100%;
		margin: 0;
		text-align: center; }
}

/* [[Category:Styling pages]] */