* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}
  
html {
  height: 100%;
}

body {
  height: 100%;
  overflow-y: scroll;
}

#wrapper {
  margin: 0 auto;
  /*border-bottom-width: 10px;
  border-bottom-style: solid;*/
  background: url(../files/schatten.jpg) repeat-y;
}

a {
  text-decoration: none;
}

img {
  border: 0 none;
}

/* ----------------------- Größen */

#wrapper {
  width: 800px;
  margin-bottom: 5px;
  padding: 0 5px;
}

#header {
  height: 420px;
}

#nav-left {
  width: 228px;
  border-right: 2px solid #aaa;
}

#nav-left .product {
  width: 110px;
  margin-right: 10px;
  margin-left: 10px;
}

#nav-left .sort {
  width: 98px;
}

#nav-top,
#content {
  width: 510px;
  padding-left: 30px;
  padding-right: 30px;
  border-left: 2px solid #aaa;
  margin-left: -2px;
}

/* ----------------------- Schriftgrößen */

#wrapper {
  font-size: 70%;
}

#content h1,
#nav-left dt {
  font-size: 140%;
}

#content p.price,
#content h2 {
  font-size: 110%;
}

#nav-top li,
#nav-left .sort li {
  font-size: 100%;
}

#nav-top,
#nav-left,
#content h1,
#content h2,
#content p.price {
  letter-spacing: 0em;
}

/* ----------------------- Hintergrundfarben */

body {
  background: #fff;
}

/* helllila */
#footer {
  background: #dd3d8c;
}

/* ----------------------- Schriftfarben */

/* weiß */
#footer,
#footer a {
  color: #fff;
}

/* helllila */
#nav-left dt,
#nav-left li a:hover,
#nav-left li strong,
#nav-top li a:hover,
#nav-top li strong,
a:hover,
#content h2,
#content strong {
  color: #dd3d8c;
}

/* dunkellila */
#content h1,
#content p.price {
  color: #606;
}

/* grau */
#wrapper,
a {
  color: #555;
}

/* ----------------------- Rahmenfarben */

/* helllila */
#header {
  border-color: #dd3d8c;
}

/* grau */
#nav-top li {
  border-color: #555;
}

/* ----------------------- Header */

#header {
  border-width: 15px;
  border-style: solid;
  position: relative;
}

#header #articleimage {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 3;
}

#header #logo {
  position: absolute;
  right: 10px;
  top: 10px;
  background: url(../files/logo.jpg) no-repeat;
  height: 89px;
  width: 158px;
  z-index: 5;
}

#header #articleimage img,
#header #logo img {
  display: none;
}

#header #ecke {
  display: block;
  height: 45px;
  width: 45px;
  position: absolute;
  right: -15px;
  bottom: -15px;
  background: url(../files/ecke.gif) no-repeat;
  z-index: 5;
}

/* ----------------------- Navi links */

#nav-left {
  float: left;
  padding: 10px 0 30px 0;
}

#nav-left .product {
  text-align: right;
  float: left;
}

#nav-left .sort {
  float: right;
}

#nav-left dt.sort {
  margin-top: -1.6em;
}

#nav-left dt {
  margin-bottom: .5em;
}

#nav-left li {
  list-style-type: none;
}

#nav-left li.spacing {
  margin-top: 1.5em;
}

#nav-left li a,
#nav-left li strong {
  display: block;
  margin-bottom: 0.3em;
}

/* ----------------------- Navi oben */

#nav-top {
  float: left;
  text-align: right;
  margin-bottom: 10px;
}

#nav-top ul {
  float: right;
  text-align: right;
  padding: 10px 0px 10px 0;
}

#nav-top li {
  list-style-type: none;
  float: left;
  padding: 0 5px;
  border-left-width: 1px;
  border-left-style: solid;
}

#nav-top li.first {
  border-left: 0 none;
}

/* ----------------------- Content */

#content {
  float: left;
  padding-bottom: 30px;
}

#content h1,
#content h2,
#content p,
#content ul {
  margin-bottom: 1em;
  font-weight: normal;
}

#content h1.nospace {
  margin-bottom: 0.2em;
}

#content p.price {
  margin: 20px 0 0 0;
}

#content a {
  text-decoration: underline;
}

#content ul {
  margin-left: 1.5em;
}

/* ----------------------- Sitemap */

#content .sitemap {
  margin: 0;
}

#content .sitemap li {
  list-style-type: none;
  clear: left;
  display: block;
}

#content .sitemap li a {
  text-decoration: none;
  display: block;
  float: left;
  margin: 3px 10px 2px 0;
  width: 130px;
  text-align: right;
}

#content .sitemap ul {
  float: left;
  margin: 3px 0;
}

#content .sitemap ul li {
  clear: none;
}

#content .sitemap ul li a {
  float: none;
  margin: 0;
  text-align: left;
}

/* ----------------------- Footer */

#footer {
  clear: both;
}

#footer div {
  padding: 3px 10px;
  float: left;
}

#footer #foot-nav {
  float: right;
}

#footer a:hover {
  text-decoration: underline;
}

#footer strong {
  font-weight: bold;
}

/* ----------------------- Sonstiges */

#wrapper:after,
#footer:after,
#content .sitemap li:after,
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0;
  line-height: 0;
  font-size: 0;
  clear: both; 
  visibility: hidden;
}