/* Standard Stylesheet
www.hardsoft-kiel.de

Gestaltung und Design 
von Annette Schiffer */


html, body {
	height: 100%;
}
body {
margin: 0;
padding: 0;
font-family:  Arial, Verdana, Helvetica, sans-serif;
font-size: 62.5%;
text-align: center;
color: #333;
background-color: #fff;
line-height:1.7em;
background-image: url(../grafik/headerbg.gif);
background-repeat: repeat-x;
}

#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 100%;
	margin: 0 auto -6.5em; /* the bottom margin is the negative value of the footer's height */
	}
	
#container {
margin: 0.5em auto;
width: 102em;
text-align: left;
background-color: transparent;
border: 0px solid #000;
padding: 3px;
}	



/* @group header */

#header {
width: 100%;
height: 15em;
background-color: transparent;
border: 0px solid #000;
margin: 0 0 2em 0;
padding: 0;
}

#logo {
width: 20em;
height: 13em;
background-image: url(../grafik/logo-hardsoft.gif);
background-repeat: no-repeat; 
border: 0px solid #fff;
margin: 0;
padding: 0;
float: left;
}


#headerbg {
width: 66em;
height: 11.8em;
background-image: url(../grafik/header.gif);
background-repeat: no-repeat; 
background-color: transparent;
border: 0px solid #000;
margin: 0;
padding: 0;
float: right;
}

/* @end */


/* @group content */

#content {
width: 73em;
background-color: #fff;
padding: 0;
border: 0px solid #000;
text-align: left;
margin: 2.4em 0 0.2em 0;
float: right;
}

#content h1, #content h2, #content h3, #content h4,  #content h5, #content h6 {
	font-weight: bold;
	padding: 0;
	background-color: transparent;
	text-align: left;
}

#content h1, #kontakt h1 {
font-family: "Lucida Grande", "Lucida Sans Unicode"  Verdana, Arial, Helvetica, sans-serif;
margin: 0.5em 0 1em 0;
font-size: 2.4em;
font-weight: normal;
line-height: 0.4em;
letter-spacing: 0.1em;
color: #333;
}

#content h2 {
padding: 0;
margin: 1.2em 0 0.6em 0;
font-size: 2em;
letter-spacing: 0.1em;
line-height: 1.4em;
font-weight: normal;
}

#content div.sslshopitem div.sslheadline h2 {
	margin: 0 0 0.6em 0;

}

#content h3 {
margin: 1.2em 0 0.6em 0;
font-size: 1.6em;
}

#content h4, #content h5, #content h6 {
margin: 1em 0 0.4em 0;
font-size: 1.5em;
}

#content div#self-service-lite div p, #content p {
	font-size: 1.4em;
	margin: 0.3em 0 0.5em 0;
	padding: 0;
	line-height: 1.6em;

}


#content ul {
font-size: 1.4em;
margin: 1em 0 1em 2em;
padding: 0;
list-style-image: url(../grafik/navi-icon.gif);
}

#content ul li {
margin: 0.3em 0 0.5em 0em;
padding: 0 ;
line-height: 1.4em;
}


#content p.refer {
	margin: 2em 0;
}

img#content p.refer {
	border: none;
}

.bildli {
margin: 2px 10px 7px 0; 
float: left; 
border: 0px solid #000;
}

.bildre { 
margin: 2px 5px 20px 7px; 
float: right; 
}

.bbildli {
margin: 2px 10px 7px 0; 
float: left; 
border: 1px solid #333;
}

.bbildre { 
margin: 2px 5px 20px 7px; 
float: right; 
border: 1px solid #333;
}

.left {
	margin: 0 1.5em 1em 0; 
float: left; 
border: 0px solid #000;
width: 20em;
}

#content hr, html > body div#self-service-lite hr {
border-top: 0px dotted #E50083;
border-right: 0px solid #fff;
border-bottom: 0px solid #fff;
border-left: 0px solid #fff;
color: #fff;
clear: both;
width: 98%;
margin: 2em 0 0 0;
padding: 0;
	background-image: url(../grafik/raute.png) ;
	background-repeat: repeat-x;

}

