/* Projekt:            supercut           */
/* Dateiname:          basics.css         */
/* Zweck:              Alle Basisstyles   */
/* erstellt am:        09.12.2009 JD      */
/* bearbeitet am:      09.12.2009 JD      */
/* validiert am:                          */
/* freigegeben am:                        */



/* Inhalte */

/* Grundlegende Container */
/* Allgemeine Styles */
/* Formstyles */

/* Navigationen */
/* Inhalte */
/* Hometeaser */
/* Sitemap */
/* Salonfinder */
/* Kontaktformular */
/* Infobroschuere */
/* Bewerbungsformular */
/* Weiterempfehlen */
/* Vorher-Nachher-Show */
/* Bildergallerie */
/* Adventskalender */
/* Footer */



/* Grundlegende Container */

body {
background: url(../../images/supercut/body_bg.jpg) #000 top center no-repeat fixed;
font-size: 62.5%;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
color: #eee;
}

#wrapper {
width: 996px;
text-align: left;
position: relative;
margin: 0 auto;
}

#wrapper-bg {
background: url(../../images/supercut/shadow_vertical.png) center repeat-y;
width: 970px;
margin: 0 auto;
padding: 1px 13px 0;
}

* html #wrapper-bg {
background: url(../../images/supercut/shadow_vertical.gif) center repeat-y;
}

#wrapper-foot {
background: url(../../images/supercut/shadow_horizontal.png) center no-repeat;
width: 996px;
margin: 0 auto;
height: 16px;
}

* html #wrapper-foot {
background: none;
}

#contentwrapper {
min-height: 572px;
margin: 76px 0 0 0;
background: url(../../images/supercut/context_bg.jpg) no-repeat;
position: relative;
z-index: 1;
zoom: 1;
}

#content {
display: inline;
float: right;
width: 560px;
padding: 50px 20px 20px 0;
}

/* Platzierung iframe - nur auf Shirtdesigner-Seite */
body#page-233 #content {width: 630px;}

#context {
display: inline;
float: left;
width: 390px;
min-height: 572px;
position: relative;
}

* html #context {
height: 572px;
}

#visual-bottom {
bottom: 0;
left: 0;
position: absolute;
}

#visual-bottom img {
float: left;
}



/* Allgemeine Styles */

h1 {
margin-bottom: 20px;
color: #fff;
font-size: 3.4em;
}

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

.neueroeffnung h2 {
font-size: 3.4em;
}

h3 {
margin-bottom: 5px;
color: #fff;
font-size: 1.4em;
}

#content p {
font-size: 1.1em;
line-height: 1.5em;
margin-bottom: 18px;
font-weight: bold;
}

#content a {
font-size: 1.3em;
color: #eac31f;
text-decoration: none;
}

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

#content p a {
font-size: 1.0em;
padding: 0 0 0 7px;
background: url(../../images/supercut/pfeil.gif) left center no-repeat;
}

.linebreak {
clear: left;
}

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

.bildlinks h2,
.bildlinks h3 {
display: inline; /* fuer sIFR, bricht sonst um */
}



/* Spalten */

.spalte-1,
.spalte-2 {
width: 255px;
float: left;
margin-bottom: 20px;
display: inline;
}

.spalte-1 {
margin-right: 30px;
}



/* Formulare */

.formular fieldset {
margin: 0 0 20px 0 !important;
}

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

.termine p strong {
color: #EAC31F;
font-size: 1.2em;
}

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


.formular input,
.formular select,
.formular textarea {
background: #3e3e3e;
border: 1px solid #4f4f4f;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
}

.formular input {
float: left;
width: 165px;
margin: 0 5px 5px 0;
height: 16px;
padding: 3px 3px 0 3px;
}

.formular select {
float: left;
width: 173px;
height: 20px;
padding-top: 2px;
margin: 0 5px 5px 0;
}

.formular textarea {
width: 355px;
height: 70px;
margin: 0 5px 5px 0;
padding: 3px;
float: left;
overflow: auto;
}

.formular label,
.formular .fakelabel span {
width: 190px;
display: inline;
float: left;
font-size: 1.2em;
margin: 2px 0 8px 0;
}

.formular .fakelabel { /* Fuer Errormessage */
width: 368px;
float: left;
display: inline;
}


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

.formular .anmerkungen {
margin-bottom: 5px;
}

