/**
 * custom styles als add on zu den widgets
 * vor livegang sollten die kommentare hier entfernt werden.
 */

/*
 * hier ein beispiel, wie das mit dem überschreiben geht
 * so kommt die css definition im stylesheet des widgets vor:
 */

#topicSlider .slide .content .caption,
#topicSlider .slide .detailtext,
#topicSlider .slide.shows .content .showsOverlay .showsContainer div:hover.showContainer .showOverlay .bg {
        /* background-color: black; */
}

/*
 * die definition kann so nicht eine bestehende überschreiben, weil sie mit der kombination der verwendeten klassifikatoren nicht "schwer" genug ist.
 *
 * hier steht ausführlich drin wie es funktioniert: http://www.w3.org/TR/css3-selectors/#specificity
 *
 * mal vereinfacht gesagt:
 * faustregel für uns: je mehr class-elemente in dem ausdruck vorkommen, umso besser setzt sich die regel durch.
 * die anzahl der elemente in einem ausdruck wird einfach gezählt. mir einem zusatz:
 *
 * normale tags zählen jeweils 1
 * klassen zählen jeweils 10
 * IDs zählen jeweils 100
 *
 * also in unserem fall hat der erste ausdruck oben:
 * 1x ID = 100
 * 3x ne Klasse = 30
 *
 * jetzt erweitern wir den ausdruck so, dass er eine css-klasse mehr hat.
 * dazu kurz ins markup geschaut und gesehen, dass zwischen "#topicSlider" und ".slide" im Markup noch ein ".slides" kommt.
 * und dann schreib ich das rein.
 * und weil der entsprechende ausdruck unten eine klasse mehr hat, deswegen gilt der obere nicht mehr, nur der untere.
 * der ist jetzt 140 wert
 *
 *
 * bei wissen theme allerdings gerade gesehen, da haben wir mit .wissen noch eine Klasse mehr, da reicht es nocht nicht ;)
 * das unten klappt nur bei Geschichte!
 */

#topicSlider .slides .slide .content .caption,
#topicSlider .slides .slide .detailtext,
#topicSlider .slides .slide.shows .content .showsOverlay .showsContainer div:hover.showContainer .showOverlay .bg {
        /* background-color: cyan; */
}