/* . Project: Website Creativ-Studio Christiane Kaus . File: ck_basic.css . @author Christiane Kaus . Copyright (c) 2006-2009 christiane Kaus . Project owner: . Creativ-Studio Christiane Kaus, 47198 Duisburg, Germany . http://www.kaus-online.de/ */ * { border: 0 solid; margin: 0; padding: 0; } html { height: 100%; margin-bottom: 1px; } body { font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Verdana, Arial, sans-serif; background: #ddd url(../images/body_bgh.jpg) left top repeat-y; color: #303030; } #index { background: #000 url(../images/body_bg.jpg) left top repeat-y; } b, strong { font-weight: bold; } html\:abbr, abbr, acronym, .hilfe { cursor: help; border-bottom: 1px dashed #999; } a img { color: inherit; background: transparent; } h1, h2, h3, h4 { font-family: "Hoefler Text", Baskerville, Garamond, "Palatino Linotype", Georgia, "Times New Roman", serif; text-transform: lowercase; font-weight: bold; } h1 { font-size: 1.8em; color: #a3b509; line-height: 1.3em; } h2 { font-size: 1.75em; color: #303030; line-height: 1.3em; letter-spacing: .125em;} h3 { font-size: 1.65em; color: #303030; line-height: 1.3em; } h4 { font-size: 1.55em; color: #303030; line-height: 1.1em; } p, a, label, li, .vcard { font-size: 1em; text-transform: lowercase; line-height: 1.3em; text-align:justify;} p a, h1 a, h2 a, h3 a, li a, li p, li li, li h4, li pre, .vcard a { font-size: 100%; } a, a:link, a:visited { text-decoration: underline; color: #303030; background: transparent; } a:hover, a:active { text-decoration: underline; color: #333; background: #e3e3e8; } a:focus { color: #000; background: #e3e3e8; } hr { color: #ccc; border: 0 none; border-top: 1px solid #ccc; } blockquote { background-image:url(../images/bq.jpg); background-position:top; background-repeat:repeat-x; padding:5px 35px 5px 5px; border:1px solid #eee; } /* Kopfbereich mit Logo */ #headercon { width: 100%; height: 135px; color: #303030; background:#eef0f2; border-bottom: 15px solid #d4d3d8;} #header { width:100%; height: 35px; background:transparent; padding-top:100px;} #header h1 { line-height: normal; font-size: 1.7em; padding: 0px 10px 0px 15px; color: #303030; font-weight: normal; } #header p { background:transparent; width: 450px; float: right; text-align: right; color: #6b6b6b; margin: 0; font-size: 0.75em; line-height: 1.2em; padding: 0 10px 5px; } #ultratop {position: absolute; top: 0; left: 320px; width: 505px; z-index: 10; font-size: 90%; color: #6b6b6b; background-color:transparent; } #ultratop li { list-style: none; display:inline; background: transparent; } #ultratop a, #ultratop a:link, #ultratop a:visited { display: block; float: right; color: #9999A3; background: transparent; text-decoration: none; padding: 2px 0px 6px 5px; border: 0 none; } #ultratop a:hover, #ultratop a:active, #ultratop a:focus { color:#303030; background:#d1d1d3; } #ultratop a:link.on, #ultratop a:visited.on { color: #303030; font-weight: bold; } #cklogo { position: absolute; left: 8px; top:0px; width: 80px; height: 60px; float: left; padding: 0px; margin: 15px 10px 0px 10px; } #cklogo img { padding: 0px; } #cklogo a { margin: 0; padding: 0; border: 0 none; } #cklogo a:hover { background: transparent; } #contentheader { position: absolute; left: 0; top: 150px; width: 100%; height: 260px; background: #cfe708; border-bottom: 4px ridge #a10cae; } #ref #contentheader { background:url(../images/spuren/spuren.jpg) left top no-repeat; background-color: #5b5b5b;} #family #contentheader { background:url(../images/familiaeres/familiaeres.jpg) left top no-repeat; background-color: #615e59; } #imp #contentheader { background:url(../images/impressum/kroko.jpg) left top no-repeat; background-color: #d0e30e; } #kontakt #contentheader { background:url(../images/kontakt/kontakt.jpg) left top no-repeat; background-color: #cde708; } #csslayout #contentheader { background:url(../images/css/liegestuhl.gif) left top no-repeat; background-color: #cde708; } #java #contentheader, #kunsts #contentheader { display:none;} #java #header, #kunsts #header {border-bottom: 4px ridge #a10cae; height: 50px;} #java #mainnav, #java #content, #kunsts #mainnav, #kunsts #content { top: 160px; } #kunsts #content p { padding-top: 20px; } #index #sitebox{ width: 100%; position:relative; height: 400px; border-bottom: thick ridge #a10cae; min-width: 930px;} #index #footerleft { text-align: left; font-size: 0.9em; height: 200px; font-size: 90%; padding: 1px 0 1px 5px; color: #ddd; margin: 5px; } #index #footerleft a { color: #ddd; } #index #footerleft a:hover { color: #000000; background-color: #e3e3e8; text-decoration: none; } /* Index Menubilder */ #index #menugalerie1, #index #menugalerie2, #index #menugalerie3, #index #menugalerie4, #index #menugalerie5 {position: absolute; height: 348px; width: 200px; color: #ddd; z-index: 1; } #index #menugalerie1 a, #index #menugalerie2 a, #index #menugalerie4 a, #index #menugalerie5 a { display: block; height: 348px; width: 200px; text-decoration: none; text-transform: lowercase;} #index #menugalerie3 a { display: block; height: 360px; width: 200px; text-decoration: none; text-transform: lowercase;} #index #menugalerie1 a span.web { position: absolute; top: -35px; left: 0; font-size: 0.95em; color: #ddd; } #index #menugalerie2 a span.kunst { position: absolute; top: -10px; left: 0; font-size: 0.95em; color: #ddd; } #index #menugalerie3 a span.java { position: absolute; top: -40px; left: 0; font-size: 0.95em; color: #ddd; } #index #menugalerie4 a span.fam { position: absolute; top: -40px; left: 0; font-size: 0.95em; color: #ddd; } #index #menugalerie5 a span.foto { position: absolute; top: -40px; left: 0; font-size: 0.95em; color: #ddd; } #index #menugalerie1 a:hover span.web, #index #menugalerie2 a:hover span.kunst, #index #menugalerie3 a:hover span.java, #index #menugalerie4 a:hover span.fam, #index #menugalerie5 a:hover span.foto { color: #ddd; background: transparent; } #index #menugalerie1 a span.web2, #index #menugalerie2 a span.kunst2, #index #menugalerie3 a span.java2, #index #menugalerie4 a span.fam2, #index #menugalerie5 a span.foto2 { display: none; } #index #menugalerie1 a:hover span.web2, #index #menugalerie2 a:hover span.kunst2 { position: absolute; top: -160px; left: 0px; display: block; height: 150px; width: 200px; font-size: 0.85em; line-height: 130%;color: #ddd; background: transparent; } #index #menugalerie4 a:hover span.fam2 { position: absolute; top: -220px; left: 0px; display: block; height: 150px; width: 220px; font-size: 0.85em; line-height: 130%; color: #ddd; background: transparent; } #index #menugalerie3 a:hover span.java2 { position: absolute; top: -210px; left: 0px; display: block; height: 150px; width: 220px; font-size: 0.85em; line-height: 130%; color: #ddd; background: transparent; } #index #menugalerie5 a:hover span.foto2 { position: absolute; top: -235px; left: 0px; display: block; height: 150px; width: 150px; font-size: 0.9em; line-height: 130%; color: #ddd; background: transparent; } #index #menugalerie1, #index #menugalerie1 a:active, #index #menugalerie1 a:visited { height: 224px; background: transparent url(../images/index/menu1a.jpg) no-repeat; top: 175px; left: 15%; } #index #menugalerie1 a:hover { background: transparent url(../images/index/menu1.jpg) no-repeat; width: 256px; } #index #menugalerie2, #index #menugalerie2 a:active, #index #menugalerie2 a:visited { height: 224px; background: transparent url(../images/index/menu2a.png) no-repeat; top: 175px; left: 31%; } #index #menugalerie2 a:hover { background: url(../images/index/menu2.png) no-repeat; width: 256px; } #index #menugalerie3, #index #menugalerie3 a:active, #index #menugalerie3 a:visited { height: 448px; background: transparent url(../images/index/menu3a.jpg) no-repeat; top: 221px; left: 47%; } #index #menugalerie3 a:hover { background: transparent url(../images/index/menu3a.png) no-repeat; width: 256px; } #index #menugalerie4, #index #menugalerie4 a:active, #index #menugalerie4 a:visited { height: 224px; background: transparent url(../images/index/menu4a.jpg) no-repeat; top: 235px; left: 63%; } #index #menugalerie4 a:hover { background: url(../images/index/menu4.jpg) no-repeat; width: 256px; } #index #menugalerie5, #index #menugalerie5 a:active, #index #menugalerie5 a:visited { height: 224px; background: transparent url(../images/index/menu5a.jpg) no-repeat; top: 250px; left: 79%; } #index #menugalerie5 a:hover { background: url(../images/index/menu5.jpg) no-repeat; width: 256px; } #index #footerleft p {font-size:0.95em;} #csslayout #leftnav, #kontakt #leftnav, #ref #leftnav, #imp #leftnav, #family #leftnav { position: absolute; display: block; left: 0; top: 413px; background: transparent; width: 200px; padding: 0px 0px 10px 0px; z-index: 2; } #leftnav { position: absolute; display: block; left: 0; top: 154px; background: transparent; width: 200px; padding: 0px 0px 10px 0px; z-index: 2; } #navigation {position: absolute; top: 38px; left: 0; width: 200px; color: #303030;} #mainnav { margin: 5px 0 0 0; padding-bottom: 1px; } #mainnav ul { list-style: none; margin: 0px 0px 120px 0px; padding: 0; } #mainnav li { display: inline; margin-bottom: 4px; font-size: 102%;} #mainnav a, #mainnav li.an { font-weight: bold; line-height: 18px; text-decoration: none; color: #303030; display: block; margin: 6px 0; padding: 2px 0px 6px 10px; background: transparent; } #mainnav a {border-left: 4px solid #cccccc;} #mainnav a:link, #mainnav a:visited {color: #303030; } #mainnav a:hover { color: #a10cae; text-decoration: underline; border-left: 4px solid #a10cae; } #mainnav a:active, #mainnav a:focus { color: #000; border-left: 4px solid #CFE708;} #mainnav li.an, #mainnav a:link.an, #mainnav a:visited.an {color: #000; border-left: 4px solid #CFE708; } #mainnav h2 { letter-spacing: 0.3em; color: #303030; font-size: 1.0em; margin: 0 0 0.5em; } #content { position: absolute; width: 82%; min-width: 850px; left: 150px; top: 415px; color: #303030; background-color: transparent; padding: 30px 20px 30px 10px; z-index: 4; } #content p { padding: 10px 0px 20px 0px; word-spacing:2px; } #content p.image { float: right; padding: 10px 40px 20px 0; border: none; } #content h1 { color: #303030; font-weight: normal; padding: 3px 0 20px 0; } #content h1 a {text-decoration: none;} #content h2 { color: #303030; font-weight: normal; padding: 0 10px 0 0;} #content h3, #content h4 { padding: 20px 0 5px 0; } #content p.footer { border-top: 1px solid #dcdcdc; font-size: 88%; margin-top: 20px; padding: 10px 0 20px 20px; text-align: right; } #content a.extern, #content a:visited.extern { display: inline; font-weight: normal; text-decoration: underline; color: #303030; } #content a:hover.extern { text-decoration: underline; color: #a10cae; } #content a.extern:active, #content a.extern:focus { color: #000; } #content a.extern:focus { color: #fff; background-color: #a10cae; } #content li a.extern, #content li a:hover.extern { display: block; } #content li p { line-height:1.8em; margin:0; padding:0; } #content li a { display:block; line-height:1.8em; color:#303030;} #content ul { margin:10px 5px 10px 10px; } #content ul li { line-height:1.8em; } #content ul.ref-list { list-style:none; margin:0px 0px 10px 0px; padding:0px; } #content ul.ref-list p { margin:0px; padding:0px; line-height: normal; } #content .ref-list li { margin: 12px 0px; height:144px; list-style:none; } #content .ref-list li a:hover { background:transparent; color:#a10cae; } #content .ref-list h1 {line-height: normal; padding-bottom:0px; margin-bottom:0px; } #content .ref-list img { padding: 10px; float: left; margin-right: 10px; } #content .ref-list li a img {border: 2px solid #bfbfbf; background:transparent; } #content .ref-list li a:hover img { border: 2px solid #a10cae; background: #999; } #content .fotobox { display: block; width: 28%; min-width: 290px; float: right; margin: 0 0 20px 30px; padding: 0 10px 20px 20px; color: #000; background: #ccc; clear: right; } #content .fotobox h1, #content .fotobox h2 { color: #383838; padding: 15px 5px 3px 5px; border-bottom: 4px ridge #a10cae; margin-bottom: 10px; clear: both; font-size: 1.2em; font-weight: bold; line-height: 1.6em; } #content .fotobox h3, #content .fotobox h2 { padding: 10px 5px 0 5px; font-size: 90%; } #content .fotobox p { line-height: 1.5em; color: #383838; padding: 5px; margin: 0; } #content .fotobox p a { font-weight: normal; } #content .fotobox ul { padding: 10px 0; } #content .fotobox li a:link, #content .fotobox li a:visited { color: #383838; text-decoration: none; background-position: 0 10px;/*wichtig*/ } #content .fotobox li a:hover, #content .fotobox li.on p { color: #383838; background-position: 0 -10px;/*wichtig*/ } #content .fotobox li a:active, #content .fotobox li a:focus { color: #000; background-position: 0 -10px; } #content .fotobox img.thumbs { border: 2px solid #bfbfbf; float: left; margin: 0 10px 10px 0; padding:4px; background:#bfbfbf; } #content .fotobox a:hover img.thumbs { border: 2px solid #a10cae; background: #888; } #content .fotobox p a { font-weight: normal; line-height: 1.3em;} #content .fotobox ul.gal-links { padding: 10px 0; } #content .fotobox ul.gal-links li a { font-weight: normal; line-height: 1.1em; text-decoration: none; color: #303030; display: block; margin: 6px 0; padding: 2px 0px 6px 10px;} #content .fotobox ul.gal-links li { list-style-type: none; } #content .fotobox ul.gal-links li a:link, #content .fotobox ul.gal-links li a:visited { color: #303030; text-decoration: underline; border: 2px solid #bfbfbf; padding:5px 20px 5px 6px; margin-left:-10px; margin-right:5px; background:#ccc; text-decoration: none; } #content .fotobox ul.gal-links li a:hover { background:#888; color: #000; border: 2px solid #a10cae; } #content .fotobox ul.gal-links li a:active, #content .fotobox ul.gal-links li a:focus { color: #303030; text-decoration: underline; border: 2px solid #cfe708; } ul#fgal { margin: 0 0 20px 0; clear: both; } #fgal li { float: left; display: block; } #content .fotobox a { color: #383838; line-height: 1.8em; display: block; padding-left: 20px; text-decoration: none; text-transform: lowercase; font-size: 100%; } #content .fotobox a.fotocon { display: block; background-image: none; padding-left: 0; } #content .fotobox a span.foto1, #content .fotobox a span.foto2, #content .fotobox a span.foto3, #content .fotobox a span.foto4, #content .fotobox a span.foto5, #content .fotobox a span.foto6, #content .fotobox a span.foto7, #content .fotobox a span.foto8, #content .fotobox a span.foto9, #content .fotobox a span.foto10, #content .fotobox a span.foto11, #content .fotobox a span.foto12, #content .fotobox a span.foto13 { display: none; } #content .fotobox a:hover span.foto1, #content .fotobox a:hover span.foto2, #content .fotobox a:hover span.foto3, #content .fotobox a:hover span.foto4, #content .fotobox a:hover span.foto5, #content .fotobox a:hover span.foto6, #content .fotobox a:hover span.foto7, #content .fotobox a:hover span.foto8, #content .fotobox a:hover span.foto9, #content .fotobox a:hover span.foto10, #content .fotobox a:hover span.foto11, #content .fotobox a:hover span.foto12, #content .fotobox a:hover span.foto13 { position:absolute; top:30px; left:10px; display:block; font-size:0.85em; width:515px; background:#e5e5e5; line-height:130%; color:#383838; border-color:#bfbfbf; } #content .fotobox a:hover span.foto1 img, #content .fotobox a:hover span.foto2 img, #content .fotobox a:hover span.foto3 img, #content .fotobox a:hover span.foto4 img, #content .fotobox a:hover span.foto5 img, #content .fotobox a:hover span.foto6 img, #content .fotobox a:hover span.foto7 img, #content .fotobox a:hover span.foto8 img, #content .fotobox a:hover span.foto9 img, #content .fotobox a:hover span.foto10 img, #content .fotobox a:hover span.foto11 img, #content .fotobox a:hover span.foto12 img, #content .fotobox a:hover span.foto13 img { border-style:solid; border-color:#bfbfbf; border-width:2px; background:#888; padding:15px; } #content .fotobox a:hover span.foto1 p, #content .fotobox a:hover span.foto2 p, #content .fotobox a:hover span.foto3 p, #content .fotobox a:hover span.foto4 p, #content .fotobox a:hover span.foto5 p, #content .fotobox a:hover span.foto6 p, #content .fotobox a:hover span.foto7 p, #content .fotobox a:hover span.foto8 p, #content .fotobox a:hover span.foto9 p, #content .fotobox a:hover span.foto10 p, #content .fotobox a:hover span.foto11 p, #content .fotobox a:hover span.foto12 p, #content .fotobox a:hover span.foto13 p {width:500px; background:#ddd; border-style:solid; border-color:#bfbfbf; border-width:2px; padding-bottom:30px; margin-top:-5px;} div#content .fotobox a:hover span img, div#content .fotobox a.fotocon img { border-style:solid; border-color:#bfbfbf; border-width:2px; padding:15px; background:#ccc;} #content .rechts { display: block; width: 28%; float: right; margin: 0 0 20px 30px; padding: 0 0 20px 20px; color:#303030; background: transparent; clear: right; min-height: 250px; } #content .rechts h1, #content .rechts h2 { color:#303030; padding:3px 5px 3px 5px; border-bottom:4px ridge #a10cae; margin-bottom:10px; clear: both; letter-spacing: 0; } #content .rechts h3, #content .rechts h4 { padding:10px 5px 10px 0; font-size: 100%;} #content .rechts p { line-height: 1.3em; color: #303030; background: transparent; padding: 5px; margin: 0; font-size: 90%; } #content .rechts p a { font-weight: normal; line-height: 1.3em;} #content .rechts ul { padding: 10px 0; } #content .rechts li {} #content .rechts a { display: block; line-height: 1.3em; color: #303030; } #content .rechts a.fotocon { display: block; background-image: none; padding-left: 0; } #family #content .rechts a:hover {background:transparent;} #content .rechts li a:link, #content .rechts li a:visited { color: #303030; background-position: 0 7px; text-decoration: none; } #content .rechts li a:hover, #content .rechts li.on p { color: #000; background-position: 0 -28px; } #content .rechts li a:active, #content .rechts li a:focus { color: #000; background-position: 0 -61px; } #content .rechts .vcard { margin: 20px 0 100px 0; } #content .rechts .photo { float: left; margin: 0 10px 50px 5px; border: 4px ridge #dedede; } #content .rechts .vcard a { background: 0 50%; } #content .rechtsfooter { background-color:transparent; text-align:right; padding:7px 5px 7px 5px; font-size:80%; } #content .rechtsfooter a { background-color:transparent; text-align:right; padding:3px; text-decoration:none; } #content .rechtsfooter a:hover { color:#000; font-weight:bold; background-color:transparent; } #content p.szahl { display: inline; float: left; padding: 3px; } #content #szahl { list-style: none; display: inline; width: 200px; } #content #szahl p ul { background-color: #000000; height:150px; } #content #szahl li { display: inline; } #content #szahl li a { float: right; color: #303030; background: transparent; padding: 0 5px; border: 2px solid #bfbfbf; margin: 0px 5px 0 0; } #content #szahl li a:visited { color: #9999a3; background: #ccc; border: solid 2px #bfbfbf; } #content #szahl li a:link { color: #303030; background: transparent; } #content #szahl li.on { color: #ccc; background:#888; font-weight: bold; border: 2px solid #a10cae; float: right; padding: 0 5px; margin: 0px 5px 0 0; } /* Kontaktformular */ #formular p label { margin-left: 0; padding-left: 0; } .form1 { display: block; height: 1em; width: 430px; margin: 10px 1px 4px 2px; font-size: 100%; text-align: right; } .form2 { color: #303030; font-weight: bold; font-size: 1.2em; font-family: "Trebuchet MS", "Lucida Grande", Verdana; width: 430px; border-top: 0 none; border-right: 0 none; border-bottom: 1px solid #303030; border-right: 1px solid #303030; margin: 0; padding: 3px 5px; background: transparent; } .form4 { border: 1px solid #303030; height: 80px; width: 430px; padding: 5px; margin-left: 0; } select { border: 1px solid #303030; } .checkbox { font-size: 100%; padding: 5px; margin-left: 10px; } .checkbox span { padding-left:5px; vertical-align: middle; } .checkb { vertical-align: middle; border: 1px solid #303030; background: transparent; } textarea { color : #303030; background: transparent; } .sendbutton { margin: 20px 0; padding: 5px 10px; background: #e8e8e8; font-size: 110%; border-style: solid; border-color: #cfe708 #303030 #303030 #cfe708; border-width: 1px 2px 2px 1px; } .stern { color: #a10cae; font-size: 110%; } /* Sonstiges */ #printtitel { left : -2000em; position : absolute; } .news { margin: 10px 0; padding: 10px; width: 130px; color: #505050; background-color: transparent; line-height: 1.3em; } .jump { position: absolute; z-index:10; left:150px; top:40px; width:150px; line-height:140%; text-align:left; } .jump a, .jump a:link, .jump a:visited, .jump a:hover { color:#eef0f2; padding:2px; text-decoration:none; } .jump a:active, .jump a:focus { background:#ccc; color:#eef0f2; } .break { clear:both; float:none; } .bold {font-weight: bold;} .bold_pl_line {font-weight: bold; } .line { border-top:1px solid #dcdcdc; height:1.3em;} .ranking { float:right; background-color:#fff; padding-top:68px; padding-right: 10px;} .fett { font-weight:bold; } .hide { display: none; } .skip { position: absolute; left: -110em; line-height: 1px; } .center { text-align: center; padding: 2px; } .fright { float:right; } .fleft { float:left; margin:5px 10px 5px 0; } .hervorgehoben { background-color:#fff; width:700px; border-left: 15px solid #ccc; } .miteinzug {margin-left:100px; } .abstand15 {height: 15px; display: block; } .abstand50 {height: 0px; display: block; } .abstand400 {height:400px; display:block; } .abstand450 {height:450px; display:block; } .abstand1200 {height:1200px; display: block; } .abstand1500 {height:1500px; display: block; } .abstand1800 {height:1800px; display: block; } .holder { width:95%; padding:1em; border:1px solid #ddd; float:left; margin-bottom:1em; } a.weg { text-decoration:none; outline-style:none;} a.weg em {display:none;} a.weg:hover {text-decoration:none;} a.weg:active, a.weg:focus {background:#fff;} a.weg:active span, a.weg:focus span {display:none;} a.weg:active em, a.weg:focus em {display:block; color:#708fa8; width:100%; font-style:normal; cursor:default;} #katfoto { border: 2px solid #bfbfbf; width:510px; height:353px; padding: 0px; } #katfoto .hintergrund { padding: 15px; background:#ddd; width: 480px; height:323px; } #katfoto.hoch { height:393px; } #katfoto.hoch .hintergrundb { padding: 15px; background:#ddd; width: 480px; height:363px; } #katfoto.hochkant { height:460px; width:353px; }/* hoch */ #katfoto.hochkant .hintergrundc { padding: 15px; background:#ddd; height: 430px; width:323px; } #katfoto.d { border: 2px solid #bfbfbf; width:510px; height:307px; padding: 0px; } #katfoto.d .hintergrundd { padding: 15px; background:#ddd; width: 480px; height:277px; } #katfoto.pano { height:223px; }/* panorama breit */ #katfoto.pano .hintergrundpan { padding: 15px; background:#ddd; width: 480px; height:193px; } #katfoto.mkhintergrund { padding: 15px; background:transparent; } /*kunstbilder*/ #katfoto.mk { padding: 15px; width: 465px; height:331px; background:#ddd; } .quote-left { position:relative; left:-0.4em; margin-right:-0.4em; }