#content hr {
	height: 1em;
}

.clear {
clear: both;
height: 0;
}

/* @group Galerie */  /*Teambilder */
#galerie {
margin: 0.2em 0;
width: 100%; 
border: 0px solid #fff;
padding:0;
background-color: #fff;
}

#galerie dl {
margin: 0 2.6em 0 0;
padding: 0;
float: left;
display: block;
border: 0px solid #000;
width: 20em;
}


#galerie dt {
padding: 0;
margin: 0;
}

#galerie dt img { 
border: 4px double #dfdfdf;
padding: 0px;
background-color: #fff;
}

#galerie dd {
font-size: 1.2em;
padding: 0;
text-align: center;
margin: 0;
border: 0px solid #ccc;
background-color: #fff;
}

div#galerie p {
font-size: 1.1em;	
text-align: justify;
margin: 0;
width: 95%;
}

/* @end */

#content p.refer {
	margin: 2em 0;
}

img#content p.refer {
	border: none;
}

/* @group Tabelle Versandkosten */

div#content .tabversand {
	border: 1px solid #333;
	margin: 1em 0;
	padding: 1em;
	border-collapse: collapse;
	color: #3d3d3d;
}

div#content .tabversand td, div#content .tabversand th {
	border: 1px solid #ccc;
	margin: 0;
	padding: 1em;
	font-size: 1.1em;
	text-align: center;
	vertical-align: top;
}

div#content .tabversand th {
	background-color: #fecc00;
	font-weight: bold;
	}

/* @end */

/* @end */


/* @group Listen/Aufzählungen */

div#self-service-lite ul {
font-size: 1.4em;
margin: 1em 0 1em 0.2em;
padding: 0;
list-style-image: url(../grafik/navi-icon.gif);
}

div#self-service-lite div ul li {
margin: 0.3em 0 0.5em 0.2em;
padding: 0;
}


 div#self-service-lite div ol {
font-size: 1.4em;
margin: 1em 0 1.5em 1.2em;
padding: 0 ;
}

 div#self-service-lite div ol li {
margin: 0.3em 0 1em 2.5em;
padding: 0;
line-height: 1.5em;
}


/* @end */



.bildli {
margin: 2px 10px 7px 0; 
float: left; 
border: 0px solid #000;
}

.bildre { 
margin: 2px 5px 20px 7px; 
float: right; 
}

.bbildli {
margin: 2px 10px 7px 0; 
float: left; 
border: 1px solid #333;
}

.bbildre { 
margin: 2px 5px 20px 7px; 
float: right; 
border: 1px solid #333;
}

.left {
	margin: 0 1.5em 1em 0; 
float: left; 
border: 0px solid #000;
width: 20em;
}



/* @group Kontakt */

#kontakt form{
width : 50em;
margin: 0 0 0 0;
}

#kontakt fieldset {
 border:1px solid #E50083;
 padding:1em;
 width: 45em
}


#kontakt legend{
font-weight : bold;
font-size : 1.4em;
color: #E50083;
margin:0.3em;
padding:1em;
}

#person label{
height:1.5em; 
float:left; 
padding:0 0 0.2em 0.5em; 
margin-top:1px; 
width:5em; 
color: #333;
font-weight: bold;
font-size: 1.3em;
display: block;
}

#person input{
background-color:#ffffcc;
border: 1px solid #767676;
font-size: 1.1em;
padding: 0.3em;
color: #333;
width: 30em;
  }

 
#kontakt textarea{
 background-color: #ffffcc;
  border: 1px solid #767676;
  padding: 0.3em;
  margin: 0.2em;
  width: 33em;
  height: 10em;
font-family:  Arial, Verdana, Helvetica, sans-serif;
font-size: 1.2em;
color: #222;
}

