/* Projekt:            hairexpress        */
/* Dateiname:          basics.css         */
/* Zweck:              Alle Basisstyles   */
/* erstellt am:        14.07.2009 AH      */
/* bearbeitet am:      20.07.2009 AH      */
/* validiert am:                          */
/* freigegeben am:                        */



/* Inhalte */

/* Allgemeine Styles */
/* Formstyles */
/* Grundlegende Container */
/* Navigationen */
/* Inhalte */
/* Hometeaser */
/* Sitemap */
/* Salonfinder */
/* Termine */
/* Kontaktformular */
/* Infobroschuere */
/* Bewerbungsformular */
/* Weiterempfehlen */
/* Vorher-Nachher-Show */
/* Footer */



/* Allgemeine Styles */
body {
font-size: 62.5%;
font-family: Arial, sans-serif;
padding-bottom: 20px;
}

#home #content h1 {
margin-bottom: 0;
color: #dcdcdc;
font-size: 2.6em;
}

#content h1 {
margin-bottom: 30px;
color: #dcdcdc;
font-size: 2.6em;
}

#content h2 {
margin-bottom: 10px;
color: #fff;
font-size: 1.3em;
}

#content h1 span {
color: #000;
}

#content h1 a {
color: #dcdcdc;
border-bottom: 2px solid #dcdcdc;
text-decoration: none;
font-size: 1.0em;
}

#content p {
font-size: 1.3em;
line-height: 1.5em;
color: #fff;
margin-bottom: 18px;
}

#content a {
font-size: 1.3em;
color: #fff;
text-decoration: underline;
}

#content a:hover {
text-decoration: none;
}

#content p a {
font-size: 1.0em;
}

.linebreak {
clear: left;
}

/* Formstyles */
.spalte-1,
.spalte-2 {
width: 230px;
float: left;
margin-bottom: 20px;
}

.spalte-1 {
display: inline;
margin-right: 28px;
}

.formular input,
.formular select,
.formular textarea {
font-family: Arial, sans-serif;
font-size: 1.3em;
border: 0;
}

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

.formular input {
float: left;
width: 244px;
margin-bottom: 5px;
height: 18px;
padding: 2px 3px 0 3px;
}

.formular select {
height: 20px;
padding-top: 1px;
}

.formular textarea {
width: 390px;
height: 170px;
margin: 6px 0 5px 0;
}

.formular label,
.formular .fakelabel span {
width: 140px;
display: block;
float: left;
font-size: 1.3em;
color: #fff;
}

.formular .anmerkungen,
.formular .label-breit,
.formular .checkbox {
width: auto;
margin-bottom: 7px;
}

.formular .anmerkungen {
margin-bottom: 0;
}
.formular .anmerkungen-azubi {
width: auto;
margin-bottom: 0px;
}

.formular .checkbox {
width: 90%;
}

.formular label {
width: 140px;
display: block;
float: left;
font-size: 1.3em;
color: #fff;
}

.formular .start {
width: 40px;
margin-top: 2px;
font-weight: bold;
}


.formular input#plz {
width: 44px;
}

.formular input#ort {
width: 188px;
float: right;
}

.formular input#frau,
.formular input#herr,
.formular input#agb {
width: auto;
}

.formular input#frau {
margin-right: 15px;
}

.formular .abstand label {
width: auto;
margin-right: 5px;
}

.formular .fakelabel span {
color: #fff;
font-size: 1.3em;
}

.formular div.datum  {
margin-bottom: 18px;
}

.formular .fakelabel span label {
font-size: 1.0em;
float: none;
display: inline;
}

.formular button {
border: 0;
cursor: pointer;
}

.formular button.submit-absenden {
width: 91px;
height: 13px;
background: url(../../images/hairexpress/button-absenden.gif) no-repeat;
}

.formular p.hinweis {
font-size: 1.1em;
}



/* Tabellen */
table {
width: 100%;
margin-bottom: 20px;
}

table th,
table td {
font-size: 1.3em;
padding: 8px 0 8px 0;
text-align: left;
}

table th {
background: #e0e0e1;
}

table td {
background: #fff;
border-top: 1px solid #E2001A;
}

table td.rank {
padding-left: 18px;
padding-right: 7px;
}

table td.km {
padding-right: 70px;
}

table td.time {
padding-right: 15px;
}



/* Grundlegende Container */
#header {
height: 147px;
width: 810px;
margin: 0 auto 0 auto;
overflow: hidden;
}

