@font-face{font-family:Oswald;font-style:normal;font-weight:400;src:url(fonts/oswald/oswald-v15-latin-regular.eot);src:local('Oswald Regular'),local('Oswald-Regular'),url(fonts/oswald/oswald-v15-latin-regular.eot?#iefix) format('embedded-opentype'),url(fonts/oswald/oswald-v15-latin-regular.woff) format('woff')} @font-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(fonts/roboto/roboto-v16-latin-300.eot);src:local('Roboto Light'),local('Roboto-Light'),url(fonts/roboto/roboto-v16-latin-300.eot?#iefix) format('embedded-opentype'),url(fonts/roboto/roboto-v16-latin-300.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:300;src:url(fonts/roboto/roboto-v16-latin-300italic.eot);src:local('Roboto Light Italic'),local('Roboto-LightItalic'),url(fonts/roboto/roboto-v16-latin-300italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto/roboto-v16-latin-300italic.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(fonts/roboto/roboto-v16-latin-regular.eot);src:local('Roboto'),local('Roboto-Regular'),url(fonts/roboto/roboto-v16-latin-regular.eot?#iefix) format('embedded-opentype'),url(fonts/roboto/roboto-v16-latin-regular.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url(fonts/roboto/roboto-v16-latin-italic.eot);src:local('Roboto Italic'),local('Roboto-Italic'),url(fonts/roboto/roboto-v16-latin-italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto/roboto-v16-latin-italic.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(fonts/roboto/roboto-v16-latin-700.eot);src:local('Roboto Bold'),local('Roboto-Bold'),url(fonts/roboto/roboto-v16-latin-700.eot?#iefix) format('embedded-opentype'),url(fonts/roboto/roboto-v16-latin-700.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:700;src:url(fonts/roboto/roboto-v16-latin-700italic.eot);src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(fonts/roboto/roboto-v16-latin-700italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto/roboto-v16-latin-700italic.woff) format('woff')} /* ************************* Global Styles ************************* */ h1, h2, h3, h4 , h5, h6 { clear: both; color: #c88532; font-family: Oswald, sans-serif; font-weight: normal; margin: 0.8em 0 0; text-align: center; } h1 { font-size: 3rem; } h2 { font-size: 2.7rem; } h3 { font-size: 2.4rem; } h4 { font-size: 2.1rem; } h5 { font-size: 1.8rem; } h6 { font-size: 1.5rem; } p { margin: 0.6em 0; } .small, p.small, div.small, span.small { font-size: 10px; } strong, b { color: #c88532; font-weight: normal; } hr { background-color: #c88532; border: 0; border-bottom: 1px dashed #CCC; margin: 5px 0 3px 0; } .important, p.important, div.important { background-color: #c88532; border: 0px solid #ABABAB; border-radius: 6px; clear: both; margin: 1em 0; padding: 1em 2em; } .warning, p.warning, div.warning { background-color: #D4AA78; border: 0em solid #C0C0C0; border-radius: 6px; clear: both; color: #fff; font-weight: 900; margin: 1em 0; padding: 1em; text-align: center; } .warning a { color: #aaf; } .important p:first-child, .warning p:first-child { margin-top: 0; } .important p, .warning p { margin: 1em 0 0; } .highlight, p.highlight, div.highlight, span.highlight { background-color: #dfd; font-weight: 900; letter-spacing: .06em; } a:link { border: 0; color: #c88532; text-decoration: none; } a:visited { border: 0; color: #c88532; text-decoration: none; } a:focus { border: 0; color: #424242; text-decoration: none; } a:hover { border: 0; color: #424242; text-decoration: none; } a:active { border: 0; color: #424242; text-decoration: none; } blockquote { background-color: transparent; border-bottom: 1px solid; border-top: 1px solid; margin: 2em 1em; padding: 1em; position: relative; } blockquote:before { background-color: #fafafa; color: #c88532; content: "\f10d"; font: 1em FontAwesome; padding: 0 1em; position: absolute; left: 50%; top: -0.5em; -webkit-transform: translateX(-50%); transform: translateX(-50%); } blockquote:after { background-color: #fafafa; color: #c88532; content: "\f10e"; font: 1em FontAwesome; padding: 0 1em; position: absolute; bottom: -0.5em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } code { background-color: rgba(0, 0, 0, 0.1); font: 0.9em/normal Consolas, monospace; margin: 0; padding: 0.15em; letter-spacing: .05em; } .code, p.code, div.code { background-color: rgba(0, 0, 0, 0.1); color: inherit; display: block; font: .9em/normal Consolas, monospace; padding: .6em .8em; } .left_30, img.left_30, div.left_30, .left_50, img.left_50, div.left_50 { clear: left; float: left; margin: .4em 1em .4em 0; text-align: left; } .left_30 { max-width: 30%; } .left_50 { max-width: 50%; } .right_30, img.right_30, div.right_30, .right_50, img.right_50, div.right_50 { clear: right; float: right; margin: .4em 0 .4em 1em; text-align: right; } .right_30 { max-width: 30%; } .right_50 { max-width: 50%; } .left_30 p, .left_50 p, .right_30 p, .right_50 p { color: #999; font-size: 0.7em; font-style: italic; margin: 0; } .caption, p.caption, div.caption { color: #999; font-size: 0.7em; font-style: italic; margin: 0 0 1rem; } /* ****************************** "Table" vertical-align middle */ div.lck_tbl-middle { display: table; padding: 1rem 0; width: 100%; } .lck_tbl-middle p { display: table-cell; padding: 0 1rem 0 0; text-align: left; vertical-align: middle; } .lck_tbl-middle p ~ p { display: table-cell; vertical-align: middle; } /* ************************* html + body ************************* */ html, body { height: 100%; margin: 0; padding: 0; width: 100%; } body { background-color: #FAFAFA; color: #424242; font-family: Roboto, Arial, sans-serif; font-size: 20px; font-weight: 300; line-height: normal; } #lck_body { background-color: #FAFAFA; font-weight: 300; overflow-x: hidden; } /* ************************* Print View ************************* */ body.print { -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0 auto; max-width: 1170px; padding: 2em; } #TOP { font-size: 0px; height: 0px; line-height: 0px; } /* ************************* Header ************************* */ #lck_head { background-color: #2a2a2a; background: url(images/bg.jpg) 50% 0 no-repeat; -webkit-background-size: cover; background-size: cover; display: table; height: 33%; height: 33vh; margin: 0; min-height: 230px; padding: 0; width: 100%; } .lck_head { background-color: transparent; /* Optional - overlay-color */ display: table-cell; height: 100%; position: relative; vertical-align: middle; } /* ------------------------ Languagemenu, slidedown with jQuery ----------------------------- */ .lck_langmenu { margin: 0; padding: 0; position: absolute; bottom: inherit; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: 900; } .languageselect { background-color: transparent; border: 0px solid #E0E0E0; color: #fff; cursor: pointer; display: table; font-size: 1rem; line-height: 60px; margin: 0 auto; outline: none; position: relative; padding: 0; text-align: center; width: 9rem; z-index: 900; } .languageselect > span { display:inline-block; vertical-align: middle; } .languageselect > span + span { display:inline-block; padding-left: .5rem; } .languagemenu { background-color: #c88532; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; /* for jQuery hover function script */ line-height: normal; padding: .4em; position: absolute; width: 9rem; z-index: 900; } .languagemenu a { -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; display: table; margin: 0 auto; padding: .4em; text-decoration: none; width: 100%; } .languagemenu a:hover { background-color: rgba(0, 0, 0, 0.1); } .languageimg { display: table-cell; padding: 0 .5em 0 0; text-align: right; vertical-align: middle; width: 40%; } .languagetext { display: table-cell; font-size: .8rem; padding: 0; text-align: left; vertical-align: middle; width: 60%; } /* ************************* Header - Logo/Sitename ************************* */ .lck_logo { height: 60px; position: absolute; bottom: inherit; left: 5%; z-index: 800; } .lck_logo * { -webkit-box-sizing: border-box; box-sizing: border-box; } .logocontent { display: table; margin: 0 auto; position: relative; } .lck_logo .logobox { background-color: #c88532; border: 0px solid rgba(0,0,0,.5); border-radius: 10px; font-size: 26px; font-style: italic; font-weight: 700; height: 60px; line-height: 60px; position: absolute; left: 0; text-align: center; width: 60px; z-index: 800; } .lck_logo .logobox a { color: #fff; display: block; } .lck_logo .logobox:after { background-color: #fff; content: ""; display: block; height: 90%; margin: auto; position: absolute; bottom: 0; right: -10px; top: 0; width: 1px; } .lck_logo .logotext { color: #EEEEEE; display: table-cell; font-size: 30px; font-weight: 400; height: 60px; padding-left: 80px; position: relative; vertical-align: middle; } @keyframes expandlogo { 0% {height: 0;} 40% {height: 0;} 60% {height: 80%;} } @keyframes movebox { 0% { -webkit-transform: scale(0); left: 39%; transform: scale(0); left: 39%; } 40% { -webkit-transform: scale(1); left: 39%; transform: scale(1); left: 39%; } 60% { -wekkit-transform: scale(1); left: 39%; transform: scale(1); left: 39%; } 100% {left: 0%;} } @keyframes fadetext { 0% {opacity: 0;} 65% {opacity: 0; padding-left: 70px;} 100% {opacity: 1; padding-left: 80px;} } @keyframes fadetext2 { 0% {opacity: 0;} 65% {opacity: 0;} 100% {opacity: 1;} } .nb_slogan { display: none; } /* ************************* Searchbox ************************* */ .lck_search { border: 0px solid red; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; line-height: 3em; margin: 5rem 0; padding: 0; text-align: center; width: 100%; } .lck_search form { margin-top: 0; position: relative; white-space: nowrap; } .lck_search form input { font-family: Roboto, Arial, sans-serif; } .lck_search input.text { background-color: rgba(255, 255, 255, 0.8); border: 1px solid #E0E0E0; border-radius: 6px; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; font-size: 2.6rem; height: 5rem; margin: auto 0; padding: 0 4.5rem 0 1rem; text-align: center; -webkit-transition: .5s; transition: .5s; vertical-align: middle; } .lck_search input.text:focus { background-color: #fff; color: #616161; } .lck_search input.text::-webkit-input-placeholder { /* Chrome */ color: #888; } .lck_search input.text:-ms-input-placeholder { /* IE 10+ */ color: #888; } .lck_search input.text::-moz-placeholder { /* Firefox 19+ */ color: #888; opacity: 1; } .lck_search input.submit { background: url(images/fa-search.png) 50% 50% no-repeat; background-color: transparent; background-size: 30px; border: 0px solid #E0E0E0; -webkit-box-sizing: border-box; box-sizing: border-box; color: transparent; cursor: pointer; display: inline-block; font-size: 0px; height: 5rem; margin-left: -75px; outline: transparent none 0; padding: 0; position: relative; text-indent: -150px; /* for Dolphin Browser */ vertical-align: middle; width: 70px; } /* ************************* Down-Arrow ************************* */ .lck_downarrow { -webkit-animation: bouncey 1.6s linear infinite; animation: bouncey 1.6s linear infinite; display: none; font-size: 5rem; margin: 3rem 0 3rem; padding: 0; position: relative; text-align: center; width: 100%; } .lck_downarrow a { color: rgba(255,255,255,0.8); position: relative; z-index: 1; } @keyframes bouncey { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } /* ************************* Head-Navigation ************************* */ .nb_headnav { background-color: #c88532; font-size: 1rem; text-align: center; width: 100%; } .nb_headnav ul { list-style: none inside none; margin: 0; padding: 0.3em; } .nb_headnav li { display: inline-block; height: 2em; line-height: 2em; margin-left: 0 !important; padding-right: 1em !important; vertical-align: middle; } .nb_headnav li:last-child { padding-right: 0 !important; } .nb_headnav li:before, .nb_headnav a:after { content: none !important; } .nb_headnav a { color: #fafafa; } /* ************************* Content ************************* */ #lck_content_box { background-color: #FAFAFA; width: 100%; } .lck_content { -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; margin: 0 auto; max-width: 1170px; /* min-height: 500px; */ /* Optional - Prevents "jumping" of the page */ padding: 1% 2rem 5%; width: 100%; } .lck_content ul, #tinymce ul, .cke_editable ul { list-style: none inside none; margin: 0 0 1rem; padding: 0; } .lck_content ul li, #tinymce ul li, .cke_editable ul li { list-style: none inside none; margin-left: 1em; padding: 4px 0; } .lck_content ul li:before, #tinymce ul li:before, .cke_editable ul li:before { content: "\f101"; font: 1em FontAwesome; color: #c88532; padding: 0 .4em 0 0; position: relative; margin-left: -1em; } .lck_content ul ul li:before, #tinymce ul ul li:before, .cke_editable ul ul li:before { content: "\f101"; font: 0.9em FontAwesome; top: -0.05em; } .lck_content ul ul ul li:before, #tinymce ul ul ul li:before, .cke_editable ul ul ul li:before { content: "\f101"; font: 0.8em FontAwesome; top: -0.1em; } .lck_content ol { list-style-type: decimal; margin-left: 1em; padding: 0; } .lck_content ol ol { list-style-type: upper-alpha; } .lck_content ol ol ol { list-style-type: lower-alpha; } .lck_content ol li { padding: 6px 0; } .lck_content_main { font-size: 1em; line-height: 1.4; } .lck_content_main a { text-decoration: none; -webkit-transition: color .3s ease; transition: color .3s ease; } /* Links extern (Attribute Selectors) */ .lck_content_main a[href^="http:"]:after, .lck_content_main a[href^="https:"]:after, .lck_content_main a[target="_blank"]:after, .lck_news a[href^="http:"]:after, .lck_news a[href^="https:"]:after, .lck_news a[target="_blank"]:after, .lck_footer a[href^="http:"]:after, .lck_footer a[href^="https:"]:after, .lck_footer a[target="_blank"]:after, #tinymce a[href^="http:"]:after, #tinymce a[href^="https:"]:after, #tinymce a[target="_blank"]:after { content: "\f08e"; font: 12px FontAwesome; padding-left: 0.3rem; } .lck_content_main a[href^="mailto:"]:before, #tinymce a[href^="mailto:"]:before { content: "\f003"; font: 1em FontAwesome; padding-right: 0.3em; } /* ************************* Submenu ************************* */ .lck_submenu { font-size: 0.8em; } .lck_submenu span { border-top: 1px solid #FAFAFA; display: block; margin: 0 0 .4em 0; padding: .5em 0 0; } .lck_submenu ul li:before { content: "\f101"; } /* ************************* Newsboxes (Newsbox-Slider) ************************* */ .lck_news { background-color: #c88532; margin: 0; padding: 5% 1%; } .lck_news a { color: #FAFAFA; font-size: 0.8rem; } .lck_news input[type="radio"] { display: none; } .lck_news #button1:checked ~ .slides .slides-wrap { margin-left: 0; } .lck_news #button1:checked ~ .dots label:nth-child(1) { opacity: 0.5; } .lck_news #button2:checked ~ .slides .slides-wrap { -webkit-transform: translateX(-25%); transform: translateX(-25%); } .lck_news #button2:checked ~ .dots label:nth-child(2) { opacity: 0.5; } .lck_news #button3:checked ~ .slides .slides-wrap { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .lck_news #button3:checked ~ .dots label:nth-child(3) { opacity: 0.5; } .lck_news #button4:checked ~ .slides .slides-wrap { -webkit-transform: translateX(-75%); transform: translateX(-75%); } .lck_news #button4:checked ~ .dots label:nth-child(4) { opacity: 0.5; } .lck_news .slides { background-color: #c88532; color: #FAFAFA; font-size: .7em; margin: 0 auto; max-width: 600px; overflow: hidden; text-align: center; } .lck_news .slides .fa { font-size: 5rem; } .lck_news .slides-wrap { /* -webkit-animation: slideshow 25s infinite; */ /* animation: slideshow 25s infinite; */ /* Optional - see hint @keyframes slideshow */ list-style: none; margin: 0; overflow: hidden; padding: 0; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; width: 400%; } .lck_news .slide { float: left; margin: 0; padding: 0; position: relative; width: calc(100% / 4); } .lck_news .slide img { vertical-align: bottom; width: 100%; } .lck_news h1, .lck_news h2, .lck_news, .lck_news h4, .lck_news h5, .lck_news h6 { color: #FAFAFA; margin: 0; } .lck_news .dots { margin: 0; padding: 0.8em 0 0; text-align: center; } .lck_news .dots label { background-color: #fafafa; border-radius: 10px; color: #757575; cursor: pointer; display: inline-block; font-weight: normal; height: 50px; line-height: 50px; margin: 1% 1% 0; position: relative; transition: all .1s ease-out; width: 50px; } .lck_news hr { background-color: transparent; border: 0; border-top: 2px solid #fff; margin: 1em auto; padding: 0; text-align: center; width: 90%; } /* Auto Play (*Newsbox-Buttons don't work when this is on though....) */ @keyframes slideshow { 0% { transform: translateX(0); } 20% { transform: translateX(0); } 25% { transform: translateX(-25%); } 45% { transform: translateX(-25%); } 50% { transform: translateX(-50%); } 70% { transform: translateX(-50%); } 75% { transform: translateX(-75%); } 95% { transform: translateX(-75%); } 100% { transform: translateX(0%); } } .lck_news:after { clear: both; content: ""; display: table; } /* ************************* Footer - LastUpdate + Copyright + Login ************************* */ .lck_footer { display: block; margin: 0; padding: 0; text-align: center; } .lck_footer .footercontainer { width: 100%; } .lck_footer ul { list-style: none; margin: 0; padding: 0; } .lck_footer li { display: inline-block; } .lck_footer a { color: rgba(255, 255, 255, 0.7); display: inline-block; padding: .4rem 0; text-decoration: none; } .lck_footer a:hover { color: #fff; } .lck_footer .footerinfo { background-color: #FAFAFA; color: #757575; font-size: 1rem; padding: 10% 0; } .lck_footer .footerinfo li { -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 300px; padding: 0 1%; max-width: 100%; vertical-align: top; width: 30%; } .footerinfo .fa { color: #778899; font-size: 5rem; } .lck_footer .footerinfo a { color: #757575; font-size: .8rem; font-weight: normal; } .lck_footer .footernav { background-color: #c88532; color: #FAFAFA; padding: 3% 0 0; } .lck_footer .footernav li { border: 1px solid transparent; vertical-align: top; width: 100px; } .lck_footer .footernav li:hover { border: 1px solid #fff; } .lck_footer h1, .lck_footer h2, .lck_footer h3, .lck_footer h4, .lck_footer h5, .lck_footer h6 { color: #778899; margin: 0; } .lck_footer .footernav a { color: #FAFAFA; font-size: .9rem; font-weight: normal; } .lck_footer .footernav a:before { font: 1.6rem FontAwesome; display: block; padding-bottom: 0.4rem; } .lck_footer .footernav li:nth-child(1) a:before { content: "\f129"; } .lck_footer .footernav li:nth-child(2) a:before { content: "\f023"; } .lck_footer .footernav li:nth-child(3) a:before { content: "\f003"; } .lck_footer .footernav li:nth-child(4) a:before { content: "\f0e8"; } .lck_footer .footernav li:nth-child(5) a:before { content: "\f02f"; } .lck_footer .footernav li:nth-child(6) a:before { content: "\f002"; } .lck_footer .footercopyright { background-color: #c88532; color: rgba(255, 255, 255, 0.7); font-size: .8rem; padding: 0 0 3%; } .lck_footer .footercopyright li:nth-child(1) { display: block; padding: 2rem 0 0; } /* ************************* CMSimple_XH Mailform - xh_captcha_input + xh_captcha_code-Button ************************* */ #xh_mailform { margin-top: 1em; } .xh_captcha_input { height: 24px; } .xh_captcha_code { background-color: #778899; font-size: initial; height: 30px; line-height: 30px; padding: 0 10px; } /* ************************* Sitemap ************************* */ ul[class="sitemaplevel1"] { font-size: .8em; list-style: none; margin: 0 auto; max-width: 100%; padding: 0; width: 800px; } ul[class="sitemaplevel1"] > li { border: 2px solid #eee; border-radius: 6px; margin: 0 0 1em 0; padding: 0; } ul[class="sitemaplevel1"] li:before { content: none !important; } ul[class="sitemaplevel1"] > li:hover { /* border: 2px solid rgba(153,178,183,1); */ /* Optional */ } ul[class="sitemaplevel1"] > li > a:link, ul[class="sitemaplevel1"] > li > a:visited { background-color: #eee; border-radius: 5px 5px 0 0; display: block; font-weight: normal; padding: 0.75em 1em; text-decoration: none; } ul[class="sitemaplevel1"] > li:hover > a:link, ul[class="sitemaplevel1"] > li:hover > a:visited { /* background-color: rgba(153,178,183,0.5); */ /* Optional */ } ul[class="sitemaplevel1"] ul { line-height: 1; list-style: none; margin: 1em 0 1em 0; padding: 0; } ul[class="sitemaplevel1"] ul li { padding: 0; line-height: 1.5; margin: 0 0 0.5em 0; } ul[class="sitemaplevel1"] ul ul { margin: 0 0 0 0.5em; } ul[class="sitemaplevel1"] ul a:link, ul[class="sitemaplevel1"] ul a:visited { padding: 0 0 0 1em; text-decoration: none; } ul[class="sitemaplevel1"] ul a:hover { /* color: #01579B; */ /* Optional */ } ul[class="sitemaplevel1"] ul ul a:link:before, ul[class="sitemaplevel1"] ul ul a:visited:before { content: "\f105"; font: 1em FontAwesome; padding: 0 .4em 0 0; position: relative; margin: 0; } /* ************************* Media Queries - RESPONSIVE STYLE ************************* */ @media only screen and (max-width: 1219px) { .lck_logo, .lck_langmenu, .lck_subnav { margin-top: 1rem; } } @media only screen and (max-width: 1023px) { .lck_logo .logobox:after, .lck_logo .logotext, .languageselect > span + span { display: none; } } @media only screen and (min-width: 801px) and (max-width: 1024px) { .lck_header { font-size: 1.1em; margin: 0 auto 1rem; } } @media only screen and (max-width: 800px) { h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 {font-size: 2.2rem;} h2 {font-size: 2rem;} h3 {font-size: 1.8rem;} h4 {font-size: 1.6rem;} h5 {font-size: 1.4rem;} h6 {font-size: 1.2rem;} #lck_head { background: url(images/bg_mobil.jpg) 50% no-repeat; -webkit-background-size: cover; background-size: cover; } #lck_head { background-color: rgba(0, 0, 0, 0); height: 200px; min-height: 200px; } .lck_logo, .lck_langmenu, .lck_subnav { margin-top: 0; } .lck_logo .logobox { font-size: 20px; height: 50px; line-height: 50px; width: 50px; } .lck_content { word-wrap: break-word; } .lck_content_main, .lck_submenu { font-size: .8em; line-height: normal; } } @media only screen and (max-width: 600px) { .lck_news .dots label { height: 40px; line-height: 40px; width: 40px; } .lck_news .slides .fa, .lck_footer .footerinfo .fa { font-size: 2rem; } .lck_footer .footerinfo li { width: 100%; } } @media only screen and (max-width: 499px) { #lck_head { height: 150px; min-height: 150px; } .languageselect { width: 4rem; } .languagemenu { margin-left: -2.5rem; } .lck_header h1 { font-size: 130%; } .lck_content { padding: 1rem .5rem; } .lck_content_main, .lck_submenu { font-size: .7em; line-height: normal; } .left_30, img.left_30, div.left_30, .left_50, img.left_50, div.left_50, .right_30, img.right_30, div.right_30, .right_50, img.right_50, div.right_50 { float: none; margin: 1em 0; max-width: 100%; text-align: center; } .lck_tbl-middle { padding: 0; } .lck_tbl-middle p, .lck_tbl-middle p ~ p { display: block; padding: 0; width: 100% !important; } div.lck_tbl-middle p > img { display: block; margin: 0 auto; } } @media only screen and (max-width: 320px) { .lck_footer .footerinfo li { min-width: initial; } } /* ************************* Media Queries for mobile devices ************************* */ @media only screen and (min-device-width: 300px) and (max-device-width: 1023px) and (orientation: portrait) { #lck_head { height: 230px; } } /* ************************* Responsive Image */ img { height: auto; max-width:100%; vertical-align: middle; } /* ************************* Responsive Video, iframe */ /* Example: insert in content-page: <div class="responsive-video-wrapper"><div class="responsive-video"><iframe ...></iframe></div></div> */ div.responsive-video-wrapper { max-width: 100%; width: 600px; } div.responsive-video { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 15px; position: relative; } .responsive-video iframe { height: 100%; position: absolute; left: 0; top: 0; width: 100%; } /* ************************* Responsive Table */ .rsptable { color: #616161; display: table; margin: 0 0 1em 0; width: 100%; } .rsptable .row { background-color: #f6f6f6; display: table-row; } .rsptable .row:nth-of-type(odd) { background-color: #e0e0e0; } .rsptable .row.header { color: #fff; background-color: #616161; font-weight: 700; } .rsptable .cell { display: table-cell; padding: 6px 12px; } @media screen and (max-width: 599px) { .rsptable { display: block; } .rsptable .row { display: block; padding: 8px 0; } .rsptable .cell { display: block; padding: 2px 12px; } } /* ************************* BACKEND Style ************************* */ /* Login-Page */ body.xh_login { background-color: #2a2a2a; background: url(images/bg_startpage.jpg) 50% 100% no-repeat; -webkit-background-size: cover; background-size: cover; color: #fff; position: relative; text-align: center; } body.xh_login div.xh_login { background-color: rgba(9, 39, 60, 0.85); border: 2px solid #9E9E9E; border-radius: 10px; margin: 0; padding: 1rem; position: absolute; left: 50%; top: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; } body.xh_login h1 { margin: 0; } body.xh_login form { margin-bottom: 1rem; } body.xh_login input#passwd, body.xh_login input[type="text"] { border: 0 none transparent; height: 24px; line-height: 24px; padding: 1px 5px; } body.xh_login input#submit, body.xh_login input.submit { padding: 0 2rem; line-height: 26px; height: 26px; border: none 0 transparent; margin-left: 0.4rem; } body.xh_login div.xh_login a { color: #FFC107; display: inline; font-weight: bold; margin-top: 0.8rem; } /* Password forgotten Page */ body.xh_login > h1, body.xh_login > h1 ~ * { position: relative; top: 38%; } /* Menu */ body.adminview .lck_nav, body.adminedit .lck_nav { padding-top: 3rem !important; } /* Optional - Menu absolute */ /* body.adminedit .lck_nav { padding: 0 !important; position: absolute; } */ /* Admin-Menu */ #xh_adminmenu { line-height: normal; } /* Optional - Debug-Warnings */ /* .xh_debug_warnings { position: absolute; left: 2%; top: 15%; width: 95%; z-index: 997; } */ /* Filebrowser */ #xhFilebrowserMenu li:before, #xhFilebrowser li:before { content: none; } #xhFilebrowser .folder input[type="image"], #xhFilebrowser input[type="image"]:not(:first-child) { margin: 0 1rem; } /* Plugins */ .lck_content_main table.edit ~ * + * { font-size: 1rem; } .upd_list li:before { content: none !important; } /* Pagemanager */ #pagemanager { color: #222; font: 14px/normal Arial, sans-serif; } #pagemanager ul { margin: 0; padding-left: 0; } #pagemanager li { line-height: 1.4; padding: inherit; } #pagemanager li:before { content: none; } /* Pagemanager Theme */ #pagemanager.jstree-default { background-color: #fff; color: #222; } /* Pagemanager contextmenu */ .vakata-context { font: 12px/normal Arial, sans-serif; } /* Settings */ #xh_config_form .xh_label { font: 14px/normal Arial, sans-serif; } #xh_system_check li { padding-left: 2rem; } #xh_system_check li:before { content: none; } /* Settings - Template + Stylesheet */ textarea.xh_file_edit { margin-top: 1em; } .CodeMirror { font: 14px/normal Arial, sans-serif; } /* Edit-Mode - Side-Tabs */ #xh_pdtabs, #xh_pdviews { font: 14px/normal Arial, sans-serif; } /* Editors - body */ .adminedit .lck_content { max-width: 1198px; /* e.g.: 1170px(max-width content) + margin(Textarea TinYMCE) + Scrollbar(Textarea TinyMCE) = (1170px+12px+16px) */ } #tinymce, .cke_editable { margin: 0.5% auto; width: 99%; } body > h1, body > h2, body > h3, body > h4, body > h5, body > h6 { /* color: #555; */ /* optional, if background-color e,g, #fff */ } /* ************************* Template by lck 11/2017 (RIP Simon) ************************* */