@CHARSET "UTF-8";

/*
    Farben:

    - Dunkelblau (Filmstreifen im Hellblau): #000066
    - Hellorange (Hintergrund/Überschrift kleine Kästen): #FFCC66
    - Dunkelorange (Filmstreifen im Hintergrund): #FF9950
    - Hellgelb (Kästen mit Inhalt): #FFFF99
    - Hellblau (großer Kasten): #99CCFF
*/

@import "spatzenkino-layout.css";

div#devMode {
	background: white;
	bottom: 15%;
	border: gray solid 3px;
	font-weight: bold;
	padding: 5px;
	position: fixed;
	right: 20px;
	z-index: 100;
}
div#devMode img.button {
	width: 1em;
}
div#devMode img.button.next {
	margin-left: 0.75em;
}
div#devMode img.button.prev {
	margin-right: 0.75em;
}

body {
    background-color: #FFCC66;
	font-family: sans-serif;
	margin: 0px 0px 10em 0px;
}
body.mobile {
	background: #5EBBE7;
	margin-bottom: 0;
}

#outer_frame {
    background: url("../img/spatz-web-hintergrundbild-2000x2000.jpg") no-repeat center top; 
    font-size: 16px;
    margin: auto;
    min-height: 800px;
    text-align: center;
}


.mobile #outer_frame {
	background: #5EBBE7;
    min-height: inherit;
}

#inner_frame {
    margin: auto;
    width: 1029px;
}

.mobile #inner_frame {
	width: inherit;
}

label
{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

h1
{
    font-size: 1.8em;
}
h4
{
    font-size: 1.2em;
    font-weight: normal;
    margin-bottom: 10px;
}
h3,
h4
{
    color: #000066;
}

img
{
    border: none;
}

ul
{
    list-style: none;
    margin: 0px;
    padding-left: 0px;
}
ul.normal
{
    list-style: disc outside;
    margin-left: 15px;
}
ul.cinemas li
{
    margin-bottom: 10px;
}

.gray
{
    color: #888888;
}

input[type=text],
textarea,
select
{
    border: 1px solid #888888;
    padding: 5px;
    width: 200px;
}
select {
    width: 210px;
}
input.error,
textarea.error
{
    border-color: #FF0000 !important;
    border-width: 2px;
}
.errorMessage
{
    color: #FF0000;
    margin-top: 5px;
}

@import "spatzenkino-captcha.css";
@import "spatzenkino-mobileMenu.css";


/****************************************************
 *
 * Tabellen allgemein
 *
 *******************/
table td,
table th
{
    vertical-align: top;
}
/***************************************************/

table#newsletter
{
    width: 80%;
}
table#newsletter td
{
    vertical-align: middle;
}
 

/**
 *
 * Layout fuer Programm-Seiten (Berlin / Brandenburg)
 *
 */
/****************************************************/

.left
{
    float: left;   
}
.left_image
{
    float: left;   
    margin-bottom: 15px;
    margin-right: 15px;
}
.right
{
    float: right;
}
.right_image
{
    float: right;   
    margin-bottom: 15px;
    margin-left: 15px;
}
.center
{
    text-align: center;
}
.clear
{
    clear: both;
}
.no_clear
{
    clear: inherit !important;
}
.bolder
{
    font-weight: bolder;
}
.normal
{
    font-weight: normal;
}
.smaller
{
    font-size: smaller;
}
.uppercase
{
    text-transform: uppercase;
}
.dates_header
{
    background-color: #FFCC66;
    padding: 5px 10px 3px 10px;
    text-transform: uppercase;
}
.marginTop
{
    margin-top: 1.5em;
}
.red
{
    color: #FF0000;
}
.bg_red
{
    background-color: #FF0000 !important;
}
.border
{
    border: solid 1px #000000;
}
.nolink
{
    cursor: default;
}
.date
{
    font-weight: bolder;
}

div.more .link
{
    color: #0067CC;
    cursor: pointer;
    float: right;
    font-weight: normal;
    font-style: italic;
}
div.more .content
{
    display: none;
}

div.image
{
    margin-bottom: 20px;
    margin-top: 10px;
}
div.footnote
{
    margin-bottom: 10px;
    margin-top: -5px;
}
ul.sternchen li
{
	margin-bottom: 10px;
}

.mobile .article .vignetten {
    text-align: center;
}

.article .link_box {
	background-color: #FFCC66;
	display: flex;
	align-items: center;
	font-weight: bolder;
	padding: 0.5em;
}
.article .link_box img {
	margin: 0;
	padding: 0 1em 0 0;
	width: 50px;
}

#head {
    background: url('../img/spatz-web-kopf-1024.jpg') 0px 0px no-repeat;
    font-size: smaller;
    height: 270px;
    position: relative;
}

