/* CSS Document */ /* Diese Website wurde © 2007/2008 von Designal! Konzeption + Realisation (www.designal.de) in Karlsruhe konzeptioniert, gestaltet und umgesetzt. Die Gestaltung und Umsetzung und alle Inhalte (CSS, MetaTags, Layout, Bilder, Grafiken, Farbgebung, Typografie, Texte, etc.) sind urheberrechtlich geschuetzt. Eine Nutzung jeglicher Daten dieser Daten ausserhalb der definierten Beauftragung ist nicht erlaubt und wird strafrechtlich verfolgt. Dieser Hinweis darf nicht entfernt werden. */ /* Allgemeine Element-Anweisungen */ @charset 'utf-8'; *{ margin:0; padding:0; } body { font-family: Futura, Arial, Helvetica, sans-serif; font-size: 100%; color: #666; background: #FFFFFF; } a { font-size: 100%; color: #F9F9FF; letter-spacing: 0.05em; margin:1em 0; padding:0;} a:link, a:visited {color: #666; text-decoration: none;} h1 { color: #999; letter-spacing: 0.1em; text-transform:lowercase; margin:1em 0; padding:0.3em; font: 15px Futura, Arial, Helvetica, Verdana;} p { font-size: 80%; color: #666; text-transform:lowercase; line-height:130%; margin:1em 0; padding:0.3em;} p a:hover, a:active {text-decoration: overline; color: #cc0033;} .petit{ font-size:80%; letter-spacing:0.1em;} .petitpetit{ font-size:70%;} .strongandred { color:#cc0033;} /* Rahmen */ #rahmen { text-align:center; width:800px; height:720px; margin:40px auto;} /* Kopf */ #kopf { float:left; width:762px; height:47px; text-align:left; margin:0; padding:0; font: 15px Futura, Helvetica, Verdana; color: #666666;} #kopf .activ {color: #cc0033; } /* Logo */ #logo { float:left; text-align:left; width:300px; margin:0; padding:0;} /* Menue */ #hauptmenue { float: right; text-align:right; width:400px; height:47px; margin:0; padding:0;} #hauptmenue ul { margin:8px;padding:0;} #hauptmenue li { display: inline; list-style: none; margin:0; padding:0; border:0;} #hauptmenue a, img{ margin:0; padding:0; border:0;} /* Hauptbereich */ #hauptbereich { float:left; width:740px; height:/*560*/600px; text-align:center; overflow: inherit; border:1px solid #999999; margin: 0; padding:10px;} #hauptbereich img {border:1px solid #999; margin:10px; padding:0; } #hauptbereich .bild1 {background:url(imgs/1_gallerie.jpg) no-repeat center center;} #hauptbereich .bild2 {background:url(imgs/1_aktuelles.jpg) no-repeat;} #intro { margin:0; padding:0;} #intro p { font: 15px/24px Futura, Arial, Helvetica, Verdana; text-align:justify; letter-spacing: 0.03em; width:400px; line-height: 28px; margin:0 auto;} #intro h1 { font: normal 15px/24px Futura, Arial, Helvetica, Verdana; color: #cc0033; letter-spacing: 0.05em;} /*#intro a:link, a:visited { color:#cc0033;}*/ #intro img { margin:/*5px */ 10px 10px 0 0; padding:0; border:0;} a { font-size: 100%; color: #F9F9FF; letter-spacing: 0.05em; margin:1em 0; padding:0;} a:link, a:visited {color: #666666; text-decoration: none;} a:hover, a:active {text-decoration: overline; color: #cc0033;} /* Inhalt */ #inhalt { float:left; width:720px; text-align:left; margin: 0; padding:10px;} /* Inhalt Links*/ #inleft { float:left; width:280px; text-align:right; height:570px; margin: 0; padding:10px; bottom: 0px;} #inleft img { border:1px solid #999999; margin: 5px; text-align:right; margin:0; padding:0;} #inleft p { font: 15px/24px Futura, Arial, Helvetica, Verdana; text-align:right; letter-spacing: 0.03em; padding:0; margin:0;} #inleft h1 { font: normal 17px/24px Futura, Arial, Helvetica, Verdana; color: #cc0033; letter-spacing: 0.05em;} /* Inhalt Rechts*/ #inright { float: right; width:420px; overflow:auto; height:570px; text-align:left; margin: 0; padding:10px;} #inright p { font: 15px/24px Futura, Arial, Helvetica, Verdana; letter-spacing: 0.03em;} #inright h1 { font: normal 17px/24px Futura, Arial, Helvetica, Verdana; color:#333333; letter-spacing: 0.05em;} #inright h2 { font: normal 15px/24px Futura, Arial, Helvetica, Verdana; color:#333333; letter-spacing: 0.05em;} #inright .news { padding:0 10px; margin:10px 0; background:#F5EFEB; border:1px #ccc solid; letter-spacing: 0.2em;} /* Fusszeile */ #fussbereich { float:left; width:762px;} #fussbereich p { font:9px Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC;} .unsichtbar { margin:-2500px; padding:0; width:20%;} /*Copyright og Gallery code You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated. Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information. /* needed for IE to make :active state work first time */ a, a:visited {color:#000;} /* common styling for all galleries */ a.gallery, a.gallery:visited {float:left; text-align:left; border:1px solid #ccc; width:/*40*/48px; height:48px; margin:5px; z-index:50; text-decoration:none;} a.slide_eaa {background:url(imgs/gallery/thumbs_einzel/e_thumb_01.jpg);} a.slide_ea {background:url(imgs/gallery/thumbs_einzel/e_thumb_02.jpg);} a.slide_eb {background:url(imgs/gallery/thumbs_einzel/e_thumb_03.jpg);} a.slide_ec {background:url(imgs/gallery/thumbs_einzel/e_thumb_04.jpg);} a.slide_ed {background:url(imgs/gallery/thumbs_einzel/e_thumb_05.jpg);} a.slide_ee {background:url(imgs/gallery/thumbs_einzel/e_thumb_06.jpg);} a.slide_ef {background:url(imgs/gallery/thumbs_einzel/e_thumb_07.jpg);} a.slide_eg {background:url(imgs/gallery/thumbs_einzel/e_thumb_08.jpg);} a.slide_eh {background:url(imgs/gallery/thumbs_einzel/e_thumb_09.jpg);} a.slide_ei {background:url(imgs/gallery/thumbs_einzel/e_thumb_10.jpg);} a.slide_ej {background:url(imgs/gallery/thumbs_einzel/e_thumb_11.jpg);} a.slide_ek {background:url(imgs/gallery/thumbs_einzel/e_thumb_12.jpg);} a.slide_el {background:url(imgs/gallery/thumbs_einzel/e_thumb_13.jpg);} a.slide_em {background:url(imgs/gallery/thumbs_einzel/e_thumb_14.jpg);} a.slide_en {background:url(imgs/gallery/thumbs_einzel/e_thumb_15.jpg);} a.slide_eo {background:url(imgs/gallery/thumbs_einzel/e_thumb_16.jpg);} a.slide_ep {background:url(imgs/gallery/thumbs_einzel/e_thumb_17.jpg);} a.slide_eq {background:url(imgs/gallery/thumbs_einzel/e_thumb_18.jpg);} a.slide_er {background:url(imgs/gallery/thumbs_einzel/e_thumb_19.jpg);} a.slide_es {background:url(imgs/gallery/thumbs_einzel/e_thumb_20.jpg);} a.slide_et {background:url(imgs/gallery/thumbs_einzel/e_thumb_21.jpg);} a.slide_eu {background:url(imgs/gallery/thumbs_einzel/e_thumb_22.jpg);} a.slide_ev {background:url(imgs/gallery/thumbs_einzel/e_thumb_23.jpg);} a.slide_ew {background:url(imgs/gallery/thumbs_einzel/e_thumb_24.jpg);} a.slide_ex {background:url(imgs/gallery/thumbs_einzel/e_thumb_25.jpg);} a.slide_ey {background:url(imgs/gallery/thumbs_einzel/e_thumb_26.jpg);} a.slide_ez {background:url(imgs/gallery/thumbs_einzel/e_thumb_27.jpg);} a.slide_ez1 {background:url(imgs/gallery/thumbs_einzel/e_thumb_28.jpg);} a.slide_ez2 {background:url(imgs/gallery/thumbs_einzel/e_thumb_29.jpg);} a.slide_ez3 {background:url(imgs/gallery/thumbs_einzel/e_thumb_30.jpg);} a.slide_ez4 {background:url(imgs/gallery/thumbs_einzel/e_thumb_31.jpg);} a.slide_ez5 {background:url(imgs/gallery/thumbs_einzel/e_thumb_32.jpg);} a.slide_ez6 {background:url(imgs/gallery/thumbs_einzel/e_thumb_33.jpg);} a.slide_ez7 {background:url(imgs/gallery/thumbs_einzel/e_thumb_34.jpg);} a.slide_saa {background:url(imgs/gallery/thumb_serie/s_thumb_01.jpg);} a.slide_sa {background:url(imgs/gallery/thumb_serie/s_thumb_02.jpg);} a.slide_sb {background:url(imgs/gallery/thumb_serie/s_thumb_03.jpg);} a.slide_sc {background:url(imgs/gallery/thumb_serie/s_thumb_04.jpg);} a.slide_sd {background:url(imgs/gallery/thumb_serie/s_thumb_05.jpg);} a.slide_se {background:url(imgs/gallery/thumb_serie/s_thumb_06.jpg);} a.slide_sf {background:url(imgs/gallery/thumb_serie/s_thumb_07.jpg);} a.slide_sg {background:url(imgs/gallery/thumb_serie/s_thumb_08.jpg);} a.slide_sh {background:url(imgs/gallery/thumb_serie/s_thumb_09.jpg);} a.slide_si {background:url(imgs/gallery/thumb_serie/s_thumb_10.jpg);} a.slide_sj {background:url(imgs/gallery/thumb_serie/s_thumb_11.jpg);} a.slide_sk {background:url(imgs/gallery/thumb_serie/s_thumb_12.jpg);} a.slide_sl {background:url(imgs/gallery/thumb_serie/s_thumb_13.jpg);} a.slide_sm {background:url(imgs/gallery/thumb_serie/s_thumb_14.jpg);} a.slide_sn {background:url(imgs/gallery/thumb_serie/s_thumb_15.jpg);} a.slide_so {background:url(imgs/gallery/thumb_serie/s_thumb_16.jpg);} a.slide_sp {background:url(imgs/gallery/thumb_serie/s_thumb_17.jpg);} a.slide_sq {background:url(imgs/gallery/thumb_serie/s_thumb_18.jpg);} a.slide_sr {background:url(imgs/gallery/thumb_serie/s_thumb_19.jpg);} a.slide_ss {background:url(imgs/gallery/thumb_serie/s_thumb_20.jpg);} a.slide_st {background:url(imgs/gallery/thumb_serie/s_thumb_21.jpg);} a.slide_su {background:url(imgs/gallery/thumb_serie/s_thumb_22.jpg);} a.slide_sv {background:url(imgs/gallery/thumb_serie/s_thumb_23.jpg);} a.slide_sw {background:url(imgs/gallery/thumb_serie/s_thumb_24.jpg);} a.slide_sx {background:url(imgs/gallery/thumb_serie/s_thumb_25.jpg);} a.slide_sy {background:url(imgs/gallery/thumb_serie/s_thumb_26.jpg);} a.slide_sz {background:url(imgs/gallery/thumb_serie/s_thumb_27.jpg);} a.slide_sz1 {background:url(imgs/gallery/thumb_serie/s_thumb_28.jpg);} a.slide_sz2 {background:url(imgs/gallery/thumb_serie/s_thumb_29.jpg);} a.slide_sz3 {background:url(imgs/gallery/thumb_serie/s_thumb_30.jpg);} a.slide_sz4 {background:url(imgs/gallery/thumb_serie/s_thumb_31.jpg);} a.slide_sz5 {background:url(imgs/gallery/thumb_serie/s_thumb_32.jpg);} a.slide_sz6 {background:url(imgs/gallery/thumb_serie/s_thumb_33.jpg);} a.slide_sz7 {background:url(imgs/gallery/thumb_serie/s_thumb_34.jpg);} a.gallery em, a.gallery span {display:none; text-decoration:none;} a.gallery:hover {border:1px solid #fff;} /* styling for LEFT gallery */ #container_left {position:relative; text-align:left; text-transform:lowercase; width:700px; height:480px; margin:0; padding:0;} #container_left img {border:1px solid #FFF; margin:0; padding:0; } #container_left .thumbs {width:280px; height:280px; left:0; bottom:0;} #container_left a.gallery:hover span {display:block; position:absolute; width:260px; height:50px; top:260px; left:0px; padding:5px; color:#666666; z-index:100; font: 11px Verdana, Futura, Helvetica, Arial; text-decoration:none;} #container_left a.gallery:hover span:first-line {font: 11px Verdana, Futura, Helvetica, Arial; text-decoration:none;} #container_left a.gallery:active, #container_left a.gallery:focus {border:1px solid #FFF; text-decoration:none;} #container_left a.gallery:active em, #container_left a.gallery:focus em {display:block; position:absolute; width:420px; height:420px; top:0px; left:300px; padding:5px; color:#CCC; border:1px solid #fff; z-index:50; text-decoration:none;} #container_left a.gallery:active img {text-align:right; margin:0; padding:0; border:1px solid #FFF;} #container_left h1 {clear:both; margin:0; padding-top:0; padding-left:320px; width:400px; text-align:center; font-family: Futura, Arial, Helvetica, Verdana; font-size:32px; letter-spacing:0.02em; font-weight:normal; color:#E1E1E1;} #container_left h1 em {font-size:0.6em; color:#000;} .weite { letter-spacing: 0.2em; }