#absenden input {
background-color: #E50083;
border: 2px solid #c0c0c0;
font-size: 1.6em;
font-weight: bold;
margin: 0 0.3em 1em 1em;
padding: 0.5em;
color: #fff;	
width: 10em;
letter-spacing: 0.1em;
}

div#kontakt #absenden input:hover {
	color: #333;
	background-color: #FFE84A;
	border: 2px solid #aaa;
}

#kontakt input:active, #kontakt input:focus, #kontakt input:hover { background: #E8EBDF;}

div#content h3.kontaktfehler, div#content p.kontaktfehler {
	color: #E2001A;
}


/* @end */

/* @group Newsletter */

.nl form{
width : 50em;
margin: 0 0 0 0;
}

.nl fieldset {
 border:1px solid #E50083;
 padding:1em;
 width: 45em
}


.nl legend{
font-weight : bold;
font-size : 1.4em;
color: #E50083;
margin:0.3em;
padding:1em;
}

.nl label {
display: none;	
visibility: hidden;
}

.nl input.txtbox{
background-color:#ffffcc;
border: 1px solid #767676;
font-size: 1.2em;
padding: 0.5em;
margin: 0 0.3em 0.3em 0;
color: #333;
width: 30em;
  }

.nl input.button {
background-color: #E50083;
border: 2px solid #c0c0c0;
font-size: 1.4em;
font-weight: bold;
margin: 0 0.3em 1em 0;
padding: 0.5em;
color: #fff;	
width: 15em;
letter-spacing: 0.1em;
}

div.nl input.button:hover {
	color: #333;
	background-color: #FFE84A;
	border: 2px solid #aaa;
}

.nl input:active, .nl input:focus, .nl input:hover { background: #E8EBDF;}

div#content h3.nlfehler, div#content p.nlfehler {
	color: #E2001A;
}


/* @end */


/* @end */



/* @group Galerie */

/* ---------------- lightbox ------------------------*/
#screenshot {
	margin: 0;
	padding: 0;
}

#screenshot a:link { 
border: 0px solid #E50083;
margin: 1em;
padding: 0.2em;
}

#screenshot a:visited { 
border: 0px solid #333;
margin: 1em;
padding: 0.2em;
}

#screenshot a:hover {
border: 0px solid #333;
margin: 1em;
padding: 0.2em;
}



/* -- ------Galerie2 ---------*/

#galerie2 {
margin: 0.2em 0;
width: 100%; 
border: 0px solid #fff;
padding:0;
background-color: #fff;
}

#galerie2 dl {
margin: 0 2.6em 0 0;
padding: 0;
float: left;
display: block;
border: 0px solid #000;

}

#galerie2 dt {
padding: 0;
margin: 0;
}

#galerie2 dt img 
{ 
border: 0px double #dfdfdf;
padding: 0px;
background-color: #fff;
}

#galerie2 dd {
font-size: 1.2em;
padding: 0;
text-align: center;
margin: 0;
border: 0px solid #fff;
background-color: #fff;
}


/* @end */





.clear
{
clear: both;
height: 0;
}

/* @group footer */

.push {
	height: 6.5em; /* .push must be the same height as .footer */
	width: 100%;
	background-color: transparent;
}

#footer {
	height: 6.5em; /* .push must be the same height as .footer */
	width: 100%;
	background-color: #333;
	background-image: url(../grafik/footerbg.gif);
	background-repeat: repeat-x;
}

#foot {
height:6em;
background-color: transparent;
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
}

#foot p {
font-size: 1.2em;
margin: 0.5em 0 0.5em 0;
padding: 0;
color: #fff;
}

#foot  a:link { 
font-size: 1.1em; 
font-weight: bold;
color: #EBF2FF; 
text-decoration: underline; 
margin: 0 0.1em;
padding: 0.1em;
}

#foot  a:visited { 
color: #fff; 
text-decoration: underline; 
font-weight: bold;
margin: 0 0.1em;
padding: 0.1em;
}

 #foot  a:hover {