.mobile #head {
    background: #5EBBE7;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.mobile #head .logos {
	position: absolute;
	right: 35px;
	top: 10px;
	width: 70%;
}

.mobile #head .logos #user-header-logo {
	height: 70px;
}

#mobile_menu_button {
	position: absolute;
	left: 25px;
	top: 35px;
}

#mobile_menu_button rect {
	fill: #2F3A94;
}	

#head #top_navigation {
    font-size: 15px;
    padding-top: 30px;
}

#body {
    background: url('../img/spatz-web-body-1024.jpg') repeat-y center;
    padding-left: 25px;
    padding-right: 30px;
    padding-bottom: 25px;
}

.mobile #body {
    background: #5EBBE7;
    margin-top: 100px;
    padding-left: 20px;
    padding-right: 20px;
}

@import "spatzenkino-footer.css";


/** Links **/

a {
    color: #000066; /* #0067CC */
    text-decoration: none;
}
a.underlined {
    text-decoration: underline;
}
.place a
{
	color: inherit;
}

.month
{
    margin-bottom: 15px !important;
}
.programm_teaser .month,
.programm_teaser .title,
.programm .month
{
    font-size: larger;
    font-weight: normal;
}
.programm_teaser .title,
.mobile .programm .title {
    font-weight: bolder;
    margin-bottom: 0.75em;
    text-align: center;
    clear: both;
}
.mobile .programm_teaser .title
{
	font-size: large;
}
.mobile .programm .title
{
	font-size: 1.2em;
    font-weight: normal;
}
.programm_teaser .article
{
    margin-bottom: 0.75em;
}
.programm_teaser .article ul
{
	text-align: center;
}
.programm_teaser .article ul li
{
	padding-bottom: 0.25em;
}
.programm_teaser .article img
{
	margin-right: 0px;
	width: 420px;
}
.mobile .programm_teaser .article img
{
    width: 100%;
}
.programm_teaser .article img.left,
.programm .article img.left {
	float: left;
	width: 200px;
}
.programm_teaser .article img.right,
.programm .article img.right {
	float: right;
	width: 200px;
}
.mobile .programm .article img.left,
.mobile .programm .article img.right {
    width: 130px;
}
.programm_teaser .text
{
    float: left;
    margin-bottom: 20px;
    width: 220px;
}
.mobile .programm_teaser,
.mobile .programm,
.mobile .frame.kino_liste {
    margin-bottom: 15px;
}

.programm .month
{
    text-transform: uppercase;
}
.programm .caption
{
    font-size: larger;
    font-weight: bolder;
    margin-bottom: 15px;
}
.mobile .programm .caption {
	font-size: large;
	text-align: center;
}
.programm .title
{
    font-size: larger;
    margin-bottom: 5px;
}

@import "spatzenkino-programmLinks.css";

.program_article_footer
{
    font-size: smaller; 
    padding-top: 10px;
    text-align: center; 
}

.privacy_notes
{
	margin: 2em auto auto auto; 
	text-align: left; 
	width: 65%;
}
.mobile .privacy_notes
{
	width: inherit;
}

.frame {
    margin: auto;
    padding-right: 3px;
    position: relative;
    text-align: left;
    width: 910px;
}

.mobile .frame {
	width: inherit;
}

.frame.slim, 
.frame.slim .header {
    width: 460px;
}

.mobile .frame.slim {
    width: inherit;
}

.frame .header {
    background-color: #FFCC66;
    border-radius: 15px 15px 0 0;
    color: #000066;
    display: table-cell;
    height: 31px;
    letter-spacing: 0.075em;
    padding-top: 2px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    width: 910px;
}
.frame .body {
    background-color: #FFFF99;
    border-radius: 0 0 15px 15px;
    font-size: smaller;
    padding: 1em;
}
.mobile .frame .body {
	padding-bottom: 0.75em;
}

