@charset "UTF-8"; /* charset festlegen */

/*
Projektname:   Royal Hair
Web:           www.safirbilgisayar.com
Erstellt am:   21.03.2010    
Freigabe am:   NICHT freigegeben
*/

/* ################################## */
/* ### Inhaltsverzeichnis ### */
/* ### Elemente ### */
/* ### 1. Formatierung des body ### */
/* ### 2. Links: <a> ### */
/* ### 3. Typo ### */
/* ### 4. Formulare ### */
/* ### 5. Tabellen ### */
/* ### 6. sonstige Elemente ### */

/* ### weitere Regeln ### */
/* ### Sonderfaelle ### */
/* ################################## */

/* ### Elemente ### */
/* Formatierung des body */

body {
font-family: "Trebuchet MS", verdana;
color: #000;
background: url(../images/body_bg_dunkler.gif) top left repeat;
font-size: 62.5%;
}

#bg-ornament {
/*background: url(../images/bg_ornamente_dunkler.png) top center no-repeat;*/
background: none;
margin: 0 auto;
width: 993px;
height: 636px;
}

#bg-ornament-kachel {
background-image: url(../images/bg_ornamente_kachel_dunkler.png);
background-repeat:repeat-x;
}

#wrapper {
width: 823px;
height: auto;
background-image:url(../images/bg_content.gif);
background-repeat:repeat-x;
background-color: #000000;
/*border-right: 1px solid #000;
border-left: 1px solid #000;
*/
margin: auto;
padding-left: 30px;
padding-right: 9px;
}

#enalt {
width: 823px;
height: auto;
margin: auto;
padding-left: 30px;
padding-right: 30px;
}

#content {
width:803px;
height: auto;
min-height: 200px;
color: #FFFFFF;
padding-top: 30px;
text-align: justify;
}

* html #content {
height: 200px;
}

#content.produktseite {
width: 575px;
margin: 0 0 0 212px;
padding: 0;
}

#header {
width:803px;
height:100px;
}

#logo {
width:156px;
height:98px;
float:left;
background-image:url(../images/logo_royalhair.png);
background-repeat:no-repeat;
}

#meta {
height:14px;
float:right;
font-size: 1em;
font-family: "trebuchet MS", verdana;
}

#visual {
width:803px;
height:264px;
}

#footer-left {
color: #6d5b67;
font-family: "trebuchet MS", verdana;
font-size: 1.1em;
float: left;
margin: 11px 0 6px 0;
}

#footer-right {
color: #6d5b67;
font-family: "trebuchet MS", verdana;
font-size: 1.1em;
float: right;
margin: 11px 2px 6px 0;
}

* html #footer-right {
color: #6d5b67;
font-family: "trebuchet MS", verdana;
font-size: 1.1em;
float: right;
margin: 30px -1px 6px 0;
}

div#breadcrumb {
margin: 20px 0 0 212px;
}



/* Intro Seite */

body.intro {
background: url(../images/body_bg_intro.gif) top left repeat ;
}

#bg-ornament-intro {
background: url(../images/bg_ornamente_intro.png) top center no-repeat;
width: 100%;
height: 636px;
}

#bg-ornament-kachel-intro {
background-image: url(../images/bg_ornamente_kachel_intro.png);
background-repeat: repeat-x;
}

.intro #content {
width: 516px;
padding-top: 53px;
}

#wrapper-intro {
width: 516px;
height: 634px;
margin-left: auto;
margin-right: auto;
}

#logo-intro {
width: 137px;
height: 89px;
margin: 0 0 33px 189px;
}

#logo-intro a {
background-image: none !important;
padding: 0 !important;
}

#sprachwahl {
margin-left: 189px;
height: 1%;
}

#sprachwahl li {
display: inline;
}

#sprachwahl li a,
#sprachwahl li span {
float: left;
height: 9px;
padding: 0 !important;
margin: 0 26px 0 0;
display: inline;
background: none !important;
}

#sprachwahl .de a {
background: url(../images/deutsch.gif) top left no-repeat !important;
width: 56px;
}

#sprachwahl .en a {
background: url(../images/english.gif) top left no-repeat !important;
width: 55px;
}

