/*  RESET */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline;zoom:1;}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:hover,a:active{outline:0;}b,strong{font-weight:700;}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:none;}q:before,q:after{content:none;}small{font-size:75%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;-ms-interpolation-mode:bicubic;}svg:not(:root){overflow:hidden;}button,input,select,textarea{font-size:100%;vertical-align:middle;}button,input{line-height:normal;overflow:visible;}table button,table input{overflow:auto;}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;}input[type=checkbox],input[type=radio]{box-sizing:border-box;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,h1,h2,h3,h4,html,p,ul{margin:0;padding:0;}audio:not([controls]),[hidden]{display:none;}

/* BASE STYLING */

@font-face{
  font-family: 'osp-dindin';
  src: url('/img/layout/webfontkit/sittingbull-webfont.eot');
  src: url('/img/layout/webfontkit/sittingbull-webfont.eot?#iefix') format('embedded-opentype'),
  url('/img/layout/webfontkit/sittingbull-webfont.woff') format('woff'),
  url('/img/layout/webfontkit/sittingbull-webfont.ttf') format('truetype'),
  url('/img/layout/webfontkit/sittingbull-webfont.svg#webfont') format('svg');
}

body {
  width: 100%;
  height: 100%;
  background-color: #eeecec;
  /* font-family: 'osp-dindin', verdana; */
  font-family: verdana;
}

h1 {
  font-family: 'osp-dindin', verdana;
  font-size: 28px;
}

.clear {
  clear: both;
}

.header {
  font-size: 20px;
}

.header_big {
  font-size: 28px;
}

.float {
  float: left;
}

.float_right {
  float: right;
}

#header_left {
  background: url('/img/layout/texture_links.jpg') repeat;
  height: 173px;
  width: 50%;
  float: left;
  position: relative;
  z-index: 2;

}

#header_right {
  background: url('/img/layout/texture_rechts.jpg') repeat;
  height: 173px;
  width: 50%;
  float: left;
  position: relative;
  z-index: 2;
}

#header_wrapper {
  height: 173px;
  width: 100%;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;

}

#header {
  margin: 0 auto 0 auto;
  width: 960px;

  height: 173px;
  position: relative;
  z-index: 3;


    /*
  width: 960px;
  margin: -173px auto;
  height: 173px;
  background-color: lightgray;
*/
}

#logo {
  z-index: 5;
  float: left;
  padding: 16px 0 0 10px;
  width: 129px;
  height: 140px;
}

#teaser1 {
  z-index: -1;
  float: left;
  position: absolute;
  top: -1px;
  left: -135px;
}

#navi {
  background-color: #fff;
  height: 30px;
  position: absolute;
  left: 196px;
  top: 126px;
  z-index: 6;

}

#navi ul {
  list-style: none;
  padding-top: 5px;
}

#navi ul li {
  float: left;
  padding: 0 20px 0 20px;
}

#navi ul li a {
  text-decoration: none;
  font-size: 20px;
  color: #000;
  font-family: 'osp-dindin', verdana;
}

#navi ul li a.active {
  color: red;
}

#navi ul li a:hover {

  color: #E10119;
}

.wrapper {
  margin: 0 auto;
  display: block;
  width: 960px;
  position: relative;
}

/******** FOOTER *********/
#footer {
  background: url('/img/layout/sofindensieuns.jpg') no-repeat transparent;
  color: #777577;
  height: 190px;
}

#footer .adresse {
  float: left;
  width: 310px;
  padding: 55px 0 0 13px;
}

#footer .adresse img {
  float: left;
}

#footer .adresse span {
  padding-top: 5px;
}

#footer .adresse p {
  float: left;
  color: #777577;
  padding: 5px;
  font-size: 13px;
}

#footer .kontakt {
  float: left;
  width: 310px;
  padding: 55px 0 0 13px;
}

#footer .kontakt img {
  float: left;
}

#footer .kontakt p {
  padding: 5px;
}

#footer .kontakt table {
  font-size: 13px;
}

#footer .oeffnungszeiten {
  float: left;
  width: 300px;
  padding: 55px 0 0 12px;
}

#footer .oeffnungszeiten img {
  float: left;
}

#footer .oeffnungszeiten p {
  padding: 5px;
}

#footer .oeffnungszeiten table {
  font-size: 13px;
}

#footer #footer_bottom {
  padding: 12px 20px 20px 20px;
  color: #777577;
  font-size: 12px;
}

#footer #footer_bottom a {
  text-decoration: none;
  color:  #777577;
}

#footer #footer_bottom span#medienpark {
  float: right;
}

/* STARTSEITE */
#startseite {
  position: relative;
}

.newsBox {
  background: url('/img/layout/aktuelles.jpg') no-repeat;
  position: absolute;
  top: 16px;
  right: 20px;
  color: #777577;
  height: 411px;
  width: 288px;
}

.newsBox .news_header {
  font-size: 26px;
  color: #E0001A;
  padding: 10px 10px 10px 20px;
  font-family: 'osp-dindin', verdana;
}

