Template:Intro to/styles.css

/* */ .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; } }