#sprachwahl .en span {
background: url(../images/english_grau.gif) top left no-repeat !important;
width: 55px;
}

#visual-intro {
margin: 29px 0 0 50px;
}

#footer-intro {
margin-top: 20px;
text-align: center;
}

#footer-intro span {
color: #795869;
font-family: "trebuchet MS", verdana;
font-size: 1.1em;
}

/* Typo */
#text span {
font-size: 13px;
font-weight: bold;
}

#content a,
#content a.lila:hover {
background-image:url(../images/feil_white.gif);
background-repeat:no-repeat;
background-position: center left;
padding: 0 0 0 8px;
color: #d90075;
border: 0;
outline: 0;
}

#content a.lila,
#content a.lila:hover {
font-weight: bold;
}

#content a.lila,
#content a:hover {
background-image:url(../images/pfeil_lila.gif);
background-repeat:no-repeat;
background-position: center left;
padding: 0 0 0 8px;
color: #ff6;
border: 0;
outline: 0;
}

* html #content a {
background: none !important;
padding: 0 !important;
}

* + html #content a {
background: none !important;
padding: 0 !important;
}

* html #content a:hover {
background: none !important;
padding: 0 !important;
}

* + html #content a:hover {
background: none !important;
padding: 0 !important;
}

#altlink {
font-size: 10px;
text-align: left;
color: #fff;
border: 0;
outline: 0;
}

#altlink a {
color: #d90075;
border: 0;
outline: 0;
}
#altlink a:hover {
color: #FF6;
font-weight: bold;
}

div#breadcrumb span {
font-size: 1.2em;
color: #fff;
float: left;
margin: 0 10px 0 0;
}

div#breadcrumb span#breadcrumbcurrent {
font-size: 1em;
color: #d90075;
display: block;
float: left;
}



h1 {
font-size: 2.2em;
color: #d90075;
margin: 50px 0 0 0;
font-weight: normal;
}

h2 {
font-size: 2.2em;
color: #FFF;
margin: 38px 0 0 0;
font-weight: normal;
}

h3 {
font-size: 1.3em;
font-weight: bold;
color: #fff;
margin: 0px 0px 30px 0;
}

h4{
font-family: "trebuchet MS", verdana;
font-size: 1.3em;
font-weight: bold;
border-bottom: 1px solid #684d5f;
margin: 40px 0 12px 0;
}

h5{
font-family: "trebuchet MS", verdana;
font-size: 1.3em;
font-weight: bold;
margin: 15px 0 0 0;
}

p {
font-size: 1.3em;
margin: 15px 0 0 0;
}

/* Links: <a> */
/* a href="" und a name="" fuer IE */
a {
color: #FFFFFF;
border: 0;
outline: 0;
}

a.bold {
color: #FFFFFF;
border: 0;
outline: 0;
font-weight: bold;
font-size: 1em;
}

a.bold.nagelstudio {
color: #FFFFFF;
border: 0;
outline: 0;
font-weight: bold;
font-size: 1.3em;
margin: 0 0 2px 19px;
}

a.bold.eingerueckt {
color: #FFFFFF;
border: 0;
outline: 0;
font-weight: bold;
font-size: 1.3em;
margin-left: 286px;
}

* html a.bold.eingerueckt {
margin-left: 280px;
}

/* a href="" sonstige Ausgabegeraete */
a:link {
color: #fff;
border: 0;
outline: 0;
text-decoration: none;
}
/* besuchter Link */
a:visited {
color: #FFF;
border: 0;
outline: 0;
}

/* maus down = klick und im IE auch wiederbesuch der Seite ueber backspace */
a:active {
color: #000000;
border: 0;
outline: 0;
}
/* wenn link ueber tab "aktiviert" wird */
a:focus {
color: #000000;
border: 0;
outline: 0;
}

a.img {
background: none !important;
padding: 0 !important;
}

/* Listen */

ul {
font-size: 1.2em;
}

ul ul {
font-size: 1.0em;
}

/* Listen im content */
#content ul li {
font-size: 1em;
}

#content ol li {
font-size: 1.3em;
}

#content ol {
margin: 5px 0 0 18px;
}

* html #content ol {
margin: 5px 0 0 22px;
}

* + html #content ol {
margin: 5px 0 0 22px;
}

