/* Basisvorlage CSS
Projekt: www.sonnenhotels.de
Start: 26.05.2009
Letzte Aenderung: 00.00.20xx
*/

/* Farbschema
--------------------------------------------------------------------------------------- */

/*
Farbton (Hintergrund Body):                 #FDF5E8
Farbton (Hintergrund Content und Link1 ):     #f9ebd1
Farbton (Hintergrund Navitop):                 #DD8A3A
Farbton (Hintergrund linke Spalte):         #FCF3E2
Farbton (Hintergrund Footer):                 #E8BD33
Farbton (Text):                             #000000
*/

/* Reset
--------------------------------------------------------------------------------------- */
* {
    padding: 0;
    margin: 0;
    border: 0;
}
/* Globals und Typo 
--------------------------------------------------------------------------------------- */

html {
/* Wahlweise Grid-Hintergrund
Rasterhintergrund, der die Breite bis 100 Pixel und eine Höhe bis 950 Pixel anzeigt. Die Breite von 960 Pixel ist markiert. Der Hintergrund ist transparent, muss also nicht nur mit #fff verwendet werden. Es wird eine Schriftgrö�e von 75% oder 12px festgelegt.
    background: #fff url(bilder/grid.png) top left no-repeat;
*/    
}

body,td,th,input,select,textarea,p      {  
    font-family:"Times New Roman", Times, serif;
    font-size: 13px;
    line-height:16px;
    color: #000000;
}


/* allgemeine Links
--------------------------------------------------------------------------------------- */
a:link, a:visited {
    color:#000000;
    font-style:italic;
    text-decoration: none;
}


a:hover, a:active {
    color:#000000;
    font-style:italic;
    text-decoration: underline;
}

/* Macht die gepunktete Linie um geklickte Links unsichtbar
--------------------------------------------------------------------------------------- */
a:focus {
    outline: none;
}


/* #navitop
--------------------------------------------------------------------------------------- */

a.link1:link, a.link1:visited,a.link1:active
{
    font-size: 11px;
    display:block;
    padding: 0px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
    text-align:center;
    color: #000000;
    text-decoration:none;
    text-transform: uppercase;
    font-style: normal;
    letter-spacing:0.7px;
    }

a.link1:hover,a.link1a:link,a.link1a:visited,a.link1a:active,a.link1a:hover
{
    font-size: 11px;
    display:block;
    padding: 0px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
    text-align:center;
    color: #FFFFFF;
    text-decoration:none;
    text-transform: uppercase;
    font-style: normal;
    letter-spacing:0.7px;
    }
    
a.link1:focus {
    outline: none;
}


/* #navileft
--------------------------------------------------------------------------------------- */

a.link2:link, a.link2:visited,a.link2:active
{
    font-size: 11px;
    display:block;
    padding: 5px;
    text-align:left;
    color: #000000;
    text-decoration:none;
    width: 175px;
    text-transform:uppercase;
    font-style: normal;
    padding: 5px 5px 5px 5px;
    margin: 0px;
    }

a.link2:hover,a.link2a:link,a.link2a:visited,a.link2a:active,a.link2a:hover
{
    font-size: 11px;
    display:block;
    padding: 5px;
    text-align:left;
    color: #d65f00;
    text-decoration:none;
    width: 175px;
    text-transform:uppercase;
     font-style: normal;
    padding: 5px 5px 5px 5px;
    margin: 0px;
   }

a.link2:focus {
    outline: none;
}

a.link3:link, a.link3:visited,a.link3:active
{
    font-size: 11px;
    display:block;
    padding: 5px 5px 5px 20px;
    text-align:left;
    color: #000000;
    text-decoration:none;
    margin:0;
    width: 160px;
    font-style: normal;
    }

a.link3:hover,a.link3a:link,a.link3a:visited,a.link3a:active,a.link3a:hover
{
    font-size: 11px;
    display:block;
    padding: 5px 5px 5px 20px;
    text-align:left;
    color: #d65f00;
    text-decoration:none;
    margin:0;
    width: 160px;
    font-style: normal;
    }

