body {
padding:10px;
margin: 0px;
font-family: Trebuchet MS, verdana,arial, tahoma, verdana;
font-size: 100.01%;
text-align:center;
background-color:#fff;
background-image:url(Grafiken/background.jpg);
background-repeat: repeat-x;
height: 101%;
z-index:0;

}

h1 {
font-family:Trebuchet MS, verdana, Georgiana,Times New Roman, serif;
font-size:52px;
color:#535353;
font-weight:bold;
}


h2 {
font-family:Trebuchet MS,  verdana, Times New Roman, serif;
font-size:50px;
color:#434343;
}

h5 {
text-indent:60px;
font-family: Trebuchet MS, verdana, Times New Roman, serif;
font-size:25px;
font-weight:lighter;
font-stretch:expanded;
letter-spacing:2px;
color:#434343;
}

.grossertext {
font-size:18px;
}

#linkereinzug {
text-align: left;
}

.seiteoben {
font-family:Trebuchet MS, verdana Times New Roman, serif;
font-size:24px;
color:#a2141c;
line-height:1%;
}


a:link {
color: #2f2f2f;
}

a:visited {
color: #121212;
}

a:hover {
color: #868686;
}


#schattenbox {
width:800px;
text-align:center;
margin: 0 auto;
box-shadow:8px 8px 8px #666;
}

#page {
margin: 0 auto;
width: 780px;
margin:0.1em;
background-color:#fff;
border-left:1px solid #434343;
border-right:1px solid #434343;
text-align:left;
}

#textschatten_top {
background-image:url(Grafiken/textschatten.jpg);
background-repeat:repeat-x;
position:relative;
width:780px;
height:52px;
z-index:2;

}

#text {
text-align:justify;
font-size:80%;
position:relative;
top:-20px;
z-index:3;
margin-left:220px;
margin-right:15px;
}

#text_Left {
position:relative;
height: auto !important;
top:-20px;
font-size:18px;
float:left;
width:170px;
text-align:left;
margin-left:15px;
/*margin-right:15px;*/
margin-bottom:15px;
/*min-width: 15em; */
font-size:80%;
z-index:4;
}

#header {
position:relative;
top:0px;
height:127px;
width:780px;
background:url(Grafiken/header_3_neu.jpg);
border-bottom:1px solid #434343;
border-top:1px solid #434343;
z-index:2;
}


#header_text1 {
text-align:left;
position:absolute;
left:50px;
top:30px;

}

#header_text2 {
text-align:left;
position:absolute;
left:150px;
top:90px;

}

#gitarre {
position:relative;
left:690px;
top:-2px;
width:95px;
height:147px;
background-image: url(Grafiken/gitarre.jpg);
background-repeat:no-repeat;
z-index:3;
}

#bilder {
position:relative;
top:0px;
height:250px;
width:780px;

}

#nav {
width:780px;
position:relative;
top:0px;
left:0px;
text-align:left;
border-bottom:1px solid #434343;
}

#footer {
    width:780px;
    margin-top:20px;
    position:relative;
    left:0px;
    top:0px;



}

#footertext {
width:780px;
height:60px;
 border-top:1px solid #434343;
    border-bottom:1px solid #434343;
     text-align:center;
    color:#000;
    z-index:2;
    background:url(Grafiken/footer.gif);
    }

#textschatten_bottom {
background-image:url(Grafiken/textschatten_bottom.jpg);
background-repeat:repeat-x;
width:780px;
height:52px;
position:relative;
text-align:center;
}

#werbung_bottom {
background-color:#e6e6e6;
/*border-top:1px solid #434343;*/
width:780px;
height:40px;
position:relative;
}

/*CSS-Menü =>*/

ul#menu{
        margin:0;
        padding-left:19px;
        list-style-type:none;
        width:auto;
        position:relative;
        display:block;
        height:70px;
        font-variant:small-caps;
        font-weight:bold;
        font-size:18px;
        font-family:Trebuchet MS, verdana, Times New Roman;
        background:transparent url("Grafiken/blue.jpg") repeat-x top left;



}
ul#menu li{
        display:block;
        float:left;
        margin:0;
        padding:0;

        }
ul#menu li a{
        display:block;
        float:left;
        color:#2e2e2e;
        text-decoration:none;
        padding:22px 8px 0 20px;
               height:48px;
        }
ul#menu li a:hover{
        background:#ccc /*url("Grafiken/black.jpg") repeat-x top left*/;
        }
/*CSS-Menü für die Programmnavigation =>*/

ul#programm_menu{
        margin:0;
        padding-left:1px;
        width:auto;
        position:relative;
        display:block;
        height:30px;
        font-variant:small-caps;
        font-weight:bold;
        font-size:12px;
        font-family:Trebuchet MS, verdana, Times New Roman;
        background:transparent url("Grafiken/blue.jpg") repeat-x top left;



}
ul#programm_menu li{
        display:block;
        float:left;
        margin:0;
        padding:0;

        }
ul#programm_menu li a{
        display:block;
        float:left;
        color:#2e2e2e;
        text-decoration:none;
        padding:5px 4px 0 5px;
               height:40px;
        }
ul#programm_menu li a:hover{
        background:#039cd5 /*url("Grafiken/black.jpg") repeat-x top left*/;
        }


.error {
margin-left:200px;
background:#CC3333;
padding:5px;
border:1px solid #990000;
color:#fff;
}

.info {
/*margin-left:200px;*/
background:#3333CC;
padding:5px;
border:1px solid #000099;
color:#fff;
}