color: #333;
background-color: #FFE84A;
text-decoration: none;
padding: 0.1em;
}

/* @end */
	



/* @group Links */

#content a:link, #content a:visited { 
font-weight: bold;
color: #E50083; 
text-decoration: underline; 
margin: 0 0.1em;
padding: 0.3em 0.3em 0.3em 0.2em;
}

#content a:hover {
color: #333;
background-color: #FFE84A;
text-decoration: none;
padding: 0.3em 0.3em 0.3em 0.2em;
}


/* @end */





	

/* @group Navigation */

/* @group horizontal oben */
/*-------------------Navigation horizontal -------------------*/

#navi {
width: 80em;
padding: 0;
margin: 0 ;
border: 0px solid #999;
height:2em;
background-color: transparent;
font-family: "Lucida Grande",  Arial, Verdana, Helvetica, sans-serif; 
letter-spacing: 0.1em;
float: right;
}

#navi ul {
width: 100%;
margin: 0.7em 0 0 0;
padding: 0;
height:2.4em;
border: 0px solid #4996CC;
background-color: #333;
}

#navi li {
margin: 0 0.1em;
padding: 0;
display: inline;
list-style-type: none;
}

.navinl li{
	margin: 0;
padding: 0;
display: block;
float: left;
list-style-type: none;
border: 0px solid #4996CC;
}

#navi li a:link, #navi li a:visited {

font-size: 1.4em;
line-height: 2em;
font-weight: bold;
margin: 0  ;
padding: 0.3em;
text-decoration: none;
color: #ECEDEF;
background-color: #E50083;
}


#navi li a:hover {
color:#E50083;
background: #ffffff; /* old browsers */

background: -moz-linear-gradient(top, #ccc 0%, #ffffff 47%, #ededed 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* ie */
}

#navi li#current {
color: #333;
background-color: #fff;
border: 0px solid #BAE94D;
font-size: 1.4em;
line-height: 1.6em;
font-weight: bold;
margin: 0 ;
padding: 0.3em;
text-decoration: none;
}

/* @end */

/* @group Untermenu */

#naviplatzhalter {
width: 18em;
margin: 2em 1em 2em 0;
padding: 0;
background-color: #fff;
font-weight: bold;
border: 1px solid #fff;
float: left;
}

#naviprod {
width: 20em;
margin: 2em 1em 2em 0;
padding: 0;
background-color: #fff;
line-height: 1.7em;
border: 1px solid #f1f1f1;
float: left;
}

#naviprod h1 {
	background: url(../grafik/menu-header.gif);
	background-repeat:repeat-x;
	height: 3.5em;
	letter-spacing: 0.1em;
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", "Lucida Sans Unicode"  Verdana, Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-weight: normal;
	text-align: center;
	width: 100%;
	color: #333;
	line-height: 1.7em;
}

#naviprod p{
font-weight: normal;
margin: 0.5em 0.1em 0.5em 0.3em;
padding: 0;
text-align: left;
font-size: 1.4em;
}

#naviprod p a:link, #naviprod p a:visited { 
font-weight: bold;
color: #333; 
text-decoration: underline; 
margin: 0 ;
padding: 0;
}

#naviprod p a:hover {
color: #E50083;
text-decoration: none;
}

#naviprod p a:link.naviprodstart, #naviprod p a:visited.naviprodstart  { 
font-weight: bold;
color: #E50083; 
text-decoration: underline; 
margin: 0 ;
padding: 0;
}

#naviprod p a:hover.naviprodstart {
color: #333;
text-decoration: none;
}

#naviprod p a:link img, #naviprod p a:visited img{
border: 0px solid #fff;	
}

#wind {
margin: 0.5em 0.3em 2.5em 2.5em;
padding: 0;
}


#naviprod ul {
list-style: none;
margin: 0 1em 0 1em;
padding: 0;
}		

#naviprod li a {
text-decoration: none;
color: #333; 
font-size: 1.4em;
font-weight: bold;
}

