/************************************************************
		Screen-Stylesheet  kissafrog.de
		Nadine Oberstein | Medienkonzeption - Mediengestaltung
		www.nadine-oberstein.de
************************************************************/

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0 auto 0 auto;
	padding: 0 0 4em 0;
	font: normal 0.8em "trebuchet ms", helvetica, sans-serif;
	letter-spacing: 0.02em;
	text-align: center;
	line-height: 125%;
	color: #555;
	background-color: #bfebeb;
}

hr {
	color: #fff;
	width: 1px;
	height: 1px;
	border: none;
}

#clearer {
	clear: both;
}

.clearer {
	clear: left;
}

a img {
	border: none;
}

a, a:link, a:visited {
	color: #21aa98;
	text-decoration: none;
}

a:focus, a:hover, a:active {
	color: #000;
}

#content a:active {
	position: relative;
	top: 1px;
	left: 1px;
}

/***********************
  Bildaustausch
***********************/

#labels,
#news,
#koeln,
#bonn,
#onlineshop,
#newsletter,
#kontakt,
#jobs,
#jobs_foto,
#impressum,
#agb,
#ueber,
#ueberkaf,
#uebernews {
	display: block;
	position: relative;
	overflow: hidden;
}

#labels span,
#news span,
#koeln span,
#bonn span,
#onlineshop span,
#newsletter span,
#kontakt span,
#jobs span,
#jobs_foto span,
#impressum span,
#agb span,
#ueber span,
#ueberkaf span,
#uebernews span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
}

/***********************
  Überschriften
***********************/

#content h1 {
	width: 978px;
	height: 80px;
	margin-bottom: 70px;
}

#content h1 span {
	width: 100% !important;
	height: 100% !important;
}

#news span        {background-image: url(../images/css/headline_news.png);}
#bonn span        {background-image: url(../images/css/headline_bonn.png);}
#onlineshop span  {background-image: url(../images/css/headline_onlineshop.png);}
#newsletter span  {background-image: url(../images/css/headline_newsletter.png);}
#kontakt span     {background-image: url(../images/css/headline_kontakt.png);}
#jobs span        {background-image: url(../images/css/headline_jobs.png);}
#impressum span   {background-image: url(../images/css/headline_impressum.png);}
#agb span         {background-image: url(../images/css/headline_agb.png);}
#ueber span       {background-image: url(../images/css/headline_ueber.png);}

/***********************
  Labels
***********************/

#labels,
#labels span {
	width: 320px;
	height: 500px;
}

#labels span {
	background-image: url(../images/css/labels_y.png);
}

#labels.quer,
#labels.quer span {
	width: 890px;
	height: 206px;
}

#labels.quer span {
	background-image: url(../images/css/labels_x.png);
}

/***********************
      Struktur
***********************/

h6, legend {
	position: absolute;
	top: -200em;
	left: -200em;
}

#skiplinks {
	list-style: none;
	text-align: center;
}

#skiplinks a, #skiplinks a:link, #skiplinks a:visited, #skiplinks a:focus, #skiplinks a:hover, #skiplinks a:active {
	display: block;
	position: absolute;
	top: -200em;
	left: 0;
	font-size: 0.9em;
	color: #fff;
}

#skiplinks a:focus, #skiplinks a:active {
	top: 45px;
	left: 370px;
	width: 280px;
	color: #222;
	font-size: 110%;
	font-weight: bold;
	padding: 20px 0 26px 0;
	text-decoration: none;
	background-image: url(../images/css/skiplinks_bg.gif);
	background-repeat: no-repeat;
}

#skiplinks a:active {
	color: #7b7b7b;
}

/***********************
  Header
***********************/

#header {
	position: relative;
	padding: 35px 0 0 0;
	text-align: left;
}

#logo {
	margin-left: 5px;
}

#quicknewsletter {
	overflow: hidden;
	width: 290px;
	height: 65px;
	margin-left: 700px;
	margin-top: -80px;
}