.newsBox .news_block {
  width: 255px;
  height: 165px;
  padding: 10px 0 10px 20px;
  font-size: 14px;
}

.newsBox .news_block p.news_head {
  font-size: 20px;
  padding-bottom: 5px;
}

.newsBox .news_block a {
  padding-right: 25px;
  float: right;
  text-decoration: none;
  color: #777577;
  background: url('/img/layout/page_btn.png') no-repeat right 0px;
  margin: 10px 30px 0 0;
  height: 22px;
}

#slider_overlay {
  position: absolute;
  top: 330px;
  left: 20px;
  background-color: transparent;
  width: 609px;
  height: 50px;
  z-index: 10;
}

#slider_overlay p.oben {
  position: absolute;
  bottom: 16px;
  left: 20px;
  color: #777577;
  font-family: 'osp-dindin', verdana;
}

#slider_overlay p.unten {
  position: absolute;
  bottom: -28px;
  left: 20px;
  color: #777577;
  font-size: 14px;
}

#sortiment {
  background: url('/img/layout/sortiment.jpg') no-repeat;
  height: 195px;
  width: 960px;
  margin-bottom: 10px;
  padding-top: 25px;
}

#sortiment div {
  float: left;
  width: 240px;
  text-align: center;
  height: 150px;
}

#sortiment div a {
  padding-right: 30px;
  background: url('/img/layout/page_btn.png') no-repeat right 0px;
  text-decoration: none;
  font-size: 16px;
  color: #777577;
  height: 21px;
  padding-bottom: 1px;
}

/**** Aktuelles ****/
.aktuelles {
  padding: 20px 10px 10px 10px;
}

.aktuelles .neues {
  margin: 10px 0 20px 0;
  overflow: hidden;
}

.aktuelles .neues2 {
  margin: 10px 0 20px 0;
  overflow: hidden;
}

.aktuelles .neues .news_innertext {
  float: left;
  width: 676px;
  padding: 5px 10px 10px 10px;
  font-size: 14px;
  color: #777577;
}

.aktuelles .neues2 .news_innertext {
  float: left;
  width: 676px;
  padding: 5px 10px 10px 10px;
  font-size: 14px;
  color: #777577;
}

.aktuelles .neues img {
  float: right;
}

.aktuelles .neues2 img {
  float: left;
}

/**** Ueber Uns *****/
#ueber_uns {
  padding: 20px 10px 20px 10px;
  font-size: 18px;
  color: #777577;
  width: 460px;
  font-size: 14px;
}

#ueber_uns .dindin {
  font-family: 'osp-dindin', verdana;
  font-size: 20px;
}

.headline {
  font-family: verdana;
  font-size: 16px;
  font-weight: bold;
}

/******** SERVICE ***********/
#service {
  padding: 20px 10px 10px 10px;
}

#service div.links {
  color: #777577;
  font-size: 14px;
  margin-bottom: 20px;
  float: left;
}

#service div.links p {
  padding: 0 10px 0 0px;
  width: 450px;
  float: left;
}

#service div.rechts {
  float: right;
  color: #777577;
  font-size: 14px;
  margin-bottom: 20px;
}

#service div.rechts p {
  padding: 0 0px 0 20px;
  width: 450px;
  float: right;
}

/***** Impressum *****/
#impressum {
  padding: 20px 10px 10px 10px;
}

#impressum p {
  color: #777577;
  font-size: 14px;
}

/***** Kontakt *****/
#kontakt {
  padding: 20px 10px 10px 10px;
}

#kontakt p {
  color: #777577;
  font-size: 14px;
}

#kontakt table {
  color: #777577;
  font-size: 14px;
}

.errors {
  list-style: none;
  margin-top: 10px;
  width: 680px;
}

.errors li {
  color: red;
  font-size: 12px;
  padding: 2px 10px 2px 10px;
}

#kontakt input {
  height: 20px;
}

#routenplaner_start {
  font-size: 14px;
  text-decoration: none;
}

#button {
  width: 170px;
  height: 30px!important;
}

/***** Sortiment ****/

#sortimentgruppe {
  padding: 20px 10px 10px 10px;
}

#sortimentgruppe .leftspace {
  float: left;
  width: 268px;
}

#sortimentgruppe .rightspace {
  float: left;
  padding-left: 20px;
  padding-top: 2px;
}

#sortimentgruppe ul.sidebar {
  width: 268px;
  list-style: none;
}

#sortimentgruppe ul.sidebar li {
  background-color: #fff;
  margin: 2px 0 2px 0;
  padding: 2px 0 2px 10px;
}

#sortimentgruppe ul.sidebar li a {
  color: #000;
  text-decoration: none;
}

#sortimentgruppe ul.sidebar li a.active {
  color: red;
}

#sortimentgruppe ul.sidebar li a:hover {
  color: red;
}

#sortimentgruppe .warengruppentext {
  color: #777577;
  font-size: 14px;
  width: 640px;
  padding: 20px 10px 10px 0;
  margin-bottom: 20px;
}

