/* Projekt:            essanelle        */
/* Dateiname:          basics.css       */
/* Zweck:              Alle Basisstyles */
/* erstellt am:        15.01.2008 JD    */
/* bearbeitet am:      05.03.2008 JD    */
/* validiert am:       05.03.2008 JD    */
/* freigegeben am:     05.03.2008 JD    */



/* Inhalte */

/* Grundlegende Container */
/* Allgemeine Elemente */
/* Logo */
/* Meta */
/* Hauptnavigation */
/* Content */
/* Teaserblock */
/* Footer */
/* Formulare */
/* Formular Errorhandling */
/* Haaranalyse */
/* Storefinder */
/* Route */
/* Sitemap */
/* Frisurentrends Gallery */
/* Produktteaser auf Startseite */
/* Bildwechsel auf Startseite */
/* Einstiegsseite */
/* Popup */
/* Buttons - neu fuer Tauschen der grafischen Buttons per CSS */
/* Helferlein: am Ende der Datei belassen */




/* Grundlegende Container */

body {
background: url(../images/bg.gif) #ff8411 top left repeat-x;
color: #555;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
}

#wrapper {
width: 852px;
margin: 0 auto;
}

#wrapper-bg {
background: url(../images/bg_wrapper.gif) top left repeat-y;
}

#wrapper-content {
background: url(../images/bg_content.gif) top left no-repeat;
height: 1%;
padding: 0 6px;
}

#col-left {
float: left;
width: 154px;
}

#content {
padding-left: 20px;
position: relative;
float: left;
width: 666px;
height: 475px;
background: top left no-repeat;
}

html>body #content {
height: auto;
min-height: 475px;
}

#content-normal {
margin: 108px 0 0 63px;
}



/* Allgemeine Elemente */

p, label {
font-size: 1.1em;
line-height: 1.825em;
margin: 0 0 5px 0;
}

p a,
li a {
color: #d15c19;
background: url(../images/pfeil_orange.gif) left no-repeat;
padding: 0 0 0 8px;
}

a.vor {
color: #d15c19;
background: url(../images/pfeil_orange.gif) right no-repeat;
padding: 0 8px 0 0;
}

h2 {
font-family: Georgia, "Times New Roman", serif;
font-weight: normal;
color: #ff8411;
font-size: 2.0em;
letter-spacing: 0.1em;
margin: 0 0 8px -14px;
padding: 4px 0 0 13px;
position: relative;
background: url(../images/stern_l.gif) 0 0px no-repeat;
height: 1%; /* wird sonst im IE abgeschnitten */
}

h3 {
font-family: Verdana, Arial, sans-serif;
color: #555555;
font-size: 1.1em;
margin: 0;
line-height: 1.825em;
}

h4 {
font-size: 1.1em;
margin-bottom: 4px; 
}



/* Listen im Content */

#content ul,
#content ol {
font-size: 1.1em;
line-height: 1.7em;
margin: 0 0 19px 0;
}

#content ul {
list-style: disc outside;
margin-left: 15px;
}

#content ol {
list-style: decimal outside;
margin-left: 20px;
}

* html #content ol { /* IE6 */
margin-left: 25px;
}

*+html #content ol { /* IE7 */
margin-left: 25px;
}

#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul,
#content ul p,
#content ol p {
font-size: 1em;
margin-bottom: 0;
}

#content li {
margin: 5px 0 0 0;
}



/* Logo */

#logo a {
width: 121px;
height: 45px;
display: block;
margin: 25px 0 46px 33px;
background: url(../images/logo.gif) top left no-repeat;
}



/* Meta */

#meta {
height: 28px;
text-align: right;
margin: 9px 0 0 0;
padding: 0 6px;
background: url(../images/bg_meta.gif) left bottom no-repeat;
}

#meta,
#meta a {
color: #d9ada7;
}

#meta a.active {
color: #fff;
}

#meta li {
display: inline;
margin-right: 3px;
padding-right: 10px;
background: url(../images/trenner_meta.gif) center right no-repeat;
}

* html #meta li {
margin-right: 6px;
padding-right: 2px;
}

#meta li.last {
margin-right: 0;
padding-right: 0;
background: none;
}

#meta li a {
padding: 0;
background: none;
}


/* Hauptnavigation */

#navigation {
margin: 0 14px 0 0;
}

#navigation ul {
margin: 0;
padding-bottom: 76px;
height: 239px;
}

html>body #navigation ul {
height: auto;
min-height: 239px;
}

#navigation li {
line-height: 1.25em;
font-size: 1.3em;
text-align: right;
text-transform: uppercase;
margin: 0;
display: inline;
}

