/*------------------------------------------------------------------------------------------------------*/ /** Browser Reset **/ option { padding-left: } * { margin: 0; } /*------------------------------------------------------------------------------------------------------*/ #wrapper { position: relative; margin: 0 auto; width: 100%; border: 0px #DB0132 solid; background: url("..") top center no-repeat; } #header { position: relative; margin: 0; padding: 1em 0.5em; border-top: 1px #DB0132 solid; border-bottom: 1px #DB0132 solid; background: url("../image/layout/mobile/logo-32.png") center right no-repeat; } #navigation { position: fixed; bottom: 0px; left: 0px; right: 0px; border-top: 1px #DB0132 solid; border-bottom: 1px #DB0132 solid; background: white ; z-index: 2; } #sub_navigation { position: fixed; bottom: 1px; right: 0; width: auto; z-index: 3; text-indent: 0px; display: none; } #mobile_sub_navigation { height: 80px; padding: 0.5em 0; font-size: 65%; border-top: 1px grey solid; display: none; } #mobile_sub_navigation ul { margin: 0; padding: 0; } #mobile_sub_navigation ul li { margin: 0; padding: 0; float: right; display: inline; list-style: none; position: relative; background: none;} #mobile_sub_navigation ul li a { padding: 0 0.7em; color: grey; } #navigation ul, #sub_navigation ul{ margin: 0; padding: 0; list-style: none; z-index: 3; } #navigation ul li, #sub_navigation ul li { margin: 0; padding: 0; display: inline; float: left; /*For Gecko*/ list-style: none; position: relative; height: 63px; border-right: 1px #DB0132 solid; background: none ; } #sub_navigation ul li { border-right: none; border-left: 1px #DB0132 solid; } #navigation ul li:last-child { border:none; } #navigation ul li a, #sub_navigation ul li a { padding: 0; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; text-indent: -3000px; color: #DB0132; height: 63px; width: 63px; overflow: hidden; } #navigation ul li { background: url("../image/layout/mobile/home-64.png") center center no-repeat; } #navigation ul li.active { background: url("../image/layout/mobile/home-64-active.png") center center no-repeat; } #navigation ul li.Li02 { background: url("../image/layout/mobile/events-64.png") center center no-repeat; } #navigation ul li.Li02.active { background: url("../image/layout/mobile/events-64-active.png") center center no-repeat; } #navigation ul li.Li03 { background: url("../image/layout/mobile/gallerie-64.png") center center no-repeat; } #navigation ul li.Li03.active { background: url("../image/layout/mobile/gallerie-64-active.png") center center no-repeat; } #navigation ul li.Li04 { background: url("../image/layout/mobile/about-64.png") center center no-repeat; } #navigation ul li.Li04.active { background: url("../image/layout/mobile/about-64-active.png") center center no-repeat; } #navigation ul li.Li05 { background: url("../image/layout/mobile/download-64.png") center center no-repeat; } #navigation ul li.Li05.active { background: url("../image/layout/mobile/download-64-active.png") center center no-repeat; } #sub_navigation ul li.Li06 { background: url("../image/layout/mobile/kontakt-64.png") center center no-repeat; } #sub_navigation ul li.Li06.active { background: url("../image/layout/mobile/kontakt-64-active.png") center center no-repeat; } #sub_navigation ul li.Li07 { background: url("../image/layout/mobile/impressum-64.png") center center no-repeat; } #sub_navigation ul li.Li07.active { background: url("../image/layout/mobile/impressum-64-active.png") center center no-repeat; } #breadcrumb { display: none; } #main { overflow: hidden; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* optional */ -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } #left_area { position: relative; width: 100; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } #right_area { position: relative; width: 100%; -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } #left_area_content { padding: 1em 0.5em; } #right_area_content, #left_area_content { overflow: hidden; } #footer { position:relative; height: 100px; color: grey; line-height: 40px; margin: 0; padding: 0 1em; background: white; border-top: 1px #DB0132 solid; font-size: 65% } /*------------------------------------------------------------------------------------------------------*/ /*** Content Style ***/ /*------------------------------------------------------------------------------------------------------*/ body { font-family: "Helvetica Neue",Helvetica; font-weight: lighter; margin: 0; } /*------------------------------*/ /* Überschriften */ /*------------------------------*/ h1 { font-size: 140%; } h2 { font-size: 120%; } h3 { font-size: 105%; } h4 { font-size: 100%; font-style: italic; } h2,h3,h4,h5,h6 { margin: 0.5em 0; } .legende h3 { color: #B2B2B2; text-decoration: underline; } /*------------------------------*/ /* Inhalt */ /*------------------------------*/ /* Text */ p { line-height: 1.3em; margin: 0 0 1em 0;} form { margin: 0 } strong { font-weight: normal; } a img { border: 0 } a[rel=pdf] { padding: 0 0 0 20px; background: url("../image/sys/filetypes/pdf.png") left center no-repeat} a[rel=email] { padding: 0 0 0 20px; background: url("../image/sys/icon_mail.png") left center no-repeat} .center { text-align: center; } .right { text-align: right; } .float_right { float: right;} .float_right img { margin: 0 0 0.5em 0.5em;} /* Tabellen */ table { margin: 0 0 1em 0; font-size: 8pt; border-collapse: collapse;} table thead th { background: #B5B5B5; border-top: 1px solid grey; border-bottom:1px solid grey; padding: 0.3em; } th, td { padding: 0.5em; vertical-align: top;} table tr.white { background: #F1F1F1 } table tr.grey { background: #D4D4D4 } table td.Name { width: 175px; } table td.Nachname { width: 110px; } table td.Vorname { width: 90px; } table td.Strasse { width: 210px; } table td.Ort { width: 175px; } table td.Icon { width: 16px; } /* Trenner */ .divider { height: 0px; border-bottom: 1px solid #B5B5B5; margin: 1em 0; } .divider-hint { height: 0px; border-bottom: 2px solid #B5B5B5; margin: 1.5em 0 1em; } #login .divider { margin: 1em 0; } .mind { color: #8B8B8B; font-size: 0.8em; font-style: italic; } img.hide_mobile { display: none; } /*------------------------------*/ /* Views */ /*------------------------------*/ .modul { margin: 1em 0 0 0; padding: 1em 0.5em 0; border-top: 1px #DB0132 solid; } .modul ul { list-style: none; margin: 1em 0; padding: 0; } .Buttonbar { padding: 0.5em; background: #B5B5B5; border-top: 1px solid grey; } .mobile_hint_portrait { margin-bottom: 1.5em ; padding: 1em 0 0 4em; font-size: 60%; border-top: 1px #DB0132 solid; border-bottom: 1px #DB0132 solid; background: #FFFAA9 url('../image/layout/mobile/info_32.png') left center no-repeat; } /* EventManager */ #EventManager table.EventList { width: 100%;} #EventManager .EventNr { } #EventManager .EventName { } #EventManager .EventStatus { vertical-align: top; } #EventManager .hint { font-size: 8pt; margin: 0 0 0 1em; color: #B2B2B2; } #EventManager .accept { text-align: right; background: transparent url("../image/sys/order_status_0.png") center 0.3em no-repeat} #EventManager .accept span { padding-right: 0.6em } #EventManager table tfoot td { background: #B5B5B5; border-top:2px solid grey; padding: 0.5em 1.5em; } /* Galerie */ #Galerie div.galerie_container { float: left; margin: 0 5px 5px 0; padding: 5px 1px; text-align: center; width: 135px; height: 105px; background: #F0F0F0; border: 1px solid #DB0132; } #Galerie div.galerie_container img { border: 3px solid white; } #Galerie div.galerie_container p { font-size: 0.7em ; color: #999; line-height: 2em; margin: 5px 0 0 0; border-top: 1px solid #bbb; } #Galerie_1, #Galerie_2 { overflow: hidden; padding: 0;} /* Impressum */ #AGB { font-size: 0.7em; color: #444} /* SiteStat */ #sitestat h2 { font-size: 130%; margin: 0 0 0.75em 0; text-decoration: underline; border: none; } #sitestat table { width: 100%; margin: 0 0 0.5em 0; } #sitestat table td { vertical-align: top; } #sitestat, #sitestat table, #sitestat a { font-size: 7pt; } #sitestat a, #sitestat a:visited { color: #4f4f4f; text-decoration: none; } #sitestat a:hover { text-decoration: underline; } #sitestat .referer { color: grey; font-style: italic; overflow: hidden; } #sitestat .referer a, #sitestat .referer a:visited { color: grey; } #StatistikGesamt { position:relative; float: right; width: 110px; padding: 5px; border: 1px dotted grey; background: #e3e3e3; } #StatistikZugriff, #StatistikAktuell { position:relative; width: auto; margin: 0 115px 0 0; padding: 5px; border: 1px dotted grey; overflow: hidden; background: #e3e3e3; } #StatistikZugriff { padding: 5px ; border: 1px dotted grey; } #StatistikZugriff table { font-size: 5pt; margin: 0 auto; } #StatistikZugriff table td { padding: 0 0.1em; vertical-align: bottom; text-align: center; } #sitestat .ip { width: 75px; } #sitestat .user { width: 30px; } #sitestat .browser, #sitestat .platform { width: 16px; } #sitestat .icon { } #sitestat span.grey.smal { font-size: 0.9em; } #sitestat span.grey { color: #333333; } span.time { margin: 0 1em 0 0; color: #4f4f4f; font-size: 7pt;} /* Status-Information */ #statusinformation { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 10; } #statusinformation p { margin: 0; } .StatusInfo_Hinweis, .StatusInfo_Tada, .StatusInfo_Achtung, .StatusInfo_Fehler, .StatusInfo_DEBUG { padding: 1em 60px; line-height: 1.5em; border-bottom: 1px solid black; } .StatusInfo_Hinweis { background: #FFFAA9 url('../image/sys/statusinfo/info.png') left center no-repeat; } .StatusInfo_Tada { background: #B9FFA9 url('../image/sys/statusinfo/success.png') left center no-repeat; } .StatusInfo_Achtung { background: #FFE2A5 url('../image/sys/statusinfo/warning.png') left center no-repeat; } .StatusInfo_Fehler { background: #FFA0A0 url('../image/sys/statusinfo/error.png') left center no-repeat; } .StatusInfo_DEBUG { background: red url('../image/sys/statusinfo/debug.png') left center no-repeat; } .msg_success, .msg_error { margin: 1em 10em; padding: 1em 1em 1em 5em; } .msg_success { background: #B9FFA9 url('../image/sys/statusinfo/success.png') left center no-repeat; border: 2px solid #006B0A; } .msg_error { background: #FFA0A0 url('../image/sys/statusinfo/error.png') left center no-repeat; border: 2px solid #DB0000; } .td-error { color: red; } /*------------------------------*/ /* clearing methods */ .clear { clear: both; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: block } .floatbox { overflow:hidden } #ie_clearing { display: none } /*------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------*/ /*** Apple Devices ***/ /*------------------------------------------------------------------------------------------------------*/ /* Portrait - for all iPhones */ @media screen and (device-width: 320px) and (orientation:portrait) { /* Layout */ #wrapper { width: 320px; } /* EventManager */ #EventManager table.EventList { font-size: 35%; } #EventManager table th:nth-child(1n+7) { display:none; } #EventManager table td:nth-child(1n+7) { display:none; } #EventManager input[type=submit] { font-size: 35%; } /* Footer */ #footer { height: auto; font-size: 35%; } /* Kontakt Formular */ #Kontakt table td:first-child { font-size: 100%; } #Kontakt table input[type=text] { width: 100px; } #Kontakt table textarea { width: 160px; } /* mobile_sub_nav */ #mobile_sub_navigation { display: block; font-size: 35%; } } /* Landscape - iPhone 1-4s */ @media screen and (device-height: 480px) and (orientation:landscape) { /* Layout */ #wrapper { width: 480px; } /* Navigation */ #navigation ul li, #navigation ul li a, #sub_navigation ul li, #sub_navigation ul li a { width: 67px; } } /* Landscape - iPhone 5/5s */ @media screen and (device-height: 568px) and (orientation:landscape) { /* Layout */ #wrapper { width: 568px; } /* Navigation */ #navigation ul li, #navigation ul li a, #sub_navigation ul li, #sub_navigation ul li a { width: 80px; } } /* Landscape - Global Settings */ @media screen and (orientation:landscape) { /* Layout */ html { -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ } /* Galerie */ #Galerie div.galerie_container { width: 125px; } /* EventManager */ #EventManager table.EventList { font-size: 65%; } #EventManager input[type=submit] { font-size: 60%; } /* Hints */ .mobile_hint_portrait { display: none; } /* sub_navigation */ #sub_navigation { display: block; } } /*------------------------------------------------------------------------------------------------------*/ /* for all iPads */ @media screen and (device-height: 1024px) and (device-width: 768px) { /* Layout */ #header { padding: 1em; } #left_area_content { padding: 1em; } .modul { padding: 1em 1em 0; } /* Navigation */ #sub_navigation { display: block; } #navigation ul li, #navigation ul li a, #sub_navigation ul li, #sub_navigation ul li a { width: 109px; height: 64px; } /* EventManager */ #EventManager table.EventList { font-size: 100%; } /* Hints */ img.hide_mobile { display: block; } .mobile_hint_portrait { display: none; } } /* Portrait - for all iPads */ @media screen and (device-width: 768px) and (orientation:portrait) { /* Layout */ #wrapper { width: 768px; } } /* Landscape - all iPads */ @media screen and (device-height: 1024px) and (orientation:landscape) { /* Layout */ #wrapper { width: 1024px; } /* Navigation */ #navigation ul li, #navigation ul li a, #sub_navigation ul li, #sub_navigation ul li a { width: 146px; height: 64px; } } /*------------------------------------------------------------------------------------------------------*/ /* High Definition Icons for Retina Displays */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* Header */ #header { background: url("../image/layout/mobile/logo-64.png") center right no-repeat; -webkit-background-size: 37px 37px; } /* Navigation */ #navigation ul li { background: url("../image/layout/mobile/home-128.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.active { background: url("../image/layout/mobile/home-128-active.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.Li02 { background: url("../image/layout/mobile/events-128.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.Li02.active { background: url("../image/layout/mobile/events-128-active.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.Li03 { background: url("../image/layout/mobile/gallerie-128.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.Li03.active { background: url("../image/layout/mobile/gallerie-128-active.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.Li04 { background: url("../image/layout/mobile/about-128.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.Li04.active { background: url("../image/layout/mobile/about-128-active.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.Li05 { background: url("../image/layout/mobile/download-128.png") center center no-repeat; -webkit-background-size: 64px 64px; } #navigation ul li.Li05.active { background: url("../image/layout/mobile/download-128-active.png") center center no-repeat; -webkit-background-size: 64px 64px; } #sub_navigation ul li.Li06 { background: url("../image/layout/mobile/kontakt-128.png") center center no-repeat; -webkit-background-size: 64px 64px; } #sub_navigation ul li.Li06.active { background: url("../image/layout/mobile/kontakt-128-active.png") center center no-repeat; -webkit-background-size: 64px 64px; } #sub_navigation ul li.Li07 { background: url("../image/layout/mobile/impressum-128.png") center center no-repeat; -webkit-background-size: 64px 64px; } #sub_navigation ul li.Li07.active { background: url("../image/layout/mobile/impressum-128-active.png") center center no-repeat; -webkit-background-size: 64px 64px; } /* Hints */ .mobile_hint_portrait { background: url('../image/layout/mobile/info_64.png') left center no-repeat; -webkit-background-size: 32px 32px; } }