#navigation {
float: left;
margin: 82px 0 0 36px;
}

#content-bg {
width: 100%;
padding: 45px 0 40px 0;
margin-bottom: 15px;
background-color: #e2001a;
min-height: 360px;
}

#content {
width: 810px;
margin: 0 auto 0 auto;
}

.teaser {
float: left;
width: 250px;
margin: 30px 30px 0 0;
}

.teaser-last {
margin: 30px 0 0 0;
}

#footer {
width: 810px;
margin: 0 auto 0 auto;
}

.bildlinks img {
	float: left;
	margin:4px 14px 3px 0;
}



/* Navigation */
#navigation ul li {
margin-left: 24px;
position: relative;
display: inline; /* ie6 */
float: left;
}

#navigation ul li a {
height: 20px;
display: block;
background: url(../../images/hairexpress/Navigation.gif) no-repeat;
}

/* Unternavigation */
#header #navigation ul li ul {
position: absolute;
top: 25px;
width: 300px;
}

#header #navigation ul li.nav-jobs ul,
#header #navigation ul li.nav-ueber-uns ul {
right: 0;
}

#header #navigation ul li.nav-jobs ul li,
#header #navigation ul li.nav-ueber-uns ul li {
float: right;
margin: 0 0 0 12px;
}

#header #navigation ul li ul li {
float: left;
margin: 0 12px 0 0;
}

#header #navigation ul li ul li a {
background: none;
width: auto;
height: auto;
margin-left: 0;
font-size: 1.4em;
font-weight: bold;
color: #b1b2b4;
}

#header #navigation ul li ul li a:hover,
#header #navigation ul li ul li a.active {
color: #000;
}

/* grafische Ueberschriften erster Ordnung */
#navigation ul li.nav-salons a {
background-position: 0 0;
width: 110px;
}

#navigation ul li.nav-salons a:hover,
#navigation ul li.nav-salons a.active {
background-position: 0 -22px;
width: 110px;
}

#navigation ul li.nav-aktionen a {
background-position: -134px 0;
width: 79px;
}

#navigation ul li.nav-aktionen a:hover,
#navigation ul li.nav-aktionen a.active {
background-position: -134px -22px;
width: 79px;
}

#navigation ul li.nav-produkte a {
background-position: -239px 0;
width: 81px;
}

#navigation ul li.nav-produkte a:hover,
#navigation ul li.nav-produkte a.active {
background-position: -239px -22px;
width: 81px;
}

#navigation ul li.nav-events a {
background-position: -346px 0;
width: 58px;
}

#navigation ul li.nav-events a:hover,
#navigation ul li.nav-events a.active {
background-position: -346px -22px;
width: 58px;
}

#navigation ul li.nav-jobs a {
background-position: -428px 0;
width: 45px;
}

#navigation ul li.nav-jobs a:hover,
#navigation ul li.nav-jobs a.active {
background-position: -428px -22px;
width: 45px;
}

#navigation ul li.nav-ueber-uns a {
background-position: -497px 0;
width: 79px;
}

#navigation ul li.nav-ueber-uns a:hover,
#navigation ul li.nav-ueber-uns a.active {
background-position: -497px -22px;
width: 79px;
}



/* Formatierungen */

/* Header */
#header a#logo {
background-image: url(../../images/hairexpress/logo-hairexpress.gif);
height: 61px;
width: 178px;
margin: 61px 0 0 0;
float: left;
}



/* Hometeaser */
.teaser img {
float: left;
}

#content .teaser a {
float: left;
text-decoration: none;
}

#content .teaser a:hover img {
opacity: 0.8;
}

.teaser span {
font-size: 1.7em;
font-weight: bold;
color: #fff;
padding: 3px 0 0 0;
margin-top: 8px;
float: left;
}

.teaser a span {
font-size: 1.31em;
padding: 3px 0 0 13px;
margin-top: 8px;
background: url(../../images/hairexpress/pfeil-weiss-rechts-gross.gif) 0 6px no-repeat;
}

.visual-right {
float: right;
margin: 5px 0 0 20px;
}

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



/* Sitemap */
.sitemap ul {
margin-bottom: 20px;
}

.sitemap ul ul {
margin-bottom: 0;
}

.sitemap ul li {
float: left;
width: 33%;
}

.sitemap ul li li,
.sitemap ul li li li {
float: none;
margin-left: 12px;
margin-bottom: 3px;
width: auto;
}