a.link3:focus {
    outline: none;
}


a.link4:link, a.link4:visited,a.link4:active
{
    font-size: 11px;
    display:block;
    padding: 5px 5px 5px 35px;
    text-align:left;
    color: #000000;
    text-decoration:none;
    margin:0;
    width: 145px;
    font-style: normal;
    }

a.link4:hover,a.link4a:link,a.link4a:visited,a.link4a:active,a.link4a:hover
{
    font-size: 11px;
    display:block;
    padding: 5px 5px 5px 35px;
    text-align:left;
    color: #d65f00;
    text-decoration:none;
    margin:0;
    width: 145px;
    font-style: normal;
    }

a.link4:focus {
    outline: none;
}

a.link5:link, a.link5:visited,a.link5:active
{
    font-size: 11px;
    display:block;
    padding: 5px 5px 5px 45px;
    text-align:left;
    color: #000000;
    text-decoration:none;
    margin:0;
    width: 135px;
    font-style: normal;
    }

a.link5:hover,a.link5a:link,a.link5a:visited,a.link5a:active,a.link5a:hover
{
    font-size: 11px;
    display:block;
    padding: 5px 5px 5px 45px;
    text-align:left;
    color: #d65f00;
    text-decoration:none;
    margin:0;
    width: 135px;
    font-style: normal;
    }

a.link5:focus {
    outline: none;
}

/* #footer (NAVIGATION)
--------------------------------------------------------------------------------------- */

ul.linkfooter {
    list-style-type: none;
    margin:0;
    padding:0;
    float: right;
}

li.linkfooter {
    display: inline;
    float: left;
    background:none;
}

a.linkfooter:link, a.linkfooter:visited,a.linkfooter:active
{
    font-size: 10px;
    margin: 0px 10px 0px 0px;
    text-align:left;
    color: #000000;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:0.7px;
    font-style:normal;
    }

a.linkfooter:hover,a.linkfootera:link,a.linkfootera:visited,a.linkfootera:active,a.linkfootera:hover
{
    font-size: 10px;
    margin: 0px 10px 0px 0px;
    text-align:left;
    color: #000000;
    text-decoration:underline;
    text-transform:uppercase;
    letter-spacing:0.7px;
    font-style:normal;
    }
    
a.linkfooter:focus {
    outline: none;
}



/* Vertikaler Rhythmus basierend auf 12px Basisgrö�e für den Flie�text
--------------------------------------------------------------------------------------- */
h1 {
    font-size: 14px;
    text-transform:uppercase;
    color: #000000;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 0px 10px;
    font-weight:normal;
    line-height: 16px;
    border-bottom: 1px solid #d65f00;
    border-left: 16px solid #d65f00;
}

h2 {
    font-size: 13px;
    color: #d65f00;
    margin: 3px 0px 5px 26px;
    padding: 0px;
    font-weight:normal;
    line-height: 16px
}

h3 {
    font-size: 13px;
    margin: 5px 0px 5px 0px;
    color:#000000;
}

p,td,th {
    margin-top: 0em;
    margin-bottom: 0.5em;
    padding: 0px;
    }


ul { 
        list-style:none;
        margin: 0;
        padding: 0;
        }

ul li { 
        background:url('aufzaehlung.png') no-repeat left 6px; padding-left:16px; 
        }

.trennlinie {
        width:400px;
        height:6px;
        display:block;
        background: url(trennlinie.png) repeat-x top left;
        margin: 5px 0px 0px 0px;
        }

/*  HOTELEXTRAS (Aufzählung)
---------------------------------------------------------------------------------------*/
.hotelextras { 
    font-size: 11px;
    color: #000000;
    padding: 0px;
    margin: 0;
    font-style:normal;
    line-height: 11px;
}

ul.hotelextras { 
        list-style:none;
        margin: 0;
        padding: 0;
        }