#content ol li {
list-style-type: decimal;
list-style-position: outisde;
}

#content ul {
margin: 0 0 0 14px;
}

* html #content ul {
margin: 0 0 0 16px;
padding-bottom: 5px;
}

* + html #content ul {
margin: 0 0 0 16px;
padding-bottom: 5px;
}

#content ul li {
margin: 3px 0;
list-style-type: circle;
}

#content ul ul {
margin: 0 0 0 10px;
}

#content ul ul li {
font-size: 1em;
list-style-type: square;
}

#content ul#sprachwahl {
margin-left: 189px;
}



/* Metanavigation */

#meta ul li {
float:left;
margin-left: 8px;
margin-top: 14px;
color: #d90075;
font-weight: bold;
}

#meta ul li a {
color: #b6b7b7;
font-weight: bold;
}

#meta ul li a:hover {
color: #d90075;
font-weight: bold;
}

#meta ul li.last {
margin-right: 30px;
width: auto;
}

#meta ul li.last a {
color: #B6B7B7;
}


#meta ul li span {
color: #6b6b6b;
margin-left: 5px;
}

/* Breadcrumb */
div#breadcrumb ul  {
height: 20px;
margin: 0;
float: left;
}

div#breadcrumb ul li  {
float: left;
display: block;
color: #d90075;
margin: 0 10px 0 0;
}

div#breadcrumb ul li a  {
background: transparent url(../images/lila_pfeil.gif) center right no-repeat;
padding: 0 10px 0 0;
color: #d90075;

}

div#breadcrumb ul li a:hover  {
background: transparent url(../images/pfeil_fff.gif) center right no-repeat;
padding: 0 10px 0 0;
color: #fff;
}

div#breadcrumb ul li.last a  {
background: none;
padding: 0 10px 0 0;
}


/* Bilder */

img {
border: none;
background-image: none !important;
}

a img {
border: none;
background-image: none !important;
display: inline;
}

div.bildlinks img {
float: left;
margin: 4px 10px 10px 0;
}

* html div.bildlinks img {
float: left;
margin: 18px 10px 10px 0;
}

* + html div.bildlinks img {
float: left;
margin: 18px 10px 10px 0;
}


div.bildlinks h3 {
margin: 0 0 -10px 0;
}


div.bildrechts img {
float: right;
margin: 0 0 10px 10px;
}

* html div.bildrechts img {
float: right;
margin: 10px 0 10px 10px;
}


/* Produkt-Links */

#produktuebersicht div {
padding: 0 0 0 5px;
margin: 0 5px 0 0;
width: 135px;
float: left;
text-align: center;
}

#produktuebersicht div a,
#produktuebersicht div a:hover {
background-position: 5px left;
}

* html #produktuebersicht div a,
* html #produktuebersicht div a:hover {
background-position: 6px left;
}

#produktuebersicht div.last {
margin: 0;
}

#produktuebersicht div img {
margin-left: -5px;
margin-bottom: 30px;
}

* html #produktuebersicht div img {
margin-left: -5px;
margin-bottom: 0px;
}

/* Teaserboxen */

.manset  {
width: 410px;
height: 200px;
float: left;
margin: 0 10px 10px 0;
color: #cdcccd !important;
}

ul.liste-teaserboxen {
margin: 38px 0 0 0;
}

ul.liste-teaserboxen li {
float: left;
width: 200px;
text-align: center;
font-size: 1.7em;
}

ul.liste-teaserboxen li a {
font-weight: normal;
color: #FFF;
}

.teaserboxen  {
float: left;
width: 630px;
}

.teaserboxen-breit  {
float: left;
width: 820px;
}

.teaserboxen-breit .teaserbox  {
width: 175px;
height: 200px;
float: left;
margin: 0 10px 10px 0;
color: #cdcccd !important;
}

.teaserbox  {
width: 190px;
float: left;
/*margin: 0 10px 0 0;*/
margin: 0 15px 0 0 !important;
/*color: #cdcccd !important;*/
color: #ff0000;
}

.teaserbox.last  {
width: 190px;
float: left;
margin: 0 0px 0 0;

}

.teaserbox h2 {
font-size: 1.5em;
text-align: center;
display: block;
margin: 0;
color: #d90075;
}