#content .sitemap ul li a {
text-decoration: none;
padding-left: 10px;
background: url(../../images/hairexpress/pfeil-weiss-rechts.gif) center left no-repeat;
height: 1%;
}



/* Salonfinder */
.storefinder .submit-salonfinden {
width: 110px;
height: 14px;
background: url(/customer/images/hairexpress/submit-salonfinder.gif) no-repeat;
border: 0;
}

#content .funktion a {
float: left;
height: 15px;
margin: 0 27px 0 0;
padding-left: 132px;
text-decoration: none;
}

#content .funktion {
margin: 0 0 20px 0;
}

.funktion a.submit-ausdrucken {
background: url(/customer/images/hairexpress/button-ausdrucken.gif) no-repeat;
width: 106px;
}

.funktion a.submit-adresse-aendern {
background: url(/customer/images/hairexpress/button-adresse-aendern.gif) no-repeat;
width: 135px;
}

.storefinder input#storefinder-plz {
width: 54px;
margin-right: 3px;
}

.storefinder select#storefinder-plz-umkreis {
width: 55px;
padding-top: 1px;
margin-bottom:20px;
}

.storefinder .spalte-1 {
margin-right: 40px;
width:241px;
}

.storefinder .spalte-1 label {
width: auto;
margin-right: 5px;
margin-top: 2px;
}

.storefinder .spalte-2 label {
display: block;
margin-bottom: 41px;
}

.storefinder .spalte-2 select {
width: 220px;
margin: 4px 0 20px 0;
}

.storefinder select {
float: left;
margin-right: 5px;
}

button.submit-los {
width: 41px;
height: 13px;
margin: 3px 0 0 10px;
background: url(../../images/hairexpress/button-los.gif) no-repeat;
}

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

.funktion-textlinks a {
padding: 0 0 0 10px !important;
background: url(../../images/hairexpress/bg-textlinks.gif) 0 5px no-repeat;
}

.funktion-textlinks a:hover {
text-decoration: underline !important;
}


/* Termine */

.termine {
float: left;
}

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


/* Kontaktformular */
#kontaktformular .spalte-1,
#kontaktformular .spalte-2 {
width: 390px;
}



/* Infobroschuere */
#infobroschuere .spalte-1,
#infobroschuere .spalte-2 {
width: 390px;
}



/* Bewerbungsformular */
#bewerbung .spalte-1,
#bewerbung .spalte-2 {
width: 390px;
}

#bewerbung .spalte-1 {
padding-top: 22px;
}

#bewerbung .spalte-2 textarea {
height: 148px;
}

.formular input#agb {
margin-right: 10px;
}

.formular input#anhang {
width: 390px;
height: 22px;
margin-bottom: 7px;
}



/* Weiterempfehlen */
#weiterempfehlen textarea {
margin-top: 0;
}

#weiterempfehlen label {
width: 150px;
}



/* Vorher-Nachher-Show */
#content .vnshow a {
float: left;
text-align: center;
text-decoration: none;
margin: 0 20px 20px 0;
}

#content .vnshow span {
display: block;
}

#content .vnshow .details em {
display: block;
color: #fff;
font-size: 1.1em;
}

#content .vnshow .left {
float: left;
width: 184px;
margin-right: 20px;
}

#content .vnshow .right {
float: left;
width: 300px;
}



/* Footer */
#footer a.copyright {
width: 129px;
height: 21px;
background: url(../../images/hairexpress/logo-essanelle.gif) no-repeat;
float: left;
}


#footer a.essa {
width: 61px;
height: 27px;
background: url(../../images/hairexpress/hairexpress_bkk_logo.gif) no-repeat;
float: left;
margin-left: 10px;
  margin-top: -3px
}

#footer ul {
float: right;
margin: 8px 0 0 70px;
}

#footer ul.center {
float: right;
margin-left: 0
}

#footer ul li {
display: inline;
margin-left: 27px;
}

#footer ul li.first {
margin-left: 0;
}

#footer ul li a {
font-size: 1.2em;
color: #98999b;
text-decoration: none;
}

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

#footer ul.fb {
margin: 0 0 5px 0;
}

#footer ul.fb li{
margin-left: 12px;
}

#footer ul.fb li.facebook a{
margin-top:10px;
}

/* Helper */
.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: -2000px;
top: -2000px;
}

/* clearfix */
.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}