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

                        Screen-Stylesheet SaliSana.de

                        Nadine Oberstein

                        Medienkonzeption - Mediengestaltung

                        www.nadine-oberstein.de

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



body {

        margin: 0;

        padding: 0;

        font-family: calibri, arial, sans-serif;

        font-size: 0.8em;

        line-height: 140%;

        text-align: center;

        color: #6f6f6f;

        background: url(../images/menu_bg.gif) 0px 200px repeat-x #ffffff;

}



img {

        border: none;

}



#content img {

        margin: 0 0 0.7em 0;

}



.txtimg {

        border: 1px solid #760a12;

}



.info {

        padding: 0.5em 0.5em 0.5em 0.5em;

        background: #fef1dc;

}



#logo {

        margin: 20px auto 0px auto;

}



#content {

        width: 650px;

        margin: 80px auto 0 auto;

        padding: 0 0 2em 44px;

        text-align: left;


}



#footer {

        clear: both;

        margin: 60px 0 0 0;

        padding: 0;

        border-top: 1px solid #749319;

        border-bottom: 1px solid #749319;

        background: #e3e3e3;

}



#footer p {

        margin: 0.2em auto 0.2em auto;

        width: 550px;

}



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

                                MENU

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



#menu {

        margin: 0 auto 0 auto;

        list-style: none;

        width: 920px;

        height: 80px;

}



#menu li {

        position: relative;

        float: left;

        width: 150px;

        margin: 8px 0 0 0;

}



#menu a,

#menu a:link,

#menu a:visited,

#menu a:focus,

#menu a:hover,

#menu a:active {

        display: block;

        width: 170px;

        height: 30px;

        font-weight: normal;

        text-decoration: none;

        color: #749319;

        overflow: hidden;

}



#menu a:hover,

#menu a:active,

#menu .active {

        color: #760a12;

}



/*******Grafiken*******/



#menu span {

        display: block;

        position: absolute;

        left: 0px;

        top:  0px;

        height: 30px;

        width: 170px;

        line-height: 100%;

        overflow: hidden;

        z-index: 2;

}



#menu li span.subline {

        display: block;

        padding: 42px 0 0 0;

}



#salz {

        background: url(../images/menu_heilmittel.gif) bottom left no-repeat;

}



#grotte {

        background: url(../images/menu_salzgrotte.gif) bottom left no-repeat;

}



#shop {

        background: url(../images/menu_salzshop.gif) bottom left no-repeat;

}



#salisana24 {

        background: url(../images/menu_salisana24.gif) bottom left no-repeat;

}



#links {

        background: url(../images/menu_links.gif) bottom left no-repeat;


}



#kontakt {

        background: url(../images/menu_kontakt.gif) bottom left no-repeat;

}



/********Active*********/



#menu a:hover #salz,

#menu a:active #salz,

#menu .activeimgsalz {

        background: url(../images/menu_heilmittel.gif) top left no-repeat;

}



#menu a:hover #grotte,

#menu a:active #grotte,

#menu .activeimggrotte {

        background: url(../images/menu_salzgrotte.gif) top left no-repeat;

}



#menu a:hover #shop,

#menu a:active #shop,

#menu .activeimgshop {

        background: url(../images/menu_salzshop.gif) top left no-repeat;

}



#menu a:hover #salisana24,

#menu a:active #salisana24,

#menu .activeimgsalisana24 {

        background: url(../images/menu_salisana24.gif) top left no-repeat;

}



#menu a:hover #links,

#menu a:active #links,

#menu .activeimglinks {

        background: url(../images/menu_links.gif) top left no-repeat;

}



#menu a:hover #kontakt,

#menu a:active #kontakt,

#menu .activeimgkontakt {

        background: url(../images/menu_kontakt.gif) top left no-repeat;

}



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

                                Links

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



p a,

p a:link,

p a:visited,

p a:focus,

p a:hover,

p a:active,

#content ul a,

#content ul a:link,

#content ul a:visited,

#content ul a:focus,

#content ul a:hover,

#content ul a:active {

        text-decoration: none;

        color: #749319;

        border-bottom: 1px dotted #749319;

}



p a:hover,

p a:active,

ul a:hover,

ul a:active {

        color: #760a12;

}



#footer p a {

        border: none;

}



#footer p a.top {

        padding-left: 10px;

        background: url(../images/arrow-top.gif) 0 3px no-repeat;

}



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

                                Galerie

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



.galerie {

        clear: right;

        float: right;

        padding: 0;

        width: 220px;

}



.galerie img {

        padding: 0 0 0 17px;

}



.start {

        margin: 15px 0 0 0;

}



.galerie h2,

.galerie dl {

        margin-left: 17px;

        width: 210px;

        font-size: 0.9em;

}



.galerie h2 {

        font-family: calibri, arial, sans-serif;

        font-size: 1em;

        font-style: normal;

        height: 1.2em;

        padding: 0;

}



.galerie dl {

        word-spacing: 0.01em;

}



.galerie dt {

        width: 8.5em;

}



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

                                Typo

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



h1, h2 {

        display: block;

        position: relative;

        width: 340px;

        height: 30px;

        overflow: hidden;

        font-family: constantia, georgia, serif;

        font-style: italic;

        font-weight: normal;

         font-size: 1.6em;

        color: #760a12;

        background: #ffffff;

}



.small {

        margin: 2em 0 0px 0;

        height: 1.2em;

        font-family: calibri, arial, sans-serif;

        font-size: 1em;

        font-style: normal;

        font-weight: normal;

}