/*** Quicknewsletter ***/

#quicknewsletter h1 span {
	background-image: url(../images/css/quicknewsletter_h1.png);
}

#quicknewsletter h1 {
	display: none;
}

#quicknewsletter fieldset {
	border: none;
}

#quicknewsletter div {
	float: left;
	padding-left: 4px;
}

#quicknewsletter label,
#quicknewsletter input {
	font: normal 90% "trebuchet ms", helvetica, sans-serif;
}

#quicknewsletter input {
	color: #fff;
}

#quicknewsletter div,
#quicknewsletter input {
	background: #b4b4b4;
	border: none;
}

#quicknewsletter input:focus, #quicknewsletter input:hover {
	background: #22aa99;
	color: #000;
}

#quicknewsletter label {
	display: block;
	float: left;
	overflow: hidden;
	margin-top: 1px;
	color: #444;
}

#quicknewsletter #quicksubmit:active {
	position: relative;
	top: 1px;
	left: 1px;
}

#quicknewsletter #quicksubmit,
#quicknewsletter #quicksubmit input {
	border: none;
	background: none !important;
}

#quicknewsletter #quickfirst label  {width: 55px;}
#quicknewsletter #quickfirst input  {width: 84px;}

#quicknewsletter #quicklast label   {width: 38px;}
#quicknewsletter #quicklast input   {width: 101px;}

#quicknewsletter #quickmail label   {width: 41px;}
#quicknewsletter #quickmail input   {width: 140px;}

#quicknewsletter #quickmail         {margin: 6px 18px 0 0;}
#quicknewsletter #quicklast         {margin-left: 4px;}
#quicknewsletter #quicksubmit       {margin-top: 7px;}

/***********************
  Menu
***********************/

#menu {
	margin-top: 20px;
	width: 100%;
	font-size: 105%;
	text-align: center;
	height: 55px;
	background-image: url(../images/css/menu_bg.png);
	background-repeat: no-repeat;
}

#menu ul {
	list-style: none;
	width: 660px;
	margin-left: 320px;
	padding-top: 12px;
	text-align: center !important;
	font-weight: bold;
	font-size: 120%;
}

#menu li {
	display: inline;
	padding: 0 0.5em 0 0.5em;
}

#menu a {
	color: #c9c9c9;
	text-decoration: none;
}

#menu a:hover, #menu a:focus, #menu a:active,
#menu li.active a:focus, #menu li.active a:hover, #menu li.active a:active {
	color: #22aa99;
}

#menu a:hover, #menu a:focus, #menu a:active {
	position: relative;
	top: 1px;
	left: 1px;
}

#menu li.active a {
	color: #64c3b7;
}

/***********************
  Content
***********************/

#content {
	position: relative;
	width: 978px;
	min-height: 700px;
	padding-top: 25px;
	text-align: left;
	border-left: 5px solid #fff;
	border-right: 5px solid #fff;
	border-bottom: 5px solid #fff;
	background-color: #e3e3e3;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e3e3e3)) !important;
  background: -moz-linear-gradient(top, #fff, #e3e3e3) !important;
}

/*** Labels ***/

h2.labels {
	position: absolute;
	top: -200em;
	left: -200em;
}

#labels {
	float: right;
	margin: -5px 42px 40px 0;
}

#labels.quer {
	float: none;
	margin: 0;
}

#labels img {
	display: none;
}

/***********************
  Form
***********************/

.content fieldset#fulluserdata {
	margin-top: 2.5em;
}

.content fieldset#fulluserdata.newsletter {
	margin-top: 1em;
}

.content fieldset {
	border: none;
	margin-bottom: 1em;
}

.content fieldset#action {
	margin-bottom: 0;
}

.content legend {
	font-size: 0px;
	font: #000;
}

.content label {
	display: block;
	float: left;
	width: 140px;
	padding-right: 10px;
	text-align: right;
}

