/*
###########################################################################
Main styles for dr-einhellig.de 2013

FileName:   main.css
Author:		Barbara Völk, www.voelkwerbung.de
Version:    2013.07.08
###########################################################################
*/


/***********************************************/
/* COLOURS */

/*
Logo.
orange #e66019
gray #676767

bown-grey #9d9993
beige verlauf #e7e4dd -> #d1cac0


Farbe d-rot #55101a
Farbe gelb/ocker #d2b045

*/

/*
NEW:
grey brown: #605650
brown brown: #533520
brown1: #806f63
brown2: #bfac9f
brown3: #bfb1a8


AS OF 23.10.13
bg grey-brown: #9d9993
beige: #d1cac0
brown: #806F63
d-brown: #605650

menu bg: 73706b
menu zurück bg:
background: rgba(0,0,0,0.1);
menu active + hover:
background: rgba(255,248,213,0.1);

text:
l-beige: #f7ebdd
menue bg
background: #73706b;

*/


/*
Type BB: ITC Century Book Condensed

Type: officina serif??  MinionPro??
font-family: MinionPro, Georgia, "Times New Roman", serif;
*/

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


/***********************************************/
/* MAIN SETUP RESET */
/***********************************************/

html, body, div, a, p, img, ul, li, h1, h2, h3, h4, span, time, hr, hgroup, a img, footer, header, section, aside, nav, form, input, article, label, textarea, small {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
  	text-decoration:none;
}
footer, section, article, header, aside, nav {
    display:block;
}
:focus {
    outline:none;
}
::-moz-selection, ::selection {
   color:#ffffff;
   background:#8a493a;
}

h1, h2, h3, h4 {
    font-weight:normal;
}

ul {
    /*list-style:none; list-style-type: square;*/list-style-type: none;
}


/* Set up for stiles for links + hover effects for desktop + mobile (which don't use :hover) */
a:link {
	color:#e66019; /* e66019 orange */
	color: #55101a;  /* #55101a d-rot */
	text-decoration: none;
}
a:visited {
	color:#e66019; /* e66019 orange */
	color: #55101a;  /* #55101a d-rot */
	text-decoration: none;
}
a:hover, a:active, a:focus {
	color: #55101a;  /*#55101a d-rot */
	color:#e66019; /* orange */
	color: #ffffff;  color: #806F63; /* brown */
	color: #605650; /*d-brown: #605650 */
	text-decoration: none;
}

/********************************************************************/
/* MAIN SETUP BASIC ELEMENTS */
/********************************************************************/

@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome.eot');
	src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
		url('../fonts/fontawesome.woff') format('woff'),
		url('../fonts/fontawesome.ttf') format('truetype'),
		url('../fonts/fontawesome.svg#fontawesome') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Lato';
	src:url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

html {
   height:101%; /* make scrollbar visible all the time */
   border-top:solid 8px #434d52; border-top:solid 6px #605650;/*border-bottom:solid 8px #434d52;*/
   background: transparent url("../images/bottom.png") center bottom no-repeat fixed;background: transparent url("../images/bottom.png") center bottom repeat-x fixed;background: transparent;
}

body {
   font-size:20px; font-size: 12px; font-size: 0.750rem;
   color:#434d52; color: #d1cac0; color: #f7ebdd;
   font-family: 'Lato', Arial, sans-serif;
   font-weight:normal;
   -webkit-text-size-adjust:100%;
   line-height:1.3em;
   background: url("../images/bg.png") left top no-repeat fixed;background: url("../images/bg.png") center top no-repeat fixed;
   background: #d1cac0;background: #d1cac0 url("../images/bg1.jpg") center top no-repeat fixed;background: #d1cac0 url("../images/bg1.jpg") right top no-repeat fixed;

   background: #d1cac0 url("../images/bg1.jpg") center top no-repeat fixed;background: #d1cac0 url("../images/bgSide.gif") left top repeat-x fixed;/*background: url("../images/raster.png") center top no-repeat; */

   background: #d1cac0 url("../images/bg1.jpg") left top repeat-x fixed;/*background: #605650; grey brown*/ background: #bba996; /* bown-grey #9d9993 */background: #9d9993;
   background: #c8c1b9;background: #bab3a9; background: #9d9993 url("../images/bg1.jpg") 0px 23px repeat-x fixed;
   background: #9d9993 url("../images/bg0.jpg") 0px 17px repeat-x; background: #9d9993 url("../images/bg1.jpg") 0px 17px repeat-x;
    background: #9d9993 url("../images/bg0.jpg") 0px 17px repeat-x;
   /*border-bottom:solid 8px #434d52;*/
}

/* VENDOR PREFIXES OVERVIEW */