#navigation li ul {
margin: 1px 0 15px 0;
min-height: 1px !important;
padding-bottom: 0;
height: auto !important;
}

#navigation li li {
font-size: 0.85em;
text-transform: none;
display: block;
margin: 0 0 4px 0;
}

#navigation li ul li ul {
margin: 0 0 6px 0;
}

#navigation li li li {
font-size: 1em;
margin: 0;
}

#navigation li a {
background: right 5px no-repeat;
display: block;
height: 21px;
color: #7a7a7a;
}

#navigation li a:hover {
-moz-opacity: 0.7;
opacity: 0.7;
filter:alpha(opacity=70);
}

#navigation li.nav-trends a {
background-image: url(../images/nav_trends_off.gif);
}

#navigation li.nav-trends a.active {
background-image: url(../images/nav_trends_on.gif);
}

#navigation li.nav-beratung a {
background-image: url(../images/nav_beratung_off.gif);
}

#navigation li.nav-beratung a.active {
background-image: url(../images/nav_beratung_on.gif);
}

#navigation li.nav-salonfinder a {
background-image: url(../images/nav_salonfinder_off.gif);
}

#navigation li.nav-salonfinder a.active {
background-image: url(../images/nav_salonfinder_on.gif);
}

#navigation li.nav-produkte a {
background-image: url(../images/nav_produkte_off.gif);
}

#navigation li.nav-produkte a.active {
background-image: url(../images/nav_produkte_on.gif);
}

#navigation li.nav-events a {
background-image: url(../images/nav_events_off.gif);
}

#navigation li.nav-events a.active {
background-image: url(../images/nav_events_on.gif);
}

#navigation li.nav-aktionen a {
background-image: url(../images/nav_aktionen_off.gif);
}

#navigation li.nav-aktionen a.active {
background-image: url(../images/nav_aktionen_on.gif);
}

#navigation li.nav-ueber-uns a {
background-image: url(../images/nav_ueberuns_off.gif);
background-position: right 3px;
}

#navigation li.nav-ueber-uns a.active {
background-image: url(../images/nav_ueberuns_on.gif);
}

#navigation li.nav-presse a {
background-image: url(../images/nav_presse_off.gif);
}

#navigation li.nav-presse a.active {
background-image: url(../images/nav_presse_on.gif);
}

#navigation li.subnav-gutschein a {
background-image: url(../images/nav_gutscheinverschenken_off.gif);
height: 35px;
}

#navigation li.subnav-gutschein a.active {
background-image: url(../images/nav_gutscheinverschenken_on.gif);
}

#navigation li.subnav-get-your-shirt a {
background-image: url(../images/nav_getyourshirt_off.gif);
}

#navigation li.subnav-get-your-shirt a.active {
background-image: url(../images/nav_getyourshirt_on.gif);
}

#navigation li a.active {
color: #ff9f45;
}

#navigation li li a {
display: inline !important;
background: none !important;
}

#navigation li li a.active {
font-weight: bold;
}

#navigation li li li a {
background: url(../images/pfeil_grau.gif) right 5px no-repeat !important;
padding: 0 9px 0 0;
}

#subnavigation {
margin: -56px 0 20px 0 !important;
padding-bottom: 0 !important;
min-height: 1px !important;
height: auto !important;
}



/* Content */

div.bildlinks {
width: 329px;
margin: 0 0 30px 0;
}

div.bildlinks img {
margin: 6px 14px 3px 0;
float: left;
position: relative;
}



/* Teaserblock */

#teaserblock {
padding: 7px 0 0 0;
}

.teaser {
background: url(../images/bg_teaser.gif) top left no-repeat;
padding: 2px 6px 6px 2px;
margin: 0 3px 0 4px;
float: left;
display: inline;
width: 270px;
height: 75px;
}

.teaser-last {
margin-right: 0;
}



/* Footer */

#contentfoot {
height: 6px;
overflow: hidden;
background: url(../images/bg_footer.gif) top left no-repeat;
}

#footer {
height: 23px;
padding: 1px 6px 0 6px;
text-align: right;
}

#footer,
#footer a {
color: #ffe0c3;
}

#footer li {
display: inline;
margin-right: 2px;
padding-right: 7px;
background: url(../images/trenner_footer.gif) center right no-repeat;
}

* html #footer li {
margin-right: 6px;
padding-right: 2px;
}

#footer li.last {
margin-right: 0;
padding-right: 0;
background: none;
}

#footer li a {
padding: 0;
background: none;
}



/* Formulare */

