/* =================================================================================================== S T Y L E S . C S S =================================================================================================== */ @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 400; src: local('Droid Sans'), local('DroidSans'), url(../fonts/droid-sans-400.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 700; src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(../fonts/droid-sans-700.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 400; src: local('Droid Serif'), local('DroidSerif'), url(../fonts/droid-serif-400.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 700; src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(../fonts/droid-serif-700.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Droid Serif'; font-style: italic; font-weight: 400; src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url(../fonts/droid-italic-400.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Droid Serif'; font-style: italic; font-weight: 700; src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'), url(../fonts/droid-italic-700.woff2) format('woff2'); font-display: swap; } a[href="https://plus.google.com/108775985160493972790"][rel="publisher"] { font-size:5px!important; } html { background: #d9dcde; } body { background: #fff; font: normal 87.5%/1.5 "Droid Serif", Georgia, Times, serif; color: #1f4159; text-align: center; max-width: 90em; margin: 0 auto; padding: 0 0 2em; box-shadow: 0 0 5px rgba(0,0,0,0.25) } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, address, table, form, hr, figure, audio, video { margin-bottom: .75em; } /* Typgraphy -------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: bold; } h2 { font-size: 1.25em; line-height: 1.35; margin: 0 0 0.25em; } h3 { background: #1f4159; font-size: 1.25em; line-height: 1.35; color: #fff; display: inline-block; text-transform: uppercase; margin-bottom: 1em; padding: 0.5em 0.8em 0.4em; } h4 { font-size: 1.25em; line-height: 1.35; margin-bottom: 0.375em; } h5 { font-size: 1em; text-transform: uppercase; margin: 1em 0; } h6 { font-size: 1em; } i, em { font-family: "Droid Serif", Georgia, Times, serif; text-transform: none; color: #879aa8; } ::-webkit-selection { background: #1f4159; color: #fff; } ::-moz-selection { background: #1f4159; color: #fff; } ::selection { background: #1f4159; color: #fff; } /* Links -------------------------------------- */ a { color: #ff583d; text-decoration: none; } a:visited { color: #ff583d; text-decoration: none; } a:hover { color: #1f4159; text-decoration: none; } a:active { color: #1f4159; text-decoration: none; } a.arrow:after { border-width: .325em 0 .325em .325em; border-color: transparent transparent transparent #ff583d; } a.arrow:hover:after { border-left-color: #1f4159; } /* Button */ button, .btn { font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; color: #fff !important; background: #ff583d; border: 0 none; padding: .375em 1em .325em; } button:hover, .btn:hover { background-color: #1f4159; box-shadow: 0 0 5px rgba(31,65,89,.5); } button:active, .btn:active { } /* =================================================================================================== H E A D E R =================================================================================================== */ #masthead { background: #fff url(../images/banner-mobile.png) bottom center no-repeat; background-size: cover; height: 300px; } .xmasText { display: none; } #masthead.xmas { background:#fff url("../images/xmas2015-small.png") no-repeat top left; background-size: cover; } #masthead.xmas .xmasText{ display: block; line-height: 18px; font-size: 18px; text-transform: uppercase; } .newyearText { display: none; } #masthead.newyear { background:#fff url("../images/newyear2015-small.png") no-repeat top left; background-size: cover; } #masthead.newyear .newyearText{ display: block; line-height: 18px; font-size: 18px; text-transform: uppercase; } #metanav { display: none; } .headerlink { display:block; width: 348px; height: 129px; position: absolute; top: 119px; left: 0; } .headerbutton { display:block; position: absolute; top: 193px; left: 50%; transform:translate(-50%,0); background:#ff583d; color: #ffffff!important; border-radius: 3px; padding: 6px 21px; font-weight: normal; } a#logo { display: inline-block; } a#logo img { display: inline-block; width: 6em; margin: 1em auto 1em; } /*a#logo img { display: inline-block; width: 12em; margin: 2em auto 2em; }*/ .ie8 a#logo img { max-width: none; } .banner { display:inline-block; cursor: pointer; height:auto; width:90%; background: url("../images/10000fliesproteaser.png") no-repeat top left; background-size: 100% auto;} .banner .bannertitle { display:block; padding: 5% 5% 5% 48%; text-align: left; line-height: 18px; font-size: 18px;} .banner .bannertext { display:none;} .banner .bannerlink { display:inline-block; background: #1e415a; color: #FFF; padding: 7px; text-transform: uppercase; font-weight: normal; font-size: 11px; border-radius: 6px; margin: 4% 0 10px 0} .banner .bannerlink:hover { background: #ff583e;} #masthead.xmas .banner{ display: none; } #masthead.newyear .banner{ display: none; } /* =================================================================================================== M A I N =================================================================================================== */ #main { background: url(../images/dotted-line.png) repeat-x; text-align: left; margin: 0 4%; padding: 1em 0 1em; } #content { position: relative; } #content:before, #content:after { content: ""; display: table; } #content:after { clear: both; } header.page-title { font-size: 1.25em; line-height: 1.2; text-align: center; margin-bottom: .4em; } header.page-title a { border-left: 1px solid #879AA8; padding: .25em .625em; white-space: nowrap; font-weight: normal !important; } header.page-title a:first-child { border-width: 0; } header.page-title h2 { font-size: 100%; } header.page-title h2 span, header.page-title p { font-weight: normal; font-size: 87.5%; } header.page-title p { display: block; margin-bottom: 1em; } #filter { background: #f0f4f7; overflow: hidden; position: relative; border-top: 3px solid #1f4159; margin-bottom: 1.5em; padding: 1em 1em 1.5em; } #filter h3 { background: transparent; color: #1f4159; font-size: 1.25em; text-transform: none; margin: 0; padding: 0; } #filter h3 + p { margin: 0 4em 1em 0; } #filter div { font-size: 87.5%; background: #fff; overflow: hidden; margin-bottom: 1em; padding: 1em; border-radius: 3px; } #filter label { float: left; width: 100%; margin-bottom: .5em } #filter div + label { display: block; float: none; width: 100% !important; margin-bottom: 1em; } #filter label strong { display: block; } #filter select { float: left; width: 100%; } #activefilters { font-size: 87.5%; background: #F0F4F7; overflow: hidden; margin-bottom: 1em; padding: .75em; } #activefilters h5 { display: inline-block; margin: 0; } #activefilters ul { display: inline-block; margin: 0; } #activefilters li { background: #e0e8ed; display: inline-block; border: 1px solid #c5d3dc; margin-left: .25em; padding: 0 .375em; border-radius: 3px; text-shadow: 0 1px 0 #fff; } #activefilters a { font-family: "Helvetica Neue", Helvetica, Arial; font-weight: bold; font-size: 16px; line-height: 1; color: #c5d3dc; margin-left: 4px; } #activefilters li:hover a { color: #98afbe; } #activefilters li a:hover { color: #1f4159; } #closefilter { background: #879AA8; text-align: center; font-size: 1.5em; line-height: 1; position: absolute; right: .75em; top: .75em; padding: 0.1em 0.25em 0; } #closefilter:hover { background: #1f4159; box-shadow: none; } /* Articles -------------------------------------- */ #content article { background: url(../images/dotted-line.png) repeat-x; position: relative; padding: 1.5em 0 1em; } #content article:before, #content article:after { content: ""; display: table; } #content article:after { clear: both; } /* Rank */ #content article > p { text-align: center; float: left; width: 18%; } #content article > p span { font-size: 2.4em; line-height: 1; color: #879AA8; letter-spacing: -1px; } #content article > p:after { font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 62.5%; line-height: 1; text-align: center; content: "Platz"; text-transform: uppercase; display: block; margin: 0 auto; } /* Image */ #content article > a > img, #content article > a > noscript > img { background: #FFF; float: right; width: 82%; margin-bottom: 1em; padding: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content article > a > img.nopic, #content article > a > noscript > img.nopic { display: none; } #content article > a > noscript { display:block; float:left; padding-right:17px; } #content article > a > noscript > img { float:none; width:196px; } #content article img.lazyload { display:none; } /* Teaser */ #content article > div { position: relative; overflow: hidden; width: 82%; margin-left: 18%; padding: .25em 0 0; } #content article > div p { margin-bottom: .5em; } .sourcedate { font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 78.5714%; line-height: 1.5; text-transform: uppercase; position: relative; top: 2px; margin-bottom: .85em !important; padding-right: 6em; } .sourcedate img { display: inline-block; margin-right: .25em; vertical-align: middle; position: relative; top: -1px; /* border-radius: 50%; */ } article h2 a, h3 a, h4 a, .sourcedate a { color: #1f4159 !important; } article h2 a:hover, h3 a:hover, h4 a:hover, .sourcedate a:hover { color: #FF583D !important; } /* Like-List */ .likes { font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 87.5%; font-weight: bold; overflow: hidden; display: block; margin: 0; padding: 1em 0 0.5em; } .likes p { line-height: 3; float: left; margin: 0; } .likes p span:before { content: ""; background: url(../images/icons.png) 0 0; vertical-align: middle; display: inline-block; width: 32px !important; height: 32px; margin: -0.25em 0.5em 0.25em 0; position: relative; top: -2px; } .likes ul { margin: 0; } .likes li:nth-of-type(n+2) { color: #c0c4c7; display: none; } .likes li { display: inline-block; margin-right: .75em; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .likes li:before { content: ""; vertical-align: middle; display: inline-block; background-image: url(../images/icons.png); background-repeat: no-repeat; width: 12px !important; height: 12px; padding: 4px; border-radius: 50%; margin: 1em 0.375em 1em 0; position: relative; top: -1px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-transition: background-position 0.0s ease-in-out; -moz-transition: background-position 0.0s ease-in-out; transition: background-position 0.0s ease-in-out;} li.big { font-size: 125%; margin-right: 0; } li.big:after { content: ""; position: relative; top: -1px; vertical-align: middle; display: none; width: 2em; height: 1px; background: #c0c4c7; margin: 0 .625em; } li.flies.big:before { background-position: 0 0; position: relative; top: -2px; width: 36px !important; height: 36px; margin: -0.25em .25em 0 0; padding: 0; border-radius: 0; } li.flies:before { background-position: -60px -12px; position: relative; top: -2px; height:36px; width: 30px !important; margin: -0.25em .25em 0 0; padding: 0; border-radius: 0; } article:hover .likes li.flies:before { background-position: -93px -12px; } article:hover .likes li.flies.big:before { background-position: 0 0; } li.facebook:before { background-color: #c0c4c7; background-position: -60px 4px; } li.facebook.big:before { background-color:#3b5997; background-position: -126px 4px; height:24px; width: 24px !important; } article:hover .likes li.facebook:before, .touch li.facebook:before { background-color: #3b5997; } li.twitter:before { background-color: #c0c4c7; background-position: -82px 4px; } li.twitter.big:before { background-color:#00abed; background-position: -160px 4px; height:24px; width: 24px !important; } article:hover .likes li.twitter:before, .touch li.twitter:before { background-color: #00abed; } li.gplus:before { background-color: #c0c4c7; background-position: -104px 4px; } li.gplus.big:before { background-color:#d54937; background-position: -194px 4px; height:24px; width: 24px !important; } article:hover .likes li.gplus:before, .touch li.gplus:before { background-color: #d54937; } #content article:hover .likes li, .touch .likes li { color: #1f4159; } /* Share article */ .toggleshare { display:none; font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 75%; text-align: center; position: absolute; top: 0.25em; right: 0; width: 6em; padding: .125em 0; border-radius: 20px; } .toggleshare:hover, .toggleshare.open { background: #f0f4f7; color: #1f4159; } .toggleshare:before { content: ""; vertical-align: middle; display: inline-block; background: url(../images/icons.png) -232px 4px no-repeat; width: 12px !important; height: 12px; padding: 4px 0; margin: 0 0.5em 0 0; position: relative; top: -1px; } .toggleshare:hover:before, .toggleshare.open:before { background-position: -232px -18px; } .share { display: none; font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 87.5%; position: absolute; top: 2.25em; right: 1px; width: 13em; background: #FFF; border: 1px solid #879aa8; border-radius: 3px; box-shadow: 0 2px 2px rgba(0,0,0,.25); } .share a { color: #1f4159; display: inline-block; width: 100%; border-top: 1px solid #879aa8; padding: .75em 0 .625em; } .share a:hover { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f0f4f7 100%); background: -webkit-linear-gradient(top, #ffffff 0%,#f0f4f7 100%); background: -o-linear-gradient(top, #ffffff 0%,#f0f4f7 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f0f4f7 100%); background: linear-gradient(to bottom, #ffffff 0%,#f0f4f7 100%); } .share li:first-child a { border: 0 none; } .share:before, .share:after { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #879aa8; position: absolute; top: -7px; right: 1.675em; } .share:after { border-bottom: 7px solid #fff; top: -6px; } .share li a:before { content: ""; vertical-align: middle; display: inline-block; background-color: transparent; background-image: url(../images/icons.png); background-repeat: no-repeat; width: 12px !important; height: 12px; padding: 4px; border-radius: 50%; margin: 0 0.625em 0 .75em; position: relative; top: -1px; } .share li.facebook a:before { background-color: #3b5997; background-position: -60px 4px; } .share li.twitter a:before { background-color: #00abed; background-position: -82px 4px; } .share li.gplus a:before { background-color: #d54937; background-position: -104px 4px; } article:hover .share.open { display: block; } /* Pagination */ .pagination { background: url(../images/dotted-line.png) repeat-x; overflow: hidden; padding: 1.5em 0 .75em; text-align: center; } .pagination p { float: left; padding-top: .25em; } .pagination li { display: inline; } .pagination a { font-size: 150%; line-height: 1.3; display: inline-block; width: 100%; margin-bottom: .5em; padding: 0.25em .3em 0.25em; border: 3px solid #c0c4c7; border-radius: 3px; color: #c0c4c7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pagination a:hover { border-color: #ff583d; color: #ff583d; } .pagination .current a { border-color: #1f4159; color: #1f4159; } .pagination a span { font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: normal; font-size: 50%; text-transform: uppercase; display: block; margin-top: 0.25em; } .mb { margin-bottom: .75em; } /* More Infos Box */ .moreinfos { background: #f0f4f7; font-size: 87.5%; margin-bottom: 1em; padding: 1em 1em .25em; } .moreinfos div.left, .moreinfos div.right { width: 100% } /* Sidebar -------------------------------------- */ #kampa { font-size: 87.5%; overflow: hidden; border-top: 3px solid #1f4159; padding-top: 1em; } #kampa>section { background: #f0f4f7; float: left; width: 100%; margin-bottom: 1em; padding: 1em 0; border-radius: 3px; } #kampa>section article { background: url(../images/dotted-line.png) repeat-x 0 100%; margin: 0 1em 1em; padding-bottom: .5em; } #kampa>section.blog article:nth-of-type(n+2) { display: none; } #kampa>section>p, #kampa>section>ul, #kampa>section div>p { margin-left: 1em; margin-right: 1em; } #kampa .sourcedate { font-size: 87.5%; margin-bottom: 0.5em !important; padding-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 0 !important; } .tabs { font-size: 1.25em; overflow: hidden; margin: 0 .8em 1em !important; border-bottom: 1px solid #879aa8; } .tabs li { display: inline; } .tabs li a { color: #879aa8; float: left; width: 30%; border-bottom: 3px solid transparent; margin-left: 5%; padding: 0 0 .5em } .tabs li:first-child a { margin-left: 0; } .tabs li a:hover { color: #1f4159; border-color: #879aa8; } .tabs li a.active { font-weight: bold; color: #1f4159; cursor: default; border-color: #879aa8; } #content_2, #content_3 { display: none; } #kampa .likes li:last-child { margin-left: 0; } #kampa .likes li:last-child:before { display: inline-block; } #recommend li, #abo li { display: block; margin-bottom: .75em; } #recommend li a, #abo li a { font-weight: bold; color: #1f4159; } #recommend li a:before, #abo li a:before { content: ""; vertical-align: middle; display: inline-block; background-image: url(../images/icons.png); background-repeat: no-repeat; width: 24px !important; height: 24px; padding: 10px; border-radius: 50%; margin: 0 0.5em 0 0; position: relative; top: -1px; } #recommend li.facebook a:before { background-color: #3b5997; background-position: -120px 10px; } #recommend li.twitter a:before { background-color: #00abed; background-position: -154px 10px; } #recommend li.gplus a:before { background-color: #d54937; background-position: -186px 10px; } #recommend li a span { background: #fff; display: inline-block; margin-left: .325em; padding: .25em .75em; border-radius: 4em; } #abo li.rss a:before { background-color: #FF583D; background-position: -236px 12px; } #fb { overflow: hidden; margin-bottom:10px; text-align: center; } #gplus { text-align: center; } #twitter { margin: 0 10px 10px; } #kampa>section.ad { text-align: center; padding: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #kampa .topcharts h4 { overflow: hidden; } #kampa .topcharts h5 { background: url(../images/bg-kampa-rank.png) no-repeat 100% 0; font-family: "Droid Serif", Georgia, Times, serif; float: left; font-size: 1.5em; height: 2.4em; line-height: 1; margin: 0 0.5em 0 0; padding-right: 0.125em; text-align: center; width: 2.0em; } #kampa .topcharts h5:after { content: "PLATZ"; font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: normal; font-size: 50%; color: #879AA8; display: block; padding-top: .325em; } #kampa .topcharts article p { margin-left: 3.875em; } #kampa .topcharts article p.flies-count { font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 87.5%; font-weight: bold; margin-left: 4.5em; } #kampa .topcharts article p.flies-count:before { content: ""; vertical-align: middle; display: inline-block; background: url(../images/icons.png) no-repeat -296px 0; width: 16px !important; height: 16px; padding: 0 4px 0 0; position: relative; top: -4px; } /* Filter -------------------------------------- */ ul.filter { float:right; text-align: right; list-style: none; padding: 0; margin: 0; padding-right: 40px; } ul.filter li { float: left; margin: 0 8px 8px 0; padding: 0 3px; background-color: #F0F4F7; color: #879AA8; line-height:1.5; } ul.filter li a { padding-left: 5px; color: #879AA8; } /* Archiv -------------------------------------- */ .archive h2 { margin-bottom: .75em; } .archive > div { margin-bottom: 2em; } .archive header.page-title { background: url(../images/dotted-line.png) repeat-x 0 100%; margin-bottom: 1em; padding-bottom: 1px;overflow: hidden; clear:both; } .archive header.page-title h2 { margin-bottom: .25em; } .archive div { min-height: 700px; } .archive div.newyear { min-height: 0; } /* Login --------------------------------------- */ #login { max-width:40%; margin: 0 auto; padding: 1em 0 2em; } #login h1 { font-size: 2em; text-align: center; margin: 0; } #login h1 + p { text-align: center; margin-bottom: 2em; } #login form { background: #eff3f6; padding: 1em; } #login fieldset { background: #fff; margin-bottom: .5em; padding: 1em; border-radius: 3px; } #login form p { font-size: .75em; margin: 0; } .error { color: #880000; } .success { color: #008800; } ul.error { border: 3px solid #880000; padding: 5px; } ul.success { border: 3px solid #008800; padding: 5px; } input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="date"], input[type="url"], input[type="tel"], input[type="file"], textarea { border: 1px #aaa solid; border-radius: 0; margin-bottom: 0.5em; } input[type="text"].error, input[type="password"].error, input[type="search"].error, input[type="email"].error, input[type="date"].error, input[type="url"].error, input[type="tel"].error, input[type="file"].error, textarea.error { border-color: #800; } .disabled { color: #c2c2c2; } .disabled a { color: #c2c2c2; } #login button { margin: .5em 0; padding: .5em 1em; } .overlay-shadow { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, .5); } .overlay-box { position:fixed; top:2em; left:0; right:0; background:#F0F4F7; margin:auto; max-width:400px; padding:1em; width:90%; } .overlay-box p { text-align: center; } .overlay-box button { display:block; width:100%; margin:1em 0 0 0; padding:.75em 0; } /*#main, header, #logo { -webkit-filter:blur(2px); }*/ /* Login --------------------------------------- */ #login { max-width:40%; margin: 0 auto; padding: 1em 0 2em; } #login h1 { font-size: 2em; text-align: center; margin: 0; } #login h1 + p { text-align: center; margin-bottom: 2em; } #login form { background: #eff3f6; padding: 1em; } #login fieldset { background: #fff; margin-bottom: .5em; padding: 1em; border-radius: 3px; } #login form p { font-size: .75em; margin: 0; } .error { color: #880000; } .success { color: #008800; } ul.error { border: 3px solid #880000; padding: 5px; } ul.success { border: 3px solid #008800; padding: 5px; } input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="date"], input[type="url"], input[type="tel"], input[type="file"], textarea { border: 1px #aaa solid; border-radius: 0; margin-bottom: 0.5em; } input[type="text"].error, input[type="password"].error, input[type="search"].error, input[type="email"].error, input[type="date"].error, input[type="url"].error, input[type="tel"].error, input[type="file"].error, textarea.error { border-color: #800; } .disabled { color: #c2c2c2; } .disabled a { color: #c2c2c2; } #login button { margin: .5em 0; padding: .5em 1em; } #nlcontent { display: none; position: fixed; width: 300px; max-width: 97%; max-height: 100%; font-size: 16px; right: -1000px; bottom: 0.8em; background-color: #fff; box-shadow: 0px 1px 4px 0 rgba(0,0,0,0.5); z-index: 10002; } #nlcontent .big-fly { position: absolute; right: -5px; top: -16px; width: 33%; } #nlcontent .logo { position: absolute; left: 22px; top: 20px; width: 43%; } #nlcontent article { right: 10%; width: 100%; height: 100%; overflow: scroll; background-image: url("../images/popup-bg-mobil.png"); background-position: 0 84px; background-repeat: no-repeat; background-size: 100%;} #nlcontent .button.close { font-family: "Droid Sans","Helvetica Neue",Arial,Helvetica,sans-serif; color: #9db5c7; position: absolute; right: 0; margin: 10px 15px 0 0; width: 20px; height: 20px; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50%; cursor: pointer; z-index: 99999999; } #nlcontent ul { margin: 85px 0 0 20px; } #nlcontent .mobile-display-none { display: none; } #nlcontent ul li { padding-left: 18px; font-weight: bold; text-align: left; font-size: 12px; line-height: 1.6; background-image: url("../images/check-mobil.png"); background-position: 0px 2px; background-repeat: no-repeat; } #nlcontent form { margin-top: 95px; margin-left: 22px; margin-right: 22px; margin-bottom: 0; } #nlcontent .selectbox { margin: 5px 0; position: relative; font-family: "Droid Sans","Helvetica Neue",Arial,Helvetica,sans-serif; } #nlcontent .selectbox span { cursor: pointer; background-color: #fff; padding: 8px 12px; border: 1px solid #9cb4c7; color: #1e3e52; font-size: 12px; font-weight: bold; text-align: left; width: 90%; display: inline-block; position: relative; font-family: "Droid Sans","Helvetica Neue",Arial,Helvetica,sans-serif; } #nlcontent .selectbox img { position: absolute; right: 12px; top: 13px; cursor: pointer; } #nlcontent .selectbox ul { width: 99.4%; position: absolute; display: none; margin: 1px 0 0 0; border: 1px solid #9cb4c7; background-color: #fff; } #nlcontent .selectbox ul li { cursor: pointer; color: #9db5c7; background-image: none; background-color: #fff; padding: 5px; font-size: 12px; } #nlcontent .selectbox ul li img { display: none; } #nlcontent label, #nlcontent select { display: block; text-align: left; } #nlcontent input { width: 100%; color: #1e3e52; border: 1px solid #9cb4c7; padding: 8px 12px; margin: 5px 0px; height: 38px; } input[placeholder], [placeholder], *[placeholder] { color: #9cb4c7 !important; font-weight: bold; font-size: 12px;} #nlcontent .msg { margin-top: 25px; } #nlcontent .success { margin: 25px 40px; text-align: left; } #nlcontent .btn { margin: 15px; font-size: 16px; border-radius: 10px; } /* =================================================================================================== F O O T E R =================================================================================================== */ footer[role=contentinfo] { background: url(../images/dotted-line.png) repeat-x; font-size: 87.5%; /* text-align: left; */ margin: 0 4%; padding: 1.5em 0; } footer[role=contentinfo] #footernav { overflow: hidden; } footer[role=contentinfo] #footernav li { display: inline-block; } footer[role=contentinfo] #footernav li:after { content: " | "; color: #c0c4c7; display: inline-block; margin: 0 .375em; } footer[role=contentinfo] #footernav ul li:last-child:after { content: ""; } footer[role=contentinfo] #footernav p a { color: #1f4159; } footer[role=contentinfo] #footernav a:hover { color: #ff583d; } /* =================================================================================================== M E D I A Q U E R I E S > Min-width: 375px =================================================================================================== */ @media only screen and (min-width: 375px) { #nlcontent .mobile-display-none { display: block; } #nlcontent form { margin-top: 15px; } } /* =================================================================================================== M E D I A Q U E R I E S > Min-width: 480px =================================================================================================== */ @media only screen and (min-width: 480px) { #masthead { background: #fff url(../images/banner-tablet.png) bottom center no-repeat; height: 360px; } .headerbutton { transform:translate(-231px,0); top:213px;} .banner .bannertitle { padding: 5% 5% 5% 48%; line-height: 25px; font-size:25px;} #filter label { width: 46%; margin: 0; padding-right: 4%; } #filter select { width: 50%; } li.big:after, .likes li:nth-of-type(n+2) { display: inline-block; } #content article > p { width: 15%; } #content article > p span { font-size: 3em; } #content article > a > img { float: left; width: 40%; } #content article > div { width: 85%; margin-left: 15%; } .likes ul { display:inline-block; } a.toggleshare { display: none; } .pagination a { width: auto; } .archive > div { float: left; width: 50%; } #nlcontent { width: 500px; height: 525px; bottom: 2em; } #nlcontent .big-fly { right: -7px; top: -40px; } #nlcontent .logo { left: 40px; top: 20px; width: 50%; } #nlcontent article { right: 10%; width: 100%; height: 100%; overflow: scroll; background-image: url("../images/popup-bg.png"); background-position: 0px -30px; background-repeat: no-repeat; background-size: auto; } #nlcontent ul { margin: 135px 40px 0; } #nlcontent ul li { padding-left: 28px; font-size: 20px; background-image: url("../images/check.png"); background-position: 0px 5px; background-repeat: no-repeat; } #nlcontent form { margin-top: 15px; margin-left: 40px; margin-right: 40px; margin-bottom: 0.75em; } #nlcontent .selectbox span { font-size: 14px; width: 93.8%; } #nlcontent .selectbox ul { margin: 0; } #nlcontent .selectbox img { right: 15px; top: 15px; } #nlcontent input { padding: 8px 12px; height: 38px; } #nlcontent input#lastname { margin-left: 10px; } #nlcontent input.short-input { width: 48.1%; } input[placeholder], [placeholder], *[placeholder] { font-size: 14px;} #nlcontent input.error { border-color:#ff0000; } #nlcontent .btn { font-size: 20px; padding: 8px 25px; } #nlcontent .mobile-display-none { display: block; } } /* =================================================================================================== M E D I A Q U E R I E S > Min-width: 600px =================================================================================================== */ @media only screen and (min-width: 600px) { #masthead.xmas { background:#fff url("../images/xmas2015-big.png") no-repeat center center; background-size: cover; } #masthead.newyear { background:#fff url("../images/newyear2015-big.png") no-repeat center center; background-size: cover; } #main { margin: 0 3%; } .banner .bannertitle { padding: 5% 5% 5% 48%; line-height: 31px; font-size:31px;} #kampa>section { width: 49%; margin-left: 2%; min-height: 27em; } #kampa>section:nth-child(odd) { clear: left; margin-left: 0; } #kampa>section:first-child { margin-left: 0; } #content article > p { float: left; width: 4.5em; margin-right: .5em; } #content article > p span { font-size: 3em; letter-spacing: -2px; } #content article > p:after { font-size: 87.5%; letter-spacing: 1px; } #content article > a > img { display: block; float: left; width: 10em; margin-right: 1.25em; /* margin-bottom: 1.5em; */ } #content article > a > img.lazyload { display:none; } #content article > div { width: auto; margin-left: 0; } .moreinfos div.left, .moreinfos div.right { width: 49% } footer[role=contentinfo] { margin: 0 3%; } } /* =================================================================================================== M E D I A Q U E R I E S > Min-width: 768px =================================================================================================== */ @media only screen and (min-width: 768px) { #masthead { background: #fff url(../images/banner-tablet-big.png) bottom center no-repeat; } #masthead.xmas .xmasText{ line-height: 35px; font-size: 37px; padding-bottom: 50px; margin-top: 10px; } #masthead.newyear .newyearText{ line-height: 35px; font-size: 37px; padding-bottom: 50px; margin-top: 10px; } .headerbutton { transform:translate(-355px,0); top:241px;} #metanav { background: #1f4159; font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 87.5%; text-transform: uppercase; display: block; overflow: hidden; } #metanav ul { overflow: hidden; float: right; } #metanav ul:first-child { float: left; border-left: 0 none; } #metanav li { display: inline; } #metanav li a { color: #d2e8f6; float: left; padding: .875em 1.25em; border-left: 1px solid #d2e8f6; } #metanav ul:first-child li:first-child a { border-left: 0 none; } #metanav ul li:last-child a { border-right: 0 none; } #metanav ul:first-child li:last-child a { border-right: 1px solid #d2e8f6; } #metanav li a:hover { color: #fff; } .banner .bannertitle { padding: 5% 5% 0 48%; } .banner .bannertext { display:block; font-size:15px; font-weight: normal; padding: 0 5% 10px 48%; text-align: left;} #main { margin: 0 2%; } .archive header.page-title { padding-bottom: .4em; } header.page-title h2, header.page-title p { display: inline-block; } .ie8 header.page-title h2, .ie8 header.page-title p { margin-right: 1px; } header.page-title p { margin-left: .5em; margin-bottom: .5em; } header.page-title a:first-child { border-width: 1px; } #content article > a > img { width: 14em; } footer[role=contentinfo] { margin: 0 2%; } footer[role=contentinfo] #footernav { text-align: left; } footer[role=contentinfo] #footernav p { float: left; } footer[role=contentinfo] #footernav ul { float: right; } footer[role=contentinfo] #footernav ul + ul { clear: right; float: right; } .archive > div { width: 33.3334%; } } /* =================================================================================================== M E D I A Q U E R I E S > Min-width: 992px =================================================================================================== */ @media only screen and (min-width: 992px) { #masthead.xmas .xmasText{ line-height: 35px; font-size: 37px; margin-top: 80px; } #masthead.newyear .newyearText{ line-height: 35px; font-size: 37px; margin-top: 80px; } #masthead { position: relative; background: #fff url(../images/banner-desktop.png) bottom left no-repeat; height: 350px; } .headerlink { width: 427px; height: 129px; top: 105px; left: 33px; } .headerbutton {top: 224px; left: 34px; transform:translate(0,0);} a#logo { position: absolute; right: 25px; bottom: 0; } a#logo img { width: 8em; } /*a#logo img { width: 14em; }*/ .banner { display:block; height:170px; width:767px; background: url("../images/10000fliesproteaser.png") no-repeat top left; text-align: left; position: absolute; left: 50%; top: 60px; margin-left: -383px;} .banner .bannertitle { font-size: 20px; padding: 5% 5% 0 48%; } .banner .bannerlink { margin: 0 0 10px 48%} #content { float: left; width: 66%; } header.page-title { text-align: left !important; } #kampa { float: right; width: 32%; border: 0 none; padding-top: 0; } #kampa>section { width: 100%; min-height: 1em !important; margin-left: 0; } #kampa>section.blog article:nth-of-type(n+2) { display: block; } } /* =================================================================================================== M E D I A Q U E R I E S > Retina Styles =================================================================================================== */ @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .likes li:before, .share li:before, #recommend li a:before, #abo li a:before, #abo li.rss a:before, .toggleshare:before, #kampa .topcharts article p.flies-count:before { background-image: url(../images/icons@2x.png); background-size: 400px; } } /* =================================================================================================== M E D I A Q U E R I E S > Print Styles =================================================================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; box-shadow: none !important; filter: none !important; -ms-filter: none !important; } @page { margin: .5cm; } nav { display: none; } a, a:visited { color: black !important; text-decoration: underline; } pre, blockquote { page-break-inside: avoid; } tr, img { page-break-inside: avoid; } td { border-top: 1px solid black; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } p, h1, h2, h3, h4, h5, h6 { orphans: 3; widows: 3; } ul { list-style: disc inside; padding: 0 1em; } ol { list-style: decimal inside; padding: 0 1em; } }