/*
 .box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Safari 3.1+
     -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15
      -ms-transform: rotate(7.5deg);  /* IE 9
       -o-transform: rotate(7.5deg);  /* Opera 10.50-12.00
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera 12.10+
}

.box_columns {
  -webkit-column-count: 2;  -webkit-column-gap: 15px; /* Chrome, Safari 3
     -moz-column-count: 2;     -moz-column-gap: 15px; /* Firefox 3.5+
          column-count: 2;          column-gap: 15px; /* Opera 11+
}

*/

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }


/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px; background: #d1cac0;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 6px #d1cac0;
   /* -webkit-border-radius: 10px;
    border-radius: 10px;*/
}

/* Handle */
::-webkit-scrollbar-thumb {
   /* -webkit-border-radius: 10px;
    border-radius: 10px; */
    background: rgba(255,0,0,0.8); background: #806F63; background: #676767; background: #55101a; background: #806F63;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); background: #d1cac0;
}



/********************************************************************/
/* MAIN WRAPPERS + MAIN LAYOUT ELEMENT + TAG SELECTORS */
/********************************************************************/

.innerWrap {
  width:96%;
  max-width:1200px;max-width:1000px;max-width:1110px; max-width: 1183px;
  margin:0 auto; background: transparent;
}

.innerWrapOverflow {
  width:96%;
  max-width:1200px;
  margin:0 auto;
  overflow:auto;
}


/***********************************************/
/* HEADER */
/***********************************************/

/* header class="topWrap" */
.topWrap {
    width:100%;
    padding: 14px 0;

}

#outerWrap {
    width:100%;
    padding:145px 0;
	background: url("../images/bg0.png") left top no-repeat;
}

.topWrap h1 {
  width:100%;
  text-align:center;text-align:left;
  /*font-family: Frutiger, Helvetica, Arial, sans-serif;*/
  font-size:2.2em;
  line-height:1em;
  letter-spacing:1px;
}

h1 span {
    margin:0 0 0 0px;color: #ffffff; /*color:#e7e4dd;*/
}
h1 img {
    margin:0 0 0 0px;width: 218px; width: 100%;width:1074px;max-width:1074px;max-width:96%;height: 142px; background: url("../images/logo.png") right top no-repeat;
}
.logo {float: right; margin:0; position: relative; top: 0;height: 142px;width: 218px;background: url("../images/logo.png") right top no-repeat;}

#top { height: 153px;}
#top img{display:inline!important;}
#top .extra img{display: none!important;margin:0;}

.slogan {float: left; margin:0; position: relative; top: 0;width: 350px; margin: 28px 0 10px;}

.slogan ul { padding-top: 6px;}


h1 .extra {display: inline!important;}

header h1 a:hover, header h1 a:active, header h1 a:focus, header h1 a:hover .extra, header h1 a:active .extra, header h1 a:focus .extra  {
   color:#676767; /* #676767; d-grey */color:#55101a!important;/* #55101a d-rot */
}


.menu {
  text-align:left;
  display:block;
  width: 220px;
  height: auto;
  padding:12px 0 0 0;
  font-size:0.9em; font-size:0.9rem;font-size:1rem;
  line-height:1.6rem;
  background: #676767;
  background: #73706b; /* bg colour */
  position:relative;position: absolute;
  top:395px;
  margin-left:50px;
  text-transform: uppercase;
  /* -webkit-box-shadow: inset 0 0 6px #d1cac0;  Safari + Chrome only */
  z-index: 100; /* needed for flex-container */
}

#dl-menu2 {display: none;}


.blockWrap {
  width:100%;
}


.logoLabel {
  min-height: 150px;width: 165px;
  float:right;
  overflow:visible;
}

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


.logoLabel ul li{
  margin: 4px 0 0 0; /*width:105%;*/
}

ul li.first {/*border:solid 3px #676767;*/border-bottom:solid 1px #676767; height: auto; /*display: inline;*/ padding: 0; margin:0;}

.wrapStyle {
 /* background:url(../images/texture.jpg) center top fixed;*/
}


.phoneMobile {display:none;}
.phone {display:inline;}

.mainImage {
  width:100%;/* width: 1183px;*/
  margin: 4px 0 0 0px;
  -moz-box-align: start;	/* -moz-box-align:  Mozilla Firefox */
  -webkit-box-align:  baseline; /* Google Chrome, Chromium, Apple Safari */
}


/***********************************************/
/* FOOTER */
/***********************************************/
footer {
  width:100%;
  border-top: solid 3px #605650;
  color: #55101a;  /* #55101a d-rot */
   }
footer small {
  width:100%;
  text-align:center;text-align: right;
  margin: 0;
  padding:20px 40px 20px 40px;
  display:block;
   }

.footerleft {
	text-align: left;float: left;
	}



 /***********************************************/
/* MAIN CONTENT */
/***********************************************/

/* problems with IE8 -> doesn't render article, so we use html5.js */
article  {
  width:90%;
  max-width:800px;
  margin:0 auto;
  overflow:auto;
  padding:0 0 20px 0;
  }

article small { font-size:0.8em;
  width:100%;width:96%;
  text-align: right;
  margin: 0;
  padding:8px 0px 8px 0px;
  display:block;
   }


/* important article markup */
.important {
  max-width:580px;
}

.important1 {
  max-width:580px;max-width:600px;
  margin: 0 60px 0 auto;
}


article h1, #contentWrap h1  {
   width:100%;width:94%;
   text-align:center;text-align:right;
   padding:80px 0;padding:40px 0;padding:40px 0px 40px 0;
   font-size:1.8em;
   line-height:1.3em;
   font-style:italic;
   text-transform: uppercase;
  }