.frame .body .content {
	margin-left: 100px;
	padding-bottom: 10px;
}

.mobile .frame .body .content {
	margin-left: inherit;
}

.left-column
{
    display: inline-block;
}
.rigth-column
{
    float: right;
}

div.row {
	display: flex;
}
div.row .column {
	flex: 50%;
}

table.dates
{
    border-collapse: separate; 
    border-spacing: 5px;
    width: 100%;
}
table.dates td
{
    padding: 5px 0px;
}
table.dates.plain
{
	border-spacing: 0;
}
table.dates td
{
	padding: 5px;
}

table.dates .date
{
    border-bottom: 2px solid #FF7D32;
    width: 10%;
}
table.dates.plain td {
	float: none;
}
table.dates .location0,
table.dates .location1,
table.dates .location2
{
    background-color: #FFC19C;
    border: 1px solid #FF7D32;
    padding-left: 5px;
    padding-right: 5px;
    width: 40%;
}
table.dates .location0.empty,
table.dates .location1.empty,
table.dates .location2.empty
{
    background: none;
    border: none;
}
table.dates .location0.highlight,
table.dates .location1.highlight,
table.dates .location2.highlight
{
    background-color: #FF0000;
    color: #FFFFFF;
}
table.dates .location0.highlight a,
table.dates .location1.highlight a,
table.dates .location2.highlight a
{
    color: #FFFFFF;
}
table.dates .place,
table.dates .weekday
{
    float: left;
}
table.dates .day,
table.dates .time
{
    float: right;
}
table.dates .day,
table.dates .time,
table.dates .weekday
{
    white-space: nowrap;
}
table.dates .place
{
    font-size: bolder;
}

table.dates tr.current td
{
    font-weight: bolder;
}


/** oberes Menü **/

#top_navigation ul
{
    display: table; 
    list-style: none outside none; 
    margin: auto;
    padding: 0px; 
    position: relative;
    text-align: left;
}
#top_navigation ul li
{
    display: table-cell;
    float: left;
    margin: 0px;
    padding: 5px;
    position: relative;
}
#top_navigation li.menuItem:hover
{
    cursor: pointer;
}
#top_navigation li.menuItem.active,
#top_navigation li.menuItem.active a,
#top_navigation li.menuItem ul
{
    background-color: #FF9950;
    color: #000066;
}
#top_navigation li.menuItem ul
{
    display: none;
    left: 0px;
    margin-top: 5px;
    position: absolute;
    z-index: 10;
}
#top_navigation li.menuItem.active > ul
{
    display: inherit;
}
#top_navigation li.menuItem ul li
{
    display: block;
    float: none;
    white-space: nowrap;
}
#top_navigation li.menuItem li:hover,
#top_navigation li.menuItem li:hover > a
{
    background-color: #FFCC66;
}
#top_navigation li.menuItem .submenu
{
    display: none;
    left: 100% !important; 
    top: -5px !important;
}

/**
 * Menü
 */
.outer_navigation
{
    float: left;
    width: 18%;
}
.outer_navigation ul
{
    margin-bottom: 20px;
}
.outer_navigation > ul > li
{
    font-weight: bolder;
    margin-bottom: 15px;
}
.outer_navigation.multiple ul li
{
    margin-bottom: 10px;
}
.outer_navigation ul li span
{
	white-space: nowrap;
}
.outer_navigation ul li.active > span > a
{
    background-color: #FFCC66;
}
.outer_navigation ul.subPages
{
    margin: 15px 0px 0px 10px;
    font-size: 0.925em;
}
/****************************************************/

.outer_content {
    float: right;
    width: 700px;
}
.mobile .outer_content {
    float: none;
    width: inherit;
}

.inner_content_left
{
    float: left;
    width: 50%;
}
.inner_content_right
{
    float: right;
    width: 48%;
}

.inner_content_left.table_cell {
    width: 31%;
}
.mobile .inner_content_left.table_cell {
	margin-bottom: 0.25em;
    width: 100%;
}

.inner_content_right.table_cell {
    display: table-cell;
    float: none;   
    width: 69%;
}


/**
 * Artikel
 */
