/* MASTER-CSS für feinkonzept CMS Administrationsbereich */ /* ALLGEMEINE FORMATIERUNGEN */ body, hmtl, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, input, button { margin: 0; padding: 0; border: 0; } html { width: 100%; height: 100%; -webkit-tap-highlight-color: #000; } body { width: 100%; height: 100%; scrolling: auto; font-family: Verdana; color: #231f20; font-size: 12px; background-image: url(../images/body_bg.gif); background-repeat: repeat-y; background-color: #fff; background-position: -160px 0; -webkit-tap-highlight-color: transparent; } body.login { background: #f1f1f1; } h1, h2, h3, h4 { font-family: Verdana; } img, a { outline: none; border: none; } .clear { clear: both; height: 0px; overflow: hidden; } /* KUNDEN-FARBEN */ .client_color { color: #0b41cd !important; } .client_bg { background-color: #0b41cd !important; } /* SPEZIELLE FORMATE */ #pageinfo { position: fixed; z-index: 99999; top: 0; left: 0; color: #000; background: #fff; padding: 3px; display: none; } .rounded { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .shadow { -moz-box-shadow: 1px 1px 5px #bbb; -webkit-box-shadow: 1px 1px 5px #bbb; box-shadow: 1px 1px 5px #bbb; } .border-box, div, section, aside, article, nav, header, footer, nav, a, li, ul, button, h1, h2, h3, h4, p, label, input, select, textarea, table, td, tr, span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behaviour: url(../boxsizing.htc); } .transition_all { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* LINKS */ a { color: #231f20; text-decoration: underline; } a:hover { color: #0b41cd; text-decoration: underline; } /* FLAGGEN */ .flag_de { background: url('../images/lang_bg.png') 1px 2px no-repeat; } .flag_en { background: url('../images/lang_bg.png') 1px -28px no-repeat; } .flag_it { background: url('../images/lang_bg.png') 1px -78px no-repeat; } .flag_nl { background: url('../images/lang_bg.png') 1px -118px no-repeat; } /* LAYOUT */ #page { position: relative; width: 100%; height: 100%; } #page.login { padding: 1rem 0; background: url('../images/login_bg.jpg') no-repeat; background-size: cover; } /* LEFT */ #left { position: relative; float: left; width: 240px; padding-bottom: 200px; } #left #logo { width: 95%; margin: 0 auto; padding: 0.6em 0.8em 0.6em 0.8em; background-color: #fff; background-position: center center; -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } #left #logo a { display: block; width: 96px; height: 50px; margin: 9px auto; background: url(../images/logo.svg) no-repeat 0 0; background-size: 96px 50px; } @media screen and (min-width: 1025px) { #left #logo a { width: 112px; height: 58px; margin: 12px auto; background-size: 112px 58px; } } @media screen and (min-width: 1280px) { #left #logo a { width: 120px; height: 62px; margin: 10px auto; background-size: 120px 62px; } } #left nav { font-size: 0.9em; } #left nav h2 { color: #8e8d8d; font-size: 1.2em; font-weight: normal; padding: 1em 2% 0.2em 2%; text-transform: uppercase; border-bottom: 1px solid #808080; } #left nav ul { list-style: none; } #left nav ul li { margin: 0 0 0.2em 0; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #left nav > ul > li.active { background: #ededed; } #left nav ul li a { position: relative; display: block; color: #edeaea; padding: 0.7em 0 0.7em 3em; font-size: 1.2em; line-height: 1.2; text-decoration: none; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #left nav ul li a:before { position: absolute; top: 0.2em; left: 3%; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 20px; text-decoration: none; line-height: 1; } #left nav > ul > li > a:hover { color: #fff; background: #504f4f; } #left nav > ul > li.active > a { color: #504f4f; background: #fff; } #left nav ul li.sites a:before { content: "\f0e8"; font-size: 18px; top: 0.4em; left: 2.8%; } #left nav ul li.content a:before { content: "\f15c"; font-size: 22px; top: 0.3em; left: 3.4%; } #left nav ul li.projects a::before { content: "\f1b3"; font-size: 23px; left: 2.3%; } #left nav ul li.pictures a::before { content: "\f1c5"; } #left nav ul li.pictures a::before { content: "\f1c5"; } #left nav ul li.products a::before { content: "\f1b9"; font-size: 22px; left: 2.3%; } #left nav ul li.graduat a::before { content: "\f19d"; font-size: 22px; top: 0.3em; left: 2.3%; } #left nav ul li.news a::before { content: "\f1ea"; font-size: 22px; top: 0.3em; left: 2.4%; } #left nav ul li.offers a::before { content: "\f0a1"; font-size: 23px; left: 2.6%; } #left nav ul li.branchs a::before { content: "\f0c0"; font-size: 22px; left: 2.5%; } #left nav ul li.rooms a::before { content: "\f236"; font-size: 22px; left: 2.5%; } #left nav ul li.team a::before { content: "\f0c0"; top: 0.35em; left: 2.5%; } #left nav ul li.address a::before { content: "\f2bc"; font-size: 22px; top: 0.3em; left: 2.4%; } #left nav ul li.mailing a::before { content: "\f003"; font-size: 24px; top: 0.15em; left: 2.4%; } #left nav ul li.settings a::before { content: "\f085"; font-size: 19px; top: 0.4em; left: 2.5%; } #left nav ul li.users a::before { content: "\f4fe"; font-size: 19px; top: 0.3em; } #left nav ul li.website a::before { content: "\f35d"; font-size: 18px; top: 0.4em; left: 2.9%; } #left nav ul li.statistics a::before { content: "\f080"; font-size: 22px; } #left nav ul li.addresses a::before { content: "\f2bb"; font-weight: 400; top: 0.3em; } #left nav ul li.exchange a::before { content: "\f362"; font-size: 22px; } #left nav ul li.calendar a::before { content: "\f073"; font-size: 22px; font-weight: 400; top: 0.4em; } #left nav ul li.gallery a::before { content: "\f302"; top: 0.4em; } #left nav ul li.drum a::before { content: "\f569"; font-size: 22px; top: 0.3em; } #left nav ul li ul { padding: 0.5em 0.1em 0.5em 2.8em; } #left nav ul li ul li:hover, #left nav ul li ul li.active { margin-left: -1.7em; } #left nav ul li ul li a { padding: 0.3em 0 0.8em 2.6em; font-size: 1em; color: #6f6e6e; } #left nav ul li ul li a:hover, #left nav ul li ul li.active a { color: #0b41cd; } #left nav ul li ul li a::before { top: 0; font-size: 15px !important; line-height: 1; } #left nav ul li.rooms ul li a::before { font-size: 14px !important; } article#support { position: fixed; bottom: 0; left: 0; width: 240px; color: #edeaea; font-size: 0.9em; background: #2f2f2f; padding: 2px 0 7px 0; border-top: 1px solid #808080; } article#support h2 { position: relative; font-size: 1.2em; font-weight: normal; padding: 0.4em 0 0.4em 2.5em; } article#support h2::before { position: absolute; top: 4px; left: 2.6%; content: "\f29c"; font-family: 'FontAwesome'; font-size: 23px; line-height: 1; } article#support p { padding: 0 0 0.1em 3em; } article#support a { color: #edeaea; text-decoration: none; } article#support a:hover { color: #fff; text-decoration: underline; } /* RIGHT */ #right { width: auto; margin: 0 0 0 240px; padding-bottom: 140px; font-size: 0.9em; } /* LOGIN-STATUS */ #loginstatus { position: relative; width: auto; height: 31px; background: #fff; } div#loginstatus_short { float: right; margin: 4px 5px 0 0; } div#loginstatus_short a { position: relative; display: block; text-decoration: none; padding: 0.4em 1.8em 0 2em; } div#loginstatus_short a::before { position: absolute; top: 0; left: 0; content: "\f007"; font-family: 'FontAwesome'; font-size: 21px; color: #808080; line-height: 1; } div#loginstatus_short a.active::before { color: #aaa9a9; } div#loginstatus_short a::after { position: absolute; top: 1px; right: 0; content: "\f107"; font-family: 'FontAwesome'; font-size: 21px; color: #808080; line-height: 1; } div#loginstatus_short a.active::after { top: 1px; content: "\f106"; } div#loginstatus_long { position: absolute; top: 31px; right: 5px; z-index: 998; display: none; padding: 0.8em 1em 1em 1em; background: #fff; border-left: 1px solid #808080; border-right: 1px solid #808080; border-bottom: 1px solid #808080; -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } div#loginstatus_long p { padding-top: 0.3em; } /* CONTENT */ #content { width: auto; } /* CONTENT HEADER */ #content header { padding: 1.6em 1.2em 1.6em 1.2em; margin-bottom: 15px; font-size: 0.9em; background: #f3f2f2; border-top: 1px solid #808080; border-bottom: 1px solid #dcdbdb; } #content header h1 { font-size: 2.4em; font-weight: normal; } #content header h2 { font-size: 2em; font-weight: normal; } #content header #header_buttons { float: right; width: auto; margin-top: 30px; } #content header #header_buttons a { position: relative; display: inline-block; padding: 0.6em 1em 0.7em 3em; color: #4b4b4b; background: #d5d5d5; border: 1px solid #aaaaaa; text-align: center; text-decoration: none !important; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #content header #header_buttons a::before { position: absolute; font-family: 'FontAwesome'; color: #7c7c7c; line-height: 1; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #content header #header_buttons a:hover { color: #fff; background: #555555; border: 1px solid #555555; } #content header #header_buttons a:hover::before { color: #e7e7e7; } #content header #header_buttons a.back::before { content: "\f100"; top: 0; left: 0.3em; font-size: 2.3em; } #content header #header_buttons a.new::before { content: "\f196"; top: 0.15em; left: 0.3em; font-size: 2.1em; } #content article { float: left; width: 98%; margin: 1em 1% 0 1.5%; } #content article h3 { margin-bottom: 0.6em; } #content article p.maxwidth { max-width: 600px; } /* ARTICLE FORM */ #content article.form { padding: 0.5em; margin: 1em 1% 0 1%; background: #f3f2f2; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #content article.form > h3 { padding: 0 0 0.4em 0; border-bottom: 1px solid #c4c4c2; } #content article.form > h4, #content article.form > div > h4 { clear: both; padding: 1em 0; color: #616060; } #content article.form > h3 + h4, #content article.form h3 + div > h4 { padding: 0 0 1em 0; } #content article.form h3 span.langtype { float: right; font-size: 0.9em; font-weight: normal; color: #222222; margin: 1px 2px 0 0; } #content article.form h3 span.addition { color: #555555; font-weight: normal; } #content article.form h3 a.langselect { float: right; width: 32px; height: 22px; background-image: url('../images/lang_bg.png'); background-repeat: no-repeat; margin: -1px 0.1em 0 0.3em; } #content article.form h3 a.langselect.active { opacity: 0.6; } #content article.form h3 a.langselect.de { background-position: 0 0; } #content article.form h3 a.langselect.en { background-position: 0 -30px; } /* ARTICLE LIST */ #content article.entrylist { padding: 0.5em; margin: 1em 1% 0 1%; background: #f3f2f2; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } #content article.entrylist h3 { padding: 0 0 0.4em 0; border-bottom: 1px solid #c4c4c2; } #content article.entrylist h3 span { color: #555555; } #content article.entrylist h3 span.flag { float: left; width: 33px; height: 23px; margin: -0.2em 0.6em 0 0 } #content article.entrylist span.status { font-style: italic; } #content article.entrylist h3 a.preview { position: relative; color: #555555; padding: 0 1.7em 0 0; text-decoration: none; } #content article.entrylist h3 a.preview::after { position: absolute; top: 0; right: 0; content: "\f08e"; font-family: 'FontAwesome'; font-size: 18px; font-weight: normal; line-height: 1; } #content article.entrylist h3 a.preview:hover { color: #807f7f; text-decoration: underline; } #content article.entrylist div span.info { cursor: help; color: #696868; } #content article.entrylist div span.info:hover { color: #222222; } #content article.entrylist div span.color { float: left; width: 4em; height: 1.4em; border: 1px solid #dededc; } #content article.entrylist p.noentry { font-size: 0.9em; padding: 0.6em; text-align: center; } #content article.entrylist a.url { font-size: 0.9em; text-decoration: none; } #content article.entrylist a.url:hover { text-decoration: underline; } #content article.entrylist a.link { text-decoration: none; } #content article.entrylist a.link:hover { text-decoration: underline; } /* ARTICLE LIST innerhalb FORM (pictures.php) */ #content article.form > article.entrylist { width: 100%; padding: 0; margin: 1em 0 0.5em 0; } #content article.form > article.entrylist.no_gap { margin-top: -0.7em; } #content article.form > article.entrylist img { max-width: 120px; } /* LIST-TOPIC */ div.listtopic { display: table; width: 100%; } div.listtopic > div { display: table-row; font-size: 1.0em; } div.listtopic > div > div { display: table-cell; vertical-align: top; padding: 0.8em 0.3em 0 0.3em; } div.listtopic > div > div span { font-family: Verdana; font-weight: normal; font-size: 0.8em; color: #222222; } div.listtopic > div > div:first-child { font-size: 1.4em; padding-top: 0.4em; } /* LISTE */ div.list { display: table; width: 100%; } div.list > div { display: table-row; font-size: 1.0em; } div.list > div > div { display: table-cell; vertical-align: top; padding: 1em 0.5em; } div.list > div > div.italic { font-style: italic; color: #999; } div.subsitelist div:first-child, div.subsitelist2 div:first-child { position: relative; } div.subsitelist div:first-child { padding-left: 2.4em; } div.subsitelist2 div:first-child { padding-left: 4.4em; } div.subsitelist div:first-child::before, div.subsitelist2 div:first-child::before { position: absolute; top: 0.4em; left: 0.5em; content: "\f148"; font-family: 'FontAwesome'; font-size: 1.6em; color: #a0a0a0; line-height: 1; transform: rotate(90deg); } div.subsitelist div:first-child::before { left: 0.5em; } div.subsitelist2 div:first-child::before { left: 1.6em; } div.odd div.colored_row:nth-of-type(odd) { background: #f3f2f2; } div.odd div.colored_row:nth-of-type(odd) div.subsitelist div { border-top: 1px solid #fbf8f9 !important; } div.odd div.colored_row:nth-of-type(even) { background: #fff; } div.odd div.colored_row:nth-of-type(even) div.subsitelist div { border-top: 1px solid #dbdada !important; } div.even div.colored_row:nth-of-type(even) { background: #f3f2f2; } div.even div.colored_row:nth-of-type(even) div.subsitelist div { border-top: 1px solid #fbf8f9 !important; } div.even div.colored_row:nth-of-type(even) div.copy_selection { background: #f3f2f2; } div.even div.colored_row:nth-of-type(odd) { background: #fff; } div.even div.colored_row:nth-of-type(odd) div.subsitelist div { border-top: 1px solid #dbdada !important; } div.odd div.colored_row:hover, div.even div.colored_row:hover { background: #f4e1e1 !important; } div.odd div.colored_row:hover div.copy_selection, div.even div.colored_row:hover div.copy_selection { background: #f4e1e1 !important; } div.listheader { font-weight: bold; color: #858484; background: #fff !important; } div.listheader div { vertical-align: bottom !important; padding: 0.4em 0.5em !important; border-bottom: 1px solid #dededc; } div.listheader div.sortfield a { position: relative; color: #858484; text-decoration: none; } div.listheader div.sortfield a.down { position: relative; } div.listheader div.sortfield a::before, div.listheader div.sortfield a::after { position: absolute; color: #909090; font-family: 'FontAwesome'; font-size: 24px; line-height: 1; } div.listheader div.sortfield a::before { content: "\f0de"; top: -4px; right: -20px; } div.listheader div.sortfield a::after { content: "\f0dd"; bottom: -4px; right: -20px; } div.listheader div.sortfield a.active { text-decoration: underline; } div.listheader div.sortfield a.active.desc::before, div.listheader div.sortfield a.active.asc::after { color: #0b41cd; } /* LISTEN-FUNKTION */ article.entrylist div.functions { position: relative; padding: 0.7em 0.3em; } article.entrylist div.functions a { position: relative; float: left; height: 22px; width: 24px; margin: 0 0.2em 0 0; font-size: 2em; text-decoration: none; } article.entrylist div.functions a::before { position: absolute; top: 0; left: 0; font-family: 'FontAwesome'; font-size: 24px; color: #4b4b4b; line-height: 1; } article.entrylist div.functions a.inactive::before { color: #c4c4c2 !important; } article.entrylist div.functions a.sort::before { content: "\f0dc"; font-size: 23px; color: #6e6e6e; left: 0.1em; cursor: ns-resize; } article.entrylist div.functions a.sort:hover::before { color: #4b4b4b; } article.entrylist div.functions a.edit::before { content: "\f044"; } article.entrylist div.functions a.delete::before { content: "\f014"; color: #a81801; font-size: 25px; top: -2px; left: 0; } article.entrylist div.functions a.status::before { content: "\f046"; color: #00982b; } article.entrylist div.functions a.copy::before { content: "\f0c5"; font-size: 22px; color: #0627cc; cursor: copy; top: -1px; left: -0.1em; } article.entrylist div.functions a.home::before { content: "\f005"; top: -1px; color: #ef991d; } article.entrylist div.functions a.promo:before { content: "\f005"; top: -1px; color: #ef991d; } article.entrylist div.functions a.sites::before { content: "\f123"; top: -1px; color: #ef991d; } /* COPY-FUNKTION */ article.entrylist div.copy_selection { display: none; position: absolute; z-index: 100; top: 3em; right: 0; width: 180px; background: #fff; padding: 0.5em; -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } article.entrylist div.copy_selection span { float: left; padding: 0.4em 0.6em 0 0.2em; } article.entrylist div.copy_selection a { float: left; width: 32px; height: 22px; background-image: url('../images/lang_bg.png'); } /* LOGIN */ #login { position: relative; width: 400px; margin: 0 auto; padding: 2.3rem 2em; background: #fff; -moz-box-shadow: 1px 1px 10px #797979; -webkit-box-shadow: 1px 1px 10px #797979; box-shadow: 1px 1px 10px #797979; } #login a#logo { display: block; width: 192px; height: 100px; margin: 0 auto; background: url(../images/logo.svg) no-repeat 0 0; background-size: 192px 100px; } #login h1 { font-size: 1.2em; color: #676364; margin: 1.5em 0 0.4em 0; padding-top: 1em; border-top: 1px dotted #676364; } #login a#copyright { position: absolute; bottom: -18px; right: 5px; font-size: 0.9em; color: #fff; text-decoration: none; } /* +++++++++++++++++++++++++++++++++++++++ Scroll to Top +++++++++++++++++++++++++++++++++++++++ */ #scroll_to_top { position: fixed; z-index: 100; bottom: 80px; right: 0; opacity: 0.7; width: 50px; height: 50px; background: rgba(255,255,255,0.6); border-top: 1px solid #6f6f6f; border-left: 1px solid #6f6f6f; border-bottom: 1px solid #6f6f6f; -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #scroll_to_top::before { font-family: 'FontAwesome'; content: "\f077"; display: block; height: 24px; width: 24px; font-size: 34px; color: #231f20; margin: 4px 0 0 9px; line-height: 1; } #scroll_to_top:hover { opacity: 1; cursor: pointer; border-top: 1px solid #0b41cd; border-left: 1px solid #0b41cd; border-bottom: 1px solid #0b41cd; } #scroll_to_top:hover::before { color: #0b41cd; } /* ################################################ MEDIA QUERY: >= 1025px ################################################ */ @media screen and (min-width: 1025px) { body { background-position: -100px 0; } #left { width: 300px; } #left nav { font-size: 1.0em; } article#support { width: 300px; font-size: 1.0em; } article#support h2 { padding: 0.4em 0 0.5em 3em; } article#support p { padding: 0.1em 0 0.2em 3.6em; } #right { margin-left: 300px; font-size: 1.0em; } #loginstatus {} div#loginstatus_short { margin: 3px 5px 0 0; } #content {} #content header { padding: 1.5em 1.6em; font-size: 1.0em; } #content article.form > article.entrylist img { max-width: 180px; } } /* ################################################ MEDIA QUERY: >= 1280px ################################################ */ @media screen and (min-width: 1280px) { body { background-position: 0 0; } #left { width: 400px; } article#support { width: 400px; } #right { margin-left: 400px; } #content article.form > article.entrylist img { max-width: 200px; } }