article h2, #contentWrap h2 {
  margin:20px 0 20px 0; margin:0px 0 20px 0;
  font-size:1.5em;font-size:1.3rem;
  line-height:1.1em;
  font-style:bold;
   width:100%;width:94%;
   text-align:center;text-align:right;
   padding:80px 0;padding:40px 0;padding: 0px 0px 20px 0;
   font-size:1.8em;
   /*font-style:italic;text-transform: uppercase; */
  }

article h3, #contentWrap h3 {
  margin:20px 0 20px 0;
  font-size:1.5em;font-size:1.3rem;
  font-style:bold;
  }
article p, #contentWrap p {
  margin:0 0 10px 0;
  clear:both;
  line-height:1.5em;
  font-size:1.1em;
  word-spacing:1px;
  }
article p.large/* , article p.large2 */ {
  font-size:1.26em;font-size:1.26em;max-width:540px;
}

article p.large2 {
  margin:0 0 0px 0;
}
article ul {
  font-size:1.1em;
  margin: 0 0 10px 0;padding: 0;
  line-height:1.5em;
}

.red {
	color: #55101a;  /* #55101a d-rot */
	text-decoration: none;
}
.indent { margin-left: 20px;
}
/* not working; use .icon-home instead */
.token {
	 font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    content: "\e000";
	color: #605650;
}

