/* margin: top right bottom left */

body { font-family:Verdana, Arial, Helvetica, sans-serif;
	border-top:8px solid #f4bb00; font-size:0.8em; color:#000;
	line-height:1.4em; margin:0; padding:40px 0 50px 0; }

p { margin-top:0px; }
img {	border:none; }
q:before, q:after { content:""; } /* keine automatischen Anführungszeichen um Zitate (Firefox 3) */

a:hover, a:active { color:#f4bb00; }

h1 { font-size:1.8em; color:#f4bb00; margin:15px 0 25px 0; }
h2 { font-size:1.3em; font-weight:lighter; margin:20px 0 10px 0; padding:5px 5px 8px 5px; border-top:5px solid #f4bb00; border-left:1px solid #f4bb00; border-right:1px solid #f4bb00; border-bottom:1px solid #f4bb00; }
h3 { margin-top:0px; margin-bottom:5px; font-size:1em; font-weight:bold; }
h2 a { color:black; text-decoration:none; }
h2 a:hover, h2 a:active  { color:#f4bb00; }
blockquote { font-style:italic; }

.ohnerahmen { border:none; }
#ueberschrift { margin-bottom:45px; border:1px solid #f4bb00; }
#ueberschrift h1.uebertitel {  background:#f4bb00; color:white; font-size:1.4em; margin:0; padding:3px 10px 5px 10px; }
#ueberschrift h1 { color:black; margin:0; padding:10px 3px 10px 10px; font-weight:normal; font-size:1.5em; }

.untertitel { color:black; font-size:2em; font-weight:lighter; margin-bottom:30px; }
.vorspann { font-size:1.3em; font-weight:lither; line-height:1.3em; margin-bottom:30px; }

#container { margin-left:20px; width:984px; }
.inhalt { margin-left:216px; }
#skip-link { display:none; }

#logo-navigation { float:left; width:179px; margin:0; font-size:1.2em; }
div#logo, div#logo a { margin:0 0 77px 0px; padding:0; }
.navigation ul { margin:0; padding:0; border-bottom:1px solid #f4bb00; }
.navigation li { margin:0; list-style:none;  }
.navigation a { display:block; padding:8px 0 8px 10px; border-left:5px solid #f4bb00; border-top:1px solid #f4bb00; border-right:1px solid #f4bb00; text-decoration:none; color:black; }
.navigation a:hover { background:#f8d666; padding-left:10px; }
.aktuellerbutton { background:#f8d666; padding:8px 0 8px 10px; border-left:5px solid #f4bb00; border-top:1px solid #f4bb00; border-right:1px solid #f4bb00; }
div#logo a:hover { border:none; padding:0; }
#suche { padding:13px 0 6px 0; }

.foto { float:left; margin-left:10px; }
.foto img, img.foto { margin-left:20px; }
.text { margin-left:280px; }
.quelle {  float:right; font-size:0.8em; line-height:1.1em; font-style:italic; width:100px; }
.bildlinks { display:block; float:left; margin-right:40px; font-size:0.8em; line-height:1.4em; }
.bildrechts { float:right; margin-left:40px; font-size:0.8em; line-height:1.4em; }
.klein { font-size:0.8em; }

form { display:inline; margin:0; padding:0; }

#suchbegriff, #suchbegriffimsuchergebnis { width:129px; color:#888; padding:2px 0 2px 15px;
	border:1px solid #f4bb00; margin-right:3px; background:white; } /* Suchfeld */
#suchbegriff:hover, #suchbegriff:active, #suchbegriff:focus, #suchbegriffstartseite:hover, #suchbegriffstartseite:active, #suchbegriffstartseite:focus, #suchbegriffimsuchergebnis:hover, #suchbegriffimsuchergebnis:active, #suchbegriffimsuchergebnis:focus
	{ background:#f8d666; color:black; } /* Suchen-Formular */
#suchenschaltflaeche { width:30px; margin-top:1px; color:#888; cursor:pointer; padding:1px 0 1px 1px; border:1px solid #f4bb00; background:white; }
#suchenschaltflaeche:hover { background:#f8d666; color:black; }

/* nur Startseite: */
#startseite { width:662px; margin-left:220px; border:1px solid #f4bb00; }
#startseite-oben { height:160px; }
#nuss { float:left; margin:0 70px 0 70px; }
#endlich-einfach { padding-top:60px; }
#startseite-unten { height:270px; padding:10px 0 10px 0; }
#startseite-navigation { font-size:1.2em; min-height:40px; } /* min-height ist für Safari & Chrome */
#startseite-navigation ul { margin:0; padding:0; }
#startseite-navigation li { float:left; padding-bottom:10px; text-align:center; list-style:none; }
#startseite-navigation #web-realisierung { border-left:1px solid #f4bb00; border-right:1px solid #f4bb00; }
#startseite-navigation a { display:block; width:220px; border-top:5px solid #f4bb00; border-bottom:1px solid #f4bb00; padding:3px 0 3px 0; text-decoration:none; color:black; }
#startseite-navigation a:hover, #startseite-navigation a.aktuellesthema { background:#f8d666; }
#startseite-text { position:relative; width:500px; height:300px; margin-left:43px; overflow:hidden; }
#startseite-text h1 { margin:20px 0 20px 0; }
#startseite-text div { float:left; width:500px; }
#startseite-text .themen { width:20000em; position:absolute; }

#adresse { width:662px; margin:70px 0 0 240px; text-align:center; font-size:0.9em; color:#888; }
#valid { width:662px; margin:20px 0 0 240px; text-align:center; }

/* Usability: */
#uebersetzungen { width:200px; margin:30px 0 0 14px; padding:10px; 
	border-top:10px solid #f4bb00; border-left:2px solid #f4bb00; border-right:2px solid #f4bb00; border-bottom:2px solid #f4bb00; }
#uebersetzungen h3, #uebersetzungen p { text-align:center; }
#uebersetzungen ul { padding-left:20px; margin-left:0; }
#uebersetzungen li { color:#f4bb00; }
#uebersetzungen span { color:black; }

.rahmen { border:2px solid #f4bb00; padding:10px 20px 10px 20px; margin-bottom:10px; }
.rahmen #u-dertext { border:1px solid #f4bb00; width:100%; height:3em; }
.rahmen #u-senden { margin:0; }

/* Web-Panoptikum: */
.panoptikum-screenshot { border:1px solid blue; }
.panoptikum-screenshot:hover { border:1px solid #f4bb00; }

#web-panoptikum { margin-left:216px; }
#web-panoptikum td { text-align:right; } /* nur weil der IE display:table-cell nicht gescheit unterstützt */
#web-panoptikum h1.untertitel { margin:0 0 10px 0; }
#web-panoptikum td p { color:#888; font-size:0.9em; font-weight:normal; font-style:italic; text-align:right; margin-top:0; }
#web-panoptikum .vorspann { font-size:1.2em; margin:30px 0 30px 0; }

.beispiel { position:relative;  }
#splashrahmen   { height:350px; width:595px; margin-top:30px; padding:0 10px 10px 10px; border:8px solid #f4bb00; text-align:center; }
#schriftrahmen  { height:320px; width:595px; margin-top:30px; padding:0 10px 10px 10px; border:8px solid #f4bb00; text-align:center; }
#swarovskirahmen{ height:290px; width:595px; margin-top:30px; padding:0 10px 10px 10px; border:8px solid #f4bb00; text-align:center; }
#kontaktrahmen  { height:350px; width:595px; margin-top:30px; padding:0 10px 10px 10px; border:8px solid #f4bb00; text-align:center; }
#logikrahmen    { height:360px; width:595px; margin-top:30px; padding:0 10px 10px 10px; border:8px solid #f4bb00; text-align:center; }
#navigationrahmen{height:240px; width:595px; margin-top:30px; padding:0 10px 10px 10px; border:8px solid #f4bb00; text-align:center; }

#splashlogo    { float:right; position:relative; display:block; margin:8px 0 8px 0; top:-28px; border-left:10px solid white; border-right:10px solid white; }
#schriftlogo   { float:right; position:relative; display:block; margin:4px 0 4px 0; top:-28px; border-left:10px solid white; border-right:10px solid white; }
#swarovskilogo { float:right; position:relative; display:block; margin:6px 0 6px 0; top:-28px; border-left:10px solid white; border-right:10px solid white; }
#kontaktlogo   { float:right; position:relative; display:block; margin:3px 0 3px 0; top:-28px; border-left:10px solid white; border-right:10px solid white; }
#navigationlogo{ float:right; position:relative; display:block; margin:-3px 0 -3px 0; top:-28px; border-left:10px solid white; border-right:10px solid white; }
#logiklogo     { float:right; position:relative; display:block; margin:4px 0 4px 0; top:-28px; border-left:10px solid white; border-right:10px solid white; }

#splashbild, #schriftbild, #swarovskibild, #kontaktbild, #navigationbild, #logikbild
	{ clear:right; display:block; position:relative; top:-28px; margin:0 auto 0 auto; }

#kontakt-voriges, #splash-voriges, #swarovski-voriges, #schrift-voriges, #logik-voriges, #navigation-voriges { display:none; float:left; }
#kontakt-naechstes, #splash-naechstes, #swarovski-naechstes, #schrift-naechstes, #logik-naechstes, #navigation-naechstes
	{ float:right; }

#splashtext, #schrifttext, #swarovskitext, #kontakttext, #logiktext, #navigationtext
	{ position:absolute; bottom:0; left:641px; width:333px; margin:0; }
.fotonummer { width:631px; text-align:center; margin-top:10px; }

/* nur Referenzen: */
h2.referenz { width:706px; }
.referenzfoto { float:left; margin:0 10px 0 10px; }
.referenzlogo { float:right; margin:25px 50px 0 10px; }
* html div.auftraggeber { height: 1em; } /* Workaround für den IE "3-Pixel-Bug" */
.referenzentext { width:550px; }
.referenzliste { margin-top: 0px; margin-left: 15px; padding-left: 0px; }
.abstand { margin-bottom: 30px; }
.quelle img { margin-top:10px; }

.beispiellinks { float:left; margin-right: 10px; margin-bottom:30px; }
.beispielrechts {	float:right; margin-left: 10px; margin-bottom:30px; }
.fussnote { background-color: #EEF;	border: 2px solid #CCF; padding: 8px; }
.rot {	font-weight: bold; color: #B00; }
.zumseitenanfang { font-size: 0.8em; text-align: right; margin-top: 10px; margin-bottom: 50px; }

/* nur Testberichte (Publikationen): */
.testbericht h2 { margin-top:60px; }
.testbericht q { font-style:italic; }
.testbericht .bildrechts img { border:1px solid #888; }
.testbericht .bildrechts a img:hover { border:1px solid #f4bb00; }
.wichtig { margin:20px 0 20px 0; padding:10px 10px 0 10px; 
	border-top:1px solid #f4bb00; border-left:10px solid #f4bb00; border-right:1px solid #f4bb00; border-bottom:1px solid #f4bb00; }
.zwischenbilanz { margin:80px 0 80px 50px; padding:0 20px 10px 20px; font-size:1.2em; border:2px solid #f4bb00; background:#fdf1cc; }
.zwischenbilanz h4 { text-align:center; }
.zwischenbilanz strong { font-size:1.2em; }
#lexikon { float:right; width:200px; font-size:0.8em; line-height:1.4em; border:1px solid #f4bb00; 
	padding:10px 5px 5px 10px; margin:25px 0 0 10px; }
#lexikon li { margin-bottom:0.4em; }
#lexikon ol { margin-left:25px; padding-left:0; }
.abstandrechts { margin-right:20px; }
ul.abstand li { margin-bottom:0.7em; }
#kronehit-transskription, #arabella-transskription
	{ display:none; border:1px solid #f4bb00; text-align:left; padding:5px 5px 5px 5px; font-size:0.8em; }
.datum { display:block; float:right; font-size:0.9em; }

/* nur in kontakt.php & suchergebnis.php & kontaktformular: */
.formular-kontakt { margin:0 0 80px 0; }
.label { text-align:right; }
.schlecht { display:none; }
#subject, #dertext, #u-dertext { width:360px; border:1px solid #f4bb00; font-family:Arial, Helvetica, sans-serif; font-size:1em; }
#name, #u-name, #email, #u-email, #u-website { width:250px; border:1px solid #f4bb00; }

/* Kommentare: */
#kommentare { background:#f5f5f5; border:1px solid #f4bb00; padding:10px; margin-top:30px; }
#kommentare h2 { border:none; margin:0 0 10px 0; text-align:center; }
#kommentare .name { font-size:0.8em; margin-bottom:3px; }
#kommentare .kommentar { border-bottom:1px solid #f4bb00; padding-bottom:10px; }

/* Blog & Publikationen: */
.publikationen-blog a { display:block; width:600px; margin-bottom:20px; padding:10px 10px 0 10px; border-top:5px solid #f4bb00; border-left:1px solid #f4bb00; border-right:1px solid #f4bb00; border-bottom:1px solid #f4bb00; text-decoration:none; color:black; }
.publikationen-blog .ueberschrift { display:block; font-size:1.3em; padding:0; margin:0; }
.publikationen-blog .bildlinks { width:160px; }
.publikationen-blog .anreisser { display:block; min-height:110px; } /* damit der Text nicht niedriger als das Bild wird */
.publikationen-blog a:hover { background:#f8d666; }

.blog { margin-left:280px; }
.blog h1 { margin-bottom:0; }
.blog h2 { padding-top:5px; text-align:left; }
.blog h2 a { color:black; text-decoration:none; }
.blog h2 a:hover { color:#f4bb00; }
.blog td { width:340px; vertical-align:top; margin:0; padding:0; }
.blog td.rechts { padding-left:24px; }

.blog img { border:1px solid #888; }
.blog img:hover { border:1px solid #f4bb00; }
.autor { font-size:0.8em; margin-bottom:5px; line-height:1.2em; text-align:left; }
.blog .anreisser { margin:0; text-align:left; }
#navigation-blog, #navigation-publikationen { font-size:0.8em; margin-top:40px; }
#navigation-blog h3, #navigation-publikationen h3 { text-align:center; }

table.finanz-online { font-size:0.8em; line-height:1.1em; border-collapse:collapse; border:1px solid #f4bb00; margin-bottom:10px; }
table.finanz-online caption { text-align:left; font-size:1.3em; line-height:1.5em; font-weight:bold; padding-bottom:5px; }
table.finanz-online th { font-weight:normal; border:1px solid #f4bb00; padding:2px 5px 2px 5px; }
table.finanz-online td { border:1px solid #f4bb00; padding:2px 5px 2px 5px; }
.zentriert { text-align:center; }
.rechts { text-align:right; }
table.finanz-online th, table.finanz-online tr:hover { background:#fdf1cc; }

table.tabelle { border-collapse:collapse; border:1px solid #f4bb00; margin-bottom:10px; }
table.tabelle th { font-weight:normal; border:1px solid #f4bb00; padding:2px 5px 2px 5px; }
table.tabelle td { border:1px solid #f4bb00; padding:2px 5px 2px 5px; }
.zentriert { text-align:center; }
.rechts { text-align:right; }
table.tabelle th, table.tabelle tr:hover { background:#fdf1cc; }

.captcha div { width:350px; height:10em; border:1px solid #f4bb00; vertical-align:middle; text-align:left; }
.captcha div.links {  float:left; }
.captcha div.rechts { margin-left:370px; }

.kasten { font-size:0.8em; padding:10px 20px 10px 20px; margin:20px 0 30px 0; border:1px solid #f4bb00; background:#f5f5f5; }

/* Schnickschnack: */
#zitat-gesamt { width:700px; margin:0 auto 0 auto; min-height:270px; }
#zitat-links { float:left; width:210px; } /* klammer-links und Nuss */
#zitat-mitte { float:left; width:406px; margin:60px 0 0 15px; } /* width ist eigentlich 411px, aber IE6 verkraftet nur 406px */
#zitat-nr { font-style: italic;  }
#zitat-gesamt q { font-size:1.2em; display:block; margin-bottom:5px;}
#zitatautor { color:#888; font-size:0.8em; }
cite#zitatquelle { display:none; font-size:0.9em; }

#schnickschnack-uebersetzungen { float:left; width:400px; margin-top:50px; }
#ergebnis { margin-left:420px; border:1px solid #f4bb00; }



#dertext { height:150px; }
#name:hover, #u-name:hover, #email:hover, #u-email:hover, #subject:hover, #dertext:hover, #u-dertext:hover, #u-website:hover
	{ border:1px solid #888; }
#senden, #suchenimsuchergebnis { margin-top:20px; border:1px solid #f4bb00; background:white; cursor:pointer; }
#senden:hover, #suchenimsuchergebnis:hover { background:#f8d666; }

#suchergebnis { padding-left: 16px; margin-bottom:30px; } /* padding-left ist, damit IE die Dreiecke anzeigt */
#suchergebnis ul { margin-left:0px; padding-left:0px;}
#suchergebnis ul li { list-style-image:url(navigation/dreieck1.gif); }
#suchergebnis ul li ol li { list-style-type:decimal; list-style-image:none; margin-bottom: 0.8em ; }
#suchergebnis a { font-weight: bold; }
#suchergebnis em { font-weight: bold; font-style: normal; }

.suchbegriff1  {color:#000; padding:1px; background:#ff6;   } /* gelb */
.suchbegriff2  {color:#000; padding:1px; background:#a0ffff;} /* türkis */
.suchbegriff3  {color:#000; padding:1px; background:#9f9;   } /* leucht-grün */
.suchbegriff4  {color:#000; padding:1px; background:#f99;   } /* rosa-organge */
.suchbegriff5  {color:#000; padding:1px; background:#f6f;   } /* leucht-rosa */
.suchbegriff6  {color:#fff; padding:1px; background:#800;   } /* dunkelrot */
.suchbegriff7  {color:#fff; padding:1px; background:#0a0;   } /* grün */
.suchbegriff8  {color:#fff; padding:1px; background:#886800;} /* beige */
.suchbegriff9  {color:#fff; padding:1px; background:#004699;} /* dunkelblau */
.suchbegriff10 {color:#fff; padding:1px; background:#909;   } /* violett */

@media print {
body { font-size:1em; }
#navigation, .navigation, #valid, #kommentare form { display:none; }
.inhalt { margin-left:0; }
#logo-navigation { float:none; }
div#logo { margin-bottom:2em; }
#startseite { margin-left:0; }
#startseite-unten { height:auto; }
#startseite-text { height:55em; overflow:auto; }
#text-usability-beratung, #text-web-realisierung, #text-usability-vortraege
	{ display:block !important; }
#startseite-text div { float:none; width:auto; }
#startseite-text .themen { width:auto; position:auto; left:0 !important; }
}

/* SLIMBOX */
#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #7a5e00;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url('slimbox-laden.gif') no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 100px;
	height: 22px;
	background: transparent url('slimbox-schliessen.gif') no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}