@import url(http://fonts.googleapis.com/css?family=Orbitron);

html {
width: 100%;
margin: auto;
}

body {
width: 90%;
max-width: 955px;
margin: auto;
font-family: helvetica, arial, sans-serif;
color: #888888;
overflow-y: scroll;
}

/*12-2021*/

.aktuelles {
    padding-bottom: 20px;
}

/*global*/


/* orbitron font via stylesheet im header von google fonts */
#menu, h2
{
	font-family: 'orbitron', helvetica, arial, sans-serif;
	letter-spacing: 0.1em;
}

div, ul, li, a, h1, h2, h3, h4, h5, p, img {
margin: 0;
padding: 0;
border: 0px none;
font-size: 1em;
font-weight: normal;
}

em {
font-weight: normal;
}

a {
color: #888888;
outline: 0;
}

a:link {
text-decoration: none;
color: #888888;
}

a:visited {
text-decoration: none;
}

a:hover,
a:focus,
a:active {
color: #888888;
text-decoration: underline;
}

/* end global */

/* head: logo, menu, streifen */

#logo {
text-align: right;
margin: 2.5em 0.1em 0.3em 0;
}

#logo img {
width: 110px;
height: auto;
}

#menu {
width: 100%;
background-color: #fff;
overflow: hidden;
text-align: justify;
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 0.2em;
}

#menu a {
	display: inline-block;
	padding-top: 0.5em;
}

.wrap {
white-space: nowrap;
}

.break { /* erzwingt den blocksatz der menuzeile */
margin-left: 100%;
height: 0;
display: none;
visibility: hidden;
}

#static { /* ersetzt link und markiert aktuelle seite */
text-decoration: underline;
cursor: default;
}

/* seitenbreiter streifen des titelbildes am kopf der Seite*/
#streifen {
display: block;
width: 100%;
height: 2.5em;
background-image: url(../images/wiesenstreifen1.jpg);
margin: 0 0 2em 0; /*marginminus0.5top*/
}

/* seitenbreiter streifen des titelbildes am fuß der Seite*/
#streifen2 {
display: block;
width: 100%;
height: 2.5em;
background-image: url(../images/wiesenstreifen2.jpg);
margin-bottom: 1em;
}

/* end header */

/* content */

#content {
display: block;
font-size: 0.9em;
line-height: 1.3em;
padding-bottom: 5%;
}

/*titelbild auf index*/
#titelimg {
display: block;
width: 100%;
margin-top: -0.5em;
}

/*introtext auf index*/
#introtext {
    margin-top: 1em;
}

h2 {
/* seitentitel rechts unter streifen */
margin-bottom: 1.5em;
position: relative;
font-weight: normal;
text-align: right;
text-transform: uppercase;
letter-spacing: 0.2em;
}

h2.abstand {
margin-top: 3em;
}

.quadrat { /* quadratisches kaestchen */
height: 1em;
width: 1em;
background-image: url(../images/quadrat.jpg);
background-position: 10% 20%;
margin: 0.1em 1em 0 0;
float: left;
}

.sasch {
float: left;
}

.sasch img {
    width: 6em;
    height: 6em;
}

.prog1 { /*listing filmprogramme mit bild */
min-height: 8em;
margin-bottom: 2em;
clear: left;
}

.prog { /* listing filmprogramme ohne bild */
margin-bottom: 1em;
clear: left;
}

.box {
width: 6em;
height: 6em;
display: block;
}

.prog1 img, .box {
height: 6em;
width: 6em;
margin: 0 2em 1em 0;
float: left;
border: 1px solid #aaa;
}

/* Rahmen um Bilder */
.filmtext img, .gestaltungtext img {
border: 1px solid #aaa;
}

/*gesperrte überschriften */
.prog h3, .prog1 h3, .text h3, .gestaltung h3 {
letter-spacing: 0.1em;
}

.progtext, .filmsub2 {
padding-bottom: 0.4em;
}
.prog a, .prog1 a, .text a, .filmtext a, .oben a, .aktuelles a, .filmtext a, .gestaltungtext a {
font-size: 0.7em;
text-transform: uppercase;
line-height: 2em;
}

.prog1 a:before, .prog a:before, .text a:before, .filme a:before, .oben a:before, .gestaltung a:before, .aktuelles a:before {
/*kleines dreieck vor den links in den listings */
content: "► ";
}

.oben {
margin-bottom: 1em;
}

.prog h3, .progtext, .prog p,
.prog1 h3, .progtext, .prog1 p, {
position: relative;
margin-left: 8em;
}

.prog h4 {
	margin-left: 8em;
}

.text {
margin: 0 0 1em 2em;
}

.balken {
display: block;
width: 100%;
height: 0.5em;
background-image: url(../images/sasch-2-opak.jpg);
margin-bottom: 1em;
}

.filme, .gestaltung {
margin-bottom: 1em;
}

.filme h4, .gestaltung h4 {
font-size: 0.8em;
font-style: italic;
font-weight: normal;
margin-bottom: 1em;
padding-top: 0.3em;
}

.filme h5, .gestaltung h5 {
font-size: 0.8em;
font-weight: normal;
text-decoration: underline;
padding-bottom: 0.3em;
}

.filmsub, .filmsub2, .gestaltungsub {
font-size: 0.8em;
line-height: 1.2em;
}

.filme img {
width: 181px;
height: auto;
margin: 0 0.3em 1em 0;
}

.gestaltung img {
width: 181px;
height: auto;
margin: 0 0.3em 1em 0;
}

.filmtext, .gestaltungtext {
margin-left: 2em;
}

.gestaltungtext img {
    margin-top: 0.5em;
}

.filmtext p.line {
margin: 0;
}

.filmtext p.text  {
margin-left: 0;
}

.filmtext, .gestaltungtext h5 {
	margin: 0.5em 0 0 0;
	padding: 0;
}


.aktuelles h3, .aktuelles img, .aktuelles p {
	margin-left: 2em;
}
.aktuelles img {
	margin-bottom: 1em;
	width: 181px;
	height: auto;
}

.aktuelles h3 {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1em;
}

.aktuelles p {
	margin-bottom: 1em;
}

#contact {
	min-height: 515px;
}

.contact {
margin: 0 0 1em 8em;
}

/* end content */

/* media queries kleine bildschirme */

@media screen and (max-width: 480px ) {


#menu a {
	display: block;
	line-height: 1.5em;
	text-align: right;
}
.filme img {
margin-bottom: 0.1em;
}

}