.teaserbox h3 {
height: 35px;
display: block;
margin: 0;
color: #cdcccd;
}

.teaserbox h3 a {
color: #cdcccd !important;
}

* html .teaserbox img {
margin-top: 5px;
}

* + html .teaserbox img {
margin-top: 5px;
}

.teaserbox h3 a:hover {
color: #d90075 !important;
}

.teaserbox a {
background-image: none !important;
color: #cdcccd;
height: 1%;
}

.teaserbox img {
padding-top: 5px;

}

.teaserboxen h3.last  {
margin: 0;
}


/* Haendler-Login */

.haendler-login {
float: left;
width: 170px;
}

.haendler-login h3 {
padding: 0;
margin: 0;
}

.haendler-login p,
.haendler-login p a {
color: #64505e !important;
font-size: 1.1em;
margin-top: 15px;
}

.haendler-login p a {
background-image:url(../images/pfeil_675060.gif) !important;
background-repeat:no-repeat;
background-position: center left;
padding: 0 0 0 8px;
color: #64505e !important;
font-size: 1.1em;
}

.haendler-login p a:hover {
color: #ffffff !important;
background-image:url(../images/pfeil_fff.gif) !important;
background-repeat:no-repeat;
background-position: center left;
padding: 0 0 0 8px;
}



/* Sitemap */

#sitemap ul li { /* Hauptnavipunkte */
text-transform: uppercase;
font-weight: bold;
font-size: 1.25em;
border-top: 1px solid #4b3f40;
margin: 10px 0 -10px 0;
padding: 5px 0;
}

* html #sitemap ul li { /* Hauptnavipunkte */
border-top: none;
}

#sitemap ul li ul li { /* 2. Ebene */
font-size: 0.95em;
text-transform: none;
font-weight: bold;
margin: 3px 0 0 1px;
border: none !important;
padding: 3px 0;
}

#sitemap ul li ul li a { /* 2. Ebene a*/
margin: 3px 0 0 1px;
border: none !important;
padding: 3px 0;
background-image: none;
}

#sitemap ul li ul li a:hover { /* 2. Ebene a:hover*/
margin: 3px 0 0 1px;
border: none !important;
padding: 3px 0;
background-image: none;
}

#sitemap ul li ul li ul li {
margin: 0 0 -2px 0;
font-weight: normal;
}

#sitemap ul li ul li ul li a{ /* 3. Ebene a */
margin: 0;
color: #cacbcb;
background-image:url(../images/pfeil_sitemap.gif);
background-repeat:no-repeat;
background-position: center left;
padding: 0px 0 2px 8px;
}

#sitemap ul li ul li ul li a:hover { /* 3. Ebene a:hover */
margin: 0;
font-weight: normal;
color: #d90075;
background-image:url(../images/pfeil_sitemap_hover.gif);
background-repeat:no-repeat;
background-position: center left;
padding: 0px 0 2px 8px;
}

/* Footer */

#footer-left a:hover {
color: #ff6;
}

#footer-left ul,
#footer-right ul {
margin-top: 30px;
}

#footer-left ul li {
color: #6e5966;
font-family: "trebuchet MS", verdana;
font-size: 0.9em;
float: left;
margin: 0 15px 0 0;
}

#footer-left ul li a {
color: #6e5966;
font-weight: normal;
}

#footer-left ul li a:hover {
color: #fff;
}

#footer-left ul li span {
color: #6e5966;
margin-left: 5px;
}

#footer-right ul li {
color: #6e5966;
font-family: "trebuchet MS", verdana;
font-size: 0.9em;
float: left;
}

#footer-right ul li a {
color: #6e5966;
font-weight: normal;
margin: 0 15px 0 0;
}

#footer-right ul li a:hover {
color: #FFF;
font-weight: normal;
}

#footer-right ul li span {
color: #6e5966;
margin-left: 5px;
}

* html #footer ul {
margin-right: 29px;
margin-bottom: 15px;
}


.clear {
clear: both;
margin: -1px 0px 0px 0px;  /* laesst 1px clear nach oben verschwinden */
height: 0px;  /* laesst &nbsp; 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;
}

.left {
float: left;
margin: 0 12px 5px 0;
}