|
|
Line 1: |
Line 1: |
| /** | | /* Add or modify these CSS rules to fix responsive issues */ |
| * ComputerScience.wiki - Main Page Styles
| |
| * With fixed button width and single button
| |
| */
| |
|
| |
|
| /* Base container */ | | /* Ensure cards remain properly sized on small screens */ |
| .cs-container {
| | @media (max-width: 768px) { |
| max-width: 1200px;
| | /* Force single column layout for all grid sections */ |
| margin: 0 auto;
| | .mp-section-grid { |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
| | grid-template-columns: 1fr; |
| }
| | gap: 0.8em; |
| | |
| /* Header */
| |
| .cs-header {
| |
| text-align: center;
| |
| padding: 30px 20px;
| |
| margin-bottom: 30px;
| |
| border-radius: 8px;
| |
| background-color: #f9f9f9;
| |
| border: 1px solid #ddd;
| |
| }
| |
| | |
| .cs-title {
| |
| font-size: 2em;
| |
| font-weight: 700;
| |
| margin: 0;
| |
| color: #000;
| |
| }
| |
| | |
| .cs-subtitle {
| |
| font-size: 1.1em;
| |
| font-weight: normal;
| |
| margin: 10px 0 0;
| |
| color: #444;
| |
| }
| |
| | |
| /* Search */
| |
| .cs-search {
| |
| max-width: 800px;
| |
| margin: 0 auto 40px;
| |
| padding: 25px;
| |
| border-radius: 8px;
| |
| background-color: #f5f5f5;
| |
| border: 1px solid #ddd;
| |
| }
| |
| | |
| /* Search input - restore original background */
| |
| .cs-search input[type="search"],
| |
| .cs-search input[type="text"],
| |
| .cs-search .mw-searchInput,
| |
| .cs-search .cdx-text-input__input {
| |
| background-color: #ffffff !important;
| |
| border: 1px solid #ddd !important;
| |
| height: 40px !important;
| |
| padding: 5px 12px !important;
| |
| border-radius: 4px !important;
| |
| font-size: 16px !important;
| |
| color: #333 !important;
| |
| width: 100% !important;
| |
| }
| |
| | |
| /* Search button */
| |
| .cs-search input[name="go"],
| |
| .cs-search button[name="go"],
| |
| .cs-search input[type="submit"],
| |
| .cs-search button[type="submit"],
| |
| .cs-search .oo-ui-buttonElement-button {
| |
| width: 80px !important;
| |
| max-width: 80px !important;
| |
| min-width: 80px !important;
| |
| background-color: #f0f0f0 !important;
| |
| border: 1px solid #ddd !important;
| |
| height: 40px !important;
| |
| padding: 5px 8px !important;
| |
| border-radius: 4px !important;
| |
| color: #333 !important;
| |
| font-weight: 600 !important;
| |
| cursor: pointer !important;
| |
| }
| |
| | |
| /* Hide the second (fulltext) button */
| |
| .cs-search input[name="fulltext"],
| |
| .cs-search button[name="fulltext"],
| |
| .cs-search input[value="Search full text"],
| |
| .cs-search button[value="Search full text"] {
| |
| display: none !important; | |
| }
| |
| | |
| /* Grid Layout */ | |
| .cs-grid {
| |
| display: table;
| |
| width: 100%;
| |
| border-spacing: 10px;
| |
| border-collapse: separate;
| |
| margin: 0 -10px;
| |
| }
| |
| | |
| .cs-row {
| |
| display: table-row;
| |
| }
| |
| | |
| .cs-cell {
| |
| display: table-cell;
| |
| width: 33.333%;
| |
| vertical-align: top;
| |
| }
| |
| | |
| /* Section styling */
| |
| .cs-section {
| |
| margin-bottom: 30px; | |
| }
| |
| | |
| .cs-section-header { | |
| padding: 12px 15px;
| |
| margin-bottom: 20px;
| |
| border-radius: 6px;
| |
| }
| |
| | |
| .cs-section-title {
| |
| margin: 0;
| |
| font-size: 1.3em;
| |
| font-weight: 600;
| |
| }
| |
| | |
| /* Card Design */
| |
| .cs-card {
| |
| border-radius: 6px;
| |
| overflow: hidden;
| |
| height: 100%;
| |
| }
| |
| | |
| .cs-card-header {
| |
| padding: 12px 15px;
| |
| }
| |
| | |
| .cs-card-title {
| |
| margin: 0;
| |
| font-size: 1.1em;
| |
| font-weight: 600;
| |
| }
| |
| | |
| .cs-card-body {
| |
| padding: 15px;
| |
| }
| |
| | |
| .cs-card-list {
| |
| margin: 0;
| |
| padding: 0 0 0 20px;
| |
| }
| |
| | |
| .cs-card-list li {
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| /* Card footer with hover effects */
| |
| .cs-card-footer {
| |
| padding: 8px 15px;
| |
| text-align: right;
| |
| }
| |
| | |
| /* Link hover effects */
| |
| .cs-card-footer a {
| |
| text-decoration: none;
| |
| position: relative;
| |
| padding-bottom: 2px;
| |
| transition: all 0.2s ease-in-out;
| |
| }
| |
| | |
| .cs-card-footer a:hover {
| |
| opacity: 0.85;
| |
| }
| |
| | |
| .cs-card-footer a::after {
| |
| content: '';
| |
| position: absolute;
| |
| width: 0;
| |
| height: 1px;
| |
| bottom: 0;
| |
| left: 0;
| |
| background-color: currentColor;
| |
| transition: width 0.3s ease;
| |
| }
| |
| | |
| .cs-card-footer a:hover::after {
| |
| width: 100%;
| |
| }
| |
| | |
| /* Section color schemes */
| |
| /* Programming */
| |
| .cs-section:nth-child(3) .cs-section-header {
| |
| background-color: #cef2e0;
| |
| border: 1px solid #cef2e0;
| |
| }
| |
| | |
| .cs-section:nth-child(3) .cs-card {
| |
| background-color: #f5fffa;
| |
| border: 1px solid #cef2e0;
| |
| }
| |
| | |
| .cs-section:nth-child(3) .cs-card-header {
| |
| background-color: #cef2e0;
| |
| border-bottom: 1px solid #cef2e0;
| |
| }
| |
| | |
| .cs-section:nth-child(3) .cs-card-footer {
| |
| background-color: #f5fffa;
| |
| border-top: 1px solid #cef2e0;
| |
| }
| |
| | |
| .cs-section:nth-child(3) .cs-card-footer a {
| |
| color: #2e8b57;
| |
| }
| |
| | |
| /* Data Science */
| |
| .cs-section:nth-child(4) .cs-section-header {
| |
| background-color: #cedff2;
| |
| border: 1px solid #cedff2;
| |
| }
| |
| | |
| .cs-section:nth-child(4) .cs-card {
| |
| background-color: #f5faff;
| |
| border: 1px solid #cedff2;
| |
| }
| |
| | |
| .cs-section:nth-child(4) .cs-card-header {
| |
| background-color: #cedff2;
| |
| border-bottom: 1px solid #cedff2;
| |
| }
| |
| | |
| .cs-section:nth-child(4) .cs-card-footer {
| |
| background-color: #f5faff;
| |
| border-top: 1px solid #cedff2;
| |
| }
| |
| | |
| .cs-section:nth-child(4) .cs-card-footer a {
| |
| color: #4169e1;
| |
| }
| |
| | |
| /* Databases */
| |
| .cs-section:nth-child(5) .cs-section-header {
| |
| background-color: #f2cedd;
| |
| border: 1px solid #f2cedd;
| |
| }
| |
| | |
| .cs-section:nth-child(5) .cs-card {
| |
| background-color: #fff5fa;
| |
| border: 1px solid #f2cedd;
| |
| }
| |
| | |
| .cs-section:nth-child(5) .cs-card-header {
| |
| background-color: #f2cedd;
| |
| border-bottom: 1px solid #f2cedd;
| |
| }
| |
| | |
| .cs-section:nth-child(5) .cs-card-footer {
| |
| background-color: #fff5fa;
| |
| border-top: 1px solid #f2cedd;
| |
| }
| |
| | |
| .cs-section:nth-child(5) .cs-card-footer a {
| |
| color: #db7093;
| |
| }
| |
| | |
| /* Infrastructure */
| |
| .cs-section:nth-child(6) .cs-section-header {
| |
| background-color: #ddcef2;
| |
| border: 1px solid #ddcef2;
| |
| }
| |
| | |
| .cs-section:nth-child(6) .cs-card {
| |
| background-color: #faf5ff;
| |
| border: 1px solid #ddcef2;
| |
| }
| |
| | |
| .cs-section:nth-child(6) .cs-card-header {
| |
| background-color: #ddcef2;
| |
| border-bottom: 1px solid #ddcef2;
| |
| }
| |
| | |
| .cs-section:nth-child(6) .cs-card-footer {
| |
| background-color: #faf5ff;
| |
| border-top: 1px solid #ddcef2;
| |
| }
| |
| | |
| .cs-section:nth-child(6) .cs-card-footer a {
| |
| color: #8a2be2;
| |
| }
| |
| | |
| /* CS Fundamentals */
| |
| .cs-section:nth-child(7) .cs-section-header {
| |
| background-color: #f2e0ce;
| |
| border: 1px solid #f2e0ce;
| |
| }
| |
| | |
| .cs-section:nth-child(7) .cs-card {
| |
| background-color: #fffaf5;
| |
| border: 1px solid #f2e0ce;
| |
| }
| |
| | |
| .cs-section:nth-child(7) .cs-card-header {
| |
| background-color: #f2e0ce;
| |
| border-bottom: 1px solid #f2e0ce;
| |
| }
| |
| | |
| .cs-section:nth-child(7) .cs-card-footer {
| |
| background-color: #fffaf5;
| |
| border-top: 1px solid #f2e0ce;
| |
| }
| |
| | |
| .cs-section:nth-child(7) .cs-card-footer a {
| |
| color: #d2691e;
| |
| }
| |
| | |
| /* Community */
| |
| .cs-section:nth-child(8) .cs-section-header {
| |
| background-color: #eee;
| |
| border: 1px solid #eee;
| |
| }
| |
| | |
| .cs-section:nth-child(8) .cs-card {
| |
| background-color: #f9f9f9;
| |
| border: 1px solid #eee;
| |
| }
| |
| | |
| .cs-section:nth-child(8) .cs-card-header {
| |
| background-color: #eee;
| |
| border-bottom: 1px solid #eee;
| |
| }
| |
| | |
| .cs-section:nth-child(8) .cs-card-footer {
| |
| background-color: #f9f9f9;
| |
| border-top: 1px solid #eee;
| |
| }
| |
| | |
| .cs-section:nth-child(8) .cs-card-footer a {
| |
| color: #444;
| |
| }
| |
| | |
| /* Dark mode theme toggle */
| |
| @media screen {
| |
| /* Dark mode styles */
| |
| html.skin-theme-clientpref-night .cs-header,
| |
| html.skin-theme-clientpref-os .cs-header {
| |
| background-color: #171a1d; | |
| border-color: #676767;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-title,
| |
| html.skin-theme-clientpref-os .cs-title {
| |
| color: #fff; | |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-subtitle,
| |
| html.skin-theme-clientpref-os .cs-subtitle {
| |
| color: #ccc;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-search,
| |
| html.skin-theme-clientpref-os .cs-search {
| |
| background-color: #252525;
| |
| border-color: #676767;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-search input[type="search"],
| |
| html.skin-theme-clientpref-night .cs-search input[type="text"],
| |
| html.skin-theme-clientpref-night .cs-search .mw-searchInput,
| |
| html.skin-theme-clientpref-night .cs-search .cdx-text-input__input,
| |
| html.skin-theme-clientpref-os .cs-search input[type="search"],
| |
| html.skin-theme-clientpref-os .cs-search input[type="text"],
| |
| html.skin-theme-clientpref-os .cs-search .mw-searchInput,
| |
| html.skin-theme-clientpref-os .cs-search .cdx-text-input__input {
| |
| background-color: #1f1f1f !important;
| |
| color: #fff !important;
| |
| border-color: #555 !important;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-search input[type="submit"],
| |
| html.skin-theme-clientpref-night .cs-search button[type="submit"],
| |
| html.skin-theme-clientpref-os .cs-search input[type="submit"],
| |
| html.skin-theme-clientpref-os .cs-search button[type="submit"] {
| |
| background-color: #444 !important;
| |
| border-color: #555 !important;
| |
| color: #fff !important;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-search input[type="submit"]:hover,
| |
| html.skin-theme-clientpref-night .cs-search button[type="submit"]:hover,
| |
| html.skin-theme-clientpref-os .cs-search input[type="submit"]:hover,
| |
| html.skin-theme-clientpref-os .cs-search button[type="submit"]:hover {
| |
| background-color: #555 !important;
| |
| }
| |
| | |
| /* Dark text colors */
| |
| html.skin-theme-clientpref-night .cs-section-title,
| |
| html.skin-theme-clientpref-night .cs-card-title,
| |
| html.skin-theme-clientpref-os .cs-section-title,
| |
| html.skin-theme-clientpref-os .cs-card-title {
| |
| color: #fff;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-card-list li,
| |
| html.skin-theme-clientpref-os .cs-card-list li {
| |
| color: #ccc;
| |
| }
| |
| }
| |
| | |
| /* Dark mode section colors - condensed */
| |
| @media screen {
| |
| /* Programming section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-section-header {
| |
| background-color: #104437;
| |
| border-color: #104437;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card {
| |
| background-color: #0b1e1c;
| |
| border-color: #104437;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-header {
| |
| background-color: #104437;
| |
| border-color: #104437;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-footer {
| |
| background-color: #0b1e1c;
| |
| border-color: #104437;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-footer a {
| |
| color: #8fbc8f;
| |
| }
| |
| | |
| /* Data Science section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-section-header {
| |
| background-color: #082849;
| |
| border-color: #082849;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card {
| |
| background-color: #0d1a27;
| |
| border-color: #082849;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-header {
| |
| background-color: #082849;
| |
| border-color: #082849;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-footer {
| |
| background-color: #0d1a27;
| |
| border-color: #082849;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-footer a {
| |
| color: #87cefa;
| |
| }
| |
| | |
| /* Databases section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-section-header {
| |
| background-color: #882c43;
| |
| border-color: #882c43;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card {
| |
| background-color: #270e1a;
| |
| border-color: #882c43;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-header {
| |
| background-color: #882c43;
| |
| border-color: #882c43;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-footer {
| |
| background-color: #270e1a;
| |
| border-color: #882c43;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-footer a {
| |
| color: #ffb6c1;
| |
| }
| |
| | |
| /* Infrastructure section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-section-header {
| |
| background-color: #7545ab;
| |
| border-color: #7545ab;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card {
| |
| background-color: #130e20;
| |
| border-color: #7545ab;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-header {
| |
| background-color: #7545ab;
| |
| border-color: #7545ab;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-footer {
| |
| background-color: #130e20;
| |
| border-color: #7545ab;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-footer a {
| |
| color: #da70d6;
| |
| }
| |
| | |
| /* CS Fundamentals section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-section-header {
| |
| background-color: #663428;
| |
| border-color: #663428;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card {
| |
| background-color: #331a00;
| |
| border-color: #663428;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-header {
| |
| background-color: #663428;
| |
| border-color: #663428;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-footer {
| |
| background-color: #331a00;
| |
| border-color: #663428;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-footer a {
| |
| color: #ffa500;
| |
| }
| |
| | |
| /* Community section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-section-header {
| |
| background-color: #3d3d3d;
| |
| border-color: #3d3d3d;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card {
| |
| background-color: #171a1d;
| |
| border-color: #3d3d3d;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-header {
| |
| background-color: #3d3d3d;
| |
| border-color: #3d3d3d;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-footer {
| |
| background-color: #171a1d;
| |
| border-color: #3d3d3d;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-footer a {
| |
| color: #ccc;
| |
| }
| |
| }
| |
| | |
| /* OS dark mode detection through prefers-color-scheme */
| |
| @media (prefers-color-scheme: dark) {
| |
| /* Dark mode handled through class combinations above */
| |
| }
| |
| | |
| /* Responsive layout */
| |
| @media (max-width: 875px) {
| |
| .cs-title {
| |
| font-size: 1.8em;
| |
| }
| |
|
| |
| .cs-subtitle {
| |
| font-size: 1em;
| |
| } | | } |
| | | |
| .cs-search {
| | /* Adjust card padding on small screens */ |
| padding: 15px;
| | .mp-section-cell { |
| }
| | padding: 0.6em; |
|
| |
| /* Convert grid table to blocks on mobile */ | |
| .cs-grid { | |
| display: block; | |
| width: 100%;
| |
| margin: 0; | | margin: 0; |
| padding: 0 10px; | | width: auto; |
| | max-width: 100%; |
| box-sizing: border-box; | | box-sizing: border-box; |
| } | | } |
| | | |
| .cs-row { | | /* Ensure content doesn't overflow */ |
| display: block; | | .mp-section-cell h3 { |
| | font-size: 1em; |
| | overflow-wrap: break-word; |
| | word-wrap: break-word; |
| } | | } |
| | | |
| .cs-cell { | | .mp-section-cell ul { |
| display: block; | | padding-left: 1.2em; |
| width: 100%;
| |
| margin-bottom: 15px;
| |
| } | | } |
| | | |
| .cs-card { | | .mp-section-cell li { |
| width: 100%; | | overflow-wrap: break-word; |
| margin: 0 0 15px 0; | | word-wrap: break-word; |
| } | | } |
| | | |
| .cs-section-header { | | /* Fix container padding to prevent overflow */ |
| text-align: center;
| | #mp-other-content, #mp-sister-content, #mp-tfp { |
| padding: 10px;
| | padding: 0.5em 0.3em; |
| }
| |
|
| |
| .cs-section-title {
| |
| font-size: 1.2em; | |
| } | | } |
| } | | } |
|
| |
|
| /* Extra small screens */ | | /* For extremely small screens */ |
| @media (max-width: 480px) { | | @media (max-width: 480px) { |
| .cs-search { | | .mp-section-cell { |
| padding: 10px; | | padding: 0.5em; |
| }
| |
|
| |
| .cs-card-header,
| |
| .cs-card-body {
| |
| padding: 10px;
| |
| } | | } |
| | | |
| .cs-title { | | .mp-section-cell ul { |
| font-size: 1.6em; | | padding-left: 1em; |
| } | | } |
| } | | } |