/* ########## # FARBEN # ########## Hintergrund: #FFF Dunkles Weiß: #FAFAFA Font: #111; Dunkles Violett: #6A2448 Basis-Violett: #972056 Schwächeres Violett: #99456B Dunkles Grau: #383437 Footergrau: #403A3A Helles Grau: #CCC */ /* Basics */ body { background:#403A3A; } strong { font-variant:small-caps; font-size:1.15em; font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; letter-spacing:0.1em; font-weight:bold; margin:0 0.1em; } em { font-style:italic; font-size:1.1em; font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; } hr { border:none; border-bottom:1px solid #CCC; color:#CCC; } /* Layout */ #content {color:#111; padding:30px 0 50px 0; background:whitesmoke url(img/scene.jpg) top center no-repeat; } #headerbg { height:200px; background:url(img/header-bg_web.jpg) top left repeat-x; } #header { position:relative; height:200px; width:870px; background:url(img/header.jpg) top left no-repeat; margin:0 auto; } .pagewidth { background: white; width:62%; margin:0 auto; padding:5px 15px 5px 15px; border:1px solid #CCC; border-top:3px solid #CCC; border-left:3px solid #CCC; } #content .pagewidth { position:relative; } .pagewidth2 { width:62%; margin:0 auto; } #content .pagewidth { position:relative; } /* Right sidebar */ #extras { position:fixed; top:24%; left:84%; padding:5px; width:15%;} /* Left sidebar */ #extras2 { position:fixed; top:24%; left:1%; padding:5px; width:14%;} /* Shop Left sidebar */ #shopright { position:fixed; top:29%; left:1%; padding:5px; width:14%;} /* Shop Right sidebar */ #shopleft { position:fixed; top:25%; left:84%; padding:5px; width:14%;} /* Orderman Cert */ #extras3 { position:fixed; top:24%; left:4% } /* Micros Cert */ #extras4 { position:fixed; top:24%; left:87% } /* Logo-Headline */ h1 a { display:block; float:left; width:352px; height:200px; background:url(img/header-kasse-01.jpg) 174px 0px no-repeat; } h1 a span { display:block; width:0; height:0; overflow:hidden; } /* ################# ## BEGINN NAVI ## ################# */ /* Navi allgemein */ #navi { position:absolute; bottom:34px; right:-48px; } #navi li.active > a { font-style:italic; } /* Navi Level 1 */ #navi li { float:left; position:relative; } #navi li a { display:block; width:96px; height:85px; background:url(img/navi.jpg); margin:0 0 8px 0; } /* Hauptnavigation: Startseite */ #navi #navi1 a { width:80px; background-position:0px 0px; } #navi #navi1 a span { display:block; height:0; width:0; overflow:hidden; } #navi #navi1.active a { background-position:0px 88px; } #navi #navi1:hover a { background-position:0px -89px; } /* Hauptnavigation: Produkte */ #navi #navi2 a { width:80px; background-position:-80px 0px; } #navi #navi2 a span { display:block; height:0; width:0; overflow:hidden; } #navi #navi2.active a { background-position:-80px 88px; } #navi #navi2:hover a { background-position:-80px -89px; } /* Hauptnavigation: Service */ #navi #navi5 a { width:72px; background-position:-160px 0px; } #navi #navi5 a span { display:block; height:0; width:0; overflow:hidden; } #navi #navi5.active a { background-position:-160px 88px; } #navi #navi5:hover a { background-position:-160px -89px; } /* Hauptnavigation: Referenzen */ #navi #navi6 a { width:88px; background-position:-232px 0px; } #navi #navi6 a span { display:block; height:0; width:0; overflow:hidden; } #navi #navi6.active a { background-position:-232px 88px; } #navi #navi6:hover a { background-position:-232px -89px; } /* Hauptnavigation: Kontakt */ #navi #navi7 a { width:72px; background-position:-320px 0px; } #navi #navi7 a span { display:block; height:0; width:0; overflow:hidden; } #navi #navi7.active a { background-position:-320px 88px; } #navi #navi7:hover a { background-position:-320px -89px; } /* Hauptnavigation: AGB */ #navi #navi14 a { width:72px; background-position:-392px 0px; } #navi #navi14 a span { display:block; height:0; width:0; overflow:hidden; } #navi #navi14.active a { background-position:-392px 88px; } #navi #navi14:hover a { background-position:-392px -89px; } /* Hauptnavigation: Shop */ #navi #navi234 a { width:85px; background-position:-464px 0px; } #navi #navi234 a span { display:block; height:0; width:0; overflow:hidden; } #navi #navi234.active a { background-position:-464px 88px; } #navi #navi234:hover a { background-position:-464px -88px; } /* Das ist ein uneleganter Fix für alle Unter-Navis, die sonst unter den Styles der Hauptpunkte "leiden" würden. Nicht schön, aber es fluppt. */ #navi #navi1 ul a, #navi #navi2 ul a, #navi #navi5 ul a, #navi #navi6 ul a, #navi #navi7 ul a, #navi #navi14 ul a, #navi #navi234 ul a, #navi #navi1:active ul a, #navi #navi2:active ul a, #navi #navi5:active ul a, #navi #navi6:active ul a, #navi #navi7:active ul a, #navi #navi14:active ul a, #navi #navi234:active ul a, #navi #navi1:hover ul a, #navi #navi2:hover ul a, #navi #navi5:hover ul a, #navi #navi6:hover ul a, #navi #navi7:hover ul a, #navi #navi14:hover ul a, #navi #navi234:hover ul a { width:154px; background-position:top left; background-repeat:repeat-y; } #navi #navi1 ul a span, #navi #navi2 ul a span, #navi #navi5 ul a span, #navi #navi6 ul a span, #navi #navi7 ul a span, #navi #navi234 ul a span { display:inline; width:0; height:0; overflow:auto; } /* Navi Level 2 */ #navi li ul { display:none; position:absolute; top:96px; left:0; z-index:1; } #navi li:hover ul { display:block; } #navi li ul li { float:none; margin:0; } #navi li ul li a { height:auto; display:block; width:154px; background:url(img/menu-bg.png); text-align:left; margin:0; padding:8px 12px; } #navi li ul li.menu-bot { height:12px; background:url(img/menu-bot.png) bottom left no-repeat; } /*Schriftbild der Navis ab Level 2*/ #navi li ul a { text-decoration:none; font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; font-weight:bold; font-size:14px; letter-spacing:0.05em } #navi li ul a:link { color:#000; } #navi li ul a:visited { color:#1A1719; } #navi li ul a:hover { color:#972056; } #navi li ul a:active { color:#972056; } #navi li ul a:focus span { outline:1px dotted #CCC; } /* Navi Level 3 */ #navi li ul li ul, #navi li:hover ul li ul { display:none; position:absolute; top:0; left:154px; z-index:2; } #navi li ul li:hover ul { display:block; } #navi li ul li ul li.menu-top { height:12px; background:url(img/menu-top.png) top left no-repeat; } #navi li ul li ul li a { width:154px; /* 178px - 2x12px Padding */ } /* ############### ## ENDE NAVI ## ############### */ /* Footer */ #footer-wrapper { background:#403A3A url(img/footer-bg.jpg) top left repeat-x; } #footer { font-family:Verdana, Geneva, Arial, sans-serif; font-size:12px; text-align:right; padding:40px 0 0 0; } #footer li { display:inline; margin:0 0 0 8px; position:relative; top:24px; } #footer li a { text-decoration:none; font-weight:bold; } #footer li a:link { color:#FFF; border-bottom:2px solid #972056; } #footer li a:visited { color:#EEE; border-bottom:2px solid #99456B; } #footer li a:hover { color:#FFF; border-bottom:2px solid #403A3A; } #footer li a:active { color:#972056; border-bottom:2px solid #403A3A; outline:1px dotted #CCC; } /* Kontaktbox im Footer */ #footer-contact { float:left; width:336px; background:url(img/footerbox.png); font-size:12px; margin:-32px 0 0 -16px; } #footer-contact p { font-family:Verdana, Geneva, Arial, sans-serif; color:#111; text-align:left; line-height:1.65em; word-spacing:0.1em; margin:16px; } #footer-contact a { text-decoration:none; font-weight:bold; } #footer-contact a:link { color:#000; border-bottom:2px solid #972056; } #footer-contact a:visited { color:#222; border-bottom:2px solid #99456B; } #footer-contact a:hover { color:#972056; border-bottom:2px solid #FFF; } #footer-contact a:active { color:#000; border-bottom:2px solid #FFF; } #footer-contact a:focus { outline:1px dotted #CCC; } /* Textgestaltung */ #content, #content textarea { text-align:left; font-family:Verdana, Geneva, Arial, sans-serif; color:#111; font-size:13px; } #content p, #content ul, #content ol, #content div.errors { line-height:1.65em; word-spacing:0.1em; margin:1em 0; } #content ul { list-style-type:none; } #content ul li { background:url(img/icons/bullet.gif) center left no-repeat; margin:0.25em 0 0 0.5em; padding:0 0 0 2em; } /* Textgestaltung EXTRAS*/ #extras, #extras textarea { text-align:right; font-family:Verdana, Geneva, Arial, sans-serif; color:#111; font-size:10px; } #extras p, #extras ul, #extras ol, #extras div.errors { line-height:1.65em; word-spacing:0.1em; margin:8px; } #extras ul { list-style-type:none; } #extras ul li { background:url(img/icons/bullet.gif) center left no-repeat; margin:0.25em 0 0 0.5em; padding:0 0 0 2em; } /* Textgestaltung EXTRAS2*/ #extras2, #extras2 textarea { text-align:left; font-family:Verdana, Geneva, Arial, sans-serif; color:#111; font-size:10px; } #extras2 p, #extras2 ul, #extras2 ol, #extras2 div.errors { line-height:1.65em; word-spacing:0.1em; margin: 8px; } #extras2 ul { list-style-type:none; } #extras2 ul li { background:url(img/icons/bullet.gif) center left no-repeat; margin:0.25em 0 0 0.5em; padding:0 0 0 2em; } /* Textgestaltung shopleft*/ #shopleft, #shopleft textarea { text-align:left; font-family:Verdana, Geneva, Arial, sans-serif; color:#111; font-size:10px; } #shopleft p, #shopleft ul, #shopleft ol, #shopleft div.errors { line-height:1.65em; word-spacing:0.1em; margin: 8px; } #shopleft ul { list-style-type:none; } #shopleft ul li { background:url(img/icons/bullet.gif) center left no-repeat; margin:0.25em 0 0 0.5em; padding:0 0 0 2em; } /* Textgestaltung shopright*/ #shopright, #shopright textarea { text-align:left; font-family:Verdana, Geneva, Arial, sans-serif; color:#111; font-size:10px; } #shopright p, #shopright ul, #extras2 ol, #extras2 div.errors { line-height:1.65em; word-spacing:0.1em; margin: 8px; } #shopright ul { list-style-type:none; } #shopright ul li { background:url(img/icons/bullet.gif) center left no-repeat; margin:0.25em 0 0 0.5em; padding:0 0 0 2em; } /* Bildboxen! */ div.bb-links { float:left; margin-right:24px; } div.bb-rechts { float:right; margin-left:24px; } div.bildbox { width:336px; margin-top:16px; margin-bottom:16px; } div.bildbox div.head { height:8px; background:url(img/bildbox-head.jpg) bottom left no-repeat; } div.bildbox div.foot { height:12px; background:url(img/bildbox-foot.jpg) top left no-repeat; } div.bildbox div.content { background:url(img/bildbox-bg.jpg); text-align:center; padding:8px; } /* Fehlermeldungen */ #content div.errors strong { color:#CC0000; } /* Headlines in der Page */ #content h2 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; font-weight:bold; font-size:2em; letter-spacing:-0.025em; margin:0.5em 0 1em 0; } #content h3 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#484347; font-size:1.6em; border-bottom:1px solid #CCC; word-spacing:0.1em; margin:2em 0 0 0; padding-bottom:0.5em; clear:both; } #content h3 a { font-weight:normal; } #content h4 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#000; font-size:1.35em; margin:1em 0 0 0; } #content h4 a { font-weight:normal; } /* Headlines in der Page EXTRAS */ #extras h2 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; font-weight:bold; font-size:2em; letter-spacing:-0.025em; margin:0.5em 0 1em 0; } #extras h3 { text-align:right; font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#484347; font-size:1.6em; border-bottom:1px solid #CCC; word-spacing:0.1em; margin:2em 0 0 0; padding-bottom:0.5em; clear:both; } #extras h3 a { font-weight:normal; } #extras h4 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#000; font-size:1.35em; margin:1em 0 0 0; } #extras h4 a { font-weight:normal; } /* Headlines in der Page EXTRAS2 */ #extras2 h2 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; font-weight:bold; font-size:2em; letter-spacing:-0.025em; margin:0.5em 0 1em 0; } #extras2 h3 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#484347; font-size:1.6em; border-bottom:1px solid #CCC; word-spacing:0.1em; margin:2em 0 0 0; padding-bottom:0.5em; clear:both; } #extras2 h3 a { font-weight:normal; } #extras2 h4 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#000; font-size:1.35em; margin:1em 0 0 0; } #extras2 h4 a { font-weight:normal; } /* Headlines in der Page shopleft */ #shopleft h2 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; font-weight:bold; font-size:2em; letter-spacing:-0.025em; margin:0.5em 0 1em 0; } #shopleft h3 { text-align:right; font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#484347; font-size:1.6em; border-bottom:1px solid #CCC; word-spacing:0.1em; margin:2em 0 0 0; padding-bottom:0.5em; clear:both; } #shopleft h3 a { font-weight:normal; } #shopleft h4 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#000; font-size:1.35em; margin:1em 0 0 0; } #shopleft h4 a { font-weight:normal; } /* Headlines in der Page shopright*/ #shopright h2 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; font-weight:bold; font-size:2em; letter-spacing:-0.025em; margin:0.5em 0 1em 0; } #shopright h3 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#484347; font-size:1.6em; border-bottom:1px solid #CCC; word-spacing:0.1em; margin:2em 0 0 0; padding-bottom:0.5em; clear:both; } #shopright h3 a { font-weight:normal; } #shopright h4 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; color:#000; font-size:1.35em; margin:1em 0 0 0; } #shopright h4 a { font-weight:normal; } /* Links in der Page */ #content a { text-decoration:none; font-weight:normal; } /* #content a:link { color:#000; border-bottom:2px solid #972056; } */ #content a:link { color:#000; border-bottom:2px solid #972056; } #content a:visited { color:#222; border-bottom:2px solid #99456B; } #content a:hover { color:#972056; border-bottom:2px solid #FFF; font-weight:bold; } #content a:active { color:#000; border-bottom:2px solid #FFF; } /* #content a:focus { outline:2px dotted #CCC; } */ #content a:focus { color:#972056; border-bottom:2px solid #FFF; font-weight:bold; } #content div.bildbox a { border:none; } /* Links in der Page extras*/ #extras a { text-decoration:none; font-weight:normal; } #extras a:link { color:#000; border-bottom:0px solid lightgrey; } #extras a:visited { color:#000; border-bottom:0px solid lightgrey; } #extras a:hover { color:#000; border-bottom:0px solid #FFF; } #extras a:active { color:#000; border-bottom:0px solid #FFF; } #extras a:focus { outline:1px dotted #CCC; } #extras div.bildbox a { border:none; } /* Links in der Page extras2*/ #extras2 a { text-decoration:none; font-weight:normal; } #extras2 a:link { color:#000; border-bottom:0px solid lightgrey; } #extras2 a:visited { color:#000; border-bottom:0px solid lightgrey; } #extras2 a:hover { color:#000; border-bottom:0px solid #FFF; } #extras2 a:active { color:#000; border-bottom:0px solid #FFF; } #extras2 a:focus { outline:1px dotted #CCC; } #extras2 div.bildbox a { border:none; } /* Links in der Page shopleft*/ #shopleft a { text-decoration:none; font-weight:normal; } #shopleft a:link { color:#000; border-bottom:0px solid lightgrey; } #shopleft a:visited { color:#000; border-bottom:0px solid lightgrey; } #shopleft a:hover { color:#000; border-bottom:0px solid #FFF; } #shopleft a:active { color:#000; border-bottom:0px solid #FFF; } #shopleft a:focus { outline:1px dotted #CCC; } #shopleft div.bildbox a { border:none; } /* Links in der Page shopright*/ #shopright a { text-decoration:none; font-weight:normal; } #shopright a:link { color:#000; border-bottom:0px solid lightgrey; } #shopright a:visited { color:#000; border-bottom:0px solid lightgrey; } #shopright a:hover { color:#000; border-bottom:0px solid #FFF; } #shopright a:active { color:#000; border-bottom:0px solid #FFF; } #shopright a:focus { outline:1px dotted #CCC; } #shopright div.bildbox a { border:none; } /* Formulare in Fieldsets */ #content fieldset label { display:block; clear:both; margin:4px 0 2px 0; } #content fieldset input, #content fieldset select, #content fieldset textarea { width:100%; font-size:1em; border:1px solid #403A3A; color:#383437; background:#FFF; padding:6px 3px; } #content fieldset input:hover, #content fieldset select:hover, #content fieldset textarea:hover { color:#000; border-color:#000; } #content fieldset input:focus, #content fieldset select:focus, #content fieldset textarea:focus { color:#000; border:2px solid #972056; padding:5px 2px; } #content fieldset input.formsubmit { border-color:#6A2448; background:#6A2448; color:#FFF; font-weight:bold; } #content fieldset input.formsubmit:hover, #content fieldset input.formsubmit:focus { border-color:#972056; background:#972056; color:#FFF; font-weight:bold; } /* Kontaktcontainer */ #kontaktcontainer { float:right; width:368px; margin:32px 0 32px 64px; } #kontaktcontainer input, #kontaktcontainer select, #kontaktcontainer textarea, #kontaktcontainer label, #kontaktcontainer p { font-size:11px; } #kontaktcontainer div.head { height:8px; background:url(img/contentbox-head.jpg) bottom left no-repeat; } #kontaktcontainer div.foot { height:12px; background:url(img/contentbox-foot.jpg) top left no-repeat; } #kontaktcontainer div.content { background:url(img/contentbox-bg.jpg) top left repeat-y; padding:12px 24px; } #kontaktcontainer div.content h4 { margin-top:0; } /* Kopfzeile der News */ #content p.newsheadline { font-style:italic; font-size:1.25em; font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; margin:-1.5em 0 2em 0; } #content div.news_item p.newsheadline { font-style:italic; font-size:1em; font-family:"Trebuchet MS", Verdana, Geneva, Arial, sans-serif; margin:0.5em 0 1em 0; } /* Handliche Tools */ .right { text-align:right; } .small { font-size:0.85em; } .icon { position:relative; top:1px; left:2px; } .fl { float:left; } .fr { float:right; } .clear { clear:both; } div.fifty { width:48%; }