/* * * Stylesheet for LWA Backoffice * Copyrights EasyGoDesign - www.easygodesign.nl * */ /* -- Some bootstrap reset -- */ *, *::before, *::after { box-sizing: content-box; } body{ font-size: 13px;line-height:normal; } h1, .h1, h2, .h2, h3, .h3 { margin:0;padding:0; } ul{ margin:0;padding:0; } img{ vertical-align:top; } table{ border-collapse:separate;margin:0; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border:none;line-height:normal;padding:0; } /* -- Global Styles -- */ * { padding: 0px; margin: 0px; list-style: none; -webkit-touch-callout: none; /* Disable selection/copy in UIWebView */ } html{ background-color:#fff;font-size:13px; } body { font-family: Verdana, Arial, Helvetica, sans-serif;color:#464646; } /* 383636 */ h1{ font-size:25px;font-weight:bold; } /* color:#bb454d; */ h2{ margin:0;font-size:18px;font-weight:bold; } /* color:#333; */ h3{ margin:0;padding:4px 0;font-size:14px;font-weight:bold; } p{ margin:5px 10px;font-size:13px; } a { outline:0;color:#464646;text-decoration:none; } /* color:#bb454d; */ a:hover{ color:#000;text-decoration:underline; } a:active, a:focus{ outline:none; } img { border: 0px solid; } #devmode{ position:fixed;top:50%;right:-75px;padding:14px 0 20px;width:200px; font-family:Verdana, Arial, Helvetica, sans-serif;font-size:13px;text-align:center;color:#fff; border-bottom-left-radius:3px; background-color:#D35400; -webkit-transform: rotate(-90deg);/* Safari */ -moz-transform: rotate(-90deg);/* Firefox */ -ms-transform: rotate(-90deg);/* IE */ -o-transform: rotate(-90deg);/* Opera */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/* Internet Explorer */ } .normal { font-weight:normal !important; } .bold { font-weight:bold; } .italic { font-style:italic; } .underlined { text-decoration:underlined; } input, textarea, select{ padding:4px;border:1px solid #B0AFAF;border-radius:3px; } input[type="text"], input[type="password"], input[type="tel"], input[type="email"], textarea, select{ width:300px; } input[type="file"]{ border:none !important; } select[multiple]{ -webkit-appearance: none; width:100%; min-height:40px; padding:4px; font-size:13px; color:#333333; border:1px solid #dddddd; } select[multiple] option{ padding:4px; } .noMargin{ margin:0 !important; } .marked-red{ color:#901400; } .icon-background{ background-repeat: no-repeat;background-position: center; } .succes{ padding:14px 4px;color:green; } .warning{ padding:14px 4px;color:orange; } .error{ padding:14px 4px;color:red; } .screensize{ width:980px;margin:0 auto; } .clear{ clear:both; } /* -- Plus styles -- */ a.button, a.small-button{ color:#fff !important; } .button:hover, .small-button:hover{ background:#407D9E;text-decoration:none; } .button, .small-button{ position:relative;display:inline-block;vertical-align:middle;padding:10px 25px; border:1px solid #4d4d4d;color:#fff;background:#639dbc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; font-size:12px;text-decoration:none; } input.button, input.small-button{ width:auto;padding:7px 20px; } .small-button, input.small-button{ padding:10px 25px; } .button, .small-button{ background-color:#2AB2CB;border-color:#05A3C0;border-bottom:2px solid #03788E; } .button:hover, .small-button:hover{ background-color:#05A3C0; } .button.twotone{ background-color:#C4C4C4;border-color:#C4C4C4;border-bottom:2px solid #999999;cursor:default; } .button.red{ background-color:#AA3939;border-color:#AA3939;border-bottom:2px solid #801515; } /* -- The styles -- */ #menu{ min-width:980px;background-color:#3c3a3a;border-bottom:2px solid #a71d1c; } #menu ul li a{ color:#ecf0f1;text-decoration:none; } #menu ul.nav:nth-child(1) li a{ padding:15px 40px 15px 10px; } #menu ul.nav:nth-child(2) > li > a{ padding-top:5px;padding-bottom:17px;width:28px;text-align:center; } #menu ul li a img{ height:18px;margin-top:12px;margin-bottom:-2px; } #menu ul li:hover, #menu ul li a:hover, #menu .nav .open > a, #menu ul li:focus, #menu ul li a:focus{ background-color:#777; } #menu ul li > .dropdown-menu { margin-top: 1px;border-top:1px solid #a71d1c; } #menu ul.dropdown-menu { background-color:#BC7272;font-size:12px; } #menu ul.dropdown-menu li a:hover, #menu .dropdown-menu > .nav .open > a, #menu ul.dropdown-menu li a:focus{ background-color:#C35D5D; } #menu ul.dropdown-menu > li > a{ color:#f2f2f2;padding: 10px 20px !important; } #menu ul.dropdown-menu > li > a:hover{ color:#f2f2f2; } .lang{ display:none; } .lang.nl{ display:initial; } .flex{ display:flex; } .flex.between{ justify-content:space-between; } .flex.between .end{ align-self:flex-end; } .grid{ float:left; } .grid.grid-two { width:50%; } .grid.grid-two:nth-child(1) .spacer{ padding-right:15px; } .grid.grid-two:nth-child(2) .spacer{ padding-left:15px; } .grid.grid-three { width:33%; } .grid.grid-three.two { width:66%; } .grid.grid-three:nth-child(1) .spacer{ padding-right:15px; } .grid.grid-three:nth-child(3) .spacer{ padding-left:15px; } .grid.grid-four { width:25%; } .grid-hold h3{ margin:10px 5px;font-size:12px; } .grid-hold .spacer{ margin-top:20px; } .grid-hold .spacer:nth-child(1){ margin-top:0; } .grid-hold .grid:last-child:after{ display:" ";clear:both;display:block; } .grid-hold .grid:first-child .overview{ margin-right:20px; } .grid-group{ margin-bottom:40px; } table.table{ width:100%;margin:0; } table.table > tbody > tr > td{ padding:18px 12px; } table.table.line td{ vertical-align: top;border-top: 1px solid #dee2e6; } table.table tr > th{ padding:12px;background-color:#f2f2f2; } table.table tr > th.sub{ padding:8px 12px;background-color:#f8f8f8;font-weight:normal;font-style:italic;border-top: 1px solid #dee2e6; } .statistics .grid{ text-align:center;color:#ecf0f1; } .statistics .grid div{ background-color:#a71d1c;border-radius:4px;margin:0 8px;padding:16px 0;border:1px solid #840404;border-bottom:2px solid #E66363; } .statistics .grid:first-child div{ margin-left:0; } .statistics .grid:nth-child(2) div{ margin-right:0; } .statistics .grid div span{ font-size:18px; } .statistics .grid div p{ font-size:12px; } .title-top{ padding:20px 4px; } .title-top div:nth-child(1){ float:left;width:200px; } .title-top div:nth-child(2){ float:right;width:270px;text-align:right; } .overview{ margin-bottom:20px;border-radius:5px;border-bottom:2px solid #ABABAB; } .overview table{ width:100%; } .overview table thead td{ padding:12px 14px 12px 14px;background-color:#777;color:#ecf0f1;border-top:1px solid #7f7f7f;border-bottom:1px solid #7f7f7f; } .overview table thead td:first-child{ border-left:1px solid #7f7f7f;border-top-left-radius:3px; } .overview table thead td:last-child{ border-right:1px solid #7f7f7f;border-top-right-radius:3px; } .overview table tbody tr:last-child td:first-child{ border-bottom-left-radius:3px; } .overview table tbody tr:last-child td:last-child{ border-bottom-right-radius:3px; } .overview table tbody td{ padding:16px 14px 16px 14px;background-color:#fff;border-bottom:1px solid #B0AFAF; } .overview table tbody td:first-child{ border-left:1px solid #B0AFAF; } .overview table tbody td:last-child{ border-right:1px solid #B0AFAF; } .form{ margin-bottom:20px;border:1px solid #B0AFAF;border-bottom:3px solid #b0afaf;border-radius:3px;background-color:#fff; } .form h2{ width:962x;padding:15px 8px;color:#ecf0f1;background-color:#777;font-weight:normal;font-size:13px; } .form ul{ margin:20px 24px; } .form ul li{ padding:10px;} .form ul li span{ font-weight:bold; } .form ul li div{ margin:6px 0; } .form .buttons{ margin:5px;padding:10px 20px;border-top:1px solid #B0AFAF; } .form .table td:first-child{ font-weight:bold;width:200px; } .form .table td:last-child{ width:50px;text-align:right; } ul.langs{ margin:0;display:flex;background-color:#f8f8f8;width:100%;border-bottom:1px solid #ddd; } ul.langs li{ padding:0; } ul.langs li a{ display:block;padding:20px;width:40px;text-align:center;margin-bottom:-1px; } ul.langs li a.active{ background-color:#fff;border-right:1px solid #ddd;border-left:1px solid #ddd; } ul.langs li:nth-child(1) a.active{ border-left:0px;} #dynamic{ background-color:#fff; border:1px solid #B0AFAF; border-radius:3px; } #dynamic .form{ padding:10px; } #dynamic .step{ z-index:999;border-bottom:1px solid #B0AFAF;padding:16px;font-weight:bold;background:#777;color:#ecf0f1; } #dynamic .input-group > .input-group-addon{ border-width:0px;border-bottom-width:1px;border-top-right-radius:4px;background-color:#f8f8f8; } #dynamic .input-group > textarea, #dynamic .input-group > input{ border-bottom-left-radius:0px;padding:6px; } #dynamic .holder input, #dynamic .holder textarea{ border:none;border-bottom:1px solid #B0AFAF; } #dynamic .holder input:disabled, #dynamic .holder textarea:disabled{ background-color:#fff; } #dynamic .holder .content > div{ padding:20px; } #dynamic .holder .content > div p{ margin:5px 0 0; } #dynamic .holder .item{ border-bottom:1px dashed #ccc;display:flex;justify-content:space-between; } #dynamic .holder .item > div{ margin:20px; } #dynamic .holder .item > div:first-child{ flex-grow:1; } #dynamic .holder .item > .suggest img{ width:24px; } #dynamic .holder .item h3{ margin-bottom:12px;padding:0; } #dynamic .holder .item .multifiles{ padding:0 0 10px; } #dynamic .holder .item .multifiles:nth-of-type(1){ padding:0; } #dynamic .holder .item .multifiles:nth-of-type(2){ padding:10px 0; } #dynamic .holder .item .extrafile{ padding-top:7px !important;font-size:12px; } #dynamic .holder .item .element{ padding:0 0 10px; } #dynamic .holder .item .parent, #dynamic .holder .item .tag{ padding:10px 0;font-size:11px; } #dynamic .holder .item .parent a, #dynamic .holder .item .tag a{ text-decoration:underline; } #dynamic .holder .item .parent a:hover, #dynamic .holder .item .tag a:hover{ color:#000; } #dynamic .holder .item .suggested{ margin-top:20px; } #dynamic .holder .item .suggested div{ margin:10px 0; } #dynamic .holder .item .suggested div:nth-child(1){ text-decoration:underline; } #dynamic .holder .edit .child-question{ margin:5px;padding:10px 20px;border-bottom:1px solid #B0AFAF; } #dynamic .holder .edit .child-question tr:first-child td{ vertical-align:top; } #dynamic .holder .edit .child-question tr:first-child td:first-child{ padding-right:10px;padding-top:2px; } #dynamic .holder .edit .define-data{ padding:20px 30px; } #dynamic .holder .edit .define-data td{ padding-bottom:20px;padding-top:12px; } #dynamic .holder .edit .define-data td:first-child{ padding-top:12px;padding-right:30px; } #dynamic .holder .edit .define-data .antwoord-data{ padding-top:10px; } #dynamic .holder .edit .define-data td .element{ padding:0 0 10px;display: flex; } #dynamic .holder .edit .define-data td .element > div:nth-child(2), #dynamic .holder .edit .define-data td .element > div:nth-child(3){ padding-top:2px;width:40px;text-align:right; } #dynamic .holder .edit .define-data td .element img.action{ margin-left:10px;margin-top:4px;height:16px; } #dynamic .holder .edit .define-data .extrarow{ font-size:11px;font-style:italic;text-decoration:none; } #dynamic .holder .edit .define-data.line, #dynamic .holder .edit .line{ border-top:1px solid #B0AFAF; } #dynamic .holder .edit .extra-options{ margin:5px;padding:10px 20px;border-top:1px solid #B0AFAF; } #dynamic .holder .edit .extra-options table{ width:100%; } #dynamic .holder .edit .extra-options table td:nth-child(1){ width:120px; } #dynamic .holder .edit .extra-options table td:nth-child(2){ width:30px;text-align:center; } #dynamic .holder .edit .extra-options table td:nth-child(3){ width:30px;text-align:center; } #dynamic .holder .edit .extra-options table td:nth-child(4){ text-align:right; } #antwoord-data .element:nth-of-type(1) > .cac::before, #antwoord-data .element:nth-of-type(1) > .car::before { content: " "; display: block; height: 20px; margin-left: 27px; margin-top: -22px; position: absolute; width: 20px; background-repeat:no-repeat; background-size:12px auto; } #antwoord-data .element:nth-of-type(1) > .car::before { background-image:url(../img/icons/small-asterisk.png); } #antwoord-data .element:nth-of-type(1) > .cac::before { background-image:url(../img/icons/small-lock.png); } #antwoord-data .element > div:nth-of-type(1){ min-width:360px;display:flex; } #antwoord-data .element > div:nth-of-type(1) > div{ padding:0 8px; } #login{ margin:40px auto 0;max-width:500px; } #login .login-input{ padding:8px; } #login .login-button{ margin:10px; } #login .login-input input{ padding:8px;width:400px; } .actions a img, a.action img{ height:18px; } .box-shadow .statistics .grid div, .box-shadow #menu{ box-shadow: 0 0 2px #a71d1c;-moz-box-shadow: 0 0 4px #a71d1c; } .box-shadow .button, .box-shadow .small-button, .box-shadow .overview, .box-shadow .form, .box-shadow #dynamic{ box-shadow: 0 0 4px #bbb;-moz-box-shadow: 0 0 4px #bbb; } #footer{ text-align:right;font-size:10px;color:#B1B1B1;padding:10px 8px; } #footer.loginpanel{ margin:20px auto;width:500px;padding-right:100px; } #footer a{ color:#B1B1B1; } /* no responsive menu */ @media (max-width: 768px) { .nav-flat li { display: inline !important; } .nav-flat li a { display: inline !important; } .dropdown-menu li { display: block !important; } .dropdown-menu li a { display: block !important; } }