ul li.hotelextras { 
        background:url('aufzaehlung.png') no-repeat left 5px; padding-left:14px; 
        margin-bottom:5px;
        }



/* Bilder und verlinkte Bilder ohne Rahmen 
--------------------------------------------------------------------------------------- */
img, a img {
    border: 0;
}


/* Links- bzw. Rechtsausrichtung für Elemente
--------------------------------------------------------------------------------------- */
.links {
    float: left;
    margin: 0 0.5em 0.5em 0;
}

.rechts {
    float: right;
    margin: 0 0 0.5em 0.5em;
}

/* Teaser- oder Infoboxen 
--------------------------------------------------------------------------------------- */
.infobox-1   { 
    font-size: 11px;
    text-transform:uppercase;
    color: #000000;
    display: block;
    margin: 0;
    padding: 0px;
    }   

.infobox-2   { 
    font-size: 10px;
    color: #d65f00;
    margin: 3px 0px 3px 0px;
    padding: 0px;
    display:block;
    }

.infobox-3   { 
    font-size: 12px;
    text-transform:uppercase;
    color: #000000;
    margin: 0;
    padding: 0px;
    }

.infobox-4   { 

    font-size: 12px;
    color: #000000;
    margin: 0;
    padding: 0px;
    text-transform:none;
    }

.infobox-5, a.infobox-5:link, a.infobox-5:visited, a.infobox-5:hover, a.infobox-5:active   { 
    font-size: 12px;
    color: #000000;
    padding: 0px;

    margin: 0;
    font-style:normal;
    }

.infobox-6   { 
    font-size: 10px;
    color: #000000;
    margin: 3px 0px 3px 0px;
    padding: 0px;
    display:block;
    }


/* Boxen in der linken Spalte
--------------------------------------------------------------------------------------- */
.boxlinks {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    display:block;
    padding: 10px 0px 10px 0px;
    }


h1.boxlinks {
    padding: 0px 10px 0px 10px;
    text-transform:uppercase;
    border: none;
    font-size: 11px;
    color: #000000;
    letter-spacing:0;
    font-weight:normal;
    }

h7.boxlinks {
    padding: 0px 10px 0px 10px;
    text-transform:uppercase;
    border: none;
    font-size: 11px;
    color: #000000;
    letter-spacing:0;
    font-weight: bold;
    border:none;
    }

p.boxlinks {
    padding: 10px 10px 0px 10px;
    border: none;
    font-size: 11px;
    color: #000000;
    letter-spacing:0;
    font-weight:normal;
    margin:0;
    border:none;
    }

.boxlinkstop {
    border-top: 1px solid #000000;
    display:block;
    padding: 5px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    }

.boxlinksbottom {
    border-bottom: 1px solid #000000;
    display:block;
    padding: 0px 0px 5px 0px;
    margin: 0px 0px 5px 0px;
    }

/* Boxen im Ablaufdiagramm
--------------------------------------------------------------------------------------- */
#boxheader {
    width:405px;
    height: 55px;
    display: inline;
    }
    
.boxheaderleft {
    height: 55px;
    width: 10px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    }
.boxheaderright {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    height: 55px;
    width: 10px;
    }
.boxheadercontent {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    height: 55px;
    font-size: 11px;
    text-align:center;    
    }
.boxtextleft {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    height: 35px;
    width: 10px;
    }
.boxtextright {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    height: 35px;
    width: 15px;
    }
.boxtextcontent {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    width: 195px;
    height: 35px;
    font-size: 9px;
    text-align:center;    
    padding-top: 3px;
    }





/* Formulare 
---------------------------------------------------------------------------------------- */
.button {
        text-align: left;
        height: 20px;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
        margin-right: 15px;
        background-image: url(bg-linien.png);
        background-repeat: repeat;
        background-position: left top;
        background-color:#efefef;
        color: #000000;
        text-decoration: none;
        font-size:11px; 
        border: 1px solid #dd8a3a;
        text-transform:uppercase;
        margin: 10px 0px 0px 10px; 
}

