@charset "utf-8"; /* ************************************************** */ /* ************************************************** */ /* REM (root em) scales from the element, offering predictability, whereas EM scales from its direct parent Use rem for: Global Typography: Base font sizes, headings, paragraphs. Consistent Spacing: Margins, padding for overall layout. Predictable Scaling: Easier to manage global changes by altering just the root font size. Use em for: Component-Specific Scaling: Sizing elements like icons or padding inside a button relative to that button's font size. Modular Design: When a component's internal spacing needs to adapt to its own font size. */ /* ******************* PLINTH SPEECH BUBBLE STYLES ******************** */ /* ******************* PLINTH SPEECH BUBBLE STYLES ******************** */ /* Style 1 */ .plinthStyle1{ background: transparent url('../img/bigenv_red.png') no-repeat 3rem 0px; } .plinthStyle1Preview{ background: transparent url('../img/bigenv_red.png') no-repeat 3rem 0px; } /* Style 2 */ .plinthStyle2{ background: transparent url('../img/bigenv_blue.png') no-repeat 3rem 0px; } .plinthStyle2Preview{ background: transparent url('../img/bigenv_blue.png') no-repeat 3rem 0px; } /* Style 3 */ .plinthStyle3{ background: transparent url('../img/bigenv_green.png') no-repeat 3rem 0px; } .plinthStyle3Preview{ background: transparent url('../img/bigenv_green.png') no-repeat 3rem 0px; } /* Style 4 */ .plinthStyle4{ background: transparent url('../img/bigenv_burgundy.png') no-repeat 3rem 0px; } .plinthStyle4Preview{ background: transparent url('../img/bigenv_burgundy.png') no-repeat 3rem 0px; } /* Style 5 */ .plinthStyle5{ background: transparent url('../img/bigenv_beige.png') no-repeat 3rem 0px; } .plinthStyle5Preview{ background: transparent url('../img/bigenv_beige.png') no-repeat 3rem 0px; } /* Style 6 */ .plinthStyle6{ background: transparent url('../img/bigenv_gold.png') no-repeat 3rem 0px; } .plinthStyle6Preview{ background: transparent url('../img/bigenv_gold.png') no-repeat 3rem 0px; } /* Style 7 */ .plinthStyle7{ background: transparent url('../img/bigenv_pink.png') no-repeat 3rem 0px; } .plinthStyle7Preview{ background: transparent url('../img/bigenv_pink.png') no-repeat 3rem 0px; } /* Style 8 */ .plinthStyle8{ background: transparent url('../img/bigenv_white.png') no-repeat 3rem 0px; } .plinthStyle8Preview{ background: transparent url('../img/bigenv_white.png') no-repeat 3rem 0px; } /* Style 9 */ .plinthStyle9{ background: transparent url('../img/bigenv_black.png') no-repeat 3rem 0px; } .plinthStyle9Preview{ background: transparent url('../img/bigenv_black.png') no-repeat 3rem 0px; } /* Style 10 */ .plinthStyle10{ background: transparent url('../img/bigenv_lime.png') no-repeat 3rem 0px; } .plinthStyle10Preview{ background: transparent url('../img/bigenv_lime.png') no-repeat 3rem 0px; } /* Style 10 */ .plinthStyle11{ background: transparent url('../img/bigenv_teal.png') no-repeat 3rem 0px; } .plinthStyle11Preview{ background: transparent url('../img/bigenv_teal.png') no-repeat 3rem 0px; } .plinthStyle10, .plinthStyle9, .plinthStyle8, .plinthStyle7, .plinthStyle6, .plinthStyle5, .plinthStyle4, .plinthStyle3, .plinthStyle2, .plinthStyle1, .plinthStyle11 { background-position: center; background-repeat: no-repeat; background-size: cover; } .plinthStyle10Preview, .plinthStyle9Preview, .plinthStyle8Preview, .plinthStyle7Preview, .plinthStyle6Preview, .plinthStyle5Preview, .plinthStyle4Preview, .plinthStyle3Preview, .plinthStyle2Preview, .plinthStyle1Preview, .plinthStyle11Preview { background-position: center; background-repeat: no-repeat; background-size: cover; } .plinthStyle1, .plinthStyle2, .plinthStyle3, .plinthStyle4, .plinthStyle5, .plinthStyle6, .plinthStyle7, .plinthStyle8, .plinthStyle9, .plinthStyle10, .plinthStyle11 { background-size: 5rem; background-origin: content-box; background-position: right bottom; } /* ******************* PLINTH SPEECH BUBBLE STYLES ******************** */ /* ******************* PLINTH SPEECH BUBBLE STYLES ******************** */