#naviprod li a:link, #naviprod li a:visited {
color: #333;
display: block;
line-height: 2em;
letter-spacing: 0.01em;
background-color:  #fff;
padding: 0.2em 0 0.1em 1.8em;
border-bottom: 1px dashed #ccc;
}

#naviprod li a:hover { 
color: #333;
background-image: url(../grafik/navi-icon.gif);
background-repeat: no-repeat;
background-position: 0.4em;
background-color: #F5F5F5; 
border-bottom: dashed 1px #ccc;
}


#naviprod li#current { 
background-image: url(../grafik/navi-icon.gif);
background-repeat: no-repeat;
background-position: 0.4em;
font-size: 1.4em;
font-weight: bold;
color: #333;
background-color: #f1f1f1; 
border-bottom: dashed 1px #ccc;
padding: 0.3em 0 0.2em 1.8em;
}

#naviprod li#subcurrent { 
background-image: url(../grafik/navi-icon.gif);
background-repeat: no-repeat;
background-position: 0.4em;
color: #333;
background-color: #F5F5F5; 
border-bottom: dashed 1px #ccc;
padding: 0.2em 0 0.1em 1.8em;
margin-left : 2em;
}

#naviprod li a.sslmenueactive { 
background-image: url(../grafik/navi-icon.gif);
background-repeat: no-repeat;
background-position: 0.4em;
color: #333;
background-color: #f1f1f1; 
border-bottom: dashed 1px #ccc;
padding: 0.2em 0 0.1em 1.8em;
}
/*
#naviprod ul.sslmenue li * li a.sslmenueactive {
background-image: url(../grafik/navi-icon.gif);
background-repeat: no-repeat;
background-position: 0.4em;
color: #333;
background-color: #F5F5F5; 
border-bottom: dashed 1px #ccc;
padding: 0.2em 0 0.1em 1.8em;
margin-left : 2em;
}
*/

.sub{
margin: 0 0 0 2em;
}

/*Sub */
#naviprod ul.sslmenue li * li {
	padding: 0;
	margin: 0;
	font-weight: normal;
	background-position: 0;
}

#naviprod ul.sslmenue li * li a:link, #naviprod ul.sslmenue li * li a:visited {
	font-weight: normal;
}

#naviprod ul.sslmenue li * li a.sslmenueactive {
	color: #ccc;
	font-weight: normal;
	border: none;
		background-position: 0;
}
/* zweite Ebene */

#naviprod ul.sslmenue ul.sub2 li a.sslmenueactive {
		color: #333;
		font-weight: bold;
		background-image: url(../grafik/navi-icon.gif);
background-repeat: no-repeat;
background-position: 0.4em;
border-bottom: dotted 1px #ccc;
background-color: #eaebf0;
}

	/* dritte Ebene */
#naviprod ul * ul.sub3 {
	color: green;

}

#naviprod ul.sslmenue ul.sub3 li a.sslmenueactive {
	border: 0px solid #000;
	line-height: 2.3em;
	background-image: none;
	background-image: url(../grafik/navi-icon.gif);
background-repeat: no-repeat;
background-position: 0.4em;
background-color: transparent;
	border-bottom: dashed 1px #ccc;
}




/* @end */


/* @end */



/* @group SSL Rücknahme */

/* @group Galerieeditor */

div#self-service-lite div a img {
    border: 1px solid #E50083;
    padding: 0;
}                   

div#content div#self-service-lite div a:hover img {
    border: 1px solid #333;
	background-color: transparent !important;
	text-decoration: none;
}        


/* @end */




/* @group shop */

div#self-service-lite div.sslshopitem {
	margin: 0.8em 0 0 0;
}

div#self-service-lite div.sslshopitem form{
	padding: 0;
}

/*mwst */
div#self-service-lite div.sslshopitem form div.sslshopnote {
padding: 0;
margin:5px 0 0 0;
text-align: right;
}