.article
{
    clear: both;
    margin-bottom: 20px;
}
.article h3
{
    margin-bottom: 4px;
}
.article h3,
.first
{
    margin-top: 0px;
}
.article .finalNote
{
    display: inline-block;
    font-weight: bolder;
    padding-top: 4px;
}
.article img {
    float: left;
    margin-bottom: 20px;
    margin-right: 15px;
    width: 210px;
}
.mobile .article img {
	float: none;
	margin: inherit;
    text-align: center;
	width: 100%;
}

.vignetten img {
	width: 150px;
}
.mobile .vignetten img {
	width: 125px;
}


.bastelideen .article a,
.bastelideen-archiv .article a
{
    font-weight: bolder;
}

.article.maerchenliste ul li
{
    font-weight: bolder;
    margin-bottom: 15px;
}

.footer
{
    font-size: small;
    padding-top: 5px
}

.preorder_hint
{
    background-color: #FFCC66;
    padding: 5px;
}

.highlight,
.location
{
    background-color: #FFCC66;
}
li.highlight
{
    background: none;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
li.highlight em {
    background-color: #FFCC66;
    font-style: normal;
    padding: 5px;
}
.mobile li.highlight em {
	white-space: nowrap;
}

.location
{
	display: inline-block;
	font-weight: bolder;
	letter-spacing: 0.075em;
	padding: 5px;
	text-transform: uppercase;
}

table#ticket_order
{
    width: 70%;
}
.mobile table#ticket_order
{
    width: inherit;
}
table#bilderbuchkino_order
{
    width: 80%;
}
table#ticket_order td,
table#bilderbuchkino_order td
{
    height: 45px;
}
table#ticket_order,
table#bilderbuchkino_order
{
    margin-left: auto;
    margin-right: auto;
}
table#ticket_order td,
table#ticket_order th,
table#bilderbuchkino_order td,
table#bilderbuchkino_order th
{
    vertical-align: middle;
}
table#ticket_order th,
table#bilderbuchkino_order th
{
    padding-right: 20px;
    text-align: left;
}
table#ticket_order td,
table#bilderbuchkino_order td
{
    text-align: left;
}

.leftImage .image
{
    float: left;
    padding-right: 10px;
}
.rightImage .image
{
    float: right;
    padding-left: 10px;
}
.leftImage .image,
.rightImage .image
{
    margin-top: 0px;
}
.leftImage .caption,
.leftImage .article
{
    clear: inherit;
}


/**
 *
 * Kinos
 *
 */
img#spot 
{
    display: none;
    position: absolute;
}
div#cinemaDiv
{
    position: absolute;
}
div#cinemaDiv.bl
{
    left: 520px;
    top: 60px;
}
div#cinemaDiv.bb
{
    left: 540px;
    top: 80px;
}
div#cinema_map
{
    position: relative;
}
/****************************************************/

/**
 *
 * Märchen-Button (LESEBUCH.gif)
 *
 */
 div.maerchen_button
 {
    position: absolute;
    right: 200px;
 }
 div.maerchen_button img
 {
    left: 0px;
    position: absolute;
    top: -60px;
    width: auto;
 }
/****************************************************/

div.sponsors img {
	float: left;
    width: 200px;
}

div.sponsors img.first {
	padding-top: 3em;
}
div.sponsors img.second {
	margin-left: 1em;
}
div.sponsors img.third {
	padding-top: 4em;
}
.mobile div.sponsors img {
	padding-top: 3em;
}

div.alert
{
	background-color: orange !important;
	border: 4px solid red !important;
	bottom: 0px;
	margin: auto;
}

@import "spatzenkino-cookieInfo.css";

div#datenschutz ul
{
	list-style: inherit;
	margin-left: 2em;
}

.click-zone,
.mobile .content_toggle {
	cursor: pointer;
}

div.teaser {
	margin-top: 2em;
}

.outer_navigation .teaser {
    background-color: #FFCC66;
    font-weight: bolder;
    padding: 5px;
}
.outer_navigation .teaser ul li {
    margin-bottom: 0.5em;
}
.outer_navigation .teaser .no_bold {
    font-weight: normal;
}

@import "spatzenkino-admin.css";


/**
 *
 * SVG-Icons
 *
 */
svg.plus_icon circle {
	fill: none;
	stroke: #000000;
}

div.icon {
	background-repeat: no-repeat;
	background-size: 25px;
	border: none !important;
	display: inline;
	padding: 4px 13px !important;
}
/****************************************************/

@import "spatzenkino-events-archive.css";