.formular {
margin: 0 0 30px 0;
width: 374px;
}

.formular fieldset {
border-bottom: 1px solid #969696;
padding: 0 0 15px 0;
margin: 0 0 20px 0;
}

.formular .noborder { /* fuer fieldset ohne border */
border: 0;
margin: 0 0 5px 0;
}

.formular h3 {
margin-bottom: 15px;
}

.formular .abstand { /* Fuer Formularzeilen, die mehr Abstand brauchen */
margin: 6px 0 14px 0;
padding: 0 !important;
}

.formular input, 
.formular select,
.formular textarea
{
width: 163px;
border: 1px #555 solid;
padding: 2px 4px;
font-size: 1.1em;
margin: 0 0 5px 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
float: left;
}

.formular textarea {
width: 359px;
height: 60px;
margin-bottom: 15px;
}

.formular select {
padding: 0;
width: 173px;
float:left;
}

.formular label.stadt {
width: 115px;
margin-bottom:15px;
}

.formular label, 
.fakelabel span {
width: 196px;
display: inline;
float: left;
font-size: 1.1em;
}

.fakelabel label {
float: none;
margin: 0 5px 0 0;
vertical-align: middle;
}

p span.stadt-filter {
float: left;
margin-right: 15px;
margin-bottom: 20px;
}



.fakelabel span label {
margin: 0;
vertical-align: baseline;
}

.formular .label-breit {
width: 100%;
margin-right: 0;
}

.formular input.radio {
width: auto !important;
margin: 0 10px 0 0; 
border: none !important;
vertical-align: middle;
float: none;
}

.formular input.checkbox {
width: 13px; 
height: 13px; 
border: 0;
margin: 0 5px 0 0;
float: left;
}

.submit {
border: 0px !important;
height: auto;
width: auto !important;
margin: 10px 0 0 0 !important;
padding: 0 !important;
float: none !important;
}

.input-left {
float: left !important;
}

.input-right {
float: right !important;
}

div.datum select {
width: 54px !important;
padding: 0 !important;
margin: 0 6px 11px 0;
}

.formular .hinweis {
font-size: 0.9em;
line-height: 1.0em;
margin: 10px 0 20px 0;
}

.formular .datei-hochladen {
width: 100% !important;
}

.formular .anmerkungen {
width: 100% !important;
line-height: 1.3em;
margin: 40px 0 10px 0;
}

.formular label.checkbox {
font-size: 1.0em;
line-height: 1.1em;
width: 356px;
}

input.input-small {
width: 40px;
margin-right: 5px;
}

input.input-medium {
width: 108px;
}

#kontaktformular {
margin-top: 30px;
}

.formular .formlink {
margin-top: 10px;
font-size: 1em;
}

div.formabschnitt{
margin-top: 43px;
}

div.formabschnitt h3 {
margin-bottom: 11px;
}



/* Formular Errorhandling */

p.pflichterror {
background-color: #fcc;
margin: 0 0 20px 0;
padding: 2px 5px;
}

label.pflichterror,
span.pflichterror {
color: #f00;
font-weight: bold;
}

input.pflichterror,
textarea.pflichterror,
select.pflichterror {
border-color: #f00;
}


/* Haaranalyse */

.haaranalyse {
width: 329px;
margin: 0 0 35px 0;
}

.haaranalyse form {
margin-top: 38px;
}

.haaranalyse fieldset.noborder {
margin: 0 0 1px 0;
}

.haaranalyse fieldset h3 {
margin-bottom: 8px;
padding-left: 18px;
position: relative;
height: 1%;
}

.haaranalyse h3 span {
position: absolute;
left: 0;
top: 0;
}

.haaranalyse label.checkbox {
font-size: 1.1em;
color: #d15c19;
margin-bottom: 7px;
width: 300px;
}

.haaranalyse-products {
margin: 0 0 5px 0;
}

.haaranalyse-products h2 {
margin-top: 30px;
}

.haaranalyse-products dl {
clear: left;
margin: 0;
}

.haaranalyse-products dt {
float: left;
width: 59px;
margin: 6px 10px 13px 0;
text-align: center;
display: inline;
}

.haaranalyse-products dd {
float: left;
display: inline;
margin: 0 0 13px 0;
}



/* Storefinder */

.storefinder {
width: auto !important;
height: 1%;
}

.storefinder .formular {
margin: 0;
}

.storefinder fieldset {
width: auto !important;
padding: 10px 0;
height: 1%;
margin-bottom: 5px;
}

#content .storefinder label {
width: auto !important;
margin-right: 5px;
}

