/** * Custom Stylesheet for FinishWeb Site www.fleschboden.ch * * Copyright: * BAR Informatik AG * Brig-Glis, Switzerland * * This CSS resource incorporates links to font software which is the valuable copyrighted * property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install, * redistribute, convert, modify or reverse engineer this font software. Please contact Monotype * Imaging with any questions regarding Web Fonts: http://webfonts.fonts.com * * Path: * [finishwebroot]/layout/[Layout]/style.css * * Authors: * bz Bernd Zumoberhaus, BAR Informatik AG * * Changes: * 02.09.2016 bz initial version */ /************************************************************************************************** * Webfonts **************************************************************************************************/ @import url("//fast.fonts.com/t/1.css?apiType=css&projectid=ccbc082c-dace-47ce-9cf8-e8068e2b040e"); @font-face{ font-family:"SquareSlabserif711W01-B"; src:url("../fonts/7b5ca2a7-c470-4c30-ad23-a6c2722a8c9f.eot?#iefix"); src:url("../fonts/7b5ca2a7-c470-4c30-ad23-a6c2722a8c9f.eot?#iefix") format("eot"),url("../fonts/3666bcd3-e046-44e7-a1c8-7dcf9e278dd2.woff") format("woff"),url("../fonts/0904e395-8c9f-4d5f-a5e6-aaf038f78ad8.ttf") format("truetype"),url("fonts/528162e6-3e98-4835-84d5-eac4adf024cf.svg#528162e6-3e98-4835-84d5-eac4adf024cf") format("svg"); } /************************************************************************************************** * Default styling of HTML-tags **************************************************************************************************/ body { font-family:Arial Regular, sans-serif; line-height: 1.6em; color:#000; } /******************************** * media ********************************/ /* Custom, iPhone Retina */ /* layout & layout-elements */ body { font-size:180%; } #header { height:150px; } #header #logo { top:10px; } #header #language { font-size:1.8em; line-height:2em; } #header #search form .searchstring { font-size:1.4em; color:#000; background:#FFF; border:none; border:1px solid #000; } /* general element settings */ #content .fwelement, #content > iframe, #content .lead { font-size:0.9em; line-height:1.4em; } /* content-elements */ #content .fwtext ul li:before, #content .fwparagraph ul li:before, #content .bookingsite ul li:before, #content .fwlinklist ul li:before { color:#b1cbdd; } #content .fwsubmenu .datalist .item .title { line-height:1.2em; } #sidebar-right .fwexpander .expander-item .expander-titles .maintitle:before, #footer-wrapper #footer #footer-content .fwexpander .expander-item .expander-titles .maintitle:before { color:#000; } #sidebar-right .fwquickfinder .booking { font-size:1.2em; line-height:1.2em; } #footer-wrapper #address .fwtext { line-height:1.4em; } /* nav */ #navmob > ul { background:transparent; } #header a.navlink:before { color:#FFF; } #header > a.navlink:before, #header #nav > a.navlink:before { font-size:2.4em; line-height:1.1em; } #navmob a::before, #navmob a::after, #navmob .menu2items .mm-subtitle a::before, #navmob .menu2items .mm-subtitle a::after { border-color:#FFF; } #navmob .menu2items a::before, #navmob .menu2items a::after, #navmob .menu3items a::before, #navmob .menu3items a::after { border-color:#000; } #navmob, #navmob > ul, #header #nav, #header #nav > ul, #header a.navshow, #navmob .menu2items > .mm-subtitle > a { background:#1a171b; } #navmob .menu1items > .menu1, #header #nav .menu1items > .menu1, #navmob .menu2items.mm-list { font-family:"SquareSlabserif711W01-B"; font-size:1.8em; line-height:2.2em; border-bottom:1px solid #FFF; } #navmob .menu1items .menu1 > a, #header #nav .menu1items .menu1 > a, #navmob .mm-subtitle > a { color:#FFF; } #navmob .menu1items .menusel1 > a, #navmob .menu1items .menu1 > a:hover, #header a.navshow:hover, #header #nav .menu1items .menu1 > a:hover, #header #nav .menu1items .menu1hover > a, #header #nav .menu1items .menusel > a, #navmob .menu2items .mm-subtitle a { color:#b1cbdd; } #navmob .menu2items, #header #nav .menu2items { background-color:#e7eff5; } #navmob .menu2items > .menu2, #header #nav .menu2items > .menu2 { font-size:0.55em; line-height:1.2em; } #navmob .menu2items > .menu2, #header #nav .menu2items > .menu2, #navmob .menu3items > .mm-subtitle { font-family:Arial Regular, sans-serif; } #navmob .menu2items .menu2 a, #navmob .menu3items .menu3 a, #navmob .menu3items .mm-subtitle > a, #header #nav .menu2items .menu2 a { color:#000; } #navmob .menu3items, #header #nav .menu3items { background:#cfdfeb; } #navmob .menu2items > .menu2, #header #nav .menu2items > .menu2, #navmob .menu3items > .mm-subtitle { border:none; } #navmob .menu3items .menu3, #header #nav .menu3items .menu3 { border:none; } #header #nav a.navhide { background:#1c3a48; } #navmob .menu2items li:hover, #navmob .menu2items li.menusel2, #header #nav .menu1items .menu1 .menu2items li:hover, #header #nav .menu1items .menu1 .menu2items li.menusel2, #navmob .menu3items li:hover, #navmob .menu3items li.menusel3, #navmob .menu3items li.mm-subtitle, #header #nav .menu1items .menu1 .menu3items li:hover, #header #nav .menu1items .menu1 .menu3items li.menusel3 { background-color:#b1cbdd; } #header #nav ul.menu3items > li.menu3 a { border:none; } #header #nav ul.menu2items > li.menu2 a { color:#000; } #footer-wrapper #footer #footer-content .nav .menu2items { display:flex; width:100%; flex-flow:column wrap; -webkit-flex-flow:column wrap; } #footer-wrapper #footer #footer-content .nav .menu2items li { clear:both; float:none; } #footer-wrapper #footer #footer-content .nav .homelink { padding-bottom:30px; } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { /* layout & layout-elements */ body { font-size:140%; } #header #logo { top:0; } #header #language { font-size:1em; line-height:1.4em; } #header #social { left:0; } #header #search form .searchstring { font-size:0.9em; color:#000; background:#FFF; border:none; border:1px solid #000; } #footer-wrapper #footer #footer-content #copyright { width:75px; } /* content-elements */ #content .fwsubmenu .datalist .item .title { line-height:1.6em; } #content .fwrandomwebcamlist { top:20px; } #sidebar-right .fwquickfinder .booking { font-size:1em; line-height:1.8em; } #footer-wrapper #address .fwtext { line-height:1.2em; } /* nav */ #header #nav { background-color:#1a171b; } #header #nav .menu1items .menu1 > a { font-size:0.9em; padding:0 17px; } #lang-en #header #nav .menu1items .menu1 > a { padding:0 10px; } #lang-nl #header #nav .menu1items .menu1 > a { padding:0 10px; } #lang-fr #header #nav .menu1items .menu1 > a { padding:0 14px; } #lang-it #header #nav .menu1items .menu1 > a { padding:0 19px; } #header #nav .menu1items .menu1:after { background:#FFF; } #header #nav .menu1items .menu1 { border:none; } #header #nav .menu1items .menu1 .menu2items .menu2.haschildren a:after { color:#b1cbdd; } #header #nav .menu1items .menu1 .menu2items .menusel2.haschildren a:after, #header #nav .menu1items .menu1 .menu2items .haschildren:hover a:after, #header #nav .menu1items .menu1 .menu2items .menu2hover a:after { color:#e7eff5; } #footer-wrapper #footer #footer-content .nav .menu2items { width:auto; } #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:40px !important; } #footer-wrapper #footer #footer-content .nav { width:calc(75.5% - 75px); } #lang-en #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:40px !important; } #lang-nl #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:10px !important; } #lang-fr #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:20px !important; } #lang-it #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:20px !important; } } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { /* content-elements */ #sidebar-right .fwquickfinder .booking { line-height:1em; } /* nav */ #header #nav .menu1items .menu1 > a { font-size:1em; padding:0 30px; } #lang-en #header #nav .menu1items .menu1 > a { padding:0 22px; } #lang-nl #header #nav .menu1items .menu1 > a { padding:0 23px; } #lang-fr #header #nav .menu1items .menu1 > a { padding:0 31px; } #lang-it #header #nav .menu1items .menu1 > a { padding:0 32px; } #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:60px !important; } #lang-en #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:30px !important; } #lang-nl #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:30px !important; } #lang-fr #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:40px !important; } #lang-it #footer-wrapper #footer #footer-content .nav .menu2items li { padding-left:40px !important; } } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { } /******************************** * background ********************************/ /******************************** * header ********************************/ #header { font-size:12px; line-height:14px; } #header a { color:#707172; } #header a:hover { color:#000; } /* language */ #header #language { background:#1a171b; } #header #language .dropdown>a, #header #language .sel a, #header #language a:hover { color:#FFF; } #header #language .dropdown-menu > li > a { color:#000; } #header #language .language li.lang a { color:#FFF; } #header #language .language li.lang a:hover, #header #language .language li.langsel a { color:#b1cbdd; } #header #language .language li.separator { background:#FFF; } /* social bookmarks */ #header #social { background:#1a171b; } #header #social .fwsocialbookmarks { font-size:1.2em; line-height:1.2em; } #header #social .fwsocialbookmarks:before, #header #social .fwsocialbookmarks .socialbookmark a:after { color:#FFF; } #header #social .fwsocialbookmarks .socialbookmark:hover a:after, #header #social .fwsocialbookmarks:before { color:#b1cbdd; } /* suchen */ #header #search form input { color:#FFF; } #header #search form input { background:transparent; border:none; } /******************************** * content ********************************/ #content a, #content .maintitle:hover, #content a:hover { color:#000; } /******************************** * main ********************************/ #main, #sidebar-right .fwelement { background:rgba(255,255,255,0.8); } #sidebar-right a { color:#707172; } /* position */ #content .nav #position li { font-size:0.8em; line-height:1.6em; } /* titel / elementtitel */ #content h1, #content .fwarticle .title, #content .bookingsite .welcome .header, #content .fwpicture-group2 .fwpicture .text, #content .fwrandomwebcamlist div h3, #content .bookingandnewsletter .fwquickfinder h2 { font-family:"SquareSlabserif711W01-B"; font-size:1.4em; } /* variante überschrift 2 */ #content h2, #content h3, #content .fwparagraph .title, #content .list .title, #content .detail .title, #content .datalist span.objectgroup, #content .datalist .item-divider, #content .bookingobject .header { font-family:Arial Regular, sans-serif; font-size:1.1em; } /* bild & webcam */ /* rechte spalte */ #sidebar-right .fwpicture-group .fwpicture .text { color:#707172; } /* linkliste */ #content .fwlinklist ul.list li { background:transparent; } /* rechte spalte */ #sidebar-right .fwlinklist .list li a.active { line-height:19px; } /* tabelle */ #content table.fwtable, #content .fwtable table { border:none; } #content table.fwtable td, #content .fwtable table td, #content table.fwtable th, #content .fwtable table th { border:none; border-bottom:1px dotted #000; } #content table.fwtable th, #content .fwtable table th { border-bottom:1px solid #000; } #content table.fwtable td.i0, #content .fwtable table tr:nth-child(2n+1) td { background:rgba(255,255,255,0.8); } #content table.tab tr:hover td.i1, #content table.fwtable tr:hover td.i1, #content .fwtable table tr:nth-child(2n+2):hover td { color:#000; } #content table.tab tr:hover td.i1 a, #content table.fwtable tr:hover td.i1 a, #content .fwtable table tr:nth-child(2n+2):hover td a, #content table.tab tr:hover td.i1 a:hover, #content table.fwtable tr:hover td.i1 a:hover, #content .fwtable table tr:nth-child(2n+2):hover td a:hover { color:#000; } #content table.tab tr:hover, #content table.tab tr:hover td, #content table.fwtable tr:hover, #content .fwtable table tr:hover, #content table.fwtable tr:hover td, #content .fwtable table tr:hover td { background-color:#b1cbdd; } /* galerie */ #content div.fwgallery .fwnavigation table.datanavigation td.selected a { color:rgba(28,58,72,1); } #content div.fwgallery a img { border:none; } #content div.fwgallery .fwgallery .thumbnail { border:none; } .highslide-container { color:#000; } /* mitteilungen (db, formular-zu-email etc.) */ .message { font-size:1em; line-height:1em; } .success, .okmessage, .mail-frm-success { color:#00ff00; } .error, .nokmessage, .mail-frm-err { font-weight:bold; color:#ff0000; } /* formularfelder: allgemein und spezifisch */ /* inputs */ #content .form .field input, #content input[type=text], #content input[type=date], #content input[type=password], #content textarea, #content select { color:#000; border:1px solid #000; } #content .range input[type=text] { color:#000; } #content .form .captcha input, #content input.mail-frm-cap { border:1px solid #000; } #content .fwecard #field_captcha #captcha input.input { border:1px solid #000; background:transparent; } #content .fwrsearch input.button, #content .val input.button, #content .button input, #content td.button input, #content .buttonbar input, #content input.frm-frm-but, #content .mail-tbl-but input { color:#FFF; background:#000; } #content .fwsearch input.button, #content .val input.button, #content .button input, #content td.button input, #content .buttonbar input, #content input.frm-frm-but, #content .mail-tbl-but input { border:none; } #content .fwrsearch input.button:hover, #content .val input.button:hover, #content .button input:hover, #content td.button input:hover, #content .buttonbar input:hover, #content input.frm-frm-but:hover, #content .mail-tbl-but input:hover { color:#b1cbdd; } /* labels / prefix / divs */ #content .mail-cap-img { background:transparent; } #content .captcha img, #content .mail-cap-img { border:2px solid #000; } /* formular-zu-email */ #content .fwformtomail { border:none; } /* seite weiterempfehlen */ #content .fwrecommend { border:none; } /* blättern navigation */ #content .navigation table.datanavigation td:before, #content .navigation table.datanavigation td a:before { color:#b1cbdd; } #content .navigation table.datanavigation td:hover a:before { color:#000; } /* mediabox */ #content .fwmediabox { background:transparent; } #content .fwmediabox .sources, #content .fwelement .sliderkit-photogallery .sliderkit-nav { background:rgba(255,255,255, 0.8); } #content .fwelement .sliderkit-photogallery .sliderkit-nav-clip ul .sliderkit-selected a { border:none; } #content .fwelement .sliderkit-photogallery .sliderkit-nav-clip ul .sliderkit-selected a img { border:2px solid #FFF; } #content .fwmediabox .sources li { color:#000; } #content .fwmediabox .panels { border:1px solid rgba(255,255,255, 0.8); } /* lists & expander */ #content .datalist .item { background:rgba(255,255,255, 0.8); border-bottom-color:#b1cbdd; } #content .datalist .item:hover, #content .fwsubmenu .datalist .item:hover, #content .fwinfrastructure .datalist .item:hover, #content .fwexpander .expander-item.expanded, #content .fwexpander .expander-item:hover { background:#b1cbdd; } #content .datalist .item h3 a, #content .datalist .item .title a { color:rgba(28,58,72,1); } #content .datalist .item:hover, #content .datalist .item:hover a { color:#000; } /* submenu, wetter, wispo & timetable */ #content .fwsubmenu .datalist .item, #content .fwweather .datalist .item, #content .fwwispo .datalist li.object, #content .fwtimetable > div { background:rgba(255,255,255, 0.8); border:none; } #content .fwsubmenu .datalist .item div, #content .fwweather .datalist .item div { font-size:1em; color:#000; } #content .fwsubmenu .datalist .item .title a { color:#000; } #content .fwsubmenu .datalist .item:hover .title a { color:#FFF; } /* details */ #content .fwelement .back a, #content .fwelement .backurl a { color:#707172; } #content .fwelement .back a:hover, #content .fwelement .backurl a:hover { color:#000; } /* wispo */ #content .fwwispo .datalist li.object .object { color:#000; } #content .fwwispo .datalist li.objecttype ul li.object span.object { line-height:1.1em; } /* wetter */ /* rechte spalte */ #sidebar-right .fwweather { font-size:0.8em; line-height:1.4em; } /* timetable */ #content .fwtimetable div div, #content .fwtimetable h1 { background:transparent !important; } /* events */ #content .fweventcalendar .datalist .item-divider { background:transparent; } /* expander */ #content .fwexpander .expander-item:hover .expander-titles, #content .fwexpander .expander-item:hover .expander-titles .maintitle, #content .fwexpander .expander-item:hover .expander-content { color:#FFF; } #content .fwexpander .expander-item .expander-seperator { border-bottom:1px solid #B1CBDD; } /* rechte spalte & fusszeile */ #sidebar-right .fwexpander .expander-item:hover .expander-titles, #sidebar-right .fwexpander .expander-item:hover .expander-titles .maintitle, #sidebar-right .fwexpander .expander-item:hover .expander-content { color:#000; } #sidebar-right .fwexpander .expander-item .expander-content .fwelement { background:transparent; } #sidebar-right .fwexpander .expander-item.expanded, #sidebar-right .fwexpander .expander-item:hover { background:transparent; } #sidebar-right .fwexpander .expander-item .expander-seperator { border:none; } /* booking and newsletter (facebook-layout) */ #content .bookingandnewsletter h1 { font-size:1.5em; } #content .bookingandnewsletter .fwquickfinder, #content .bookingandnewsletter .fwnewsletterbox { background:rgba(255,255,255, 0.8); } /* kalender-auswahl */ div.ui-datepicker { background:rgba(255,255,255,0.8); border-color:#B1CBDD; } div.ui-datepicker div.ui-datepicker-header { color:#000; background:#B1CBDD; } div.ui-datepicker div.ui-datepicker-header a.ui-datepicker-prev:hover, div.ui-datepicker div.ui-datepicker-header a.ui-datepicker-next:hover { background:#FFF; } div.ui-datepicker table.ui-datepicker-calendar td a.ui-state-active { border-color:#B1CBDD; } div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a { background:#FFF; } div.ui-datepicker table.ui-datepicker-calendar td a.ui-state-active, div.ui-datepicker table.ui-datepicker-calendar td a:hover, div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a:hover { background:#B1CBDD !important; } div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a.ui-state-active { color:#000 !important; } div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today { border-color:#000; } div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a.ui-state-highlight { color:#FFF; background:#000; border-color:#B1CBDD; } div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-col { color:#555; padding:2px 0 0; } div.ui-datepicker table.ui-datepicker-calendar tbody tr:nth-child(even) td a.ui-state-default { background:#d0d0d0; border:1px solid #bbb; } div.ui-datepicker table.ui-datepicker-calendar tbody tr:nth-child(even) td.ui-datepicker-week-end a { background:#e7e7e7; } div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-col { background:#D4E8F2; } div.ui-datepicker table.ui-datepicker-calendar th.ui-datepicker-week-col, div.ui-datepicker table.ui-datepicker-calendar tbody tr:nth-child(even) td.ui-datepicker-week-col { background:#c2dbea; } /* bookingsite */ #content .bookingsite .imagescroll .buttonprev, #content .bookingsite .imagescroll .buttonnext { font-size:1.4em; } /* bookingactionlinks */ /* rechte spalte */ #sidebar-right .bookingactionlinks .actionlink { font-size:1.2em; line-height:1.2em; } /* bookingmenu */ /* rechte spalte */ #sidebar-right .bookingmenu ul li.menusel1 > a, #sidebar-right .bookingmenu ul li.menusel2 > a, #sidebar-right .bookingmenu ul li.menusel3 > a, #sidebar-right .bookingmenu ul li.menusel4 > a { color:#000; } /* contenttools */ #contenttools a { line-height:1.4em; background:#e6e6e6; } #contenttools a:before { color:#000; } #contenttools a:hover { background:#000; } #contenttools a:hover:before { color:#FFF; } /* quickfinder */ /* rechte spalte */ #sidebar-right .fwquickfinder .booking .bookonly .button { font-size:1.2em; line-height:1.4em; } /******************************** * footer-wrapper ********************************/ #footer-wrapper { font-size:0.85em; line-height:1.2em; } #footer-wrapper a { color:#000; } /******************************** * address ********************************/ #footer-wrapper #address { background:rgba(0,0,0, 0.6); } /* text */ #footer-wrapper #address .fwtext { color:#FFF; } #footer-wrapper #address .fwtext p a { color:#FFF; } /******************************** * footer ********************************/ #footer-wrapper #footer { background:rgba(255,255,255,0.8); } /******************************** * footer-content ********************************/ /* expander */ #footer-wrapper #footer #footer-content .fwexpander .expander-item:hover .expander-titles, #footer-wrapper #footer #footer-content .fwexpander .expander-item:hover .expander-titles .maintitle, #footer-wrapper #footer #footer-content .fwexpander .expander-item:hover .expander-content { color:#000; } #footer-wrapper #footer #footer-content .fwexpander .expander-item .expander-content .fwelement { background:transparent; } #footer-wrapper #footer #footer-content .fwexpander .expander-item.expanded, #footer-wrapper #footer #footer-content .fwexpander .expander-item:hover { background:transparent; } /* quicklinks (level 2) */ #footer-wrapper #footer #footer-content .nav .menu2items li.menusel2 a { color:#000;} /* linklist */ #footer-wrapper #footer #footer-content #copyright .fwlinklist li { background:transparent !important; }