html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video,input,textarea,select,button { margin: 0; padding: 0; border: 0; vertical-align: baseline; -webkit-tap-highlight-color:transparent; outline:0; } button:focus{ outline:0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } textarea{ resize: none; } button{ margin:0; } th{ text-align:left; } a{ text-decoration:none; } .clear{ clear:both; display:block; visibility: hidden; height: 0px; line-height:0px; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; } fieldset { -moz-margin-end: 0; -moz-margin-start: 0; -moz-padding-end: 0; -moz-padding-start:0; border: none; } select > option { padding-block-end: 0; padding-block-start: 0; padding-inline-end: 0; padding-inline-start: 0; min-block-size: 0; } *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; } html{ background:#35363A; font-family: 'Open Sans', sans-serif; font-size:14px; color:#111; font-weight: 300; min-height:100%; } body{ position: relative; } nav{ position: fixed; width:225px; top:100px; } button.b2a{ display: inline; } button.b2a:hover{ background-color: #ccc; } .right{ float:right; } nav ul{ } nav>ul>li{ border-top:1px solid #414247; border-bottom:1px solid #292a2d; } nav ul li:last-child{ border-bottom:none; } nav ul li:first-child{ border-top:none; } nav a{ display: block; padding: 10px; color:#ffF; font-weight:300; text-shadow: 1px 1px #000; text-decoration: none; font-size: 18px; } nav>ul>li>a:hover, nav .active{ background-color:#18181A; } .sub-menu{ display:none; } nav .active + .sub-menu{ display:block; } nav .sub-menu .active{ ; } .sub-menu>li>a{ margin-left:10px; } .sub-menu>li:hover, .sub-menu>li .active { background-color:#414247; } header span{ font-weight: 300; } header{ width:100%; height:45px; position:fixed; background-color:#242527; top:0; color:#fff; padding:10px; font-size:24px; font-weight: 300; z-index:9999; } .pic_red{ color:#B10C1B; font-weight: 300; } header .mainconfig{ font-size: 20px; margin:0 2px 0 10px; cursor: pointer; } header #mainLogo{ font-weight: 300; display: inline-block; } header #toplogo{ height: 38px; width: auto; margin: -10px 0; } #content_wrap{ margin-left:225px; margin-top:45px; background-color: #fafafa; padding:10px; position: relative; color:#333; height: calc(100vh - 45px); display: flex; flex-wrap: nowrap; flex-direction: row; transition: margin-left .5s ease-in-out; } #content_wrap.closeNav{ margin-left:0; } .halfCol{ flex:1 1 0px; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; } .quarterCol{ flex:1 1 0px; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; } .thirdQuarterCol{ flex:3 1 0px; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; } .fourSixthCol{ flex:5 1 0px; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; } .fourFifthCol{ flex:4 1 0px; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; } .twoThirdCol{ flex:2 1 0px; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; } .onePFiveCol{ flex:1.5 1 0px; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; } .thirdCol{ flex:1 1 0px; min-height: 1px; padding-left: 10px; padding-right: 10px; position: relative; } .box{ width: 100%; margin: 0; margin-bottom:10px; background-color:#fff; border: 1px solid #DDDDDD; } .head_box{ background-color: #EEEEEE; height: 38px; padding: 10px 10px 2px; font-size: 16px; font-weight: 400; } .head_box .tools{ float:right; } .content_box{ font-size:16px; line-height: 19px; padding:10px; } .footer_box{ background-color: #F5F5F5; border-top: 1px solid #E5E5E5; margin-top: 20px; padding: 10px 10px 5px; } .scroll { overflow: auto; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans",sans-serif; font-weight: 300 !important; } h4, .h4 { font-size: 18px; } #modal_bg { background-color: rgba(51, 51, 51, 0.5); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index:1000; } #modal, #imgModal { background-clip: padding-box; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); display: none; position: fixed; z-index:10001; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); left: 50%; top: 50%; } #modal #modal_content_box,#imgModal #img_modal_content_box { padding: 20px; position: relative; max-height: 60vh; overflow-y: auto; overflow-x: hidden; } #modal .modal_header,#imgModal .modal_header { border-bottom: 1px solid #efefef; padding: 15px; } #modal .modal_footer,#imgModal .modal_footer { border-top: 1px solid #e5e5e5; padding: 19px 20px 20px; text-align: right; } #modal .modal_footer>button,#imgModal .modal_footer>button{ display:inline; } a{ cursor:pointer; } .inp{ font-family: 'Open Sans', sans-serif; background-color: #FFFFFF; border: 1px solid #E5E5E5; color: #333333; font-size: 14px; font-weight: normal; display: block; padding: 6px 8px; width: 100%; margin-bottom:5px; line-height:16px; } .cug{ display: inline; width: auto; } .inp[disabled]{ color: #E5E5E5; } button.fa{ background:none; border:none; height:auto; width:auto; padding:0; margin:0; } .close { color: #000000; float: right; font-size: 21px; font-weight: bold; line-height: 1; opacity: 0.2; text-shadow: 0 1px 0 #ffffff; } div.inp { display: inline-block; padding: 7px 12px; } .inp:focus{ border: 1px solid #999; } b,strong{ font-weight: bold; } i,em{ font-style:italic; } u{ text-decoration:underline; } button{ width: inherit !important; cursor:pointer; padding-right: 5px; } table { width: 100%; } table { border-collapse: collapse; border-spacing: 0; } #mylogo{ position:absolute; bottom:10px; left:10px; } small{ font-size: 12px; } select.inp{ padding:3px 8px ; } #nav-icon3 { width: 30px; height: 21px; position: relative; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; display: inline-block; margin-right: 5px; } #nav-icon3 span{ display: block; position: absolute; height: 3px; width: 100%; background: #fff; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; } #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { top: 9px; } #nav-icon3 span:nth-child(4) { top: 18px; } #nav-icon3.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; } #modal_info{ display: none; position: fixed; transform: translate(-50%,-50%); z-index: 20; background-color: #7fb71e; top: 20%; left: 50%; font-size: 24px; font-weight: 300; padding: 15px; border: 1px solid #4f7312; text-align: center; min-width: 300px; color: #fff; text-rendering: optimizeLegibility; box-shadow: 0 0 40px rgba(0,0,0,.4); } @media only screen and (max-device-width : 1366px) { html{ font-size: 12px; height: 100%; } body{ height: 100%; } #outer{ height: 100%; } #content_wrap { height: calc(100% - 45px); top: 45px; margin-top: 0; } } html{ background:#eee url("/img/1.jpg") no-repeat fixed center center; background-size: cover; } .head{ font-size: 24px; background:transparent; } #outer{ padding: 40px; background-color: rgba(255,255,255,0.2); margin:200px auto 0; width:380px; height: 280px; } #login_box{ width:300px; height:200px; } #login_box input{ width:100%; padding: 5px; border: 1px solid #000; border: 1px solid #E5E5E5; color: #333333; font-size: 14px; box-sizing: border-box; -moz-box-sizing: border-box; margin-bottom:15px; } #login_box .head{ color:#fff; padding: 5px; font-size: 24px; font-weight: 300; display: block; } .pic_red{ color:#B10C1B; font-weight: 300; } form { padding:5px; } header,nav{ display:none; } .pasverg a{ color:#fff; padding-left: 5px; text-decoration: underline; font-size: 12px; } #lostpass{ display:none; position: fixed; width:400px; height: 300px; background-color: #fff; top:20%; left: 50%; transform: translate(-50%); border: 1px solid rgba(0, 0, 0, 0.2); } #lostpass button.close_lostpass{ float: right; width: 20px !important; display: block; height: 20px; } #lostpass .lostpass_inputs, #lostpass .lostpass_antwort{ padding: 60px 20px 10px; } #lostpass .lostpass_inputs span,#lostpass .lostpass_antwort{ font-size: 19px; font-weight: 300; } #lostpass .lostpass_antwort{ text-align: center; line-height: 1.3em; } .rmc{ color: #fff; text-align: left; } #login_box .rmc input{ display: inline; width: auto; }