.content fieldset br {
	clear: left;
}

.content label,
.content input,
.content select {
	margin-bottom: 3px;
}

.content input,
.content select,
.content textarea {
	font: normal 100% "trebuchet ms", helvetica, sans-serif;
	color: #b3b3b3;
	background-color: #888;
	border: none !important;
}

.content input,
.content textarea {
	width: 250px;
	padding: 1px 5px 1px 5px;
}

.content select {
	width: 260px;
	padding: 1px 0 1px 5px;
}

.content #partnerallow {
	width: 1em;
	margin-bottom: 10px;
}

.content input:focus, .content input:hover,
.content select:focus, .content select:hover,
.content textarea:focus, .content textarea:hover {
	background: #22aa99;
	color: #000;
}

.content #sprachwahl {
	margin: 2em 0 0 225px;
}

.content #sprachwahl a {
	margin-right: 13px;
}

input#fullsubmit,
.newsletter_cmd input {
  margin: 20px 0 40px 250px;
  width: 160px;
  background: #fff;
  padding: 0.1em 0.5em;
  color: #22aa99;
  border: 1px dotted #22aa99 !important;
  font-style: italic;
  font-weight: bold;
}

/***********************
  Blöcke
***********************/

#wrapper {
	position: relative;
	margin: 0 auto 0 auto;
	width: 990px;
}

.content {
	width: 505px;
	margin: 0 0 40px 35px;
}

.full {
	width: 896px !important;
	margin-top: -40px;
}

.news {
  position: relative;
}

.color {
  color: #22aa99 !important;
}

.news img {
  margin-left: -35px;
}

div.labels {
	clear: both;
	width: 900px;
}

div.left {
	float: left;
	width: 47%;
}

div.right {
	float: right;
	width: 47%;
}

.anfahrt {
	width: 250px;
	float: left;
}

.info {
	float: right;
	width: 250px;
}

.galerie {
	margin-bottom: 3em;
}

/*** Rechte Spalte ***/

#marginal {
	float: right;
	width: 322px;
	padding-right: 42px;
}

#marginal #labels {
	margin-right: 0px;
}

#labels {
	float: right;
	margin: -5px 42px 0 0;
}

/***********************
  Moodpics
***********************/

.jazz {
	min-height: 83em;
	background-image: url(../images/moodpics/ueberuns.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}

/***********************
  Bilder
***********************/

.galerie a img {
  margin: 12px 12px 0 0;
}

.galerie a img.last {
	margin-right: 0 !important;
}

img.right {
	float: right;
	margin: -10px 0 10px 15px;
}

img.left {
	float: left;
	margin: -10px 30px 10px 0;
}

/***********************
  Typo
***********************/

#content p, #content ul {
	text-align: justify;
}

h2, h3 {
	font-family: georgia, times, serif;
	font-weight: normal;
	line-height: 130%;
}

h2,
h3,
input#fullsubmit,
.newsletter_cmd input {
	text-transform: uppercase;
}

h2,
h3 {
	color: #000;
}

h2 {
	margin: 40px 0 0.6em 0;
}

h2.top {
	margin-top: 0px;
}

h2,
input#fullsubmit,
.newsletter_cmd input {
	text-align: left;
	font-size: 130%;
	letter-spacing: 0.1em;
}


h3 {
	font-size: 100%;
	letter-spacing: 0.05em;
	margin: 1em 0 0.5em 0;
}

address {
	font-style: normal;
}

dl, p, address, #content ul {
	margin-bottom: 0.6em;
}

dt {
	float: left;
	width: 5em;
}

#content ul {
	list-style-type: square;
	margin-left: 1em;
}

#content li {
	margin-bottom: 0.2em;
}

/*** Seitenspezifisch ***/

.impressum dt {
	width: 13em;
}

.error {
	color: #c4043e;
}

p#footer {
  font-size: 90%;
  margin-top: 0.5em;
}