.formular .checkbox,
.formular .radio {
border: 0;
background: none;
margin-top: 2px;
}

.formular .checkbox {
width: 90%;
}

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

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

.formular input#ort {
width: 108px;
margin-right: 0 !important;
}

.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 {
font-size: 1.3em;
}

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

.formular div.datum select {
width: 55px !important;
margin: 0 5px 11px 0;
}

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

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

.formular button.submit-absenden {
width: 88px;
height: 24px;
background: url(../../images/supercut/button_senden.gif) no-repeat;
margin: 2px 0 10px 275px;
}

.formular p.hinweis {
font-size: 1.1em;
line-height: 1.3em !important;
}
.formular p.hinweis.min {
font-size: 0.9em!important;
}

.formular .errormessage {
float: left;
display: inline;
color: #eac31f;
margin: 1px 0 0 14px !important;
font-size: 1.1em !important;
width: auto !important;
}

.formular .errormessage big {
font-size: 1.3em;
margin: 0 4px 0 0;
}



/* Tabellen */

table {
width: 100%;
margin-bottom: 10px;
}

table th,
table td {
font-size: 1.2em;
padding: 6px 5px;
text-align: left;
}

table th {
background: #c6c6c6;
color: #000;
}

table td {
border-bottom: 1px solid #4f4f4f;
}

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

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

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

.tablecaption {
font-weight: normal !important;
margin: 0 0 8px 0 !important;
}

#summary {
float: left;
font-style: italic;
}

.tablecaption span {
float: right;
}

.tablecaption a {
padding: 0 0 0 7px;
background: url(../../images/supercut/pfeil.gif) left center no-repeat;
}



/* Metanavigation */

#meta {
float: right;
margin: 17px 20px 0 0;
display: inline;
}

#meta ul,
#meta ul li {
display: inline;
}

#meta ul li a {
float: left;
margin: 0 0 0 27px;
color: #c5c5c5;
font-size: 1.1em;
}

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



/* Navigation */

#navigation {
background: url(../../images/supercut/navigation_bg.gif) no-repeat;
padding: 0 0 0 391px;
position: absolute;
left: 13px;
top: 45px;
width: 559px;
z-index: 2;
}

#navigation ul li {
position: relative;
display: inline; /* IE6 */
float: left;
}

#navigation ul li a {
background: url(../../images/supercut/navigation.gif) #fff no-repeat;
display: block;
height: 31px;
margin: 0 1px 0 0;
width: 79px;
}

/* Unternavigation */
#navigation ul li ul {
background: url(../../images/supercut/subnavigation_bg.gif) #e4e4e4 repeat-x;
display: none;
position: absolute;
top: 31px;
width: 150px;
border-top: 1px solid #000;
}

#navigation ul li:hover ul,
#navigation ul li.sfhover ul {
display: block;
}

#navigation ul li ul li {
float: none;
}


#navigation ul li ul li a {
background: none;
display: block;
float: none;
height: auto;
color: #222;
padding: 7px 6px 6px;
border-bottom: 1px solid #fff;
width: auto;
}

#navigation ul li ul li a:hover {
background: #f7d547;
}



/* grafische Ueberschriften erster Ordnung */

#navigation ul li.nav-salons a {
background-position: 0 0;
}

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

#navigation ul li.nav-trends a {
background-position: -80px 0px;
}

#navigation ul li.nav-trends a:hover,
#navigation ul li.nav-trends a.active {
background-position: -80px -31px;
}

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

#navigation ul li.nav-events a:hover,
#navigation ul li.nav-events a.active {
background-position: -160px -31px;
}

#navigation ul li.nav-fotos a {
background-position: -240px 0;
}

#navigation ul li.nav-fotos a:hover,
#navigation ul li.nav-fotos a.active {
background-position: -240px -31px;
}

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

#navigation ul li.nav-produkte a:hover,
#navigation ul li.nav-produkte a.active {
background-position: -320px -31px;
}

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

#navigation ul li.nav-jobs a:hover,
#navigation ul li.nav-jobs a.active {
background-position: -410px -31px;

}

#navigation ul li.nav-ueber-uns {

}

#navigation ul li.nav-ueber-uns a {
background-position: -480px 0;
margin: 0;
}

#navigation ul li.nav-ueber-uns a:hover,
#navigation ul li.nav-ueber-uns a.active {
background-position: -480px -31px;
}