.gallery {
  width: 650px;
  /* overflow: hidden; */
  position: relative;
  height: 450px;
  float: left;
}

.gallery .holder {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.gallery .holder ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 99999px;
  height: 295px;
}

.gallery .holder ul li {
  float: left;
  display: block;
  width: 650px;
  height: 450px;
  margin: 0 auto;
  background-color: #EEECEC;
  position: relative;
}

.gallery .holder ul li img {
  margin: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.gallery .prev {
  position: absolute;
  top: 20%;
  left: 10px;
  background: url("/img/layout/btn-slider-left.png") no-repeat transparent;
  width: 38px;
  height: 53px;
}

.gallery .next {
  position: absolute;
  top: 20%;
  right: 10px;
  background: url("/img/layout/btn-slider-right.png") no-repeat transparent;
  width: 38px;
  height: 53px;
}

.gallery .paging {
  /*width: 100px;
  height: 50px; */
  position: absolute;
  top: 430px;
  left: 40%;
  z-index: 10;
}

.gallery .paging ul {
  list-style: none;
}

.gallery .paging li {
  float: left;
  font-size: 0px;
  color: transparent;
  padding-right: 5px;
  height: 11px;
  width: 11px;
}

.gallery .paging li a {
  display: block;
  background: url("/img/layout/slider_btn_off.png") no-repeat transparent;
  height: 11px;
  width: 11px;
}

.gallery .paging li a.active {
  background: url("/img/layout/slider_btn_on.png") no-repeat transparent;
}


/* Nivoo Slider */
#slider_container {
  background: url('/img/layout/slider.jpg') no-repeat 0 1px;
  height: 475px;
  width: 960px;
}

.nivoo-slider,
.nivoo-slider-holder {
  height: 419px!important;
  overflow: hidden;
  position: absolute;
  width: 620px;
  top: 8px;
  left: 10px;
  float: left;
}
.nivoo-slider.got-control-nav {
  height: 411px;
}
.nivoo-slider.direction-nav-outside {
  width: 720px;
}
.direction-nav-outside .nivoo-slider-holder {
  margin: 0 60px;
}

.nivoo-slider-holder {
  background-repeat: no-repeat;
  height: 411px;
  width: 610px;
}

.nivoo-slider img,
.nivoo-link {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 0;
}
.nivoo-slider > img:first-child,
.nivoo-slider > a:first-child img {
  z-index: 1;
}

.nivoo-link {
  border: none;
  display: none;
  height: 100%;
  width: 100%;
  z-index: 20;
}

.direction-nav-left {
  left: 0;
}
.direction-nav-right {
  right: 0;
}

.direction-nav-hide {
  opacity: 0;
  transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
}
.nivoo-slider:hover .direction-nav-hide,
.direction-nav-hide:hover {
  opacity: 1;
}

/* directioNavPosition inside */
.direction-nav-left,
.direction-nav-right {
  position: absolute;
  top: 0;
  z-index: 40;
}
.direction-nav-left a,
.direction-nav-right a {
  display: block;
}
.direction-nav-left a:focus,
.direction-nav-right a:focus {
  outline: none;
}
.direction-nav-left a {
  background: url(images/icons/arrow-left.png) no-repeat 2% 50%;
}
.direction-nav-right a {
  background: url(images/icons/arrow-right.png) no-repeat 98% 50%;
}

/* directioNavPosition oustide */
.direction-nav-outside .direction-nav-left,
.direction-nav-outside .direction-nav-right {
  width: 60px;
}

.nivoo-slice {
  display: block;
  height: 100%;
  position: absolute;
  z-index: 10;
}

/* caption */

.nivoo-slider p {
  background: #181818;
  background: rgba(0, 0, 0, .6);
  bottom: -30px;
  color: #fff;
  height: 30px;
  line-height: 30px;
  left: 0;
  margin: 0;
  text-indent: 10px;
  position: absolute;
  width: 100%;
  z-index: 30;
}

/* control navigation */

div.control-nav {
  height: 20px;
  line-height: 20px;
  margin: 10px 0 0;
  text-align: center;
  position: absolute;
  z-index: 100;
  bottom: -3px;
  right: 10px;
  padding-top: 5px;
}
div.control-nav a {
  color: #aaa;
  font-size: 20px;
  outline: none;
  padding: 5px;
  text-decoration: none;
  text-shadow: 0 0 2px #ddd;
  transition: color 1s;
  -moz-transition: color 1s;
  -ms-transition: color 1s;
  -o-transition: color 1s;
  -webkit-transition: color 1s;
  background: url("/img/layout/slider_btn_off.png") no-repeat transparent;
}

div.control-nav a.current {
  background: url("/img/layout/slider_btn_on.png") no-repeat transparent;
}

div.control-nav .disc {
  font-size: 40px;
}
div.control-nav a.current,
div.control-nav a:hover {
  color: #333;
}