div#self-service-lite div.sslshopitem form span.sslshopitemnr {
	font-size: 1.2em;
}

div#content div#self-service-lite div.sslshopitem form div.sslshopnote p {
text-align:right;
width: 100%;
font-size:1.2em;
margin: 0;
padding: 0;
}

/* @end */


/* @group warenkorb */


div#self-service-lite form.sslshopcart table#sslshopcarttable {
	font-size: 1.2em;
}

div#self-service-lite div.sslshopitem form input.sslshoporderbutton { /*in den warenkorb */
font-size: 1.4em;
 font-weight:bold;
 letter-spacing: 0.01em;
 line-height: 1.8em;
 border:1px solid #999;
 background-color: #FFE84A;
 color:#222;
 padding:0.3em 0.5em;
 }
div#self-service-lite div.sslshopitem form input.sslshoporderbutton:hover {
 background-color:#E50083;
 color:#fff;
}

div#self-service-lite div.sslshopitem form input.sslshoporderbuttondisabled {
color:#fff;
background-color: #777;
padding: 0.2em;
}

div#self-service-lite div.sslshopitem form input.sslshoporderbuttondisabled:hover {
color:#fff;
background-color: #777;
}

div#self-service-lite form.sslshopcart table#sslshopcarttable td.sslshopcartcontinue a {/* button "back to shop" */
font-size: 1.1em;
 display:block;
 border:1px solid #999;
 background-color: #FFE84A;
 color:#000;
 padding:3px 0 3px 0;
 margin:0 0 0 2px;
 text-decoration:none;
 text-align:center;
 width:13em;
}


div#self-service-lite form.sslshopcart table#sslshopcarttable td.sslshopcartcontinue a:hover {
 background-color: #E50083;
 color:#fff;
}

div#self-service-lite form.sslshopcart table#sslshopcarttable td.sslshopcartbuttoncell input.sslshopcartbutton {/* order button */ 
font-size: 1.2em;
line-height: 1.8em;
 border:1px solid #999;
 background-color: #FFE84A;
 color:#333;
 padding:0.8em;
 margin:0 0 3px 3px;
 letter-spacing: 0.01em;
}

html > body div#self-service-lite form.sslshopcart table#sslshopcarttable td.sslshopcartbuttoncell input.sslshopcartbutton {
	padding: 0.3em;
}

div#self-service-lite form.sslshopcart table#sslshopcarttable td.sslshopcartbuttoncell input.sslshopcartbutton:hover {
 background-color:#E50083;
 color:#fff;
  letter-spacing: 0.01em;
}          


#naviprod li.sub_wunschzettel {
margin: 2em 0 0 0;
}

div#self-service-lite div div.sslheadline {
	margin: 0;
}

#content div#self-service-lite ul.sslpageturn {
border-top:1px solid #CCCCCC;
clear:both;
float:none;
height:1.5em;
list-style-type:none;
margin:15px 0 0;
padding:3px 0 0;
list-style-image: none;
}

/* warenkorb */

/* Bestellformular */
div#self-service-lite form.sslshoporderform fieldset table#sslshoporderformdata td {
border:1px solid #EFEFEF;
padding:5px 10px 2px;
vertical-align:top;
font-size: 1.3em;
}

div#self-service-lite form.sslshoporderform fieldset table#sslshoporderformdata td.sslshoporderforminput input {
	padding: 0.2em;
}

/* Bestellung abschicken */
html > body div#self-service-lite form.sslshoporderform fieldset table#sslshoporderformdata td.sslshoporderformorder input {
font-size: 1.4em;
line-height: 1.6em;
font-weight: bold;
padding:0.5em;
background-color: #E50083;
color: #fff;
border: 2px solid #aaa;
letter-spacing: 0.01em;
}

div#self-service-lite form.sslshoporderform fieldset table#sslshoporderformdata td.sslshoporderformorder input:hover {
background-color:#FFE84A;
color:#333;
}


/* @end */

/* @end */