/* A Better Blogroll by Chris Coyier http://css-tricks.com */ /* GENERIC RESET & BASIC STRUCTURE */ * { margin: 0; padding: 0; } body { color: #444; font-size: 83.33%; font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; } h1,h2,h3,h4 { font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-weight:normal;} h2 {font-size: 1.4em; color: #FF6600; margin: 0 0 0.25em 0; padding-top: 1.5em; border-bottom: 2px #ddd solid;} a { /* remove the dotted outlines when clicking tabs */ outline: none; text-decoration: none; } ul { list-style: none; } /* WIDGET STRUCTURE The outer-most wrap (#blogSliderWrap) contains the background image for the bottom of the widget. Laying on top of that is the "expandable" part of widget, which contains the vertically-repeatable background image (#blogSlider) */ #blogSliderWrap { width: 575px; margin: 50px auto; background: url(images/widget-bottom-bg.png) 0px bottom no-repeat; padding-bottom: 50px; position:relative; } #blogSlider { padding: 30px 0px 30px 0px; width: 575px; background: url(images/widget-middle-bg.png) center center repeat-y; } /* padding: 25px 18px 0px 18px; */ .stripViewer { position: relative; overflow: hidden; clear: both; } /** NICHT SICHTBAR?! */ .stripViewer .panelContainer { position: relative; left: 0px; top: 0px; } /** nur eine "linie"? */ .stripViewer .panelContainer .panel { float: left; position: relative; width: 560px; } /* Kasten mit Inhalt des Panels*/ /* As I mentioned earlier, the markup for the main navigation is generated on-the-fly by the JavaScript, but that doesn't mean we can't still style it with CSS. The style for (.stripNav) uses relative positioning to kick it over into place as well as ensure that it is on top of all over page elements. */ .stripNav { margin-left: 5px; position: relative; top: 18px; z-index: 99; width: 575px; } .wrapper { padding: 10px; } /* In order to keep the content from appearing to "fly in" from outside of the main white area, yet another wrap was needed (.innerWrap) that slims the inside down even further to prevent that. This is unique to our super-cool drop shadowed design. */ .innerWrap { width: 525px; margin:0px auto; overflow: hidden; } /* weiter reduzierte Breite. Im Original 273px breit. */ #push { height: 35px; } /* MAIN TABBED NAVIGATION */ /* We use the unique class names the JavaScript gives us to use basic CSS image replacement and apply our images to each tab. Note that shared attributes (like height) are applied generically while unique attributes (like width) are applied specifically. */ .stripNav ul li { float: left; } .stripNav li a { /* Generic "CSS image replacement" */ display: block; height: 22px; width: 63px; text-indent: -9999px; } /* The below class names are auto-generated by the JavaScript */ /* Fassung für Jgst 5 - 13 .stripNav li.tab1 a { background: url(images/jgst5.png) top center no-repeat; } .stripNav li.tab2 a { background: url(images/jgst6.png) top center no-repeat; } .stripNav li.tab3 a { background: url(images/jgst7.png) top center no-repeat; } .stripNav li.tab4 a { background: url(images/jgst8.png) top center no-repeat; } .stripNav li.tab5 a { background: url(images/jgst9.png) top center no-repeat; } .stripNav li.tab6 a { background: url(images/jgst10.png) top center no-repeat; } .stripNav li.tab7 a { background: url(images/jgst11.png) top center no-repeat; } .stripNav li.tab8 a { background: url(images/jgst12.png) top center no-repeat; } .stripNav li.tab9 a { background: url(images/jgst13.png) top center no-repeat; } */ /* Fassung für Jgst 7-13 */ .stripNav li.tab1 a { background: url(images/jgst7.png) top center no-repeat; } .stripNav li.tab2 a { background: url(images/jgst8.png) top center no-repeat; } .stripNav li.tab3 a { background: url(images/jgst9.png) top center no-repeat; } .stripNav li.tab4 a { background: url(images/jgst10.png) top center no-repeat; } .stripNav li.tab5 a { background: url(images/jgst11.png) top center no-repeat; } .stripNav li.tab6 a { background: url(images/jgst12.png) top center no-repeat; } .stripNav li.tab7 a { background: url(images/jgst13.png) top center no-repeat; } .stripNav li a:hover, .stripNav li a:active, .stripNav li a:focus { /* Restore focus styling that we removed when we removed outlines */ background-position: top center; } /* It is neccessary to repeat the image paths here */ /* Fassung für Jgst 5 - 13 .stripNav li.tab1 a.current { background: url(images/jgst5.png) bottom center no-repeat; } .stripNav li.tab2 a.current { background: url(images/jgst6.png) bottom center no-repeat; } .stripNav li.tab3 a.current { background: url(images/jgst7.png) bottom center no-repeat; } .stripNav li.tab4 a.current { background: url(images/jgst8.png) bottom center no-repeat; } .stripNav li.tab5 a.current { background: url(images/jgst9.png) bottom center no-repeat; } .stripNav li.tab6 a.current { background: url(images/jgst10.png) bottom center no-repeat; } .stripNav li.tab7 a.current { background: url(images/jgst11.png) bottom center no-repeat; } .stripNav li.tab8 a.current { background: url(images/jgst12.png) bottom center no-repeat; } .stripNav li.tab9 a.current { background: url(images/jgst13.png) bottom center no-repeat; } */ /* Fassung für Jgst 7 - 13 */ .stripNav li.tab1 a.current { background: url(images/jgst7.png) bottom center no-repeat; } .stripNav li.tab2 a.current { background: url(images/jgst8.png) bottom center no-repeat; } .stripNav li.tab3 a.current { background: url(images/jgst9.png) bottom center no-repeat; } .stripNav li.tab4 a.current { background: url(images/jgst10.png) bottom center no-repeat; } .stripNav li.tab5 a.current { background: url(images/jgst11.png) bottom center no-repeat; } .stripNav li.tab6 a.current { background: url(images/jgst12.png) bottom center no-repeat; } .stripNav li.tab7 a.current { background: url(images/jgst13.png) bottom center no-repeat; } /* SUB NAVIGATION */ /* The JavaScript also auto-generates two special page elements for moving ahead a single tab or moving backward a single tab. We apply images and positioning to these as well */ .stripNavL a, .stripNavR a { display: block; position: absolute; width: 75px; height: 22px; text-indent: -9999px; } .stripNavL a { bottom: 35px; left: 45px; background: url(images/zurueck.png); } .stripNavR a { bottom: 35px; right: 45px; background: url(images/vor.png); } /* HEADLINES STYLING */ /* Ultimately, each panel will contain and unordered list of headlines. We will give each of these a unique ID. For a bonus nice touch, each of them will have a rollover color that matches the logo color of the originating site. */ .panel ul { width: 525px; } /* pinke Fläche */ /* Originalbreite 240px */ .panel ul li a { color: #303030; display: block; padding: 7px 10px; } /* border-bottom: 1px solid #C1B599; color: #303030; display: block; padding: 7px 10px; */ .panel ul li:last-child a { /* Remove bottom border on last list item Hooray for pseudo selectors! */ border: none; } /* Unique rollover colors for each list */ /* CSS um jedem Hover eine an die bunten angepassten Tabs angepasste Farbe zu verleihen .panel ul#jgst5-list li a:hover { background: #ff6600; color: white; } .panel ul#jgst6-list li a:hover { background: #ff9600; color: white; } .panel ul#jgst7-list li a:hover { background: #ffd800; color: black; } .panel ul#jgst8-list li a:hover { background: #d2ff00; color: black; } .panel ul#jgst9-list li a:hover { background: #48ff00; color: black; } .panel ul#jgst10-list li a:hover { background: #00f6ff; color: black; } .panel ul#jgst11-list li a:hover { background: #0018ff; color: white; } .panel ul#jgst12-list li a:hover { background: #d200ff; color: white; } .panel ul#jgst13-list li a:hover { background: #ff0000; color: white; } */ /* CSS Hover mit Einheitsfarbe Orange */ .panel ul li a:hover { background: #ff6600; color: white; }