/* =================================== Stylesheet von www.LeonieKyra.de Stand: Gestaltungsphase Datei: bildschirm.css Datum: 13.06.2009 Autor: Daniel Bothe ################################## ############# AUFBAU ############# ## 1. KALIBRIERUNG ## ## 2. ALLGEMEINE STYLES ## ## 3. STYLES FÜR DIE BEREICHE ## ## 4. SONSTIGE STYLES ## ################################## ====================================== */ /* #################################### #===========KALIBRIERUNG===========# #################################### */ * { padding: 0; margin: 0; } h2, p, ol, ul { margin-bottom: 1em; } ol ul { margin-bottom: 0; } li { margin-left: 1em; } /* #################################### #========ALLGEMEINE STYLES=========# #################################### */ html { height: 101%; } body { background-color: #E7CBD7; color: #8E727F; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: small; } h1 { font-size: 150%; } h2 { font-size: 130%; } h3 { font-size: 110%; } h4 { font-size: 110%; } h5 { font-size: 110%; } /* $$$$$$$$$$$$$$ HYPERLINKS $$$$$$$$$$$$$$ */ a { text-decoration: none; outline: none; } a:link { color: #8E727F; } a:visited { color: #8E727F; } a:hover { text-decoration: none; color: #FF0066; } a:focus { color: #FF0066; } a:active { background-color: #FF0066; color: black; } /* $$$$$$$$$$$$$$$$$$$ KLASSEN UND ID´s $$$$$$$$$$$$$$$$$$$ */ #logo { background-color: #E7CBD7; color: black; border: none; } .clearing { clear: both; } .bildbeschreibung { font-size: x-small; } .videoname { font-size: x-small; font-weight: bold; } .werbung { border: 0; } .headline { background-color: #EF85B3; border-bottom: 1px solid #D4A1B7; } .defwert { margin-left: 50px; } .ubox { border: 1px solid #D4A1B7; width: 500px; margin-left: auto; margin-right: auto; } .post li { background-color: #FADFEB; list-style-type: none; border-left: 3px solid #D4A1B7; margin: 0; padding: 0; } /* #################################### ========STYLES FÜR BEREICHE========= #################################### */ #wrapper { background-color: #D4A1B7; color: #8E727F; width: 770px; margin: 10px auto; } #kopfbereich { background-color: #D4A1B7; color: #E7CBD7; padding: 0; margin: 0; } #navibereich { color: #E7CBD7; float: left; width: 130px; padding: 5px 10px 5px 8px; margin: 0 5px 5px 0px; } #navibereich ul { width: 10em; border-top: 1px solid #FF0000; } #navibereich li { list-style-type: none; border-left: 1px solid #FF0000; border-bottom: 1px solid #FF0000; margin: 0; } /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ HYPERLINKS IM NAVIGATIONSBEREICH $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ #navibereich a, #navibereich span { display: block; text-decoration: none; background-color: #EF85B3; color: black; padding: 4px; border-left: 3px solid #EF85B3; } #navibereich a:hover, #navibereich a:focus { background-color: #FADFEB; color: black; border-left-color: red; border-bottom: none; } /* COUNTER IM NAVIGATIONSBEREICH BRAUCHT KEINE HINTERGRUNDFARBE */ #navibereich #count a { display: block; background-color: #D4A1B7; text-decoration: none; color: black; padding: 4px; border-left: none; } #navibereich #count a:hover, #navibereich #count a:focus { border-bottom: none; } /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ANZEIGE DER AKTUELLEN SEITE $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ #startseite #navi01 span, #infobereich #navi02 span, #schwangerschaftinfos #navi02 span, #schwangerschafttips #navi02 span, #krankenhaus #navi02 span, #einkaufen #navi02 span, #steckbriefe #navi03 span, #schwangerschaft #navi04 span, #sabbisteck #navi03 span, #leosteck #navi03 span, #ninisteck #navi03 span, #geburt #navi05 span, #ereignisse #navi06 span, #videos #navi09 span, #karstadt #navi09 span, #karstadt #navi09 a, #spielbogen #navi09 span, #spielbogen #navi09 a, #schluckauf #navi09 span, #schluckauf #navi09 a, #geburtstag #navi09 span, #geburtstag #navi09 a, #vidschwanger #navi09 span, #vidschwanger #navi09 a, #wei08 #navi09 span, #wei08 #navi09 a, #brei #navi09 span, #brei #navi09 a, #leolacht #navi09 span, #leolacht #navi09 a, #leoredet #navi09 span, #leoredet #navi09 a, #leoabuh #navi09 span, #leoabuh #navi09 a, #moviepark #navi09 span, #moviepark #navi09 a, #robbe #navi09 span, #robbe #navi09 a, #kh #navi09 span, #kh #navi09 a, #baden #navi09 span, #baden #navi09 a, #gehfrei #navi09 span, #gehfrei #navi09 a, #karton #navi09 span, #karton #navi09 a, #puppe #navi09 span, #puppe #navi09 a, #schlitten #navi09 span, #schlitten #navi09 a, #krabbeln #navi09 span, #krabbeln #navi09 a, #brabbeln #navi09 span, #brabbeln #navi09 a, #drizwei #navi09 span, #drizwei #navi09 a, #leospielt #navi09 span, #leospielt #navi09 a, #bonbonssortieren #navi09 span, #bonbonssortieren #navi09 a, #urlaub2009 #navi09 span, #urlaub2009 #navi09 a, #spielplatz #navi09 span, #spielplatz #navi09 a, #ponyreiten #navi09 span, #ponyreiten #navi09 a, #pupille #navi09 span, #pupille #navi09 a, #leosingt #navi09 span, #leosingt #navi09 a, #leolaeuft #navi09 span, #leolaeuft #navi09 a, #blauersee #navi09 span, #blauersee #navi09 a, #laufenlernen #navi09 span, #laufenlernen #navi09 a, #hubschrauber #navi09 span, #hubschrauber #navi09 a, #weihnachtsbaum #navi09 span, #weihnachtsbaum #navi09 a, #imwald #navi09 span, #imwald #navi09 a, #imschnee #navi09 span, #imschnee #navi09 a, #toverland #navi09 span, #toverland #navi09 a, #brabbelbox #navi10 span, #gb #navi11 span, #impressum #navi12 span { background-color: #FADFEB; color: black; border-left-color: red; border-bottom: none; } #textbereich { background-color: #E7CBD7; min-height: 330px; padding: 20px 10px 20px 10px; margin-left: 150px; border-right: 1px solid #D4A1B7; } #fussbereich { clear: both; background-color: #E7CBD7; padding: 10px 20px 20px 20px; border-top: 1px solid #D4A1B7; } /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ AUSSEHEN DER LINKS IM TEXTBEREICH $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ #textbereich a { border-bottom: 1px dotted #8E727F; } #textbereich a:link, a:visited { color: #8E727F; } #textbereich a:hover, #textbereich a:focus { text-decoration: none; color: #FF0066; } #textbereich a:active { background-color: #FF0066; color: black; } /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ABWEICHENDE HYPERLINKSTYLES $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ /* DIE LINKS IM INFOBEREICH SIND GRAFIKEN DIESE BRAUCHEN KEINEN BORDER */ #infobereich #textbereich a { border: none; } #infobereich #textbereich a:link, a:visited { color: #8E727F; } #infobereich #textbereich a:hover, #infobereich #textbereich a:focus { text-decoration: none; color: #FF0066; } #infobereich #textbereich a:active { background-color: #FF0066; color: black; } #impressum #textbereich a { border: none;} #impressum #textbereich a:link, a:visited { color: #8E727F; } #impressum #textbereich a:hover, #impressum #textbereich a:focus { text-decoration: none; color: #FF0066; } #impressum #textbereich a:active { background-color: #FF0066; color: black; } #navibereich #werbeflaeche a { border: none; background-color: #D4A1B7; } #navibereich #werbeflaeche a:link, a:visited { border: none; } #navibereich #werbeflaeche a:hover, #navibereich #werbeflaeche a:focus { border: none; text-decoration: none; color: #FF0066; } /* #################################### ==========SONSTIGE STYLES=========== #################################### */ #krankenhaus #textbereich td, #einkaufen #textbereich td, #ereignisse #textbereich td { border: solid 1px #000000; border-collapse: collapse; } #brabbelbox #textbereich th { border: 3px solid #ea2c7d; border-collapse: collapse; } #brabbelbox #textbereich td { border: 3px solid #ea2c7d; border-collapse: collapse; padding: 2px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ==============================ENDE DES STYLESHEETS======================================== ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */