/* http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select{font-size:100%}

html{
  background: #33373e;
  overflow-y: scroll;
}

body {
  background: #33373e;
  color: #171416;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 150%;
}

img {
  display: block;
  margin: 0px;
  padding: 0px;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

h1 {}

h2 {
  font-size: 18px;
  text-transform: uppercase;
  margin: 20px 0px 10px 0px;
  letter-spacing: 2px;
}

h2.lowercase {
  text-transform: none;
}

h3 {}

p {
  padding: 0px 20px 0px 0px;
}

p#suchformular {
  text-align: left;
  padding: 0px;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  font-weight: bold;
}

ul {
  margin: 10px 0px 0px 0px;
}

ul li {
  list-style-image: url(/media/images/layout/bullet-list.png);
  margin: 0px 0px 4px 20px;
  line-height: 15px;
}

/* Sammelklassen */

.preis {
  color: #f00;
  letter-spacing: -0.1em;
}

/*****************************************************************************************************************************/

/* Boxmodel */

.right {
  float: right;
}


.left {
  float: left;
}

div#wrapper {
  width: 925px;
  min-height: 730px;
  height: auto !important;
  height: 730px;
  margin: 5px auto 0px auto;
}

div#header {
  width: 925px;
  height: 76px;
  background: #7b93cb url(/media/images/layout/bg_header.jpg) scroll 0px 0px repeat-y;
}

div#menu {
  width: 925px;
  height: 36px;
  background: #a7b5dd url(/media/images/layout/bg_menu.jpg) scroll 0px 0px repeat-y;
  border-top: 2px solid #c2cee8;
}

div#page {
  width: 925px;
  background: #fff;
}

div#content {
  margin: 3px 0px 0px 15px;
  display: block;
  float: left;
  width: 703px;
  height: 596px;
}

a#logo {
  width: 191px;
  height: 47px;
  margin: 20px 0px 0px 15px;
  float: left;
  background: transparent url(/media/images/layout/logo.png) scroll 0px 0px no-repeat;
}

a#logo span {
  display: none;
}

img#slogan {
  display: block;
  float: left;
  margin: 40px 0px 0px 18px;
}

div#standardbereiche {
  font-size: 12px;
  margin: 8px 0px 0px 0px;
  display: block;
  width: 220px;
  float: right;
  color: #fff;
}

div#standardbereiche label {
  text-transform: uppercase;
}

div#standardbereiche a {
  color: #fff;
}

div#standardbereiche a {
  color: #fff;
  text-decoration: none;
}

#suche {
  margin: 15px 0px 0px 0px;
  padding: 0px;
}

div#standardbereiche label {
  margin: 0px 0px 0px 0px;
  display: block;
  float: left;
}

input#suchbegriff,
input#plz {
  margin: 0px 0px 0px 8px;
  font-size: 11px;
  display: block;
  float: left;
  width: 125px;
  height: 15px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #e7e8e8;
  border-right: 1px solid #e7e8e8;
  background: #fff;
}

input#suchen,
input#plz_suche_absenden {
  margin: 0px 0px 0px 8px;
  display: block;
  float: left;
  width: 16px;
  height: 17px;
  border: none;
  background: transparent url(/media/images/layout/bg_suche.png) scroll 0px 0px no-repeat;
}

input#plz {
  margin: 0px 0px 0px 0px;
  width: 125px;
  height: 15px;
}

/* Main Menu */

#menu ul {
  margin: 0px 0px 0px 207px;
}

#menu ul li {
  display: block;
  height: 36px;
  line-height: 36px;
  float: left;
  margin: 0px 30px 0px 0px;
}

#menu ul li.lastelement {
  margin-right: 0px;
}

#menu ul li a {
  display: block;
  height: 36px;
  text-transform: uppercase;
  color: #eff3fa;
  padding: 0px 1px 0px 1px;
}

#menu ul li a:hover, #menu ul li a.active {
  color: #c41525;
  background: transparent url(/media/images/layout/bg_menu_hover.png) scroll 0px 0px repeat-x;
  text-decoration: none;
}

/* Sidebar */

div#sidebar {
  margin: 3px 0px 0px 0px;
  padding: 15px;
  display: block;
  float: left;
  width: 177px;
  height: 566px;
  background: #f2f3f5;
}

#sidebar-title {
  text-transform: uppercase;
}

#sidebar-menu {
  border-top: 1px solid #a4bee3;
  margin: 5px 0px 0px 0px;
}

#sidebar-menu li {
  border-bottom: 1px solid #a4bee3;
  padding: 5px 0px 5px 0px;
  margin: 0px;
  line-height: 13px;
  list-style: none;
  list-style-image: none;
}

#sidebar-menu li a {
  color: #000;
}

#sidebar-menu li a:hover, #sidebar-menu li a.active {
  color: #f00;
  text-decoration: none;
}

#sidebar-teaser {
  margin: 50px 0px 0px 0px;
}

/* Home/Mein Hammer-Markt */

#mein-hammer-markt {
  display: block;
  width: 159px;
  height: 206px;
  background: #e7eaf6 url(/media/images/layout/deutschlandkarte_klein.png) scroll center center no-repeat;
  border: 1px solid #e3e6f2;
  padding: 8px;
}

#mein-hammer-markt h3 {
  text-transform: uppercase;
  color: #fff;
  width: 175px;
  height: 18px;
  text-align: center;
  background: url(/media/images/layout/bg_meinhammermarkt.gif) scroll top left repeat-x;
  display: block;
  border-bottom: 2px solid #e3e6f2;
  margin: -8px 0px 0px -8px;
}

#mein-hammer-markt strong {
  color: #c41525;
  display: block;
  margin: 10px 0px 0px 0px;
}

#mein-hammer-markt span#anleitung {
  display: block;
  margin: 0px 0px 20px 0px;
}

#mein-hammer-markt input#plz {
  display: block;
  width: 157px;
  border: 1px solid #000;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  height: 18px;
  line-height: 20px;
  margin: 0px 0px 10px 0px;
}

#mein-hammer-markt input#plz-suchen {
  display: block;
  width: 157px;
  border: 1px solid #637ec0;
  background: url(/media/images/layout/bg_meinhammermarkt.gif) scroll top left repeat-x;
  height: 18px;
  line-height: 18px;
  color: #fff;
  margin: 8px 0px 0px 0px;
  padding: 0px;
}

#mein-hammer-markt a {
  color: #c41525;
}

a.mein-hammer-link {
  font-size: 10px;
}

a.mein-hammer-link:hover {
}

#teaser-hammertv {
  margin: 150px 0px 0px 0px;
}


#teaser-hammertv img {
  margin: 7px 0px 0px 0px;
}

#teaser-home-jubilaeum {
  position: absolute;
  z-index: 2;
  margin: -140px 0px 0px 450px;
}

#caption-home {
  font-size: 34px;
  color:  #f00;
  font-weight: bolder;
  margin: 20px 0px 20px 0px;
}

/* Service */

.service {
  width: 257px;
  height: 184px;
  display: block;
  float: left;
  background: #9fcfff;
  margin: 0px 3px 3px 0px;
}

.service-text {
  width: 320px;
  height: 371px;
  background: none;
}

#hammertv-video {
  background: #f2f3f5;
  padding-top: 21px;
  height: 163px;
}

#hammertv-video a {
  display: block;
  background: #000;
  width: 257px;
  height: 163px;
  padding-top: 21px;
  margin-top: -21px;
}

#hammertv-video a img {
  width: 257px;
  height: 142px;
}

/* Sortiment */

div.sortiment {
  height: 175px;
  width: 114px;
  display: block;
  float: left;
  margin: 0px 3px 0px 0px;
}

div.sortiment a h3 {
  text-transform: uppercase;
  display: block;
  color: #000;
}

div#markenbereich {
  text-align:center;
  display: block;
  float: right;
  width: 120px;
  height: 596px;
  background: #fff;
}

div#markenbereich img,
div#markenbereich canvas {
  display: block;
  margin: 0px auto 15px auto;
}

div.sortimentsbox {
  display: block;
  width: 127px;
  height: 209px;
  float: left;
  margin: 0px 3px 3px 0px;
  background: #9fcfff;
}

div.text {
  width: 320px;
  background: none;
}

#morph {
  overflow: hidden;
}

#teaser-jubilaeum {
  position: absolute;
  z-index: 2;
  margin: 0px 0px 0px 150px;
}

#teaser-jubilaeum img {
  width: 150px;
  height: 150px;
}

/* Angebote */

.hwg-angebot {
  margin: 120px 10px 0px 0px;
  display: block;
  width: 175px;
  height: 160px;
  float: left;
  border: 1px solid #e30010;
  background: #fff;
  position: relative;
}

.hwg-angebot-uebersicht {
  margin: 10px 10px 0px 0px;
  display: block;
  width: 163px;
  height: 155px;
  float: left;
  overflow: hidden;
  border: 1px solid #e30010;
  background: #fff;
  position: relative;
}

.hwg-angebot-uebersicht h3 {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
  color: white;
  width: 163px;
  height: 21px;
  line-height: 19px;
  background: #e30010;
}

.hwg-angebot h4 {
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: #c41525;
  width: 175px;
  height: 21px;
  background: transparent url(/media/images/layout/bg_jubilaeumsknueller.jpg) scroll 0px 0px no-repeat;
}

.hwg-angebot h4 span {
  display: none;
}

.hwg-angebot img {
}

.hwg-angebot .bezeichnung, .hwg-angebot-uebersicht .bezeichnung {
  padding: 3px 0px 1px 2px;
  font-size: 10px;
  line-height: 11px;
  font-weight: bold;
}

.hwg-angebot .preis, .hwg-angebot-uebersicht .preis {
  display: block;
  float: right;
  font-size: 19px;
  margin: 0px 10px 0px 0px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.hwg-angebot .preis span, .hwg-angebot-uebersicht .preis span {
  color: #000;
  font-size: 13px;
}

.hwg-angebot .preis sup, .hwg-angebot-uebersicht .preis sup {
  font-size: 13px;
  vertical-align: text-top;
}

/* Angebotsdetails */

#angebot-details {}

#angebot-details img {
  display: block;
  float: left;
  margin: 0px 10px 0px 0px;
}

#angebot-details #info {
  font-size: 11px;
  line-height: 15px;
  float: right;
  width: 175px;
  padding: 0px 10px 0px 0px;
}

#angebot-details #info h2 {
  font-size: 20px;
  margin-top: 25px;
  width: 175px;
  word-wrap: break-word;
}

#angebot-details #info .preis {
  display: block;
  float: left;
  font-size: 40px;
  margin: 0px 10px 0px 0px;
}

#angebot-details #info .preis span {
  color: #000;
  letter-spacing: 0em;
  font-size: 20px;
}

#angebot-details #info .preis sup {
  font-size: 25px;
  vertical-align: text-top;
}

#backlink {
  display: block;
  float: left;
  clear: left;
  color: #fff;
  font-weight: bold;
  font-size: 9px;
  text-align: center;
  line-height: 11px;
  display: block;
  width: 119px;
  height: 24px;
  border: 1px solid #538cc4;
  background: transparent url(/media/images/layout/bg_backlink.gif) scroll top left repeat-x;
  margin: 20px 0px 0px 0px;
}

/* Sortimente Bilder */

.beispielbild {
  margin: 5px 0px 20px 10px;
}

/* Standorte */

div#standorte-suche {
  display: block;
  float: left;
  width: 290px;
  margin: 0px 3px 0px 0px;
  padding: 0px 10px 0px 0px;
}

div#standorte-uebersicht {
  font-size: 10px;
  line-height: 14px;
  display: block;
  float: right;
  width: 400px;
  margin: 0px;
}

div#anschrift,
div#filialen_a-z,
div#sortiment {
  display: block;
  float: left;
  width: 189px;
  height: 370px;
  padding: 5px;
  margin: 2px 0px 0px 0px;
  background: #e6e9f5;
}

div#standorte-uebersicht h3 {
  text-transform: uppercase;
  color: #fff;
  width: 199px;
  height: 18px;
  text-align: center;
  background: url(/media/images/layout/bg_meinhammermarkt.gif) scroll top left repeat-x;
  display: block;
  border-bottom: 2px solid #e3e6f2;
  margin: -5px 0px 0px -5px;
}

div#anschrift {
  margin: 2px 2px 0px 0px;
}

div#filialen_a-z {
  overflow-y: scroll;
  line-height: 16px;
}

div#filialen_a-z h3 {
  width: 180px;
}

div#sortiment {
  line-height: 16px;
  color: #6b6a6d;
  font-weight: bold;
}

div#filialen_a-z a {
  color: #6b6a6d;
  font-weight: bold;
}

div#filialen_a-z a:hover {
  text-decoration: none;
}

div#standorte {
  font-size: 14px;
  margin: 15px 0px 0px 0px;
  height: 430px;
  overflow-y: auto;
}

div#routenplaner {
  width: 270px;
  padding: 10px;
  background: #e6e9f5;
  border: 1px solid #637ec0;
}

div#routenplaner h3 {
  display: block;
  text-transform: uppercase;
  width: 290px;
  height: 19px;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  background: url(/media/images/layout/bg_routenplaner.png) scroll top left repeat-x;
  color: #fff;
  margin: -10px 0px 15px -10px;
}

div#routenplaner input {
  border: 2px solid #000;
  border-bottom: 2px solid #e3e5eb;
  border-right: 2px solid #e3e5eb;
  margin: 0px 0px 10px 0px;
  height: 16px;
}

div#routenplaner p {
  padding: 0px;
  margin: 0px;
}

div#routenplaner input#adresse {
  width: 266px;
}