.success {
margin-left:200px;
background:#33CC33;
padding:5px;
border:1px solid #009900;
color:#fff;
}

.bgred {
background:#990000;
}

table.reservations {
font-size:12px;
}

#admin {
background:#999;
padding:2px;
font-size:13px;
border-bottom:1px solid #000;
}

#admin ul {
list-style:none;
}

#admin li {
display: inline;
margin-right:20px;
}

#login {
margin:0px auto;
padding:10px;
background:#ddd;
border:1px solid #aaa;
width:250px;
text-align:center;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#login input, #login button {
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#login_fail {
background:#CC6666;
padding:5px;
}

.infogrey {
padding:5px;
background:#999;
}



.programmtag {
text-align:center;
}

.programm_zahlen  {
font-size:17px;
color:#a2141c;
}

.programmdatum {
font-size:35px;
color:#00baff;
font-weight:bold;
font-family:calibri;
text-align:center;
}
.programmheadline {
font-size:38px;
font-weight:bold;
color:#ee7329;
}
.programmheadline_klein {
font-size:30px;
font-weight:bold;
color:#ee7329;
}


.programmuntertitel {
font-size:18px;
color:#ff8b45;
}

.programmuhrzeit {
font-size:21px;
color:#000;
}

.programmtext {
text-align: justify;
}

.zitat {
font-style:italic;
}

.ausverkauft {
color:#CF0000;
font-size:25px;
text-align:center;
}

/* CSS für Programm-Tabs, aus der Beispielhomepage kopiert:*/



/* root element for tabs  */
ul.tabs {
        list-style:none;
        margin:0 !important;
        padding:0;
        border-bottom:0px solid #666;
        height:30px;
}

/* single tab */
ul.tabs li {
        float:left;
        text-indent:0;
        padding:0;
        margin:0 !important;
        list-style-image:none !important;
}

/* link inside the tab. uses a background image */
ul.tabs a {
        background-color:#f1f1f1;
        /*background: url(/Grafiken/blue3.png) no-repeat 0px -82px*/;
        font-size:12px;
        display:block;
        height: 30px;
        line-height:30px;
        width: 54px;
        text-align:center;
        text-decoration:none;
        color:#000;
        padding:0px;
        margin:0px;
        /*position:relative;
        top:1px;*/
}

ul.tabs a:active {
        outline:none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
        background-color:#ee7329;
        /*background: url(/Grafiken/blue3.png) no-repeat;
        background-position: -0px -42px;*/
        color:#fff;
        height: 45px;
        /*position:relative;
        top:-8px;*/

}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
        background-color:#039cd5;
        /*background-position: -0px -0px;*/
        cursor:default !important;
        color:#fff !important;
        height: 45px;
        /*position:relative;
        top:-8px;*/
        font-size:100%;

}

/*
initially all panes are hidden
.panes .pane {
        display:none;
}


<!-- tab pane styling -->

/* tab pane styling */
.panes div {
        /*display:none;*/
        padding:10px;
        border:1px solid #bbb;
        font-size:14px;
        background-color:#f1f1f1;
        width:535px;

        /*margin-left:2px;*/
}









/* Scrollable */

/*
        root element for the scrollable.
        when scrolling occurs this element stays still.
*/
.scrollable {

        /* required settings */
        position:relative;
        overflow:hidden;
        width: 450px;
        height:150px;
}

/*
        root element for scrollable items. Must be absolutely positioned
        and it should have a extremely large width to accommodate scrollable items.
        it's enough that you set width and height for the root element and
        not for this element.
*/
.scrollable .items {
        /* this cannot be too large */
        width:20000em;
        position:absolute;
}

/*
        a single item. must be floated in horizontal scrolling.
        typically, this element is the one that *you* will style
        the most.
*/
.items div {
        float:left;
}



/* Scrollable Buttons*/

/* this makes it possible to add next button beside scrollable */
.scrollable {
        float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
        background:url(Grafiken/arrows.png) no-repeat;
        display:block;
        width:18px;
        height:18px;
        float:left;
        margin:30px 5px;
        cursor:pointer;
        font-size:1px;
}

/* right */
a.right                                 { background-position: -18px 0px; clear:right; margin-right: 0px;}
a.right:hover                 { background-position:-18px 0px; }
a.right:active         { background-position:-18px 0px; }


/* left */
a.left                                { margin-left: 0px; }
a.left:hover                  { background-position:0 -18px; }
a.left:active          { background-position:-0px 0; }

/* up and down */
a.up, a.down                {
        background:url(Grafiken/arrow/up.png) no-repeat;
        float: none;
        margin: 10px 50px;
}

/* up */
a.up:hover                  { background-position:-30px 0; }
a.up:active                  { background-position:-60px 0; }

/* down */
a.down                                 { background-position: 0 -30px; }
a.down:hover                  { background-position:-30px -30px; }
a.down:active          { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
        visibility:hidden !important;
}










/* Toltip */

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
        display:none;
        background-color:#ee7329;
        font-size:14px;
        height:60px;
        width:110px;
        /*padding:5px 5px 5px 5px ;*/
        margin: -35px 0 0 0;
        color:#fff;
        text-align:justify;
        line-height: 1.5;
        font-weight:bold;
        }

a.pagination {
background:#eee;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
color:#0033CC;
padding:3px;
text-decoration:none;
}

a.pagination:hover {
background:#eee;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
color:#000;
padding:3px;
}