/* @override http://10.0.1.128/schnurpluspfeil/css/spp.css */

/* © 2008 Christof Glaser, http://gl.aser.de/
 * CSS for http://schnurpluspfeil.de
 * Design © 2008 by Tanja Schnurpfeil.
 * All rights reserved. Alle Rechte vorbehalten.
 */

/* @group KOSMOS */

* {
  margin: 0;
  padding: 0;
}

body, p, h1, h2, h3, td {
  font: 8.5pt Verdana, "Lucida Grande", Lucida, sans-serif;
  vertical-align: baseline;
  line-height: 1.7em;
}

body {
  width: 470pt;
  min-height: 450pt;
  margin: 25pt auto 0 auto;
}

body#start, #start #inhalt, 
body#kontakt, body#biografie, body#impressum {
  color: white;
  background-color: #080808;  /* 141215 */
}

#text a, #untenrum a {
  color: black;
  text-decoration: none;
}

#text a:hover, #untenrum a:hover {
  color: #666;
  text-decoration: underline;
  /* border-bottom: 1px solid #666; */
}

body#impressum #text a,
body#kontakt #text a {
  color: white;
}

/* @end */
		
/* @group HEAVEN */

#inhalt {
  font-family: Georgia, "Times New Roman", Times, serif;
  text-transform: uppercase;
  font-weight: bold;
  background-color: white;
  z-index: 2;
}

#inhalt, .browser, .images, #untenrum {
  margin-left: 29pt;
}

#inhalt h1 {
  text-indent: -1000pt;
  height: 74px; 
}

#schnurpluspfeil {
  padding-top: 22px;
}
#biografie #schnurpluspfeil {
  padding-top: 0;
}

#start #inhalt h1 a {
  width: 100%;
  height: 75px;
  border: none;
}

a:active {
  border: none;
}

* html #start #inhalt h1 {
  background: url(../gfx/start.gif) no-repeat 38px -2px;
}
#start #inhalt h1 {
  background: url(../gfx/start.gif) no-repeat 0 0;
}

#referenzen #inhalt h1, #arbeit #inhalt h1, #form #inhalt h1 {
  background: url(../gfx/pfeil.gif) no-repeat;
}
#biografie #inhalt h1 {
  background-image: url(../gfx/b-blatt.gif);
  background-repeat: no-repeat;
  background-color: #080808; /* #141215; */
  padding-bottom: 2px;
  height: 94px;
}

#kontakt #inhalt h1, #impressum #inhalt h1 {
  background-image: url(../gfx/b-pfeil-liefp.gif);
  background-repeat: no-repeat;
  background-color: #080808;
}

#inhalt a, .browser a {
  display: block;
  float: left;
  height: 12px;
  text-decoration: none;
}

#form #inhalt a, #form .browser a {
  text-indent: 0;
}

#form #inhalt li {
  list-style-type: none;
}

#inhalt a {
  margin: 0 2.5em 0 9pt;
  display: block;
  float: left;
  height: 12px;
  padding: 0;
}

#inhalt a#arbeiten {
  background: url(../gfx/arbeiten.gif) no-repeat;
  width: 58px;
}

#arbeit #inhalt a:hover#arbeiten,
#referenzen #inhalt a:hover#arbeiten {
  background: url(../gfx/arbeiten-light-u.gif) no-repeat;
}

#referenzen #inhalt a#arbeiten, #arbeit #inhalt a#arbeiten {
  background: url(../gfx/arbeiten-light.gif) no-repeat;
}

#inhalt a#biografie {
  background: url(../gfx/biografie.gif) no-repeat;
  width: 64px;
}
#inhalt a:hover#biografie {
  background: url(../gfx/biografie-light-u.gif) no-repeat;
}

#inhalt a#kontakt {
  background: url(../gfx/kontakt.gif) no-repeat;
  width: 54px;
}
#inhalt a:hover#kontakt {
  background: url(../gfx/kontakt-light-u.gif) no-repeat;
}

/* dark version */
#biografie #inhalt a#arbeiten, 
#kontakt #inhalt   a#arbeiten, 
#impressum #inhalt a#arbeiten {
  background: url(../gfx/b-arbeiten.gif) no-repeat;
}
#biografie #inhalt a:hover#arbeiten, 
#kontakt #inhalt   a:hover#arbeiten, 
#impressum #inhalt a:hover#arbeiten {
  background: url(../gfx/b-arbeiten-light-u.gif) no-repeat;
}

#kontakt #inhalt   a#biografie, 
#impressum #inhalt a#biografie {
  background: url(../gfx/b-biografie.gif) no-repeat;
}
#biografie #inhalt a#biografie {
  background: url(../gfx/b-biografie-light.gif) no-repeat;  
}
#kontakt #inhalt   a:hover#biografie, 
#impressum #inhalt a:hover#biografie {
  background: url(../gfx/b-biografie-light-u.gif) no-repeat;
}

#kontakt #inhalt   a#kontakt {
  background: url(../gfx/b-kontakt-light.gif) no-repeat;
}
#biografie #inhalt a:hover#kontakt,
#impressum #inhalt a:hover#kontakt {
  background: url(../gfx/b-kontakt-light-u.gif) no-repeat;
}
#biografie #inhalt a#kontakt, 
#impressum #inhalt a#kontakt {
  background: url(../gfx/b-kontakt.gif) no-repeat;
  width: 54px;
}