/* Formatierungen */

/* Header */

#logo {
background-image: url(../../images/supercut/supercut_logo.gif);
height: 130px;
width: 94px;
position: absolute;
top: 0;
left: 59px;
z-index: 3;
overflow: visible;
}



/* Teaser */

.teaser {
float: left;
width: 175px;
margin: 30px 17px 0 0;
display: inline;
zoom: 1;
}

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

.teaser img {
float: left;
margin: 0 0 11px 0;
}

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

.teaser input.text {
background: #484848;
border: none;
color: #fff;
font-size: 1.2em;
font-weight: bold;
float: left;
padding: 2px 5px 3px;
width: 135px;
margin: 0 1px 0 0;
}

.teaser input.submit {
float: left;
}

.teaser-salonfinder {
background: url(../../images/supercut/teaser_salonfinder.gif) no-repeat;
height: 65px;
padding: 10px 0 10px 10px;
width: 165px;
}

.teaser-salonfinder label {
height: 42px;
width: 155px;
display: block;
}

.teaser-salonfinder input.text {
width: 115px;
}




/* Sitemap */

.sitemap ul {
margin-bottom: 0;
}

.sitemap ul ul {
margin-top: 5px;
margin-bottom: 0;
}

.sitemap ul li {
margin-bottom: 5px;
}

.sitemap ul li li,
.sitemap ul li li li {
margin-left: 12px;
}

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



/* Salonfinder */

.storefinder .suchspalte-1,
.storefinder .suchspalte-2 {
margin-bottom: 70px;
}

.storefinder .suchspalte-1 {
border-right: 1px solid #575757;
padding-right: 24px;
}

.storefinder .suchspalte-2 {
width: 250px;
}

.storefinder .suchspalte-1 label,
.storefinder .suchspalte-2 label {
margin-right: 5px;
margin-top: 4px;
width: 126px;
}

.storefinder .suchspalte-2 label {
width: 70px;
}

.storefinder .suchspalte-2 select {
float: left;
margin: 0 0 5px 0;
width: 174px;
}

.storefinder .submit-salonfinden {
width: 118px;
height: 24px;
background: url(/customer/images/supercut/button_salonfinden.gif) no-repeat;
border: 0;
padding: 0;
margin: 0 0 0 131px;
}

.storefinder .submit-route {
width: 148px;
height: 24px;
background: url(/customer/images/supercut/button_route.gif) no-repeat;
border: 0;
padding: 0;
margin:8px 0 10px 88px;
}
/* margin: 0 0 10px 131px; */

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

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

.storefinder input#storefinder-plz {
width: 110px;
}

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

.storefinder .change label {
width: 114px;
/* 131px */
}

.storefinder .change input.text {
width: 140px;
margin-bottom: 10px;
}

.storefinder .change p {
color: #b6b6b6;
margin: 0 0 10px 0 !important;
float: left;
display: inline;
font-weight: normal !important;
}

.storefinder .spalte-route {
width: 215px;
}

img.image-rechts {
float: right;
margin: 0 5px 0 5px;
display: inline;
}


.route-detail {
width: 330px;
}

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



/* Bewerbungsformular */

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

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



/* Jobliste */
.joblist h3,
.joblist p.visitenkarte {
font-size: 1.1em;
line-height: 1.5em;
float: left;
margin: 0 5px 10px 0 !important;
}

.joblist h3 span {
color: #EAC31F;
}



/* 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;
}



/* Bildergallerie */

#gallery-container {
background: #fff;
color: #000;
padding: 10px;
}

#gallery-container img {
margin: 0 0 10px 0;
}

#gallery-nav {
position: absolute;
bottom: 281px;
left: 30px;
width: 318px;
}

#gallery-nav h4 {
float: left;
font-size: 1.2em;
}

#gallery-nav a.back {
color: #eac31f;
font-weight: bold;
font-size: 1.1em;
padding: 0 0 0 7px;
background: url(../../images/supercut/pfeil.gif) left center no-repeat;
float: right;
}

#gallery-container span.caption {
margin: 0;
display: block;
font-size: 1.1em;
font-weight: bold;
line-height: 1.5em;
}

#gallery-thumbs {
height: 570px;
background: url(../../images/supercut/gallery_bg.jpg) no-repeat;
position: relative;
}

#gallery-thumblist {
position: absolute;
bottom: 43px;
left: 30px;
height: 231px;
width: 340px;
display: block;
}