#content .storefinder input {
width: 46px;
margin: 0 10px 15px 0 !important;
padding: 1px 4px;
}

#content .storefinder select {
margin: 0 10px 15px 0;
}

#content .storefinder select.umkreis {
width: 60px;
margin-right: 5px;
}

#content .storefinder select.ort {
width: 158px;
}

#content .storefinder input.submit {
margin-bottom: 10px !important;
}

#content .storefinder .change label {
font-weight: bold;
}

#content .storefinder .change input.text {
width: 200px;
margin-bottom: 0 !important;
}

.storefinder .spalte {
float: left;
width: 140px;
margin: 20px 10px 10px 0;
}

.storefinder .funktion {
margin-top: 20px;
}

.storefinder .visitenkarte {
margin-bottom: 15px;
}

.storefinder .visitenkarte a {
background: url(../images/pfeil_orange.gif) left no-repeat;
color: #d15c19;
padding: 0 0 0 8px;
}
 
img.image-rechts {
float: right;
margin: 0 28px 0 40px;
display: inline;
}

#googlemap {
margin: 20px 0 10px 0;
}

.termine p {
margin-bottom:0 !important;
}

.termine .clear {
margin-bottom:20px;
}

/* Route */

.route table {
width: 576px;
}

.route thead th {
background: #969696;
height: 30px;
border-bottom: 1px solid #969696;
font-weight: bold;
color: #000;
text-align: left;
font-size: 1.1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.route td,
.route th {
border-bottom: 1px solid #969696;
padding: 7px 10px 7px 4px;
font-size: 1.1em;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: top;
}



/* Sitemap */

#content .sitemap {
width: 490px;
}

#content .sitemap ul {
margin-left: 0;
}

#content .sitemap li {
margin-bottom: 17px;
list-style: none;
}

#content .sitemap li strong {
border-bottom: 1px solid #969696;
display: block;
}

#content .sitemap li a {
color: #555555;
font-weight: bold;
padding: 0;
background: none;
}

#content .sitemap li a:hover {
color: #888;
}

#content .sitemap li li {
margin-bottom: 0;
margin-top: 0;
}

#content .sitemap ul ul ul {
padding: 0 0 0 9px;
}

#content .sitemap li li a {
background: url(../images/pfeil_grau_gross.gif) left no-repeat;
padding: 0 0 0 8px;
font-weight: normal;
}



/* Frisurentrends Gallery */

.gallery {
margin: 30px 0 17px 36px;
}

.gallery-selection {
width: 240px;
float: left;
display: inline;
}

.gallery-selection form {
height: 31px;
}

.gallery-selection p {
margin: 0 0 2px 0;
}

.gallery-selection .submit {
margin: 0 !important;
vertical-align: middle;
}

.gallery-selection select {
margin-right: 7px;
width: 75px;
vertical-align: middle;
}

#gallery-thumbs a {
margin: 0 10px 10px 0;
float: left;
display: inline;
width: 69px;
color: #d15c19;
overflow: hidden;
}

#gallery-thumbs a span {
display: block;
text-align: center;
padding: 1px;
}

.gallery-control {
float: right;
margin: 0 4px 10px 0;
display: inline;
clear: both;
}

#gallery-thumbs .gallery-control {
margin-top: -2px;
}

.gallery-control li {
display: inline;
}


.gallery-control li a {
width: auto !Important;
background: none;
padding: 0;
}
.gallery-control li a img {
margin: 0;
}

#gallery-main {
margin: 8px 27px 0 0;
float: right;
display: inline;
width: 327px;
}

#gallery-main p {
float: left;
width: 250px;
}




/* Vorher-Nachher-Show */

.vnshow {
margin: 0;
}

.vnshow .gallery-selection {
width: 480px;
}

.vnshow .gallery-selection p {
margin: 0 0 10px 0;
}

.vnshow .gallery-selection #gallery-thumbs {
margin: 15px 0 0 0;
}

.vnshow .bildlinks {
width: 408px;
margin-bottom: 10px;
}

.vnshow .details .left,
.vnshow .details .right {
float: left;
display: inline;
}

.vnshow .details .left {
width: 184px;
margin: 6px 24px 10px 0;
}
 
.vnshow .details .right {
width: 200px;
}

.vnshow .details .left em {
display: block;
padding: 2px 0;
}



/* Produktteaser auf Startseite */

.product-teaser {
width: 195px;
position: absolute;
bottom: 40px;
left: 55px;
z-index: 2;
}

.product-teaser h2 {
font-size: 3.1em;
margin-left: -15px;
padding: 4px 0 0 14px;
letter-spacing: 0.05em;
background: url(../images/stern_l.gif) top left no-repeat;
}