/* @end */

/* @group MIDDLE EARTH */

#text {
  margin-top: 3em;
  background-color: white;
  z-index: 10;
}

#biografie #text, #kontakt #text, #impressum #text {
  color: white;
  background-color: #080808;  /* 141215 */
}

#biografie #text p, #biografie #text h3 {
  padding-left: 39pt;
  padding-bottom: 1em;
  width: 30em;
  clear: both;
}

#biografie #text h3 {
  text-decoration: underline;
  margin-top: 1.5em;
  display: block;
}

#kontakt #text, #impressum #text {
  padding-left: 39pt;
  width: 30em; 
}

#kontakt #text p, #impressum #text p {
  padding-left: 0;
  clear: right;
  display: block;
}

#kontakt #text h3, #impressum #text h3 {
  padding-left: 0;
  clear: left;
  float: left;
  width: 5em;
  text-decoration: none;
  display: block;
}

#text th {
  display: none;
}

#text table td {
  padding: 0 1.5em 0 0;
}

/*#text tr > td:first-child {
  width: 7em;
  text-align: right;
}*/

#text table tr td.wann {
  width: 7.2em;
  text-align: right;
}

#text table a {
  display: block;
  padding-left: 1.5em;
  background: url(../gfx/urlicon.gif) no-repeat 0 2.5pt;
   
}

#kontakt #text h3, #impressum #text h3 {
  padding-left: 1.5em;
  background: url(../gfx/b-urlicon.gif) no-repeat 0 0.5pt;
}

#text table a:hover {
  background: url(../gfx/urlicon-light.gif) no-repeat 0 2.5pt;
}

#kontakt #text h3, #impressum #text h3 {
  background-position: -1pt 2.5pt;
}

#text .browser {
/* IE6 */
  vertical-align: bottom;
  width: 322px;
  float: left;
  padding: 3px 1.5em 0 0;
  margin-left: 15px;
}

#text > .browser {
/* non-IE  */
  vertical-align: bottom;
  margin-left: 29pt;
  width: 322px;
  float: left;
  padding: 0 2.5em 5pt 0;
}

#text .browser a {
}

#text .browser h2 {
  float: left;
  padding: 0 0.5em 0.5em;
  margin-top: -0.3em;  /* etwas höher */
  max-width: 260px;
  float: left;
}

* html #text .browser h2 {
  width: 260px;
}

#text h3 {
  width: 189px;
  vertical-align: bottom;
  float: left;
}

#text .browser a#prev {
  margin-left: 5pt;
  background: url(../gfx/left.gif) no-repeat;
  width: 15px;
  float: left;
}

#text .browser a#prev:hover {
  background: url(../gfx/left-light.gif) no-repeat;
}

#text .browser a {
  background: url(../gfx/right.gif) no-repeat;
  width: 15px;
  float: left;
}

#text .browser a#next:hover {
  background: url(../gfx/right-light.gif) no-repeat;
}

#text .images {
  clear: left;
  float: left;
  width: 322px;
  margin-left: 18px;
}

#text > .images {  
  padding: 2pt 1.5em 0 1em;
  margin-left: 29pt;
}

#text .images img {
  border: 1px solid #bbb;
  border: none;
  display: none;
}

#text .description {
  float: left;
  width: 189px;
  margin-top: -2pt;
  text-align: left;
}

#form form label {
  display: block;
  float: left;
  clear: left;
  width: 9em;
  margin-left: 4em;
  padding-top: 0.2em;
}
#form form input {
  display: block;
  float: left;
  clear: right;
  width: 28em;
  padding-top: 0.2em;
}
#form form textarea {
	width: 28em;
	float: left;
	padding: 0;
	margin: 0;  
}
#form form p > input[type=submit] {
	width: 10em;
	display: block;
	margin: 1em 0 0 12em;
}
#form td.actions {
  width: 20em;
}
#form td.actions form, #form td.actions form > input[type=submit] {
	width: 8em;
	margin-top: 0.2em;
	float: left;
}
#form tr {
  vertical-align: top;
}
 #form td {
  vertical-align: middle;
}
/* @end */

/* @group UNDERWORLD */

#untenrum {
  background-color: white;
  position: absolute;
  bottom: 2em;
  left: auto;
  right: auto;
  z-index: 1;
  padding-left: 1.4em;
  width: 429pt;
  font-size: 7pt;
  height: 42px;
  opacity: 0.9;
}

* html #untenrum {
  width: 403pt;
}

#referenzen #untenrum {
  padding-left: 60pt;
  width: 380pt;
}

* html #referenzen #untenrum {
  padding-left: 64px;
  width: 364pt;
}

#kontakt   #untenrum, #kontakt   #untenrum a,
#impressum #untenrum, #impressum #untenrum a,
#biografie #untenrum, #biografie #untenrum a {
  background-color: #080808;
  color: white;
}

#impressum #untenrum a {
  visibility: hidden;
}

#untenrum a#zurueck, #impressum #untenrum a#zurueck {
  visibility: visible;
  background-image: url(../gfx/zurueck.gif);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  width: 40px;
  padding: 32px 0 0 5px;
}
#kontakt   #untenrum a#zurueck, 
#impressum #untenrum a#zurueck,
#biografie #untenrum a#zurueck {
  background-image: url(../gfx/b-zurueck.gif);
}

#untenrum a:hover#zurueck {
  text-decoration: underline;
}

/* @end */