/* author: webdecker.de, Aug 2014 */ /* -------------------------------------- */ /* Basics, reset */ /* -------------------------------------- */ body { background-color: #ffffff; color: #333; font-size: 100%; line-height: 160%; padding: 0; margin: 0; } div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea { margin: 0; padding: 0; } table { border-spacing: 0; border-collapse: collapse; } caption, th, td { text-align: left; vertical-align: top; } abbr, acronym { font-variant: normal; border-bottom: 1px dotted #666; cursor:help; } blockquote, q { quotes: none; } fieldset, img { border:0; } ul { list-style-type: none; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } del { text-decoration: line-through; } ins { text-decoration: none; } .printblock { display: none; } .printinline { display: none; } .screenblock { display: block; } .screeninline { display: inline; } .clear { clear: both; display: block; position: relative; height: 0; } body#top div .invisible { display: none; } .inside { position: relative; } .block { position: relative; } p { margin-bottom: 20px; } /* ol li { color: #D0A964; } */ ul, ol { list-style-position: outside; padding-left: 0px; } ul { list-style-type: circle; } ul li, ol li { margin-left: 30px; } ul li > div, ol li > div { color: #333; } ul li > div.li, ol li > div.li { margin-left: 10px; } #additional ul.related { list-style-type: none; margin-left: 0; } #additional ul.related > li { margin-left: 0; } #additional ul.related > li > div.li { margin-left: 0; } #search ul.result { list-style-type: none; margin-left: 0; } #search ul.result > li { margin-left: 0; padding-bottom: 15px; } #search ul.result > li > div.li { margin-left: 0; } .grey { color: #aaaaaa; } .greyline { color: #aaaaaa; display: block; } /* -------------------------------------- */ /* Fonts */ /* -------------------------------------- */ /* font-family:'Avenir LT W01 35 Light'; font-family:'AvenirLTW01-35LightObli'; font-family:'Avenir LT W01 45 Book'; font-family:'AvenirLTW01-45BookObliq'; font-family:'Avenir LT W01 55 Roman'; font-family:'AvenirLTW01-55Oblique'; font-family:'GeorgiaProW01-Regular'; font-family:'GeorgiaProW01-Italic'; font-family:'GeorgiaProW01-SemiBold'; font-family:'GeorgiaProW01-SemiBoldI'; */ a { color: #333; text-decoration: none; } a:hover { color: #888; text-decoration: none; } p a { text-decoration: underline; } #startshow .box .number { font-family: 'Bodoni W01 Poster', Garamond, Times, Times New Roman, serif; font-weight: normal; font-style: normal; } /* 'ITCModernNo.216W01-Md', */ /* SERIF NORMAL */ body { font-family: GeorgiaProW01-Regular, Garamond, Times, Times New Roman, serif; font-weight: normal; font-style: normal; } /* SERIF ITALIC */ em, h2,h3,h4,h5, .ce_project_item div.link, span.link, .num, input.submit, div.italic, .back a { font-family: GeorgiaProW01-Italic, Garamond, Times, Times New Roman, serif; font-weight: normal; font-style: normal; text-transform: none; letter-spacing: 0.5px; } .ce_project_item div.link { font-family: GeorgiaProW01-Italic, Garamond, Times, Times New Roman, serif; } /* SERIF BOLD */ strong, b, #wrapper .layout_full table .col_0 { font-family: GeorgiaProW01-SemiBold, Garamond, Times, Times New Roman, serif; font-weight: normal; font-style: normal; text-transform: none; } .layout_full h2, #wrapper .layout_full .teaser { font-family: GeorgiaProW01-SemiBoldI, Garamond, Times, Times New Roman, serif; font-weight: normal; font-style: normal; text-transform: none; } /* SANS NORMAL NORMAL */ #logo span.title, #footer a { font-family: 'Avenir LT W01 45 Book', Trebuchet MS, Arial, sans-serif; font-weight: normal; font-style: normal; text-transform: none; } /* SANS NORMAL UPPERCASE (buttons, inputs, menu) */ h1, .filter h3, .filter label, #wrapper .mod_newslist .info, #wrapper .mod_newsreader .info, .overview .label, #main_menu a, #footer, #logo span.subtitle, #startshow .box .text, #startaniskip a, ul.overview .catc a.arrow, .arrow a { font-family: "Avenir LT W01 35 Light", Trebuchet MS, Arial, sans-serif; font-weight: normal; font-style: normal; text-transform: uppercase; letter-spacing: 1.3px; } input, textarea { font-family: "Avenir LT W01 35 Light", Trebuchet MS, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 100%; } input:placeholder-shown, textarea:placeholder-shown { color: #888888; text-transform: uppercase; } /* SANS BOLD UPPERCASE */ #main_menu a.level_1 { font-family: "Avenir LT W01 55 Roman", 'Avenir LT W01 45 Book', Trebuchet MS, Arial, sans-serif; font-weight: bold; font-style: normal; text-transform: uppercase; } .mod_newsreader .archive_recipes { font-family: "Avenir LT W01 35 Light", 'Avenir LT W01 45 Book', Trebuchet MS, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: 0; } .mod_newsreader .archive_recipes .italic, .mod_newsreader .recipes em { font-family: "AvenirLTW01-35LightObli", Trebuchet MS, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: 0; } .mod_newsreader .archive_recipes strong { font-family: "Avenir LT W01 55 Roman", Trebuchet MS, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mod_newsreader .archive_recipes .ingredients p { color: #888; padding-left: 15px; margin-bottom: 10px; } .mod_newsreader .archive_recipes .ingredients p a { color: #888; } .mod_newsreader .archive_recipes .ingredients strong { display: block; margin-left: -15px; color: #333; } .mod_newsreader .archive_recipes .ingredients strong a { color: #333; } .mod_newsreader .archive_recipes .ingredients .normal { display: block; margin-left: -15px; color: #333; } /* .mod_newsreader .archive_recipes h2, .mod_newsreader .recipes h3 { font-family: "Avenir LT W01 35 Light", 'Avenir LT W01 45 Book', Trebuchet MS, Arial, sans-serif; } */ /* sizes, colors, line-heights, margins... */ #logo span { display: block; text-align: center; } #logo span.title { font-size: 28px; letter-spacing: 1.2px; padding-bottom: 6px; } #logo span.subtitle { font-size: 14px; line-height: 14px; letter-spacing: 0.3px; } /* input, textarea { font-size: 90%; color: #333; } */ input.submit { font-size: 100%; } h1 { font-size: 100%; margin-bottom: 15px; } h2 { font-size: 130%; margin-bottom: 15px; } h3 { font-size: 100%; } h4 { font-size: 100%; } .ce_project_item .info h1 { letter-spacing: 2px; } #wrapper .mod_newslist .info, #wrapper .mod_newsreader .info { font-size: 75%; } #wrapper .mod_newsreader .info { } .overview .label { font-size: 80%; line-height: 140%; } #main_menu a { font-size: 80%; line-height: 140%; } #main_menu a:hover, #menu a.active, #menu a.trail { color: #888; } #additional .related > li, #search li { padding-bottom: 10px; } #additional > div > div > h1, #search h1 { font-size: 100%; line-height: 140%; } .numtext .num { font-size: 120%; } #footer { font-size: 90%; } /* see moo-functions.js, ContentProjectItemView too!!!!!!!!!!!!!!!! */ #wrapper .colored, #wrapper .colored strong, p.error, #main ul li, #main ol li, .numtext a { color: #D0A964; } /* -------------------------------------- */ /* Layout */ /* -------------------------------------- */ /* 1185 x 620 ani pix */ /* z-index */ #menu_toggler { z-index: 4; } #search_toggler { z-index: 3; } #menu { z-index: 2; } #wrapper { z-index: 1; } /* basic layout */ .width { width: 1184px; } .mw { width: 290px; } /* menu width, i.e. 240 + 50 pad */ .mwpm { margin-left: -290px; padding-left: 290px; } /* menu width padding margin */ .hh { height: 105px; } /* header height */ .hhp { padding-top: 105px; } /* header height padding */ #all { margin: 30px auto 30px auto; position: relative; } #allin { width: 100%; overflow: hidden; } #allout { width: 200%; } #menu_toggler { position: absolute; top: 10px; right: 0; width: 30px; height: 30px; } #search_toggler { position: absolute; top: 10px; right: 40px; width: 30px; height: 32px; overflow: hidden; } #topsearch { width: 240px; } #wrapper { float: left; position: relative; } #header { } #logo { /*float: left;*/} #logo a img{ position: relative; display: block; height: auto; width: 138px; display: block; margin: 0 auto;} #container { padding-bottom: 30px; } #main > .inside { } /* overflow: hidden; */ .alias_index #main > .inside { min-height: 620px; } #menu { float: left; position: relative; } #menu .inside { padding-left: 50px; } #overview { overflow: hidden; display: block; } #footer { border-top: 1px solid #333; padding-top: 25px; } #copy { float: left; } #service_menu { float: right; } #femail { float: right; } /* articles */ .mod_article { position: relative; display: table; /* to get margins of elems in block filled ... was: border-bottom: 1px solid transparent; */} .mod_article { width: 780px; margin: 0 auto 0 auto; } .mod_article.wide { width: 80%; } .mod_article.full { width: 100%; } #item, #overview, #items, #start { width: 100%; } #articles > .inside { width: 785px; margin: 0 auto 0 auto; } #articles > .mod_newsreader { width: 80%; margin: 0 auto 0 auto; } /* retina, resized img */ .img img { width: 100%; height: auto; } /* height: 100%; */ .image_container img { max-width: 100%; height: auto; } span.w100 img, img.w100 { width: 100%; } /* height: 100%; */ span.w50 img, img.w50 { width: 50%; float: left; margin-right: 20px; margin-bottom: 20px; } /* height: 100%; */ span.w20 img, img.w20 { width: 20%; float: left; margin-right: 20px; margin-bottom: 20px; } /* height: 100%; */ div.w50 .image_container { width: 50%; } div.w20 .image_container { width: 20%; } div.w100 .image_container img, div.w100 .image_container img, div.w50 .image_container img, div.w20 .image_container img { width: 100%; } /* height: 100%; */ /* .img.retina { background-color: transparent; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; background-size: 100% 100%; } .resize .img { width: 100%; background-size: 100% 100%; } .img.resize img { width: 100%; height: auto; } .resize figure img { width: 100%; height: auto; } */ /* .wrapper.colored { width: 400%; position: relative; display: block; margin-left: -150%; margin-right: -150%; background-color: #eeeeee; } .wrapper.colored > .inside { width: 25%; position: relative; display: block; margin: 0 auto 0 auto; } */ /* -------------------------------------- */ /* Menus */ /* -------------------------------------- */ #menu_toggler a { display: block; color: transparent; font-size: 0; line-height: 0; width: 30px; height: 30px; } #menu_toggler a { background: transparent url(../img/menue_mouseover.png) 0 0 no-repeat; background-size: 28px 23px; } #menu_toggler a:hover { background-image: url(../img/menue.png); } #menu_toggler a.active { background-image: url(../img/close_mouseover.png); background-size: 20px 20px; } #menu_toggler a.active:hover { background-image: url(../img/close.png); } #main_menu ul { list-style-type: none; margin-left: 0px; padding-left: 0; } #main_menu ul li { color: #333; margin-left: 0; } #main_menu ul li a { display: block; padding-bottom: 10px; } #main_menu a { color: #333; text-transform: uppercase; } #main_menu .item_about { margin-top: 10px; } #service_menu ul { list-style-type: none; margin-left: 0px; padding-left: 0; } #service_menu li { display: inline-block; margin-left: 0; } #service_menu li:before { content:"|"; } #service_menu li.first:before { content:""; } #service_menu a { padding: 0 20px 0 20px; } #service_menu .last a { padding: 0 0 0 20px; } #search_toggler a { display: inline-block; color: transparent; font-size: 0; line-height: 0; width: 30px; height: 30px; vertical-align: top; margin-top: 1px; margin-right: 5px; } #search_toggler a { background: transparent url(../img/search_mouseover.png) 0 0 no-repeat; background-size: 22px 22px; } #search_toggler a:hover { background-image: url(../img/search.png); } /* -------------------------------------- */ /* Icons */ /* -------------------------------------- */ .icon { display: inline-block; padding: 5px 0 10px 40px; background-image: none; background-repeat: no-repeat; background-position: 0 0; } /* -------------------------------------- */ /* modules, content elements */ /* -------------------------------------- */ /* -------------------------------------- */ /* slideshow */ /* -------------------------------------- */ .slideshow { z-index: 1; clear: both; position: relative; } .slideshow .stage { z-index: 1; clear: both; position: relative; overflow: hidden; } .slideshow .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .slideshow .height { z-index: 0; width: 100%; height: 0px; margin-bottom: 52.320675%; position: relative; } #startani { background-color: #ffffff; } #startaniskip { text-align: center; } #startshow { width: 100%; } #startshow .height { margin-bottom: 52.320675%; } #startshow .slide .imgbg { width: 100%; position: absolute; top: 0; left: 0; } #startshow .slide .imgbg img { width: 100%; } #startshow .box { width: 460px; margin: 200px auto 0 auto; overflow: hidden; position: relative; } #startshow .box .bg { z-index: 1; width: 460px; height: 100%; position: absolute; top: 0; left: 0; background-color: #ffffff; opacity: 0.8; } #startshow .box > .inside { z-index: 2; width: 452px; border: 2px solid #333; padding: 2px; } #startshow .content { position: relative; width: 450px; border: 1px solid #333; text-align: center;} #startshow .box .number { } #startshow .box .number { font-size: 120px; line-height: 100%; padding-top: 10px;} #startshow .box .text { text-transform: uppercase; margin-top: -20px; margin-bottom: 20px; } #startshow span.digit { display: inline-block; position: relative; height: 120px; overflow: hidden; } #startshow span.digit span { display: block; position: relative; } #startshow span.digit span span { height: 120px; } #startshow span.digit img { width: 120px; } .mobile .item_intro { display: none; } /* slideshow menu */ .slideshow_menu { text-align: center; width: 100%; padding-top: 10px; } .slideshow_menu ul { margin: 0; padding: 0; } .slideshow_menu ul li { display: inline-block; margin: 2px 6px 2px 6px; background: none; } .ie7 #container .slideshow_menu ul li { display: inline; } .slideshow_menu a { display: block; color: #D0A964; font-size: 350%; } .slideshow_menu a.active, .slideshow_menu a:hover { color: #333; } /* -------------------------------------- */ /* forms */ /* -------------------------------------- */ /* form { width: 104%; margin-left: -2%; margin-right: -2%; } */ form#topsearch { margin-left: 0; margin-right: 0; } .formbody { margin: 0 -20px 0 -20px; } div.widget, .submit_container { padding: 0 20px 20px 20px; float: left; width: 50%; box-sizing: border-box; } /* width: 46%; margin-left: 2%; margin-right: 2%; */ input, textarea { border: 1px solid #333; padding: 7px 7px 8px 7px; color: #333; } #search_toggler input { width: 150px; padding: 5px; border: none; } #search_toggler input { border-bottom: 1px solid #333; } form .label { display: block; width: 140px; padding-right: 10px; float: left; display: none; } form .input { display: block; /* margin-left: 150px; */ } form .widget input, form .widget textarea { width: 100%; box-sizing: border-box; } body form .checkbox_container input, body form .radio_container input { width: auto; display: inline-block; margin-right: 10px; border: 0; box-sizing: border-box; } .ce_comments .label { width: 210px; } .ce_comments .input { /* margin-left: 220px; */ } .ce_comments .submit_container { clear: both; float: none; } .ce_comments { overflow: hidden; margin-bottom: 20px; } .ce_comments h2 { padding-left: 30px; background: transparent url(/files/theme/img/arrow_d_mouseover.png) 0 8px no-repeat; background-size: auto 10px; } .ce_comments h2.open { background: transparent url(/files/theme/img/arrow_u_mouseover.png) 0 8px no-repeat; background-size: auto 10px; } .ce_comments h2:hover { color: #bbb; background: transparent url(/files/theme/img/arrow_d.png) 0 8px no-repeat; background-size: auto 10px;} .ce_comments h2.open:hover { background: transparent url(/files/theme/img/arrow_u.png) 0 8px no-repeat; background-size: auto 10px; } .ce_comments .coloredbg { margin-bottom: 32px; } .ce_comments .coloredbg form {margin-bottom: 0; } .submit_container { float: none; } .submit_container span.submit { border: 2px solid #333; padding: 2px; display: inline-block; background-color: #fff; } .submit_container span.submit input { border: 1px solid #333; background-color: transparent; color: #333; padding: 2px 14px 3px 14px; display: block; } .submit_container span.submit:hover { border-color: #ffffff; background-color: #000000; color: #ffffff; cursor: pointer; } .submit_container span.submit:hover input { border-color: #ffffff; color: #ffffff; cursor: pointer; } /* .submit_container .button { display: inline-block; border: 2px solid #333; padding: 2px; } .submit_container .button input { border: 1px solid #333; background-color: transparent; color: #333; padding: 2px 10px 3px 10px; } .submit_container .button:hover { cursor: pointer; border-color: #ffffff; background-color: #222222; color: #ffffff; } .submit_container .button:hover input { border-color: #ffffff; background-color: #222222; color: #ffffff; } */ form { margin-bottom: 20px; } form#search { padding-bottom: 50px; } form#search .submit_container { float: left; } #contact #field_5, #com_comment, #com_captcha, #com_notify { width: 100%; } #contact #field_5 textarea, form #com_comment textarea, form #com_captcha input{ width: 100%; } form.filter { } form.filter .formbody { margin: 0; padding: 24px; background-color: #efefef; } form.filter .filter { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #333; } form.filter h1 { padding-left: 24px; } form.filter .filter .content .inside { box-sizing: border-box; position: relative; padding-top: 12px; } form.filter label { font-size: 12px; line-height: 16px; } form.filter span.link { display: inline-block; } form.filter .submit_container { padding: 24px 24px 0 0; width: 100%; } form.filter .toggle { line-height: 25px; } form.filter .toggle:hover { color: #888; } form.filter label:hover { color: #888; } /* form.filter .toggle:before { content: '˅'; display: inline-block; margin-right: 10px; font-size: 18px; line-height: 25px; vertical-align: bottom; } form.filter .toggle.open:before { content: '˄'; } arrow_d_mouseover.png */ form.filter .toggle { padding-left: 35px; background: transparent url(/files/theme/img/arrow_d_mouseover.png) 0 8px no-repeat; background-size: auto 10px; } form.filter .toggle.open { background-image: url(/files/theme/img/arrow_u_mouseover.png); } form.filter .toggle:hover { background-image: url(/files/theme/img/arrow_d.png); } form.filter .toggle.open:hover { background-image: url(/files/theme/img/arrow_u.png); } form.filter .input { padding-left: 22px; } form.filter .input input { margin-left: -20px; margin-right: 8px; } /* -------------------------------------- */ /* project specific */ /* -------------------------------------- */ /* item view */ .numtext .num { float: left; padding-right: 15px; width: 110px; } .numtext .numtext { padding-left: 15px; border-left: 1px solid #333; margin-left: 130px; } .recipes .num { width: 65px; } .recipes .numtext .numtext { margin-left: 80px; } .info .num { width: 65px; } .info .numtext .numtext { margin-left: 80px; } /* .numtext .num { float: left; padding-right: 15px; width: 65px; } .numtext .numtext { margin-left: 80px; padding-left: 15px; border-left: 1px solid #333; } .blog .numtext .num { width: 110px; } .blog .numtext .numtext { margin-left: 130px; } .kitchen .numtext .num { width: 110px; } .kitchen .numtext .numtext { margin-left: 130px; } .layout_latest .numtext .num { width: 110px; } .layout_latest .numtext .numtext { margin-left: 130px; } */ #search .numtext .num { width: 30px; } #search .numtext .numtext { margin-left: 50px; } #articles { overflow: hidden; } #article { overflow: hidden; } #category { overflow: hidden; } #item, .ce_project_item { width: 100%; overflow: hidden; } .ce_project_item .content { position: relative; display: block; } .ce_project_item .info { width: 386px; } .ce_project_item .info { z-index: 2; position: absolute; top: 100px; right: 0; } .ce_project_item .info h1 { border-bottom: 2px solid #333; margin-bottom: 2px; padding-bottom: 10px; } .ce_project_item .info > .numtext { border-top: 1px solid #333; } .ce_project_item .num, .ce_project_item h2 { padding-top: 12px; } .ce_project_item .image { z-index: 1; position: relative; display: block; } .ce_project_item .image .img { width: 960px; min-height: 611px; } /* width: 860px; */ .ce_project_item .image .m50 { margin-left: -50px; } .ce_project_item .image .m40 { margin-left: -40px; } .ce_project_item .image .m30 { margin-left: -30px; } .ce_project_item .image .m20 { margin-left: -20px; } .ce_project_item .image .m10 { margin-left: -10px; } .ce_project_item .sharing { float:left; padding-top: 12px; position: relative; width: 100px; display: block; height: 30px; padding-bottom: 15px; } .ce_project_item .sharing img { width: 18px; } .safari .ce_project_item .sharing { padding-top: 8px; } .ie .ce_project_item .sharing img { height: 18px; } .ce_project_item .links { float: right; text-align: right; } .ce_project_item div.link { display: inline-block; vertical-align: top; margin-bottom: 15px; margin-left: 15px; } .ce_project_item div.dummy { width: 100%; height: 1px; margin: 0; padding: 0; line-height: 0; font-size: 0; } .ce_project_item .sharing div.link { margin-left: 0; margin-right: 10px; margin-bottom: 0; padding-bottom: 15px; } .ce_project_item div.link a { display: block; } span.link { display: block; border: 2px solid #b3b3b3; padding: 2px; } span.link span { display: block; border: 1px solid #b3b3b3; height: 26px; padding: 3px 8px 3px 8px; color: #b3b3b3; } span.link.current { border-color:#b3b3b3; } span.link.current span { border-color: #b3b3b3; color: #b3b3b3; } .ce_project_item .category span.link span { padding-right: 6px; padding-left: 6px; } a.link span.link { border-color: #333; } a.link span.link span { border-color: #333; color: #333; } a.link:hover span.link { background-color: #222222; color: #ffffff; border-color: #ffffff; } a.link:hover span.link span { background-color: #222222; color: #ffffff; border-color: #ffffff; } .ce_project_item a.category span.link span { color: transparent; font-size: 0; line-height: 0; width: 22px; background: transparent url(../img/overview.png) center center no-repeat; background-size: 16px 16px; } .ce_project_item a.category:hover span.link span { background-image: url(../img/overview_mouseover.png); background-color: #222222; color: #ffffff; border-color: #ffffff; } .ce_project_item .prevnext { display: block; position: absolute; top: 50%; z-index: 100; } .ce_project_item .prevnext a { display: block; width: 56px; height: 87px; color: transparent; font-size: 0; line-height: 0; } .ce_project_item .prev { left: 0; } .ce_project_item .next { right: 0; } .ce_project_item .prev a { background: transparent url(../img/arrow_l.png) 0 20px no-repeat; background-size: 16px 27px; } .ce_project_item .next a { background: transparent url(../img/arrow_r.png) 40px 20px no-repeat; background-size: 16px 27px; } .ce_project_item .prev a:hover { background-image: url(../img/arrow_l_mouseover.png); } .ce_project_item .next a:hover { background-image: url(../img/arrow_r_mouseover.png); } /* category / overview */ ul.category { list-style-type: none; margin-left: 0; padding-left: 0; } ul.category li { float: left; margin-left: 0; width: 33.3%; } /* 395px */ ul.category li .img { width: 100%; } .related_items ul.category li { width: 33.3%; /* width: 260px; */ } ul.category li.nl3 { clear: both; } ul.overview { list-style-type: none; margin-left: 0; padding-left: 0; padding-bottom: 32px; overflow: hidden; position: relative; } ul.overview li { z-index: 1000; } ul.overview > li { float: left; margin-left: 0; text-align: center; width: 20%; display: block; position: relative; box-sizing: border-box; } /* 237px */ ul.overview li.item { border: 2px solid transparent; margin-top: 4px; /* margin-bottom: 20px; */ } ul.overview li.item > div { display: block; position: relative; box-sizing: border-box; border: 1px solid transparent; } ul.overview li.item > div > div { display: block; display: block; position: relative; box-sizing: border-box; border: 1px solid transparent; } ul.overview li.item > div > div > a { display: block; display: block; position: relative; height: 230px; box-sizing: border-box; } ul.overview img { display: block; } /* ul.overview li:hover { border-color: #000; } ul.overview li:hover > div > div { border-color: #000; } */ ul.overview li:hover > div > div > a img { opacity: 0.7; } ul.overview li:hover > div > div > a .label { opacity: 0.7; } ul.overview li:hover .line { opacity: 0.7; visibility: visible; } ul.overview li .img, .related_items ul.category li .img { width: 100%; } ul.overview li .label { margin: 10px; } ul.overview > li.nl5 { clear: both; } ul.overview ul.category li.nl3 { clear: none; } ul.overview ul.category li { width: 50%; } ul.overview ul.category li:nth-child(2n+1) { clear: both; } ul.overview .marker { display: block; position: absolute; bottom: -29px; left: 0; width: 100%; } ul.overview .marker > div { display: none; width: 43px; height: 27px; margin: 0 auto 0 auto; background: transparent url(../img/overview-pointer.png) 0 0 no-repeat; background-size: 43px 27px; } ul.overview li.open:hover { border-color: transparent; } ul.overview li.open:hover > div > div { border-color: transparent; } ul.overview li.special .img { width: 70%; margin: 0 auto 2px auto; padding-top: 12px; } ul.overview li .line { width: 25%; margin: 0px auto 4px auto; padding-top: 8px; border-bottom: 2px solid #888; visibility: hidden; } ul.overview li.special .line { width: 45%; margin: 0px auto 4px auto; padding-top: 8px; border-bottom: 2px solid #D0A964; visibility: visible; } ul.overview li.special { border-color: #000; } ul.overview li.special > div > div { border-color: #000; } ul.overview li.special.open:hover { border-color: #000; } ul.overview li.special.open:hover > div > div { border-color: #000; } ul.overview li.special .marker > div { background: #fff; width: auto; } ul.overview li.stage { width: 100%; display: block; position: relative; overflow: hidden; box-sizing: border-box; padding: 0; margin: 0 0 0px 0; float: none; text-align: left; z-index: 0; } ul.overview li.stage > div { border-top: 2px solid #000; border-bottom: 2px solid #000; margin-top: 0px; margin-bottom: 32px; } ul.overview li.stage > div > div { border-top: 1px solid transparent; border-bottom: 1px solid transparent;} ul.overview li.stage > div > div > div { border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 40px 0 40px 0; } ul.overview li.open { margin-bottom: 0; } ul.overview li.open > div > div { padding-bottom: 21px; } .firefox ul.overview li.open > div > div { padding-bottom: 22px; } .firefox ul.overview li.open { margin-bottom: -2px; } ul.overview li.open .marker > div { display: block; } ul.overview li.special.open .marker > div { display: none; } ul.overview li.special.open { border-bottom: 2px solid #fff; margin-bottom: -4px; } .firefox ul.overview li.special.open { margin-bottom: -4px; } ul.overview li.special.open > div { border-bottom: 1px solid #fff; } ul.overview li.special.open > div > div { border-bottom: 1px solid #fff; padding-bottom: 24px; } ul.overview li.special.open:hover { border-bottom: 2px solid #fff; } ul.overview li.special.open:hover > div > div { border-bottom: 1px solid #fff;} ul.overview .catc a.arrow, .arrow a { display: block; padding-left: 80px; background: transparent url(../img/overview-arrow.svg) 0 7px no-repeat; background-size: 66px 12px; margin-bottom: 12px; } ul.overview .catc .numtext .num { display: none; } ul.overview .catc .numtext .numtext { margin-left: 0; border-left: 0; padding-left: 0; } ul.overview .catc div.close { display: block; text-align: right; } ul.overview .catc a.close { display: inline-block; font-size: 40px; } ul.overview .catc .category { margin-bottom: 12px; } /* margin: 0 -4px -7px -4px; ul.overview li.special .marker .m1 { width: 100%; height: 24px; border: 2px solid transparent; border-left: 2px solid #000; border-right: 2px solid #000; box-sizing: border-box; padding: 1px; } ul.overview li.special .marker .m1 div { width: 100%; height: 24px; border-left: 1px solid #000; border-right: 1px solid #000; box-sizing: border-box; } */ /* ul.overview li.special:hover { border-color: #888; } ul.overview li.special:hover > div > a { border-color: #888; } */ /* ul.overview .catc a.close:hover { color: #222222; } */ ul.gloss { list-style-type: none; margin-left: 0; padding-left: 0; } ul.gloss li { margin-left: 0; } ul.gloss li div.li { margin-left: 0; } /* pagination */ .pagination { text-align: center; } .pagination ul { list-style: none; } .pagination ul li { margin: 0 5px 10px 5px; display: inline-block; } /* search */ #search ul.result { margin-bottom: 50px; } #search .context { margin-left: 50px; } /* retina stuff */ .retina { overflow: hidden; position: relative; background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } .retina .height { width: 100%; position: relative; height: 0; } /* wrapper */ .wrapper { position: relative; display: block; } .wrapper > .inside { position: relative; display: block; overflow: hidden; } .wrapper.col2 > .inside { margin-left: -20px; margin-right: -20px; overflow: hidden; } .wrapper.col2 > .inside > .block { width: 50%; float: left; box-sizing: border-box; padding: 0 20px 0 20px; } .wrapper.col3 > .inside { margin-left: -20px; margin-right: -20px; overflow: hidden; } .wrapper.col3 > .inside > .block { width: 33.33%; float: left; box-sizing: border-box; padding: 0 20px 0 20px; } .wrapper.col4 > .inside { margin-left: -20px; margin-right: -20px; overflow: hidden; } .wrapper.col4 > .inside > .block { width: 25%; float: left; box-sizing: border-box; padding: 0 20px 0 20px; } .wrapper.col123 > .inside { margin-left: -20px; margin-right: -20px; overflow: hidden; } .wrapper.col123 > .inside > .block { box-sizing: border-box; padding: 0 20px 0 20px; } .wrapper.col123 > .inside > .left { width: 33.33%; float: left; box-sizing: border-box; padding: 0 20px 0 20px; } .wrapper.col123 > .inside > .right { width: 66.66%; float: right; box-sizing: border-box; padding: 0 20px 0 20px; } .centered { text-align: center; } .padding { padding-top: 30px; padding-bottom: 30px; } .paddingtop { padding-top: 30px; } .paddingbottom { padding-bottom: 30px; } .margin { margin-top: 30px; margin-bottom: 30px; } .margintop { margin-top: 30px; } .marginbottom { margin-bottom: 30px; } .coloredbg { background-color: #eeeeee; box-sizing: border-box; position: relative; display: block; padding: 40px 40px 40px 40px; } .ce_text.coloredbg { background-color: #eeeeee; box-sizing: border-box; position: relative; display: block; padding: 40px 202px 40px 202px; margin: 0 -202px 40px -202px; } .wide .ce_text.coloredbg { margin-left: -12.55%; margin-right: -12.55%; padding-left: 12.5%; padding-right: 12.5%; } .mod_newsreader .ce_text.coloredbg { padding-top: 0px; margin-top: -80px; } .mod_newsreader .ce_text.coloredbg.intro { padding-top: 40px; margin-top: 0; } #additional .mod_newsreader .ce_text.coloredbg.intro { margin-top: 40px; } /* #additional .ce_text.coloredbg, .wide .ce_text.coloredbg { padding: 0px 12.5% 40px 12.5%; margin: -40px -12.5% 40px -12.5%; } #additional .ce_text.coloredbg.intro, .wide .ce_text.coloredbg.intro { padding: 40px 12.5% 0 12.5%; } #wrapper .ce_text.coloredbg.intro { margin-top: 40px; margin-bottom: 40px; } */ /* -------------------------------------- */ /* News, Blog, Recipes, Kitchen notes */ /* -------------------------------------- */ #wrapper .layout_full h1.type { margin-bottom: 30px; } #wrapper .layout_full h1.category { margin-top: 40px; } #wrapper .layout_full h2.colored { margin-bottom: 20px; } #wrapper .layout_full .ce_headline { border-bottom: 1px solid #333; padding: 30px 0 2px 0px; margin-bottom: 15px; } #wrapper .layout_full .teaser { /* padding-bottom: 20px; */ } #wrapper .layout_full table { width: 100%; } #wrapper .layout_full .col_0 { width: 30%; } #wrapper .mod_newsreader div.ce_comments h2 { margin-top: 40px !important;} #wrapper .layout_latest { margin-bottom: 40px; } .mod_newsreader .sharing { padding-bottom: 40px; } .mod_newsreader .sharing div.link { display: inline-block; margin-right: 15px; } .col123.recipe img { width: 120px; height: auto; } #recipesimage img { width: 300px; height: auto; } .ce_comments .comment { padding-left: 40px; } /* -------------------------------------- */ /* media queries */ /* -------------------------------------- */ @media all and (max-width: 1220px) { .width { width: 900px; } .ce_project_item .image .img { width: 600px; min-height: 400px; } .ce_project_item .image .m50 { margin-left: -30px; } .ce_project_item .image .m40 { margin-left: -22px; } .ce_project_item .image .m30 { margin-left: -16px; } .ce_project_item .image .m20 { margin-left: -10px; } .ce_project_item .image .m10 { margin-left: -5px; } .ce_project_item .info, .ce_project_item .links { width: 350px; } /* ul.category li { width: 300px; } */ ul.overview li /*, .related_items ul.category li */ { width: 180px; } ul.overview li.item > div > a { height: 200px; } #startshow .box { width: 460px; margin: 120px auto 0 auto; } #startshow .slide4 .imgbg img { width: 120%;margin-left:-10%; margin-right:-10%;margin-top: -35px; overflow:hidden;} #startshow .box .bg { width: 460px; } #startshow .box > .inside { width: 452px; } #startshow .content { width: 450px; } .ce_text.coloredbg { padding: 40px 60px 40px 60px; margin: 0 -60px 40px -60px; } } @media all and (max-width: 930px) { .width { width: 600px; } .ce_project_item .image .img { width: 600px; min-height: 400px; } .ce_project_item .image .m50 { margin-left: -15px; margin-right: -15px; width: 630px; } .ce_project_item .image .m40 { margin-left: -12px; margin-right: -12px; width: 624px; } .ce_project_item .image .m30 { margin-left: -9px; margin-right: -9px; width: 618px; } .ce_project_item .image .m20 { margin-left: -6px; margin-right: -6px; width: 612px; } .ce_project_item .image .m10 { margin-left: -3px; margin-right: -3px; width: 606px; } #wrapper .mod_article { width: 100%; } #articles { width: 100%; } #articles > .inside { width: 100%; } #articles > .mod_newsreader { width: 100%; } ul.category li { width: 200px; } /* .related_items ul.category li { width: 150px; } */ ul.overview li { width: 200px; } ul.overview li.nl5 { clear: none; } ul.overview li.nl3 { clear: both; } ul.overview li.item > div > a { height: 210px; } .ce_project_item .image { padding-bottom: 0px; } .ce_project_item .info { top: 50px; width: 220px; } .ce_project_item .info { position: relative; width: 100%; top: 0; padding-bottom: 0px;} .ce_project_item h2 { margin-bottom: 0; } .ce_project_item .links { position: relative; width: 100%; float: none; margin-bottom: 20px; } .ce_project_item .links { text-align: center; } .ce_project_item .sharing { position: relative; width: 100%; float: none; text-align: center; } #startshow .box { width: 460px; margin: 50px auto 0 auto; } #startshow .box .bg { width: 460px; opacity: 0.7; } #startshow .box > .inside { width: 452px; } #startshow .content { width: 450px; } #startshow .box .number { font-size: 120px; } #startshow .box .text { margin-top: -20px; } /* form .widget input, form .widget textarea { width: 94%; } form .widget input, form .widget textarea { width: 94%; } #contact #field_5 textarea, form #com_comment textarea, form #com_captcha input { width: 97.5%; padding-right: 6px; } */ .wrapper.col3 > .inside > .block { width: 100%; float: none; } .wrapper.col4 > .inside > .block { width: 100%; float: none; } .wrapper.col123 > .inside > .left { width: 100%; float: none; } .wrapper.col123 > .inside > .right { width:100%; float: none; } /* #wrapper .ce_text.coloredbg { padding: 0px 30px 40px 30px; margin: 0px 0px 40px 0px; } #wrapper .ce_text.coloredbg.intro { padding: 40px 30px 0px 30px; margin-top: 40px; } */ .ce_text.coloredbg { padding: 40px 40px 40px 40px; margin: 0 0 40px 0; } .wide .ce_text.coloredbg { margin-left: 0; margin-right: 0; padding-left: 40px; padding-right: 40px; } /* .ce_text.coloredbg { background-color: #eeeeee; box-sizing: border-box; position: relative; display: block; padding: 40px 202px 40px 202px; margin: 0 -202px 40px -202px; } .wide .ce_text.coloredbg { margin-left: -12.55%; margin-right: -12.55%; } .mod_newsreader .ce_text.coloredbg { padding-top: 0px; margin-top: -40px; } .mod_newsreader .ce_text.coloredbg.intro { padding-top: 40px; padding-bottom: 0; margin-top: 0; } #additional .mod_newsreader .ce_text.coloredbg.intro { margin-top: 40px; } */ } @media all and (max-width: 650px) { .width { width: 300px; } #logo {float: left;} #logo a{width: 70%;} #logo a img{ width: 100%;max-width: 200px;position: relative; height: auto; display: block; margin: 0;}#menu_toggler { top: 20px; } #search_toggler { top: 20px; } #topsearch { width: 240px; } #copy { float: none; text-align: center; } #femail { float: none; text-align: center; } .ce_project_item .image .img { width: 100%; } .ce_project_item .image .img { min-height: 200px; } .ce_project_item .image .m50 { margin-left: -9px; margin-right: -9px; width: 318px; } .ce_project_item .image .m40 { margin-left: -7px; margin-right: -7px; width: 314px; } .ce_project_item .image .m30 { margin-left: -5px; margin-right: -5px; width: 310px; } .ce_project_item .image .m20 { margin-left: -3px; margin-right: -3px; width: 306px; } .ce_project_item .image .m10 { margin-left: -1px; margin-right: -1px; width: 302px; } .ce_project_item .prevnext { top: 35%; } ul.category li { width: 150px; } .related_items ul.category li { width: 150px; } ul.category li.nl3, ul.category li.nl5, ul.overview li.nl5 { clear: none; } ul.category li.even { clear: both; } ul.overview li { width: 100%; } ul.overview li.stage > div > div > div { padding-left: 16px; padding-right: 16px; } ul.overview li.special.open { } /* margin-left: 16px; margin-right: 16px; */ /* ul.overview li.item > div > a { height: auto; padding-bottom: 20px; } */ ul.overview li.item > div > div > a { height: 260px; } /* ul.overview { padding-left: 16px; padding-right: 16px; box-sizing: border-box; } */ ul.overview li.stage { } ul.overview li.special.open .marker > div { display: block; width: 43px; height: 27px; background: transparent url(../img/overview-pointer.png) 0 0 no-repeat; background-size: 43px 27px; } ul.overview li.special.open { margin-bottom: 0; border-color: transparent; } ul.overview li.special.open > div > div { border-color: transparent; padding-bottom: 20px; } ul.overview li.special.open:hover { border-color: transparent; } ul.overview li.special.open:hover > div > div { border-color: transparent; } #articles .num { float: none; } #articles .numtext .numtext { margin-left: 0; padding-left: 0; border-left: 0; } .ce_comments .comment { padding-left: 0px; } .wrapper.col2 > .inside > .block { width: 100%; float: none; } .firefox ul.overview li.open { margin-bottom: -2px; } .firefox ul.overview li.special.open { margin-bottom: -0; } }