Weitere Optionen
(+Textur) |
KKeine Bearbeitungszusammenfassung |
||
(54 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
/* Grundlegende Farbpalette */ | /* Grundlegende Farbpalette */ | ||
:root { | :root { | ||
--primary-color: # | --primary-color: #3E3E3E; /* Dunkleres Grau für Hintergründe */ | ||
--secondary-color: #9E9E9E; /* Mittelgrau für Karten/Boxen */ | --secondary-color: #9E9E9E; /* Mittelgrau für Karten/Boxen */ | ||
--accent-color: # | --accent-color: #BA6700; /* Dunklere Rostfarbe für Akzente */ | ||
--text-color: #E0E0E0; /* Helles Grau für Text */ | --text-color: #E0E0E0; /* Helles Grau für Text */ | ||
--link-color: #8AB4F8; /* Verblasstes Blau für Links */ | --link-color: #8AB4F8; /* Verblasstes Blau für Links */ | ||
--button-hover-color: # | --button-hover-color: #f5d6b0; /* Verblasstes Grün für Button-Hover */ | ||
} | } | ||
/* Schriftarten und Typografie */ | /* Schriftarten und Typografie */ | ||
@import url('https://fonts.googleapis.com/css2?family= | @import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); | ||
/* Buttons */ | |||
.button { | .button { | ||
border: 1px solid var(--accent-color); | border: 1px solid var(--accent-color); | ||
Zeile 34: | Zeile 23: | ||
background-color: var(--primary-color); | background-color: var(--primary-color); | ||
color: var(--text-color); | color: var(--text-color); | ||
background-image: url('https://de.maddraxikon.com//asphalt.png'); | |||
background-repeat: repeat; /* Hintergrundtextur wiederholen */ | |||
background-size: auto; /* Automatische Größe der Textur */ | |||
font-family: 'Abel', sans-serif; | |||
} | } | ||
/* Stile für Links */ | |||
a { | a { | ||
color: var(-- | color: var(--secondary-color) | ||
transition: color 0.3s ease; /* Sanfter Farbübergang bei Hover */ | |||
} | } | ||
a:hover { | a:hover { | ||
color: var(--button-hover-color) | color: var(--button-hover-color) | ||
} | } | ||
Zeile 55: | Zeile 44: | ||
/* Hintergründe für Abschnittstitel */ | /* Hintergründe für Abschnittstitel */ | ||
#content, | |||
#mw-head, | |||
#mw-panel, | |||
.mw-page-container, | |||
.vector-body, | |||
.section-title { | .section-title { | ||
background-color: var(--secondary-color); | background-color: var(--secondary-color); | ||
} | } | ||
/* Hauptmenü-Stil */ | /* Hauptmenü-Stil */ | ||
Zeile 98: | Zeile 90: | ||
} | } | ||
/* Hintergrundbild für das Hauptmenü */ | |||
#mw-panel { | #mw-panel { | ||
background-image: url('https://de.maddraxikon.com//beton.png'); | background-image: url('https://de.maddraxikon.com//beton.png'); | ||
Zeile 104: | Zeile 97: | ||
} | } | ||
/* Boxen für die Hauptseite */ | |||
.Hauptseite-Box { | |||
background-color: #333; /* Dunkler Hintergrund */ | |||
color: #E0E0E0; /* Helle Textfarbe */ | |||
border: 1px solid #BA6700; /* Rostfarbener Rahmen */ | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefeffekt */ | |||
padding: 20px; /* Innenabstand */ | |||
font-family: 'Special Elite', cursive; /* Passende Schriftart */ | |||
font-size: 1.2em; /* Vergrößerte Schrift */ | |||
text-align: center; /* Zentrierte Ausrichtung */ | |||
} | |||
.Hauptseite-Box h2 { | |||
color: #BA6700; /* Rostfarbener Titel */ | |||
font-size: 1.5em; /* Vergrößerte Titelschrift */ | |||
margin-bottom: 10px; /* Abstand zum Inhalt */ | |||
} | |||
.Hauptseite-Box p { | |||
margin-bottom: 10px; /* Abstand zwischen Absätzen */ | |||
} | |||
.Hauptseite-Box a { | |||
text-decoration: none; /* Keine Unterstreichung */ | |||
} | |||
.Hauptseite-Box a:hover { | |||
color: #4CAF50; /* Verblasstes Grün beim Überfahren mit der Maus */ | |||
} | |||
.Hauptseite-Inhalt { | |||
font-family: 'Abel', sans-serif; | |||
} | |||
/* | /* Toolbar für Artikelbearbeitung */ | ||
.vector-menu-tabs { | |||
font-family: 'Bree Serif', serif; | |||
text-transform: uppercase; | |||
letter-spacing: 2px; | |||
} | |||
/* | /* Inaktive Tabs */ | ||
. | .vector-menu-tabs .vector-menu-content-list a { | ||
color: #fff; | |||
text-shadow: 1px 1px 2px #000; | |||
} | } | ||
. | /* Aktiver Tab */ | ||
.vector-menu-tabs .selected a { | |||
color: #fff; | |||
text-shadow: 1px 1px 1px #000; | |||
} | } | ||
/* Hover/Focus */ | |||
. | .vector-menu-tabs .vector-menu-content-list a:hover, | ||
.vector-menu-tabs .vector-menu-content-list a:focus { | |||
text-shadow: none; | |||
color: #ccc; | |||
} | } | ||
/* Kategorienmodul anpassen */ | |||
.catlinks { | |||
margin: 10px 0; | |||
padding: 10px; | |||
background: #333; | |||
border: 1px solid #666; | |||
} | } | ||
/* | /* Titel */ | ||
.catlinks .mw-normal-catlinks { | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
letter-spacing: 1px; | |||
} | |||
/* | /* Liste */ | ||
. | .catlinks ul { | ||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
. | |||
.catlinks li { | |||
display: inline-block; | |||
margin-right: 5px; | |||
} | } | ||
/* | /* Links */ | ||
. | .catlinks a { | ||
color:# | color: #fff; | ||
} | text-decoration: none; | ||
padding: 3px 5px; | |||
border: 1px solid #666; | |||
transition: background .3s; | |||
} | |||
.catlinks a:hover { | |||
background: #555; | |||
} | |||
. | /* Anpassung der Infoboxen */ | ||
color:#.. | /* Infobox */ | ||
.infobox { | |||
float:right; | |||
background-color: #555; | |||
color: #ccc; | |||
border: 1px solid #333; | |||
box-shadow: 0 0 10px rgba(0,0,0,0.5); | |||
font-size: 0.7em; | |||
} | } | ||
.infobox-header { | |||
background-color: #444; | |||
color: #fff; | |||
padding: 10px; | |||
font-size: 1.2em; | |||
text-transform: uppercase; | |||
letter-spacing: 2px; | |||
} | |||
.infobox-data { | |||
padding: 10px; | |||
} | |||
.infobox-row { | |||
padding: 5px 0; | |||
} | |||
.infobox-cell { | |||
padding: 3px 10px; | |||
} | |||
.infobox-below { | |||
border-top: 1px solid #666; | |||
padding: 10px; | |||
} | |||
.infobox-button { | |||
background-color: var(--primary-color); | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); | |||
text-align: center; | |||
font-size: 1.2em; | |||
} | |||
.infobox-button:hover { | |||
background-color: var(--secondary-color); | |||
} | |||
/* | /* Hauptseite-Button Anpassung */ | ||
/* | /* Zentrieren der Buttons */ | ||
.Hauptseite-Button { | |||
text-align: center; /* Zentriert den Inhalt */ | |||
} | |||
.button-container { | |||
display: flex; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
} | |||
/* | .Hauptseite-Button a { | ||
/* | display: inline-block; /* Damit die Links wie Buttons behandelt werden */ | ||
background-color: var(--secondary-color); /* Mittelgrau für den Button-Hintergrund */ | |||
color: var(--text-color); /* Helles Grau für den Text */ | |||
padding: 10px 20px; /* Innenabstand */ | |||
margin: 5px; /* Außenabstand zwischen den Buttons */ | |||
text-decoration: none; /* Entfernt die Unterstreichung */ | |||
font-family: 'Special Elite', cursive; /* Schriftart */ | |||
font-size: 1.1em; /* Schriftgröße */ | |||
border: 2px solid var(--accent-color); /* Rostfarbener Rahmen */ | |||
border-radius: 5px; /* Abgerundete Ecken für den Button */ | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */ | |||
transition: background-color 0.3s, color 0.3s; /* Animation beim Überfahren */ | |||
} | |||
/* | .Hauptseite-Button a:hover { | ||
/* | background-color: var(--accent-color); /* Dunklere Rostfarbe für Hover */ | ||
color: var(--primary-color); /* Dunkleres Grau für Hover-Text */ | |||
border-color: var(--text-color); /* Helles Grau für den Rahmen beim Hover */ | |||
} | |||
/* | /* Anpassung der Schriftfarbe für Seiteninhalte */ | ||
#content, .mw-body-content { | |||
color: #F0F0F0; /* Neue helle Schriftfarbe für den Seiteninhalt */ | |||
} | |||
/* | /* Links innerhalb des Seiteninhalts */ | ||
. | #content a, .mw-body-content a { | ||
color: #945200; /* Dunkles Rostrot */ | |||
} | } | ||
#content a:hover, .mw-body-content a:hover { | |||
. | color: #f5d6b0; /* Anpassen der Hover-Farbe für Links */ | ||
} | } | ||
. | /* Links zur Neuerstellung von Artikeln */ | ||
.new a { | |||
color: #556b2f; | |||
} | } | ||
/* | /* Logo ersetzen */ | ||
.mw-logo { | |||
display: inline-block; /* oder 'block'? */ | |||
width: 135px; /* Anpassen an die Breite des Logos */ | |||
height: 135px; /* Anpassen an die Höhe des Logos */ | |||
background-image: url('https://de.maddraxikon.com/images/LogoNeu.png'); /* URL des Logos */ | |||
background-size: contain; /* oder 'cover', je nach Bedarf */ | |||
background-repeat: no-repeat; | |||
background-position: center; /* Zentriert das Bild */ | |||
font-size: 0; /* Text unsichtbar */ | |||
overflow: hidden; /* Verhindert, dass Inhalte überlaufen */ | |||
} | |||
/* | /* Anpassung der Roman-Infobox */ | ||
. | .heftartikel-tabelle { | ||
width: 100%; /* Stellt sicher, dass die Tabelle die volle Breite nutzt */ | |||
border-collapse: collapse; /* Entfernt doppelte Ränder */ | |||
margin-bottom: 20px; /* Abstand nach unten für Außenabstand */ | |||
background-color: var(--secondary-color); /* Hintergrundfarbe der Infobox */ | |||
color: var(--text-color); /* Textfarbe */ | |||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */ | |||
text-transform: none; | |||
font-size: 14px; | |||
} | } | ||
. | .heftartikel-tabelle th, .heftartikel-tabelle td { | ||
padding: 10px; /* Innenabstand */ | |||
border: 1px solid var(--accent-color); /* Rostfarbener Rahmen */ | |||
} | } | ||
. | .heftartikel-tabelle th { | ||
background-color: var(--primary-color); /* Dunkleres Grau für Überschriften */ | |||
color: var(--text-color); /* Helle Textfarbe für Überschriften */ | |||
text-align: left; /* Ausrichtung des Textes */ | |||
font-family: 'Special Elite', cursive; /* Schriftart für Überschriften */ | |||
} | } | ||
. | .heftartikel-tabelle td { | ||
background-color: var(--secondary-color); /* Mittelgrau für Zellen */ | |||
color: var(--text-color); /* Textfarbe */ | |||
vertical-align: top; /* Ausrichtung des Inhalts in der Zelle */ | |||
} | } | ||
. | /* Anpassung für das Bild im Infobox */ | ||
.heftartikel-tabelle img { | |||
max-width: 100%; /* Stellt sicher, dass das Bild responsive ist */ | |||
height: auto; /* Erhält das Seitenverhältnis des Bildes */ | |||
border: 2px solid var(--accent-color); /* Rahmen um das Bild */ | |||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Schatten für das Bild */ | |||
} | } | ||
. | /* Anpassung für Links innerhalb der Infobox */ | ||
.heftartikel-tabelle a { | |||
color: var(--link-color); /* Farbe für Links */ | |||
text-decoration: none; /* Keine Unterstreichung */ | |||
} | } | ||
. | .heftartikel-tabelle a:hover { | ||
color: var(--button-hover-color); /* Farbe beim Überfahren */ | |||
text-decoration: underline; /* Unterstreichung beim Überfahren */ | |||
} | } | ||
/* | /* Grafiken sollen Platz besser nutzen */ | ||
.thumb { | |||
. | border: 1px solid #ccc; | ||
padding: 3px !important; | |||
background-color: #f9f9f9 !important; | |||
text-align: center; | |||
overflow: hidden; | |||
} | } | ||
.thumbcaption { | |||
. | color: #252525 !important; | ||
} | } | ||
Version vom 13. April 2024, 21:12 Uhr
/* Grundlegende Farbpalette */ :root { --primary-color: #3E3E3E; /* Dunkleres Grau für Hintergründe */ --secondary-color: #9E9E9E; /* Mittelgrau für Karten/Boxen */ --accent-color: #BA6700; /* Dunklere Rostfarbe für Akzente */ --text-color: #E0E0E0; /* Helles Grau für Text */ --link-color: #8AB4F8; /* Verblasstes Blau für Links */ --button-hover-color: #f5d6b0; /* Verblasstes Grün für Button-Hover */ } /* Schriftarten und Typografie */ @import url('https://fonts.googleapis.com/css2?family=Abel&display=swap'); /* Buttons */ .button { border: 1px solid var(--accent-color); background-image: var(--button-texture), linear-gradient(var(--secondary-color), var(--primary-color)); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } /* Anwendung der Farben */ body { background-color: var(--primary-color); color: var(--text-color); background-image: url('https://de.maddraxikon.com//asphalt.png'); background-repeat: repeat; /* Hintergrundtextur wiederholen */ background-size: auto; /* Automatische Größe der Textur */ font-family: 'Abel', sans-serif; } /* Stile für Links */ a { color: var(--secondary-color) transition: color 0.3s ease; /* Sanfter Farbübergang bei Hover */ } a:hover { color: var(--button-hover-color) } .button:hover { background-color: var(--accent-color); } /* Hintergründe für Abschnittstitel */ #content, #mw-head, #mw-panel, .mw-page-container, .vector-body, .section-title { background-color: var(--secondary-color); } /* Hauptmenü-Stil */ #mw-panel .vector-menu-content-list li { margin-bottom: 5px; /* Abstand zwischen den Menüpunkten */ } #mw-panel .vector-menu-content-list li a { display: block; padding: 8px 10px; /* Innenabstand */ background-color: #333; /* Dunkler Hintergrund für die Buttons */ color: white; /* Helle Textfarbe */ text-decoration: none; /* Keine Unterstreichung */ border-radius: 4px; /* Abgerundete Ecken */ transition: background-color 0.3s; /* Animation für Hover-Effekt */ } #mw-panel .vector-menu-content-list li a:hover { background-color: #555; /* Hintergrundfarbe beim Überfahren mit der Maus */ } /* Stil für die Hauptmenü-Überschriften */ #mw-panel .vector-menu-portal .vector-menu-heading { background-color: #444; /* Dunkler Hintergrund */ color: #c0c0c0; /* Leicht helle Textfarbe */ padding: 8px 12px; /* Erhöhter Innenabstand */ font-family: 'Courier New', Courier, monospace; /* Monospaced-Schriftart */ font-size: 1.1em; /* Vergrößerte Schrift */ border-bottom: 1px solid #333; /* Untere Grenze für die Trennung */ text-transform: uppercase; /* Großbuchstaben */ letter-spacing: 1px; /* Buchstabenabstand */ text-shadow: 2px 2px 2px #000; /* Textschatten für einen Kontureffekt */ } /* Link "Umschalten zum bisherigen Aussehen" im Hauptmenü versteckt */ .mw-sidebar-action-content { display: none; } /* Hintergrundbild für das Hauptmenü */ #mw-panel { background-image: url('https://de.maddraxikon.com//beton.png'); background-size: cover; /* Stellt sicher, dass das Bild den gesamten Bereich abdeckt */ background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */ } /* Boxen für die Hauptseite */ .Hauptseite-Box { background-color: #333; /* Dunkler Hintergrund */ color: #E0E0E0; /* Helle Textfarbe */ border: 1px solid #BA6700; /* Rostfarbener Rahmen */ box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefeffekt */ padding: 20px; /* Innenabstand */ font-family: 'Special Elite', cursive; /* Passende Schriftart */ font-size: 1.2em; /* Vergrößerte Schrift */ text-align: center; /* Zentrierte Ausrichtung */ } .Hauptseite-Box h2 { color: #BA6700; /* Rostfarbener Titel */ font-size: 1.5em; /* Vergrößerte Titelschrift */ margin-bottom: 10px; /* Abstand zum Inhalt */ } .Hauptseite-Box p { margin-bottom: 10px; /* Abstand zwischen Absätzen */ } .Hauptseite-Box a { text-decoration: none; /* Keine Unterstreichung */ } .Hauptseite-Box a:hover { color: #4CAF50; /* Verblasstes Grün beim Überfahren mit der Maus */ } .Hauptseite-Inhalt { font-family: 'Abel', sans-serif; } /* Toolbar für Artikelbearbeitung */ .vector-menu-tabs { font-family: 'Bree Serif', serif; text-transform: uppercase; letter-spacing: 2px; } /* Inaktive Tabs */ .vector-menu-tabs .vector-menu-content-list a { color: #fff; text-shadow: 1px 1px 2px #000; } /* Aktiver Tab */ .vector-menu-tabs .selected a { color: #fff; text-shadow: 1px 1px 1px #000; } /* Hover/Focus */ .vector-menu-tabs .vector-menu-content-list a:hover, .vector-menu-tabs .vector-menu-content-list a:focus { text-shadow: none; color: #ccc; } /* Kategorienmodul anpassen */ .catlinks { margin: 10px 0; padding: 10px; background: #333; border: 1px solid #666; } /* Titel */ .catlinks .mw-normal-catlinks { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } /* Liste */ .catlinks ul { list-style: none; margin: 0; padding: 0; } .catlinks li { display: inline-block; margin-right: 5px; } /* Links */ .catlinks a { color: #fff; text-decoration: none; padding: 3px 5px; border: 1px solid #666; transition: background .3s; } .catlinks a:hover { background: #555; } /* Anpassung der Infoboxen */ /* Infobox */ .infobox { float:right; background-color: #555; color: #ccc; border: 1px solid #333; box-shadow: 0 0 10px rgba(0,0,0,0.5); font-size: 0.7em; } .infobox-header { background-color: #444; color: #fff; padding: 10px; font-size: 1.2em; text-transform: uppercase; letter-spacing: 2px; } .infobox-data { padding: 10px; } .infobox-row { padding: 5px 0; } .infobox-cell { padding: 3px 10px; } .infobox-below { border-top: 1px solid #666; padding: 10px; } .infobox-button { background-color: var(--primary-color); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); text-align: center; font-size: 1.2em; } .infobox-button:hover { background-color: var(--secondary-color); } /* Hauptseite-Button Anpassung */ /* Zentrieren der Buttons */ .Hauptseite-Button { text-align: center; /* Zentriert den Inhalt */ } .button-container { display: flex; justify-content: center; flex-wrap: wrap; } .Hauptseite-Button a { display: inline-block; /* Damit die Links wie Buttons behandelt werden */ background-color: var(--secondary-color); /* Mittelgrau für den Button-Hintergrund */ color: var(--text-color); /* Helles Grau für den Text */ padding: 10px 20px; /* Innenabstand */ margin: 5px; /* Außenabstand zwischen den Buttons */ text-decoration: none; /* Entfernt die Unterstreichung */ font-family: 'Special Elite', cursive; /* Schriftart */ font-size: 1.1em; /* Schriftgröße */ border: 2px solid var(--accent-color); /* Rostfarbener Rahmen */ border-radius: 5px; /* Abgerundete Ecken für den Button */ box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */ transition: background-color 0.3s, color 0.3s; /* Animation beim Überfahren */ } .Hauptseite-Button a:hover { background-color: var(--accent-color); /* Dunklere Rostfarbe für Hover */ color: var(--primary-color); /* Dunkleres Grau für Hover-Text */ border-color: var(--text-color); /* Helles Grau für den Rahmen beim Hover */ } /* Anpassung der Schriftfarbe für Seiteninhalte */ #content, .mw-body-content { color: #F0F0F0; /* Neue helle Schriftfarbe für den Seiteninhalt */ } /* Links innerhalb des Seiteninhalts */ #content a, .mw-body-content a { color: #945200; /* Dunkles Rostrot */ } #content a:hover, .mw-body-content a:hover { color: #f5d6b0; /* Anpassen der Hover-Farbe für Links */ } /* Links zur Neuerstellung von Artikeln */ .new a { color: #556b2f; } /* Logo ersetzen */ .mw-logo { display: inline-block; /* oder 'block'? */ width: 135px; /* Anpassen an die Breite des Logos */ height: 135px; /* Anpassen an die Höhe des Logos */ background-image: url('https://de.maddraxikon.com/images/LogoNeu.png'); /* URL des Logos */ background-size: contain; /* oder 'cover', je nach Bedarf */ background-repeat: no-repeat; background-position: center; /* Zentriert das Bild */ font-size: 0; /* Text unsichtbar */ overflow: hidden; /* Verhindert, dass Inhalte überlaufen */ } /* Anpassung der Roman-Infobox */ .heftartikel-tabelle { width: 100%; /* Stellt sicher, dass die Tabelle die volle Breite nutzt */ border-collapse: collapse; /* Entfernt doppelte Ränder */ margin-bottom: 20px; /* Abstand nach unten für Außenabstand */ background-color: var(--secondary-color); /* Hintergrundfarbe der Infobox */ color: var(--text-color); /* Textfarbe */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Schatten für Tiefe */ text-transform: none; font-size: 14px; } .heftartikel-tabelle th, .heftartikel-tabelle td { padding: 10px; /* Innenabstand */ border: 1px solid var(--accent-color); /* Rostfarbener Rahmen */ } .heftartikel-tabelle th { background-color: var(--primary-color); /* Dunkleres Grau für Überschriften */ color: var(--text-color); /* Helle Textfarbe für Überschriften */ text-align: left; /* Ausrichtung des Textes */ font-family: 'Special Elite', cursive; /* Schriftart für Überschriften */ } .heftartikel-tabelle td { background-color: var(--secondary-color); /* Mittelgrau für Zellen */ color: var(--text-color); /* Textfarbe */ vertical-align: top; /* Ausrichtung des Inhalts in der Zelle */ } /* Anpassung für das Bild im Infobox */ .heftartikel-tabelle img { max-width: 100%; /* Stellt sicher, dass das Bild responsive ist */ height: auto; /* Erhält das Seitenverhältnis des Bildes */ border: 2px solid var(--accent-color); /* Rahmen um das Bild */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Schatten für das Bild */ } /* Anpassung für Links innerhalb der Infobox */ .heftartikel-tabelle a { color: var(--link-color); /* Farbe für Links */ text-decoration: none; /* Keine Unterstreichung */ } .heftartikel-tabelle a:hover { color: var(--button-hover-color); /* Farbe beim Überfahren */ text-decoration: underline; /* Unterstreichung beim Überfahren */ } /* Grafiken sollen Platz besser nutzen */ .thumb { border: 1px solid #ccc; padding: 3px !important; background-color: #f9f9f9 !important; text-align: center; overflow: hidden; } .thumbcaption { color: #252525 !important; }