/* Use the following CSS code if you want to have a class per icon */
/* NOT WORKING HERE */
[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.icon-arrow:after {
	 font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    content: "\e000";
	color: #605650;
}

a:hover .icon-arrow:after{
	color: #605650;	/*d-brown */
	color: #f7ebdd; /* off white */
	color: #55101a; /* burgungy */
}


/*.home {background: rgba(0,0,0,0.1);}*/
ul.dl-submenu li.home {border-bottom: 3px solid #605650;border-top: 0px solid #605650;}

.rotate {	/* set in component.css */
  -ms-transform:rotate(180deg); /* IE 9 */
  -moz-transform:rotate(180deg); /* Firefox */
  -webkit-transform:rotate(180deg); /* Safari and Chrome */
  -o-transform:rotate(180deg); /* Opera */

  width: 20px;height:20px;
  position:relative;
  left: -10px; top: 0; float:left;
}
.rotate2 {	/* set in component.css */}
.icon-home:before {/* set in component.css */
	font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    content: "\e000";
	color: #605650;

}


.dl-menuwrapper button {
	/* z-index needed for IE9 and IE10 ??? */
	z-index: 19;
}

.icon-menu:after {/* set in component.css */ }

article ul li.listLeft {float:left; /*clear:both;*/width: 150px;margin:0px 0px 0px 0px;padding: 0px 0px 0 0px;}
article ul li.listMiddle {float:left; /*clear:both;*/width: 400px;margin:0px 0px 0px 0px;padding: 0px 0px 0 0px;overflow: visible;}
article ul li.listRight {float:right; clear:both;width: 90px;margin:0px 0px 0px 0px;padding: 0px 0px 0 20px; }

#st-accordion ul li.listMiddle {float:left;/* width: 400px;*/margin:0px 0px 20px 0px;padding: 0px 0px 0 0px;overflow: visible;}
#st-accordion ul li.listLeft {float:left; width: 150px;width: 160px;height: auto;max-height: 40px;margin:0px 0px 0px 0px;padding: 0px 0px 0 0px;}

#st-accordion ul { font-size: 21x; font-size: 1.3rem;}



.menu { z-index: 100;}
.flex-container { z-index: 1; }
.flex-caption {float: right;font-size: 1.3rem;font-weight: 400;margin: 20px 40px 0 0;}

/********************************************************************/
/* FORM ELEMENTS */
/********************************************************************/



@media (max-width: 1240px){

body { background: #9d9993 url("../images/bg1.jpg") 0px 17px repeat-x;background: #9d9993; }

.mainImage, .slides {
	margin: 4px 0 0 0px;margin: 0px 0 0 0px;
   border-bottom:solid 3px #605650;border-top:solid 3px #605650;

}
}



 /***********************************************/
/* iPad SETTINGS */
/***********************************************/

@media (max-width: 1024px){

article  {
  max-width:600px; max-width:700px;
  }
.slogan {width: 500px;width: 300px;}

.menu {
    top:525px; top:515px; top:465px;top:355px;}

.important1 {
  max-width:580px;
  margin: 0 10px 0 auto;

}
}



@media (max-width: 900px){

.menu {
   top:525px; top:425px;
   }

#dl-menu {display: none;}
#dl-menu2 {display: block;}

.important1 {
  margin: 0 10px 0 auto;
}

.address {width: 360px;float: right; margin-bottom: 20px;}

}


@media (max-width: 800px){

.menu {
   top:515px; top:495px;top:400px;
   }

}


@media (max-width: 768px){

.mainImage {
  width:100%;
}

.important {
  padding:20px 0 20px 0;
}
.subMenu li {
    width:50%;
    }
footer small {
  padding:60px 0; padding:20px 40px 20px 0px;
   }

h1 img {
    margin:0 0 0 0px;width: 218px; width: 100%;width:672px;height: 142px;
}

h1 .extra {display: none!important;}


.menu {
   top:15px; top: 475px; left: -18px;}

.menu {
   top:515px; top:490px;top:380px;
   }

.important1 {
  margin: 0 auto 0 auto;
}


footer small {
  width:100%;
  padding:20px 0px 20px 20px;
   }
.innerWrapOverflow {
    margin:0 auto;margin:0;
}


}


@media (max-width: 680px){

.menu {
   top:360px;}

}

 /***********************************************/
/* iPhone SETTINGS */
/***********************************************/

@media (max-width: 600px) {
 body {
   font-size:18px; font-size:16px; font-size: 1rem;
 }

.innerWrap {
  width:96%;
  max-width:1200px;max-width:1000px;max-width:1110px;
  margin:0 auto; background: transparent;
	padding: 0;
}

  .topWrap {
    width:100%;
	height: 50px;

}

.topWrap h1 {
  font-size:2.2em;position: relative;font-size: 1rem;
  }

h1 span {
    margin:0 0 0 0px;font-size:0.9rem;
}

.slogan { display: none;}

.logo {background: transparent;}

#top img{display:none!important;}
#top .logo { width: 40%; height: auto;/*background: #CCF;*/margin:0; padding:0;}
#top .extra img {display: inline!important; width:100%;position: relative; top:-5px;}

.menu {
   top:35px;left: -38px; background: none; }

.flex-container {clear: both;}

.dl-menuwrapper button {
	background: #ccc; background: #676767; /* logo grey */ background: #73706b; background: none;

}
#dl-menu2  {
	background: #9d9993; background: none;
}




.logoLabel {
  min-height: 150px;width: 165px;width:96%; /* background: #9C9; tester l-green */
}


article  {
  padding:0 0 20px 0;
  }
.important {
  padding:10px 0 10px 0;
 }
article p.large {
  font-size:1.3em;
 }
article p {
  font-size:1.3em;
  line-height:1.4em;
  margin:0 0 20px 0;
  }

article ul {
  font-size:1.3em;
  line-height:1.4em;
  margin:0 0 20px 0;
}

article  {
  padding:0 0 0px 0;
  }
article h3 {
  line-height:1.4em;
  margin:10px 0 10px 0;
  }

article h1 {
  padding:40px 0; padding:30px 0;
 }

article h2 {
  font-size:1.5em;
  line-height:1.1em;
  padding: 0px 0px 20px 0;
  font-size:1.6em;
  margin: -20px 0 20px 0;
  }


h3 {
  width:100%;
  /*text-align:center;*/
 }
.important1 {
  max-width:580px;max-width:540px;

}

article ul li.listMiddle {width: 400px; width: 300px;}

.address {width: 200px; float: right;}
.spacer {display: none;}
.phoneMobile {display:block;}
.phone {display:none;}

}



@media (max-width: 500px) {

 article ul li.listMiddle {width: 400px; width: 300px;width: 270px;}

.phoneMobile {display:block;}
.phone {display:none;}

}


 /***********************************************/
/* MOBILE SETTINGS */
/***********************************************/

@media (max-width: 320px) {

body {
   font-size:18px; font-size:16px; font-size: 1rem;font-size:14px; font-size: 0.87rem;
 }
.menu {
   top:15px;left: -38px; background: none;}

article  {
  padding:0 0 0px 0;
  }
article h3 {
  line-height:1.4em;
  margin:10px 0 10px 0;
  }

}

@media (-webkit-min-device-pixel-ratio : 1.5) {
  h1 span {
    display: none;
  }
}