Template:Card/styles.css

/* For templates:
   Card, CardSingle */

/* Tabber container */
.cardcontainer {
	width: 80%;
	margin: 3px auto 7px; }

/* Container for hero cards */
.herocardcontainer {
	width: calc(100% - 230px);
	margin: 3px 0 7px; }

/* Tab content - a table */
.cardcontent {
	border-collapse: collapse;
	width: 100%;
	border: 3px solid #3FB9BE;
	border-top: none;
	vertical-align: middle;
    background: #154352; }

/* Cells padding */
.cardcontent td {
	padding: 5px 15px; }

/* Image cell */
.cardimage {
	width: 150px;
	height: 295px;
	background: #06212A; }

/* Title cell */
.cardtitle {
	height: 25px;
	font-size: 20px;
	font-family: 'MuseoSans500';
	font-weight: bold;
	text-transform: uppercase;
	color: #FBFAD9;
	background: #3FB9BE; }

/* Challenge header */
.cardhead {
	background:#1A7D93;
	font-size: 16px; }

/* Challenge cell */
.cardchallenge {
	background:#0D5467; }

.cardhead, .cardchallenge {
	height: 30px; }

/* Lore cell */
.cardlore {
	font-style: italic; }

/* Card gallery for hero subpages */
.cardgallery {
    float: right;
    width: 200px; }
.cardgallery img {
    width: 180px;
    height: auto;
    margin: 0 auto 10px; }

/* Changes for smaller screens */
@media only screen and (max-width: 1100px) { 
	.cardcontainer { /* Tabber container */
		width: 90%; }
}

@media only screen and (max-width: 500px) { 
	.cardcontainer, .herocardcontainer { /* Tabber and hero card containers */
		width: 100%; }
	.cardtitle, .cardhead, .cardchallenge, .cardlore { /* Cells padding */
		padding: 5px 10px !important; }
	.cardhead {
		font-size: inherit; }
	.cardgallery { /* Card gallery for hero subpages */
        float: none;
        width: 100%;
        margin: 0 auto 10px;
        text-align: center; }
    .cardgallery img {
        width: 120px;
        margin: 0 10px; }
}
@media only screen and (max-width: 480px) { 
    .cardgallery img {
        width: 100px; }
}
@media only screen and (max-width: 380px) { 
    .cardgallery img {
        width: 95px; }
}

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