.product-teaser p {
line-height: 1.45em;
}



/* Bildwechsel auf Startseite */

.slide-image {
position: absolute;
top: 0;
right: 0;
width: 686px;
height: 475px;
background-color: #fff;
background-position: center center;
background-repeat: no-repeat 
}



/* Einstiegsseite */

.einstieg-container {
margin: 46px 0 0 316px;
}

.einstieg-teaser {
margin: 0 0 27px 0;
height: 1%;
}

.einstieg-teaser .teaser-image,
.einstieg-teaser .teaser-text {
float: left;
}

.einstieg-teaser .teaser-image {
width: 80px;
margin: 6px 23px 0 0;
}

.einstieg-teaser .teaser-image img {
float: right;
}

.einstieg-teaser .teaser-text {
width: 230px;
}

.einstieg-teaser h2 {
padding: 0;
font-size: 3.1em;
margin: 0 0 6px -13px;
padding: 0 0 0 13px;
letter-spacing: 0.05em;
line-height: 1em;
background: url(../images/stern_l.gif) 0 2px no-repeat;
}

.einstieg-teaser p {
line-height: 1.45em;
}



/* Popup */

body#popup {
background: #fff;
}

#close { /* Popup schliessen */
position: absolute;
top: 30px;
right: 30px;
}

#close a {
background-image: url(../images/close.gif);
padding-left: 12px;
}

.image-fullview { /* Bild Vollansicht im Popup */
padding: 1px 10px 20px 10px;
}


/* Produktteaser auf Startseite Sonderaktion Katalog */

.product-teaser-aktion {
width: 195px;
position: absolute;
bottom: 5px;
left: 55px;
z-index: 2;
}

.product-teaser-aktion p a {
color: #d15c19;
background: url(../images/pfeil_orange.gif) left no-repeat;
padding: 0 0 0 8px;
}


/* Trends Videos */
.videos p a{
color: #d15c19;
background: url(../images/pfeil_orange.gif) left no-repeat;
padding: 0 0 0 8px;
}

.videos p{
margin-bottom: 20px;
}

/* Buttons - neu fuer das Tauschen der grafischen Buttons per CSS */
.formular button {
border: 0;
padding: 0;
cursor: pointer;
}

.formular button.submit-los {
width: 32px !important;
height: 9px;
margin-top: 6px;
float: left;
background: url(../images/button_los.gif) no-repeat;
}

.formular button.submit-absenden {
width: 73px !important;
height: 10px;
margin-top: 10px;
background: url(../images/button_absenden.gif) no-repeat;
}

.formular button.submit-salonfinden {
width: 96px !important;
height: 9px;
background: url(../images/button_salonfinden.gif) no-repeat;
margin: 0 10px 10px 0 !important;
}

.formular button.submit-zurueck {
width: 65px !important;
height: 13px;
float: left !important;
background: url(../images/button_zurueck.gif) no-repeat;
margin: 10px 0 0 0 !important;
}

.formular button.submit-weiter {
width: 60px !important;
height: 13px;
float: right !important;
background: url(../images/button_weiter.gif) no-repeat;
margin: 10px 0 0 0 !important;
}

.formular button.submit-mein-produkt {
width: 112px !important;
height: 11px;
float: right !important;
background: url(../images/button_meinprodukt.gif) no-repeat;
margin: 10px 0 0 0 !important;
}

.storefinder .funktion a {
height: 11px;
display: block;
float: left;
margin-right: 27px;
}

.storefinder .funktion a.submit-ausdrucken {
width: 90px;
background: url(../images/button_ausdrucken.gif) no-repeat;
}

.storefinder .funktion a.submit-adresse-aendern {
width: 116px;
background: url(../images/button_adresse_aendern.gif) no-repeat;
}

.storefinder .funktion-textlinks {
margin-bottom: 18px;
height: 1%;
}

.storefinder .funktion-textlinks a {
float: left;
height: auto;
}



/* Helferlein: am Ende der Datei belassen */

.printlogo {
display: none;
}

.clear {
clear: both;
margin: -1px 0px 0px 0px;  /* laesst 1px clear nach oben verschwinden */
height: 0px;  /* laesst   auf 1px schrumpfen fuer IE */
font-size: 0px;
line-height: 0px;
width: 100%;
}

.ahem {  /*  entspricht im wesentlichen display:none; , ist aber screenreaderfreundlich */
position: absolute;
overflow: hidden;
height: 0px;
width: 0px;
left: -1000px;
top: -1000px;
}