/* Theme: Richard Wagner Museum Entwurf Julia Reichle Ausführung: Albert Ameica Farben Grund: Background: #fff; Kasten Hellgrau: #ecebe5; Footer Background grau: #cdcdc1; Stadt Luzern: #fff; Farben Texte: Titel Grau: #6e6d5b; Navigation Top / Untertitel / Unternavigation Grund: #000000; Navigation hover: #007C7C; Unternavigation Kasten: rgb(146, 162, 140); oder #92a28c; Unternavigation aufgehellt: #9fc6a3; Unternavigation Text: #fff; Text: #000; Logo Richard Wagner Museum: #000; Zitat: #007C7C; Schriften: TTInterphacesProMedium > Texte TTInterphacesProBold > KreolMedium > Zitate KreolSemiBold > Titel, Navigation Farben: :root { --text: #000000; --textweiss: #ffffff; --hover: #007C7C; --dunkelgrau: rgb(146, 162, 140); --aufgehellt: #9fc6a3; } */ :root { --text: #000000; --textweiss: #ffffff; --hover: #007C7C; --dunkelgrau: rgb(146, 162, 140); --aufgehellt: #9fc6a3; --boxengrund: #ecebe5; } body { /*font-size:16px; font-family: open_sansregular, sans-serif;*/ } /* Datenschutzerklärung DSGVO Insert */ #cookie_container { position: fixed; bottom: 0!important; top:auto!important; left: 0; right: 0; z-index: 999; padding: 10px; background-color: rgba(146, 162, 140, 0.9)!important; color: #000!important; max-height: 100px!important; border-top: 1px solid #000; } div.muster { max-width: 1200px; margin: 0 auto; } div.RWMcontainer { max-width: 1000px; margin: 0 auto; } /* Header */ header { max-width: 100%; margin: 0 auto; } header nav.lang { position: relative; text-align: right; padding: 6px 0px 0px 0px; } header nav.lang ul { list-style-type: none; } header nav.lang li { display: inline; } header nav.lang a { font-size: 1em; color: var(--text); text-decoration: none; border-bottom: 0px solid transparent; } header nav.lang a:hover { border-bottom: 1px solid #000; } header img.logo { margin: -16px auto 24px auto; display: block; width: 100%; height: auto; max-width:160px; } header ul.translations { min-height:24px; } /* Navigation top */ .navbar-default { background-color: transparent; border-color: transparent; width: 100%; margin-bottom: 46px; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { padding: 0px; } #myNavbar>ul, .navbar-default .navbar-nav>ul { width: 100%!important; display: flex; justify-content: space-around; align-items: stretch; } .navbar-default .navbar-nav>ul li { width: 20%; } .navbar-default .navbar-nav>li>a { font-family: KreolSemiBold, serif; font-style: normal; font-weight: normal; color: var(--text); font-size: 20px; padding-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; /*border-bottom: 5px solid transparent;*/ } .navbar-default .navbar-nav>li>a:hover { color: var(--hover); } .navbar-default .navbar-nav>li.section>a, .navbar-default .navbar-nav>li.current>a { color: var(--text); } .caret { display: none; } /* Submenu */ ul.dropdown-menu { padding: 0; margin: 14px 0px 0px 14px; } ul.nav li.dropdown:hover ul.dropdown-menu { display: block; } ul.dropdown-menu li a { font-family: KreolSemiBold, serif; font-style: normal; font-weight: normal; font-size: 1.2em; background-color: var(--dunkelgrau); color: var(--textweiss); } ul.dropdown-menu li a:hover, ul.dropdown-menu li a.current { background-color: var(--dunkelgrau); color: var(--text); } /* Start Image Legend */ div.headerbild img.startbild { max-width: 1000px; height: auto; } div.headerlegend { /*background-color: #ECEBE5;*/ font-size: 0.8em; } div.headerlegend p {; font-family:TTInterphasesProBold, sans-serif; font-style: normal; font-weight: normal; font-size: 1em; line-height: 1.4em; padding: 14px 8px; text-align: center; } /* Section Content */ section.cont { min-height: 300px; padding: 0; height: 100%; overflow: hidden; margin: 24px 0px; } section>div.left { padding-left: 0px; } section>div.right { padding-right: 0px; } section>div.colWidth, section>div.colWidth p { padding-left: 0px; padding-right: 0px; margin-top: 40px; } article { margin: 0 30px; } /* StartPage */ div.boxcontainer { width: 100%; padding: 0; } div.box { padding: 0; margin-bottom: 66px; } div.box>a { text-decoration: none; display: block; border: 1px solid transparent; } div.box>a:hover p.boxcontent { color:var(--hover); } div.box>a.left { margin: 0px 12px 0px 2px; } div.box>a.right { margin: 0px 2px 0px 12px; } img.boximage { display: block; } div.boxin { background-color: var(--boxengrund); height: 100%; } p.boxcontent { font-family: KreolSemiBold, serif!important; font-style: normal; font-weight: normal; color: var(--text); font-size: 1.3em!important; line-height: 1.4em; padding-top:20px!important; padding-bottom:0px!important; margin: 0!important; text-align: center; text-transform: uppercase; } p.boxdesc { color: var(--text); font-size: 1.5em; padding-bottom: 20px!important; margin: 0; text-align: center; } /* Teaser */ div.teasersection { display:inline-block; margin: 24px -15px; width: 100%; clear: both; } div.teasersection h3.teaser { font-family:KreolSemiBold, sans-serif; font-style: normal; font-weight: normal; font-size: 1.3em; line-height: 2em; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--text); padding:0; } div.teasersection p { font-size: 1.1em; line-height: 1.2em; margin: 0; padding: 0; } div.teasersection img { margin: 13%; width: 74%; margin-left:0px; } div.teasersection > div > a > div:hover > h3 { color: var(--hover); border-bottom: 2px solid var(--hover); } div.teasersection > div > a > div:hover > p { color: var(--text); } div.teasersection a { text-decoration: none; } /* Zitat */ div.zitat { border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); margin: 40px 0px; padding: 20px 0px; } div.zitat div.ZitatContent p, div.zitat p { font-family: KreolMedium, serif; font-size: 2em; line-height: 1em; text-align: center; color: var(--text); } div.zitat div.ZitatName { font-size: 0.9em; line-height: 0.9em; color: var(--text); text-align: center; padding: 0; margin: 0; } /* Video */ .responsive-video { position: relative; padding-bottom: 53.2%; padding-top: 30px; height: 0; overflow: hidden; } .responsive-video iframe, .responsive-video object, .responsive-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Form */ input[type="submit"]:hover, .Actions .action { background: var(--hover); color: var(--textweiss); } input[type="submit"]:hover, .Actions .action:hover { background: #118d8d; color: var(--textweiss); } /* Footer */ footer { background-color: var(--dunkelgrau); padding: 40px 0 0 0; margin-top: 40px; min-height: 200px; font-family:TTInterphasesProMedium, sans-serif; font-style: normal; font-weight: normal; color: var(--textweiss); } footer div.links p { margin: 0; } footer div.mitte a { color: var(--textweiss)!important; } footer div.links a { color: var(--textweiss)!important; text-decoration: none; font-size: 1.4em; letter-spacing: 0.04em; } footer div.links a:hover { text-decoration: underline; } footer div.facebook img { max-width: 29px; margin-left: 6px; } footer div.logo { max-width: 140px; margin: 51px 0px 50px 0px; } footer div.mitte p { color: var(--textweiss)!important; text-decoration: none; font-size: 1.1em; } footer div.rechts p { line-height: 1.6em; } footer div.rechts a { /*color: var(--aufgehellt);*/ color:#fff; } /* BREAKPOINT 997px ***********************************************************************/ @media only screen and (max-width: 997px) { header nav.lang { position: relative; text-align: right; padding: 6px 12px 0px 0px; } } /* BREAKPOINT 760px ***********************************************************************/ @media only screen and (max-width: 760px) { header { max-width: 100%; margin: 0 auto; height: 82px; } header img.logo { margin: 0px auto 24px auto; display: block; width: 100%; height: auto; max-width: 160px; } /* Navigation Responsiv */ #myNavbar>ul, .navbar-default .navbar-nav>ul { width: 100%!important; display: block; } .navbar-default .navbar-nav>ul li { width: 100%; } #cookie_container { position: fixed; bottom: 0 !important; top: auto !important; left: 0; right: 0; z-index: 999; padding: 10px; background-color: rgba(250,250,250,0.7) !important; color: #000 !important; max-height: 160px !important; border-top: 1px solid #000; } .dropdown-menu { position: static; top: 0; left: 0; z-index: 1000; display: block; float: none; clear: left; min-width: 100%; padding: 0; margin: 0; list-style: none; text-align: left; background-color: none; border: none; border-radius: 0px; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.175); box-shadow: 0 0 0 rgba(0, 0, 0, 0.175); -webkit-background-clip: transparent; background-clip: transparent; } ul.nav li a, li.dropdown a { font-size: 1.4em!important; } #myNavbar>ul>li>a { background-color: var(--textweiss); padding: 8px 0px 8px 33px; } div.teasercontainer { max-width: 300px; margin: 0 auto; } header div.legend p { font-family: TTInterphasesProMedium, sans-serif; font-style: normal; font-weight: 500; font-size: 1.2em; line-height: 1.2em; padding: 14px 8px; text-align: center; } /* Article */ article { width: 90%; margin: 0 auto; } .zit { display: none; } } /* BREAKPOINT 360px ***********************************************************************/ @media only screen and (max-width: 360px) { #cookie_container { position: fixed; bottom: 0 !important; top: auto !important; left: 0; right: 0; z-index: 999; padding: 10px; background-color: rgba(250,250,250,0.7) !important; color: #000 !important; max-height: 240px !important; border-top: 1px solid #000; } }