h3 {

        margin: 0 0 0 0;

        font-size: 1em;

        font-weight: normal;

        color: #760a12;

}



p {

        width: 340px;

        margin: 0 0 0.7em 0;

}



#content ul {

        list-style: disc;

        margin: 0 0 0.7em 0;

        padding: 0.2em 10px 0.2em 30px;

        width: 300px;

        background: #fef1dc;

}



#content ul li {

        margin: 0 0 0.2em 0;

}



dl {

        width: 340px;

        margin: 0 0 0.7em 0;

}



dt {

        clear: left;

        float: left;

        width: 100px;

        margin: 0 0 0.2em 0;

}



dd {

        margin: 0 0 0.2em 0;

        padding: 0;

}



.preisliste, dl.feiertage {

        padding: 0.2em 0 0.2em 0;

        background: #fef1dc;

}



.feiertage dt {

        padding: 0 10px 0 10px;

        width: 14em;

}



.preisliste dt {

        padding: 0 10px 0 10px;

}



.tel dt {

        width: 50px;

}



.last {

        margin: 0;

}



strong {

        font-weight: normal;

        color: #760a12;

}



.bringout {

        color: #6f6f6f;

}



abbr {

        border: none;

}



/******h1-Grafiken******/



h1 span, h2 span {

        position: absolute;

        top: 0;

        left: 0;

        width: 340px;

        height: 30px;

}



.heilmittel {

        background: url(../images/headlines/heilmittel.gif) top left no-repeat;

}



.kostbar {

        background: url(../images/headlines/kostbar.gif) top left no-repeat;

}



.gew {

        background: url(../images/headlines/gew.gif) top left no-repeat;

}



.salzgrotte {

        background: url(../images/headlines/salzgrotte.gif) top left no-repeat;

}



.krafttanken {

        background: url(../images/headlines/kraft-tanken.gif) top left no-repeat;

}



.sitzung {

        background: url(../images/headlines/sitzung.gif) top left no-repeat;

}



.preise {

        background: url(../images/headlines/preise.gif) top left no-repeat;

}



.salzshop {

        background: url(../images/headlines/salzshop.gif) top left no-repeat;

}



.geschenk {

        background: url(../images/headlines/geschenk.gif) top left no-repeat;

}



.impressum {

        background: url(../images/headlines/impressum.gif) top left no-repeat;

}



.zeiten {

        background: url(../images/headlines/zeiten.gif) top left no-repeat;

}



.gestaltung {

        background: url(../images/headlines/gestaltung.gif) top left no-repeat;

}



.anfahrt {

        background: url(../images/headlines/anfahrt.gif) top left no-repeat;

}



.kontakt {

        background: url(../images/headlines/kontakt.gif) top left no-repeat;

}



.email {

        background: url(../images/headlines/email.gif) top left no-repeat;

}



.versendet {

        background: url(../images/headlines/versendet.gif) top left no-repeat;

}



.fehler {

        background: url(../images/headlines/fehler.gif) top left no-repeat;

}



.atmen {

        background: url(../images/headlines/gesundheit-atmen.gif) top left no-repeat;

}



.datenschutz {

        background: url(../images/headlines/datenschutz.gif) top left no-repeat;

}



.personenbezug {

        background: url(../images/headlines/personenbezug.gif) top left no-repeat;

}



.datenschutzinfo {

        background: url(../images/headlines/datenschutzinfo.gif) top left no-repeat;

}



.fotografie {

        background: url(../images/headlines/fotografie.gif) top left no-repeat;

}



.feier {

        background: url(../images/headlines/neueroeffnung.gif) top left no-repeat;

}



.eroeffnet {

        background: url(../images/headlines/eroeffnet.gif) top left no-repeat;

}



.feiertag {

        background: url(../images/headlines/feiertage.gif) top left no-repeat;

}



.wcoupon {

        background: url(../images/headlines/wcoupon.gif) top left no-repeat;

}



.neuesjahr {

        background: url(../images/headlines/neuesjahr.gif) top left no-repeat;

}



.karneval {

        background: url(../images/headlines/karneval.gif) top left no-repeat;

}



.ostern {

        background: url(../images/headlines/ostern.gif) top left no-repeat;

}



.offenetuer {

        background: url(../images/headlines/offenetuer.gif) top left no-repeat;

}



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

                        Formular

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



form {

        width: 340px;

}



fieldset {

        clear: left;

        margin: 0 0 1em 0;

        padding: 0;

        border: none;

}



fieldset br {

        clear: left;

}



legend {

        display: none;

}



label {

        display: block;

        float: left;

        height: 1.3em;

        width: 88px;

}



input, select {

        width: 240px;

        height: 1.3em;

        margin: 0 0 0.3em 0;

        padding: 0em 0em 0em 10px;

        font: normal 1em calibri, arial, sans-serif;

        color: #6f6f6f;

        border: 1px solid #760a12;

        background: #f4f4f4;

}



textarea {

        width: 242px;

        height: 8em;

        padding: 0em 0em 0em 0.5em;

        border: 1px solid #760a12;

        color: #6f6f6f;

        font: normal 1em calibri, arial, sans-serif;

        background: #f4f4f4;

}



#data {

        margin: 0 0 1em 0;

}



#send {

        text-align: right;

        margin: 0 0 2.5em 0;

}



#submit {

        height: 1.4em;

        width: 9em;

        margin: 0 0 0 0;

        padding: 0;

        color: #f4f4f4;

        border: 1px solid #760a12;

        background: #760a12;

}