.buttondetails, a.buttondetails:link, a.buttondetails:visited, a.buttondetails:hover, a.buttondetails:active {
        text-align: left;
        padding: 2px 8px 2px 8px;
        color: #000000;
        text-decoration: none;
        font-size:11px; 
        border: 1px solid #dd8a3a;
        text-transform:uppercase;
        display:block;
        font-style:normal;
}


label.kontakt {
    width: 140px;
    margin-right: 15px;
    margin-bottom: 10px;
    float: left;
    text-align: right;
    font-weight:normal;
    color: #000000;
    text-transform:uppercase;
    font-size: 11px;
    
}

label.klein {
    width: 40px;
    margin-right: 15px;
    margin-bottom: 10px;
    float: left;
    text-align: right;
    font-weight:normal;
    color: #000000;
    text-transform:uppercase;
    font-size: 11px;
    display: inline;
}

input.checkbox  {
    display:block;
    float:left;
    margin-right:10px;
    margin-bottom: 5px;
}

.checkboxtext {
    text-align: left;
    font-weight:normal;
    color: #000000;
    text-transform:uppercase;
    font-size: 11px;
    margin-left: 30px;
    margin-bottom: 5px;
    display:block;
}


textarea.kontakt {
    width: 200px;
    margin-bottom: 5px;
    padding: 0px;
    font-size: 11px;
    color: #1d1d1d;
    border: 1px solid #dd8a3a;
    background-color: #FFFFFF;
    font-size: 11px;
}
input.kontakt,select.kontakt {
    width: 200px;
    margin-bottom: 5px;
    height: 20px;
    padding: 0px;
    font-size: 11px;
    color: #1d1d1d;
    border: 1px solid #dd8a3a;
    background-color: #FFFFFF;
    }
input.klein,select.klein {
    width: 30px;
    margin-bottom: 5px;
    height: 20px;
    padding: 0px;
    font-size: 11px;
    color: #1d1d1d;
    border: 1px solid #dd8a3a;
    background-color: #FFFFFF;
    display: inline;
    }

fieldset {
    background-color: #F9EBD1;
    border: 1px solid #dd8a3a;
    margin: 10px 0px 0px 0px;
    padding: 10px;
    width: 380px;
    }

legend {
    text-transform: uppercase;
    font-size: 11px;
    }

/* Layoutelemente
Verwenden Sie overflow: hidden; um nötige Foats aufzulösen.
--------------------------------------------------------------------------------------- */

body {
  background: url(bg-komplett.jpg) repeat-x;
}


#wrapper {
    margin: 25px 0 12px -475px;
    padding: 0;
    width: 950px;
    background: url(../topbild/bg-startbild.jpg) top left no-repeat #f9ebd1;
    position: absolute;
    left: 50%;
    top: 0px;
}


/* Wetterbox ---------------------------------------------------------------------------*/
.wettercomheadline156804, .wettercomheadline220573, .wettercomheadline220577 {
    font-family:times;
    color:#000000;
    font-size:13px;
    line-height: 16px;
    padding-bottom: 5px;
    margin-bottom:5px;
    }

.wettercomsmall156804, .wettercomsmall220573, .wettercomsmall220577 {
    font-family:times;
    color:#000000;
    font-size:11px;
    padding-left: 5px;
    text-align:center;
    
}

.wettercomtext156804, .wettercomtext220573,  .wettercomtext220577 {
    font-family:times;
    color:#000000;
    font-size:12px;
    line-height: 16px;
    padding-left: 5px;
    padding-bottom: 5px;
    margin-bottom:5px;
    }
.wettercomtext156804, .wettercomtext2220573, .wettercomtext2220577 {
    font-family:times;
    color:#000000;
    font-size:12px;
    line-height: 16px;
    padding-left: 5px;
    padding-bottom: 5px;
    margin-bottom:5px;
    }
    
hr {
    color:#000000; 
    height: 1px;
    width:100%;
    line-heigth: 1px;
    }