Template:Intro to/styles.css

/* {{pp-template}} */
.introto__main {
	display:        flex;
	position:       relative;
	box-sizing:     border-box;
	flex-direction: row;
	flex-wrap:      wrap;
	max-width:      1100px;
	max-width:      100%;
	overflow:       hidden;
	border:         1px solid var(--border-color-base, #a2a9b1);
	margin:         auto;
}
.introto__main-title {
	font-size:       250%;
	background:      #777;
	color:           #FFF;
	text-align:      center;
	align-items:     center;
	justify-content: center;
}
.introto__lead {
	background:    #EEE;
	padding:       30px 60px;
	margin-bottom: 30px;
}
.introto__base {
	max-width:  1060px;
	min-height: 55px;
	margin:     auto;
	padding:    5px 20px;
	font-size:  1.1em;
	background: #EEE;
	border:     1px solid lightgrey;
}
.introto__tabs-main {
	height: auto;
	padding: 0.1em 0.1em 0.1em 2em;
}
.introto__tabs-main--active {
	padding-left: 1em !important;
	border-left: 1em solid #36c;
	background: var(--background-color-interactive, #eaecf0);
}
.introto__tabs-title {
	font-size:   1.5em;
	font-weight: bold;
	line-height: 1.2;
}
.introto__columns {
	display:         flex;
	flex-direction:  row;
	flex-wrap:       wrap-reverse;
	justify-content: center;
}
.introto__columns-left {
	display:        inline-block;
	flex:           0 1 0;
	position:       relative;
	vertical-align: top;
	min-width:      260px;
	padding-bottom: 50px;
}
.introto__columns-left-button {
	position:     absolute;
	bottom:       0;
	padding-left: 2em;
}
.introto__columns-right {
	display:        inline-block;
	flex:           1 1 0;
	padding:        1em;
	min-width:      250px;
	vertical-align: top;
	border-left:    1px solid var(--border-color-subtle, #c8ccd1);
}

.introto__columns-right p {
    margin-bottom: 2.0em; /* between paragraphs */
}

.introto__footer {
	box-sizing: border-box;
	max-width: 1100px;
	margin: auto;
	min-height: 15px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	font-size: 1.1em;
	background: var(--background-color-interactive, #eaecf0);
	border: 1px solid var(--border-color-subtle, #c8ccd1);
	border-top: 0;
	z-index: -5;
}

.introto__footer-side {
	flex: 1 1 200px;
	padding: 10px;
	text-align: center;
}

.introto__exercise {
	box-sizing: border-box;
	max-width: 1100px;
    margin: auto;
    padding: 4px 10px;
	border: 1px solid var(--border-color-subtle, #c8ccd1);
	border-top: 0;
}

/* no need to title reference sections in examples */
.introto__main .reflist-talk-title {
	display: none;
}

@media screen and (min-width: 1100px) {
	.introto__main {
		max-width: 1100px;
	}
}

@media screen and (min-width: 800px) {
	.introto__tabs-main {
		padding: 0.75em 1em 0.75em 2em;
	}
	.introto__columns-right{
		padding: 40px;
	}
	.introto__columns-left {
		padding-bottom: 80px;
	}
	.introto__columns-left-button{
		padding-bottom: 33px;
	}
}