div#routenplaner input#plz {
  width: 56px;
  margin-right: 10px;
}

div#routenplaner input#ort {
  width: 196px;
}

div#routenplaner input#route_berechnen {
  border: 1px solid #637ec0;
  width: 264px;
  height: 18px;
  color: #fff;
  font-weight: bold;
  background: url(/media/images/layout/bg_meinhammermarkt.gif) scroll top left repeat-x;
}

/* Unternehmen */

#unternehmen-philo {
  font-size: 11px;
  display: block;
  float: left;
  width: 400px;
}

#unternehmen-geschichte {
  font-size: 11px;
  line-height: 13px;
  display: block;
  float: left;
  width: 400px;
}

#unternehmen-geschichte-liste dt {
  font-weight: bold;
  color: #c41525;
}

#unternehmen-geschichte-liste dd {
  margin: 0px 0px 15px 0px;
}

/* Karriere */

#karriere-uebersicht {
  font-size: 11px;
  line-height: 13px;
  display: block;
  float: left;
  width: 410px;
}

h3#karriere {
  font-size: 16px;
  display: block;
  margin: 25px 0px 15px 0px;
}

#karriere-uebersicht table {
  font-size: 10px;
}

#karriere-uebersicht table th {
  font-weight: bold;
}

#karriere-uebersicht table thead tr {
  background: #e6e9f5;
}

#karriere-uebersicht th,
#karriere-uebersicht td {
  border: 1px solid #d5d8df;
  padding: 3px 5px 3px 10px;
  vertical-align: top;
}

#karriere-uebersicht td a {
  color: #000;
}

/* Kontakt */

#kontakt {
  font-size: 10px;
  line-height: 13px;
  display: block;
  float: left;
  width: 410px;
}

#kontakt table {
  margin: 20px 0px 0px 0px;
}

#kontakt td {
  padding: 3px 5px 3px 0px;
}

#kontakt td span, span.pflichtfeld {
  font-weight: bold;
  color: #f00;
}

#kontakt input, #kontakt textarea, #kontakt select {
  border: 1px solid #aeb2be;
}

#kontakt input, #kontakt select {
  height: 16px;
}

input#nachricht-senden {
  display: block;
  width: 80px;
  height: 18px;
  font-weight: bold;
  color: #fff;
  border: 1px solid #637ec0;
  text-transform: uppercase;
  background: url(/media/images/layout/bg_meinhammermarkt.gif) top left repeat-x;
  padding: 0;
  overflow: visible;
}

div#kontakt-anschrift {
  font-size: 11px;
  line-height: 14px;
  background: #e6e9f5;
  display: block;
  float: right;
  width: 256px;
  height: 310px;
  padding: 10px;
}

div#kontakt-anschrift strong {
  color: #f00;
}

/* Jobs */

#jobdetails {
  display: block;
  float: left;
  font-size: 11px;
  width: 470px;
}

#jobdetails table {
  width: 450px;
}

#jobdetails table tr {
  background: #e3e8f5;
}

#jobdetails table tr td {
  border: 1px solid #d7dbe4;
  padding: 0px 0px 0px 5px;
}

#jobdetails p {
  margin: 10px 0px 0px 0px;
}

#jobbox {
  display: block;
  float: right;
  clear: right;
  background: #e3e8f5;
  width: 231px;
  height: 360px;
}

#jobteaser {
  display: block;
  float: right;
  margin-bottom: 3px;
}

/* Suche */

a.suchergebnis-link {
  color: #c41525;
  text-decoration: underline;
}

a.suchergebnis-link:hover {
  text-decoration: none;
}

span.suchbegriff {
  font-weight: bold;
  color: #c41525;
}

/* Impressum */

div#impressum {
  font-size: 10px;
  line-height: 13px;
  display: block;
  float: left;
  width: 410px;
}

div#impressum h3 {
  font-size: 13px;
  margin: 5px 0px 5px 0px;
}

div#impressum strong, div#impressum-medienpark strong {
  color: #c41525;
}

div#impressum-medienpark {
  font-size: 11px;
  line-height: 14px;
  background: #e6e9f5;
  display: block;
  float: right;
  width: 256px;
  height: 310px;
  padding: 10px;
}

/* hammertv */

.hammertv-video {
  display: block;
  float: left;
  width: 167px;
  height: 200px;
  margin: 0px 8px 11px 0px;
}

.hammertv-video a span.bild {
  display: block;
  width: 167px;
  height: 116px;
  background: #000;
  padding-top: 24px;
}

.hammertv-video a span img {
  width: 167px;
  height: 92px;
}

.hammertv-video a {
  text-transform: uppercase;
}

.hammertv-video a:hover {
  text-decoration: none;}