Πρότυπο:Intro to/styles.css

Από τη Βικιπαίδεια, την ελεύθερη εγκυκλοπαίδεια
.introto__main {
	display:        flex;
	position:       relative;
	box-sizing:     border-box;
	box-shadow:     0px 0px 5px #aaa;
    border-radius:  7px;
	flex-direction: row;
	flex-wrap:      wrap;
	max-width:      1100px;
	max-width:      100%;
	overflow:       hidden;
	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;
}
.introto__tabs-main {
	height: auto;
}
.introto__tabs-title {
	font-size:   1.2em;
	font-weight: bold;
}
.introto__columns {
	display:         flex;
	flex-direction:  row;
	flex-wrap:       wrap-reverse;
	justify-content: center;
}
.introto__columns-left {
	display:        inline-block;
	flex:           0 1 1;
	position:       relative;
	vertical-align: top;
	min-width:      260px;
}
.introto__columns-left-button {
	position:     absolute;
	bottom:       0;
	padding: 2em;
}
.introto__columns-right {
	display:        inline-block;
	flex:           1 1 0;
	padding:        1em;
	min-width:      150px;
	vertical-align: top;
	border-left:    1px solid #c9c9c9;
}

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

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

@media screen and (max-width: 800px) {
    .introto__tabs-main {
		border-radius:3px;
	}
}