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

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

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

#quicknewsletter h1 span,
#claim span,
#labels span,
.large 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, 
#content h1 span {
	width: 978px;
	height: 124px;
}

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

#koeln span {
	background-image: url(../images/css/headline_koeln.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);
}

/***********************
  Subheadlines
***********************/

h2.large,
h2.large span {
	width: 440px;
	height: 44px;
}

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

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

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

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

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

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

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

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

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

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

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

/***********************
  Qicknewsletter
***********************/

#quicknewsletter h1, 
#quicknewsletter h1 span {
	height: 35px;
	width: 178px;
	font-size: 0px;
	color: #f3f3f3;
}

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

/***********************
  Claim
***********************/

#claim, 
#claim span {
	width: 317px;
	height: 54px;
}

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

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

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

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

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

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


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

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

.content {
	width: 500px;
	margin: 0 0 40px 40px;
}

.full {
	width: 896px !important;
}

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 {
	padding-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: 90em;
	background: url(../images/moodpics/ueberuns.jpg) no-repeat bottom right #000;
}

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

#large {
	width: 500px;
	height: 230px;
	margin-bottom: 12px;
}

.thumb {
	width: 156px;
	height: 72px;
	margin: 0 12px 0 0;
}

.last {
	margin-right: 0;
}

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

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

img.semigap {
	float: left;
	margin: 0 40px 10px 1.2em !important;
}

.trendsandbrands {
	margin: 1em 0 1em 0 !important;
}

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

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

h1 {
	margin-bottom: 50px;
}

h2 {
	margin-bottom: 0.6em;
	text-align: left;
	font-size: 110%;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #f08e00;
}

h3 {
	font-size: 100%;
	margin: 0.6em 0 0 0;
	color: #fff;
}

h4 {
	font-size: 100%;
	margin: 0.6em 0 0 0;
}

address {
	font-style: normal;
}

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

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

.gap {
	margin-top: 2em !important;
}

p.lead {
	margin-top: -1em;
	font-weight: bold;
}

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

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

/*** Überschriften mit Bildersatz ***/


h2.large {
	margin: 2em 0 1em -21px;
}

h2.lead {
	margin-top: 0 !important;
}

h3.large {
	margin: 0 0 0.2em -21px;
}

/*** Marginal ***/

#marginal p.lead {
	margin-top: 0em;
}

#marginal h2 {
	color: #b1b2b3;
}

/*** Seitenspezifisch ***/

.impressum dt {
	width: 13em;
}

.error {
	color: #C4043E;
}

/***********************
  News
***********************/

.summer {
	margin-top: 30px;
	color: #0094a9;
}

.stoerer {
	background: url(../images/news/2008_summer-special_stoerer.gif) no-repeat bottom right #000;
}

.stoerer img.left {
	margin-bottom: 0 !important;
	margin-top: -3px;	
}

.stoerer p {
	letter-spacing: 0;
}



.newnews #marginal {
	width: 335px;
	padding-right: 42px;
	margin: 0 0 40px 40px;
	float: left !important;
}

.newnews .content {
	width: 450px;
	margin: 0 0 40px 415px;
	padding-top: 30px;
}

.newnews  .labels {
	margin-left: 40px !important;
}

* {
	margin: 0;
	padding: 0;	
}

body {
	margin: 0 auto 0 auto;
	padding: 0 0 4em 0; 
	font: normal 0.8em calibri, arial, sans-serif; 
	letter-spacing: 0.02em;
	text-align: center;
	line-height: 120%;
	color: #b1b2b3;
	background: url(../images/css/body_bg.png) repeat-x top left #414141;
}

hr {
	color: #000;
	border: none;	
}

#clearer {
	clear: both;
}

.clearer {
	clear: left;
}

a img {
	border: none;
}

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

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

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

#vintage {
	background: url(../images/css/body_bg.gif) repeat-x top left #414141;
}

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

#grunge {
	position: absolute;
	overflow: hidden;
	height: 465px;
	width: 957px;	
	left: 50%;
	top: 0;
	margin-left: -525px;
	background-image: url(../images/css/grunge_bg.png);
	background-repeat: no-repeat;	
}

/***********************
      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: 300px;
	width: 280px;
	color: #414141;
	font-size: 105%;
	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;
	height: 215px;
	padding: 30px 0 0 0;
	text-align: left;
}

#logo {
	margin-left: 35px;
}

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

/*** Quicknewsletter ***/

#quicknewsletter h1 {
	margin-bottom: 14px;
}

#quicknewsletter fieldset {
	border: none;
}

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

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

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

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

#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 !important;
	width: 110px;
	margin-bottom: 1px;	
}

#quicknewsletter #quickmail {
	margin: 6px 18px 0 0;
}

#quicknewsletter #quicklast {
	margin-left: 4px;
}

#quicknewsletter #quicksubmit {
	margin-top: 7px;
}

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

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

#quicknewsletter label, 
#quicknewsletter input {
	font: normal 90% calibri, arial, sans-serif;
	border-top: 1px solid #b4b4b4;
	border-bottom: 1px solid #b4b4b4;	
}

#quicknewsletter input {
	color: #fff;
}

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

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

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

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

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

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

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

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

#content {
	position: relative;
	width: 978px;
	padding: 25px 6px 0 5px;
	text-align: left;
	background: url(../images/css/content_bg.png) repeat-y top left #000;
	border-bottom: 6px solid #fff;
}

/*** Claim ***/

#claim {
	z-index: 2;
	position: absolute;
	top: 85px;
	right: 50px;
}

#claim img {
	display: none;
}

/*** 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: 200px;
	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% calibri, arial, sans-serif;
	color: #b3b3b3;
	background-color: #272727;
	border: none !important;
}

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

.content select {
	width: 189px;
	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: #f08e00;
	color: #000;
}

.content #submit, 
.content #fullsubmit,
.content .newsletter_submit {
	margin-left: 400px;
	margin-top: 1em;
	padding: 0 !important;
	width: 103px;	
	height: 35px;
}

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

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

/***********************
  Footer
***********************/

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

#footer a.active {
	color: #f08e00;
}

#footer a:focus, #footer a:hover, #footer a:active {
	color: #f08e00;
}