#gallery-thumbs ul {
height: 231px;
width: 340px;
display: block;
}

/* 
#gallery-thumbs li {
display: inline;
}


#gallery-thumbs ul li a {
border: 1px solid #fff;
float: left;
display: inline;
margin: 0 10px 10px 0;
}

#gallery-thumbs ul li a:hover {
border: 1px solid #EAC31F;
}

*/



/* Adventskalender */

.advent-container {
background: url(/customer/images/supercut/advent_bg.jpg);
width: 580px;
height: 573px;
margin: -50px -20px -20px -390px;
padding-left : 390px;
position: relative;
}

#kalendermap {
margin: 0 0 0 -390px;
}


.advent-einstieg {
background: url(/customer/images/supercut/advent_bg_einstieg.jpg);
}

.advent-einstieg .formular {
width: 245px;
padding: 88px 0 0 25px;
top: 51px;
position: absolute;
left: 681px;
}

.advent-einstieg .formular a {
font-size: 1em !important;
}

.advent-einstieg .formular label {
display: block;
float: none;
margin: 0 0 2px 0;
width: auto;
}

.advent-einstieg .formular input {
width: 213px;
margin-bottom: 15px;
}

.advent-einstieg .formular .formswitcher {
margin-bottom: 21px;
}

.advent-einstieg .formular input.radio,
.advent-einstieg .formular input.checkbox {
width: auto !important;
height: auto !important;
margin-bottom: 5px;
}

.advent-einstieg .formular .formularspalte {
float: left;
}

.advent-einstieg .formular #name,
.advent-einstieg .formular #vorname {
width: 100px;
}


.advent-einstieg .formular fieldset {
margin: 0 !important;
}

.advent-einstieg .formular #ort {
width: 156px;
}

.advent-einstieg .formular .check input.checkbox {
float: left
}

.advent-einstieg .formular .check label {
font-size: 1.1em;
float: left;
width: 202px;
line-height: 1.2;
}

.advent-einstieg .formular button.submit-absenden {
margin: 20px 0 13px 0;
}

.advent-einstieg .formular p.hinweis {
width: auto;
font-weight: normal !important;
color: #989898;
}

.advent-einstieg #hauptgewinn-details {
display: block;
width: 290px;
height: 168px;
position: absolute;
top: 290px;
left: 378px;
}

.advent-einstieg p.pflichterror {
margin: -16px 20px 10px 0 !important;
background: #EAC31F;
color: #000;
padding: 0 5px;
width: 209px;
}

.advent-einstieg label.pflichterror {
color: #EAC31F !important;
}

.advent-einstieg input.pflichterror {
border-color: #EAC31F !important;
}

.advent-einstieg label.pflichterror a {
color: #EAC31F !important;
text-decoration: underline !important;
}

#fblike {
position: absolute;
left: 391px;
bottom: 10px;
z-index: 99999;
}

#musicplayer {
position: absolute;
right: 48px;
bottom: 30px;
z-index: 999;
background: url(/customer/images/supercut/advent_music.gif) 0 1px no-repeat;
padding-left: 15px;
}

#musicplayer p {
float: left;
}



/* Footer */

#footer {
border-top: 1px solid #aaa;
padding: 13px 20px 0 20px;
height: 27px;
font-size: 1.1em;
}

#footer a {
color: #4d4d4d;
}

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

#footer a.copyright {
float: left;
}

#footer ul {
float: right;
display: inline;
}

#footer ul li {
display: inline;
}

#footer ul li a {
color: #777;
text-decoration: none;
background: no-repeat;
height: 13px;
float: left;
padding-top: 2px;
margin: 0 0 0 20px;
}

#footer ul li.print a {
background-image: url(../../images/supercut/icon_print.gif);
padding-left: 21px;
}

#footer ul li.bookmark a {
background-image: url(../../images/supercut/icon_bookmark.gif);
padding-left: 21px;
}

#footer ul li.tellafriend a {
background-image: url(../../images/supercut/icon_taf.gif);
padding-left: 20px;
}

#footer ul li.facebook a {
height: 24px;
width: 81px;
margin-top: -8px;
position: relative;
}

#footer ul li.facebook a:hover {
text-decoration: none;
}

#footer ul li.facebook-like a {
margin-top: -4px;
position: relative;
}


/* 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;
}