a4a1fbc14d
new gulp setup including new npm packages new file structure moved all development files to source/ used files are in build/ now
1303 lines
33 KiB
CSS
1303 lines
33 KiB
CSS
@charset "UTF-8";
|
||
/*
|
||
* # TABLE OF CONTENTS
|
||
*
|
||
* - Reset
|
||
* - Global functions and mixins
|
||
* - Configuration
|
||
* - Special modules
|
||
* - Basic styles
|
||
* - Common
|
||
* - Typography
|
||
*
|
||
* - Sections
|
||
* - Grouping
|
||
* - Textlevel
|
||
* - Embedded
|
||
* - Tables
|
||
* - Interactive
|
||
* - Modules
|
||
*
|
||
*/
|
||
@import url(../../vendor/normalize.css);
|
||
.sym_glass::before {
|
||
content: ""; }
|
||
|
||
.sym_music::before {
|
||
content: ""; }
|
||
|
||
.sym_search::before {
|
||
content: ""; }
|
||
|
||
.sym_envelope-o::before {
|
||
content: ""; }
|
||
|
||
.sym_heart::before {
|
||
content: ""; }
|
||
|
||
a[href]:focus {
|
||
outline: 0; }
|
||
|
||
area[href]:focus {
|
||
outline: 0; }
|
||
|
||
button:not([disabled]):focus {
|
||
outline: 0; }
|
||
|
||
input:not([disabled]):focus {
|
||
outline: 0; }
|
||
|
||
select:not([disabled]):focus {
|
||
outline: 0; }
|
||
|
||
textarea:not([disabled]):focus {
|
||
outline: 0; }
|
||
|
||
*[tabindex]:focus {
|
||
outline: 0; }
|
||
|
||
/**
|
||
* @description
|
||
* Generates cross-browser-compatible output for a given element with its value.
|
||
*
|
||
* @author sthag
|
||
*
|
||
* @param values
|
||
* @returns
|
||
* -webkit-<name>: <values>
|
||
* ...-<name>: <values>
|
||
*
|
||
* @example
|
||
* .selector
|
||
* @include vendor-prefix(hyphens, auto)
|
||
*/
|
||
.magic {
|
||
display: none; }
|
||
|
||
.center_50 {
|
||
margin-right: 25%;
|
||
margin-left: 25%; }
|
||
|
||
.center_25 {
|
||
margin-right: 37.5%;
|
||
margin-left: 37.5%; }
|
||
|
||
.width_full, .table__file_simple {
|
||
width: 100%;
|
||
margin-right: 0;
|
||
margin-left: 0; }
|
||
|
||
.height_basic {
|
||
height: 1024px; }
|
||
|
||
.txt_center {
|
||
text-align: center !important; }
|
||
|
||
.txt_right {
|
||
text-align: right !important; }
|
||
|
||
.txt_left {
|
||
text-align: left !important; }
|
||
|
||
.space_right {
|
||
margin-right: 32px; }
|
||
|
||
.clear {
|
||
clear: both; }
|
||
.clear::before, .clear::after {
|
||
clear: both; }
|
||
|
||
.overflow, .nav__horizontal ul, .nav__center_old ul, .header__page nav ul {
|
||
overflow: auto; }
|
||
|
||
.float_space_left, .list__horizontal li, .box__inline_left, .box__file_tile, .nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li {
|
||
float: left;
|
||
margin-right: 32px; }
|
||
|
||
.float_half_size {
|
||
float: left;
|
||
width: 50%; }
|
||
|
||
.x_long {
|
||
overflow-x: scroll; }
|
||
|
||
.pos_full_view, .hover_full_view_change {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh; }
|
||
|
||
.pos_full_page {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0; }
|
||
|
||
.pos_abs {
|
||
position: absolute; }
|
||
|
||
.pos_rel {
|
||
position: relative; }
|
||
|
||
.pos_fix {
|
||
position: fixed; }
|
||
|
||
.pos_bottom {
|
||
bottom: 0; }
|
||
|
||
.pos_full_view {
|
||
background-color: rgba(250, 216, 3, 0.5); }
|
||
|
||
.pos_full_page {
|
||
background-color: rgba(39, 63, 139, 0.25); }
|
||
|
||
.hover_back_change {
|
||
background-color: #666666;
|
||
-webkit-transition: background-color .2s ease-in-out;
|
||
transition: background-color .2s ease-in-out; }
|
||
.hover_back_change:hover {
|
||
background-color: gray; }
|
||
|
||
.hover_full_view_change {
|
||
z-index: 100;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
-webkit-transition: background-color .2s ease-in-out;
|
||
transition: background-color .2s ease-in-out;
|
||
pointer-events: none; }
|
||
|
||
.flex, .flex__wrap, .flex__row, .flex__column_wrap, .nav__column ul {
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: flex; }
|
||
|
||
.flex__wrap {
|
||
-ms-flex-wrap: wrap;
|
||
flex-wrap: wrap; }
|
||
|
||
.flex__row {
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-direction: normal;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
-webkit-box-pack: start;
|
||
-ms-flex-pack: start;
|
||
justify-content: flex-start; }
|
||
|
||
.flex__child, .flex__column_wrap .column, .nav__column ul li {
|
||
-webkit-box-flex: 0;
|
||
-ms-flex: 0 1 auto;
|
||
flex: 0 1 auto; }
|
||
|
||
.flex__child_one {
|
||
-webkit-box-flex: 1;
|
||
-ms-flex: 1;
|
||
flex: 1; }
|
||
|
||
.flex__child_end {
|
||
-ms-flex-item-align: end;
|
||
align-self: flex-end; }
|
||
|
||
.txt_light_color {
|
||
color: #666666; }
|
||
|
||
.a__button, .a__button_text, .a__button_border {
|
||
display: inline-block;
|
||
padding: calc(8px - 3px) 8px;
|
||
background-color: rgba(82, 190, 209, 0.2);
|
||
border-radius: 1px; }
|
||
.a__button:active, .a__button_text:active, .a__button_border:active, .a__button:focus, .a__button_text:focus, .a__button_border:focus, .a__button:hover, .a__button_text:hover, .a__button_border:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
color: white;
|
||
border-color: transparent; }
|
||
|
||
.span__solo, h6, p, .block__column_2, .block__column_3, caption, li, dt, dd, figcaption, th, td, legend, label {
|
||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||
font-size: 1em;
|
||
line-height: 1.5; }
|
||
|
||
pre, code, .demo__query_example:after, .code__solo, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
|
||
font-family: Courier New, monospace;
|
||
font-size: 1em;
|
||
line-height: 1.5; }
|
||
|
||
.print_body *[class^="din"] p, .print_body *[class^="din"] .block__column_2, .print_body *[class^="din"] .block__column_3, .print_body *[class^="din"] caption {
|
||
font-family: Courier New, monospace;
|
||
font-size: 1em;
|
||
line-height: 1.5; }
|
||
|
||
h1, .print_body .page_date, .print_body .page_no {
|
||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||
font-size: 3.1em;
|
||
font-weight: 300;
|
||
line-height: 1.5; }
|
||
|
||
h2 {
|
||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||
font-size: 2.5em;
|
||
font-weight: 300;
|
||
line-height: 1.5; }
|
||
|
||
h3, h4 {
|
||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||
font-size: 1.8em;
|
||
font-weight: 300;
|
||
line-height: 1.5; }
|
||
|
||
h5 {
|
||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||
font-size: 1.35em;
|
||
font-weight: 300;
|
||
line-height: 1.5; }
|
||
|
||
.span__solo {
|
||
color: black; }
|
||
|
||
.table__link .cell__text .shorten {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-o-text-overflow: ellipsis; }
|
||
|
||
html {
|
||
height: 100%; }
|
||
|
||
body {
|
||
position: relative;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
font-family: Roboto, Segoe UI, Liberation Sans, Source Sans, Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||
font-size: 17px;
|
||
line-height: 1;
|
||
color: black;
|
||
background-color: gray; }
|
||
body *,
|
||
body ::before,
|
||
body ::after {
|
||
-webkit-box-sizing: inherit;
|
||
box-sizing: inherit; }
|
||
body:hover .layer__hover {
|
||
background-color: transparent; }
|
||
|
||
.sec__main_center, .demo__intro {
|
||
width: 96%;
|
||
margin: 0 auto;
|
||
padding-top: 32px; }
|
||
@media (min-width: 768px) {
|
||
.sec__main_center, .demo__intro {
|
||
width: 80%; } }
|
||
@media (min-width: 1024px) {
|
||
.sec__main_center, .demo__intro {
|
||
width: 60%; } }
|
||
@media (min-width: 1680px) {
|
||
.sec__main_center, .demo__intro {
|
||
width: 48%; } }
|
||
|
||
aside.right + section {
|
||
margin-right: calc(20% + 8px); }
|
||
aside.left + section {
|
||
margin-left: calc(20% + 8px); }
|
||
|
||
aside {
|
||
width: 20%; }
|
||
aside.left {
|
||
float: left; }
|
||
aside.right {
|
||
float: right; }
|
||
aside *:first-child {
|
||
margin-top: 0; }
|
||
|
||
.header__page {
|
||
overflow: auto; }
|
||
|
||
h1 {
|
||
margin: 128px 0 32px; }
|
||
|
||
h2 {
|
||
margin: 64px 0 32px; }
|
||
|
||
h3 {
|
||
margin: 16px 0 16px;
|
||
text-transform: uppercase; }
|
||
|
||
h4 {
|
||
margin: 16px 0 16px;
|
||
text-transform: none; }
|
||
|
||
h5 {
|
||
margin: 16px 0 8px;
|
||
text-transform: none; }
|
||
|
||
h6 {
|
||
margin: 8px 0;
|
||
text-transform: none;
|
||
font-weight: bold; }
|
||
|
||
p, .block__column_2, .block__column_3, caption {
|
||
margin: 8px 0; }
|
||
p code, .block__column_2 code, .block__column_3 code, caption code, p .demo__query_example:after, .block__column_2 .demo__query_example:after, .block__column_3 .demo__query_example:after, caption .demo__query_example:after {
|
||
padding: 1px 4px;
|
||
font-size: 1em;
|
||
line-height: 1; }
|
||
|
||
hr, .hr__hidden, .hr__dotted {
|
||
margin: 32px auto;
|
||
border-width: 1px 0 0;
|
||
border-style: solid;
|
||
border-color: black; }
|
||
|
||
.hr__hidden {
|
||
border-color: transparent; }
|
||
|
||
.hr__dotted {
|
||
border-style: dotted; }
|
||
|
||
.pre__code {
|
||
border-color: rgba(255, 255, 255, 0.1);
|
||
border-style: dotted;
|
||
border-width: 0 0 0 4px;
|
||
border-radius: 1px;
|
||
padding: 8px;
|
||
background-color: rgba(255, 255, 255, 0.1); }
|
||
.pre__code code, .pre__code .demo__query_example:after {
|
||
background-color: transparent; }
|
||
|
||
blockquote {
|
||
margin: 8px 2em; }
|
||
|
||
.quote__mark p::before, .quote__mark .block__column_2::before, .quote__mark .block__column_3::before, .quote__mark caption::before {
|
||
content: "\201E \0020"; }
|
||
.quote__mark p::after, .quote__mark .block__column_2::after, .quote__mark .block__column_3::after, .quote__mark caption::after {
|
||
content: "\201C \0020"; }
|
||
.quote__mark .quote__source::before, .quote__mark .quote__source::after {
|
||
content: ""; }
|
||
|
||
dl, ul, ol {
|
||
margin: 16px 0 8px; }
|
||
|
||
ul, ol {
|
||
padding-left: 2em; }
|
||
|
||
dd {
|
||
margin-left: 2em; }
|
||
|
||
ul li {
|
||
list-style: square; }
|
||
|
||
.list__dash li {
|
||
list-style: none;
|
||
position: relative; }
|
||
.list__dash li::before {
|
||
content: "_";
|
||
position: absolute;
|
||
left: -1em; }
|
||
|
||
.list__link li {
|
||
margin-bottom: 2px;
|
||
text-transform: uppercase; }
|
||
.list__link li a {
|
||
display: block;
|
||
padding: calc(8px - 3px) 8px;
|
||
color: black; }
|
||
.list__link li a img {
|
||
margin-right: 8px;
|
||
padding-bottom: .2em;
|
||
vertical-align: text-bottom; }
|
||
.list__link li a:active, .list__link li a:focus, .list__link li a:hover {
|
||
background-color: #0c85ff;
|
||
color: white; }
|
||
|
||
.list__horizontal {
|
||
overflow: auto; }
|
||
|
||
figure {
|
||
margin: 16px 2em; }
|
||
|
||
.box__page {
|
||
height: 100vh; }
|
||
|
||
.box__info {
|
||
padding: 16px 2em;
|
||
border-right: 8px solid rgba(82, 190, 209, 0.6);
|
||
background-color: rgba(82, 190, 209, 0.1) !important; }
|
||
|
||
.box__main_indent {
|
||
margin-left: 25%; }
|
||
|
||
.block__column_line {
|
||
-webkit-column-rule: 1px solid black;
|
||
column-rule: 1px solid black; }
|
||
|
||
.block__column_2 {
|
||
-webkit-column-count: 2;
|
||
column-count: 2;
|
||
-webkit-column-gap: 32px;
|
||
column-gap: 32px; }
|
||
|
||
.block__column_3 {
|
||
-webkit-column-count: 3;
|
||
column-count: 3;
|
||
-webkit-column-gap: 64px;
|
||
column-gap: 64px; }
|
||
|
||
.box__space {
|
||
position: relative;
|
||
width: 100%; }
|
||
|
||
.box__cube {
|
||
float: left;
|
||
display: table;
|
||
width: 64px;
|
||
text-align: center;
|
||
vertical-align: middle; }
|
||
.box__cube span {
|
||
display: table-cell; }
|
||
|
||
.box__placeholder {
|
||
width: 100%;
|
||
height: 64px;
|
||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 1px;
|
||
padding: 8px;
|
||
background-color: rgba(0, 0, 0, 0.1); }
|
||
.box__placeholder svg {
|
||
vertical-align: top; }
|
||
|
||
.box__placeholder_bkg {
|
||
width: 100%;
|
||
height: 64px;
|
||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 1px;
|
||
padding: 8px;
|
||
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
|
||
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
|
||
background-color: rgba(0, 0, 0, 0.1); }
|
||
|
||
.flex__column_wrap .column {
|
||
-webkit-box-flex: 1;
|
||
-ms-flex-positive: 1;
|
||
flex-grow: 1; }
|
||
|
||
a {
|
||
color: #52bed1;
|
||
text-decoration: none; }
|
||
a:active, a:focus, a:hover {
|
||
color: white; }
|
||
|
||
.a__line {
|
||
border-bottom-width: 1px;
|
||
border-bottom-style: dotted;
|
||
border-color: black;
|
||
background-color: transparent;
|
||
color: black;
|
||
-webkit-transition: color 150ms ease;
|
||
transition: color 150ms ease; }
|
||
.a__line:active, .a__line:focus, .a__line:hover {
|
||
background-color: #0c85ff;
|
||
color: white; }
|
||
|
||
.a__button_text, .a__button_border {
|
||
padding: calc(8px - 1px) calc(8px * 2);
|
||
background-color: transparent;
|
||
color: black; }
|
||
|
||
.a__button_border {
|
||
border: 1px solid black; }
|
||
|
||
i, em {
|
||
font-style: italic; }
|
||
|
||
.i__bright {
|
||
font-style: normal;
|
||
color: white; }
|
||
|
||
b, strong {
|
||
font-weight: 500; }
|
||
|
||
cite {
|
||
font-style: italic; }
|
||
|
||
code, .demo__query_example:after {
|
||
color: #1f1f1f;
|
||
background-color: rgba(255, 255, 255, 0.1); }
|
||
|
||
.code__solo {
|
||
padding: 1px 4px;
|
||
color: black; }
|
||
|
||
mark {
|
||
background-color: #fad803; }
|
||
|
||
.mark__cursor {
|
||
color: white;
|
||
background-color: black; }
|
||
|
||
::-moz-selection {
|
||
color: white;
|
||
background-color: black; }
|
||
|
||
::selection {
|
||
color: white;
|
||
background-color: black; }
|
||
|
||
img {
|
||
vertical-align: top; }
|
||
|
||
table {
|
||
margin: 16px 0;
|
||
border: 1px solid black;
|
||
border-collapse: collapse; }
|
||
|
||
th, td {
|
||
padding: 4px; }
|
||
|
||
th {
|
||
border: 1px solid black;
|
||
text-align: left; }
|
||
|
||
.precol {
|
||
border-right: 1px solid black; }
|
||
|
||
td {
|
||
border-right: 1px solid black;
|
||
border-bottom: 1px solid black; }
|
||
|
||
td:last-child {
|
||
border-right: 0; }
|
||
|
||
tr:last-child td {
|
||
border-bottom: 0; }
|
||
|
||
tfoot tr:first-child td {
|
||
border-top: 1px solid black; }
|
||
|
||
.table__blank {
|
||
border: 1px solid transparent; }
|
||
.table__blank th, .table__blank td {
|
||
border: 1px solid transparent; }
|
||
|
||
.table__free {
|
||
border: 1px solid transparent; }
|
||
|
||
.table__stripe td {
|
||
border-top: 0;
|
||
border-bottom: 0; }
|
||
.table__stripe tr:nth-child(even) td {
|
||
background-color: rgba(255, 255, 255, 0.1); }
|
||
|
||
.table__fix {
|
||
table-layout: fixed; }
|
||
|
||
caption {
|
||
padding: 4px 0;
|
||
border: 1px dotted black;
|
||
text-align: center; }
|
||
|
||
fieldset {
|
||
margin: 16px 0;
|
||
padding: 8px;
|
||
border: 1px solid black; }
|
||
|
||
legend {
|
||
padding: 0 4px; }
|
||
|
||
input, button, textarea {
|
||
margin: 0 32px; }
|
||
input[disabled="disabled"], input[disabled], button[disabled="disabled"], button[disabled], textarea[disabled="disabled"], textarea[disabled] {
|
||
cursor: not-allowed; }
|
||
|
||
label input {
|
||
margin-left: 8px; }
|
||
|
||
input {
|
||
color: #1a1a1a; }
|
||
input[disabled="disabled"], input[disabled] {
|
||
cursor: not-allowed; }
|
||
|
||
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) {
|
||
border: 2px solid white;
|
||
padding: 4px;
|
||
background-color: #e6e6e6; }
|
||
input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover {
|
||
background-color: white; }
|
||
input[type="color"][readonly="readonly"], input[type="color"][readonly], input[type="date"][readonly="readonly"], input[type="date"][readonly], input[type="datetime"][readonly="readonly"], input[type="datetime"][readonly], input[type="datetime-local"][readonly="readonly"], input[type="datetime-local"][readonly], input[type="email"][readonly="readonly"], input[type="email"][readonly], input[type="month"][readonly="readonly"], input[type="month"][readonly], input[type="number"][readonly="readonly"], input[type="number"][readonly], input[type="password"][readonly="readonly"], input[type="password"][readonly], input[type="search"][readonly="readonly"], input[type="search"][readonly], input[type="tel"][readonly="readonly"], input[type="tel"][readonly], input[type="text"][readonly="readonly"], input[type="text"][readonly], input[type="time"][readonly="readonly"], input[type="time"][readonly], input[type="url"][readonly="readonly"], input[type="url"][readonly], input[type="week"][readonly="readonly"], input[type="week"][readonly], input:not([type])[readonly="readonly"], input:not([type])[readonly] {
|
||
border-color: #b3b3b3;
|
||
background-color: #999999; }
|
||
input[type="color"][disabled="disabled"], input[type="color"][disabled], input[type="date"][disabled="disabled"], input[type="date"][disabled], input[type="datetime"][disabled="disabled"], input[type="datetime"][disabled], input[type="datetime-local"][disabled="disabled"], input[type="datetime-local"][disabled], input[type="email"][disabled="disabled"], input[type="email"][disabled], input[type="month"][disabled="disabled"], input[type="month"][disabled], input[type="number"][disabled="disabled"], input[type="number"][disabled], input[type="password"][disabled="disabled"], input[type="password"][disabled], input[type="search"][disabled="disabled"], input[type="search"][disabled], input[type="tel"][disabled="disabled"], input[type="tel"][disabled], input[type="text"][disabled="disabled"], input[type="text"][disabled], input[type="time"][disabled="disabled"], input[type="time"][disabled], input[type="url"][disabled="disabled"], input[type="url"][disabled], input[type="week"][disabled="disabled"], input[type="week"][disabled], input:not([type])[disabled="disabled"], input:not([type])[disabled] {
|
||
border-color: transparent; }
|
||
|
||
textarea {
|
||
border: 2px solid white;
|
||
padding: 4px;
|
||
background-color: #e6e6e6; }
|
||
textarea:hover {
|
||
background-color: white; }
|
||
textarea[readonly="readonly"], textarea[readonly] {
|
||
border-color: #b3b3b3;
|
||
background-color: #999999; }
|
||
textarea[disabled="disabled"], textarea[disabled] {
|
||
border-color: transparent; }
|
||
|
||
input[type="color"] {
|
||
line-height: 1; }
|
||
|
||
input[type="date"] {
|
||
line-height: 1; }
|
||
|
||
input[type="datetime"] {
|
||
line-height: 1; }
|
||
|
||
input[type="datetime-local"] {
|
||
line-height: 1; }
|
||
|
||
input[type="email"] {
|
||
line-height: 1; }
|
||
|
||
input[type="month"] {
|
||
line-height: 1; }
|
||
|
||
input[type="number"] {
|
||
line-height: 1; }
|
||
|
||
input[type="password"] {
|
||
line-height: 1; }
|
||
|
||
input[type="search"] {
|
||
line-height: 1; }
|
||
|
||
input[type="tel"] {
|
||
line-height: 1; }
|
||
|
||
input[type="text"] {
|
||
line-height: 1; }
|
||
|
||
input[type="time"] {
|
||
line-height: 1; }
|
||
|
||
input[type="url"] {
|
||
line-height: 1; }
|
||
|
||
input[type="week"] {
|
||
line-height: 1; }
|
||
|
||
input:not([type]) {
|
||
line-height: 1; }
|
||
|
||
button {
|
||
padding: calc(8px - 3px) 8px; }
|
||
|
||
input[type="button"] {
|
||
padding: calc(8px - 3px) 8px; }
|
||
|
||
input[type="reset"] {
|
||
padding: calc(8px - 3px) 8px; }
|
||
|
||
input[type="submit"] {
|
||
padding: calc(8px - 3px) 8px; }
|
||
|
||
label + input,
|
||
.input__label_right {
|
||
margin: 0 8px; }
|
||
|
||
.label__table, .input__default label {
|
||
display: table; }
|
||
.label__table input, .input__default label input {
|
||
display: table-cell; }
|
||
|
||
.input__default label {
|
||
margin: 4px 0; }
|
||
.input__default label input {
|
||
padding: 4px 5px;
|
||
border-style: solid;
|
||
border-color: transparent;
|
||
background-color: #e6e6e6;
|
||
color: #1a1a1a; }
|
||
.input__default label input:hover {
|
||
background-color: black;
|
||
color: white; }
|
||
|
||
nav ul {
|
||
padding-left: 0; }
|
||
nav li {
|
||
margin-bottom: 8px;
|
||
list-style: none; }
|
||
|
||
.nav__horizontal ul ul, .nav__center_old ul ul, .header__page nav ul ul {
|
||
margin: 8px 0; }
|
||
.nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li {
|
||
margin-right: 8px;
|
||
margin-bottom: 0; }
|
||
.nav__horizontal ul li:last-child, .nav__center_old ul li:last-child, .header__page nav ul li:last-child {
|
||
margin-right: 0; }
|
||
|
||
.nav__right {
|
||
float: right;
|
||
margin-left: 8px; }
|
||
.nav__right .align_parent {
|
||
margin-right: -8px; }
|
||
|
||
.nav__separate li {
|
||
position: relative;
|
||
padding-left: 1px; }
|
||
.nav__separate li:not(:first-child)::before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: black; }
|
||
|
||
.nav__separate_right {
|
||
float: right; }
|
||
.nav__separate_right li {
|
||
position: relative; }
|
||
.nav__separate_right li:first-child {
|
||
padding-left: 17px; }
|
||
.nav__separate_right li:first-child::before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: white;
|
||
margin: 0 8px; }
|
||
|
||
.nav__center_old {
|
||
float: right;
|
||
position: relative;
|
||
left: -50%; }
|
||
.nav__center_old ul {
|
||
position: relative;
|
||
left: 50%;
|
||
text-align: center; }
|
||
|
||
.nav__column {
|
||
position: relative;
|
||
margin: 8px 0; }
|
||
.nav__column ul {
|
||
margin: 0 128px; }
|
||
.nav__column ul li {
|
||
-webkit-box-flex: 1;
|
||
-ms-flex-positive: 1;
|
||
flex-grow: 1;
|
||
margin: 0;
|
||
text-align: center; }
|
||
.nav__column ul li a {
|
||
display: block; }
|
||
|
||
.nav__page_meta {
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 16px; }
|
||
.nav__page_meta ul {
|
||
margin: 8px 0; }
|
||
.nav__page_meta li {
|
||
margin-bottom: 0; }
|
||
.nav__page_meta .a_button_meta {
|
||
display: inline-block; }
|
||
.nav__page_meta .a_button_meta:active, .nav__page_meta .a_button_meta:focus {
|
||
background-color: transparent; }
|
||
.nav__page_meta .a_button_meta:hover {
|
||
background-color: #0c85ff; }
|
||
|
||
.header__page nav a:active, .header__page nav a:focus, .header__page nav a:hover {
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
color: black; }
|
||
|
||
.table__link {
|
||
width: 100%;
|
||
border: 0;
|
||
table-layout: auto; }
|
||
.table__link tbody {
|
||
border-bottom: 1px solid black; }
|
||
.table__link tbody:hover {
|
||
background-color: #cccccc; }
|
||
.table__link th, .table__link td {
|
||
border: 0; }
|
||
.table__link .cell__icon {
|
||
width: 48px;
|
||
text-align: center; }
|
||
.table__link .cell__icon img {
|
||
vertical-align: text-top; }
|
||
.table__link .cell__link {
|
||
padding-right: 8px;
|
||
padding-left: 8px; }
|
||
.table__link .cell__link:hover {
|
||
background-color: #0c85ff; }
|
||
.table__link .cell__link:hover a:first-child {
|
||
display: none; }
|
||
.table__link .cell__link:hover a:last-child {
|
||
display: block;
|
||
color: white; }
|
||
.table__link .cell__link a {
|
||
display: block; }
|
||
.table__link .cell__link a:last-child {
|
||
display: none; }
|
||
.table__link th:last-child, .table__link .cell__date {
|
||
width: 16%;
|
||
text-align: center; }
|
||
.table__link .cell__text {
|
||
padding-right: 8px;
|
||
padding-left: 8px; }
|
||
.table__link .cell__text div {
|
||
width: 100%; }
|
||
.table__link .cell__text .shorten {
|
||
max-height: 44px; }
|
||
|
||
.card_body .bkg_box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%; }
|
||
|
||
.card_body {
|
||
height: 100%;
|
||
/* .full {
|
||
position: absolute;
|
||
width: 128px;
|
||
height: 128px;
|
||
top: 16px;
|
||
left: 16px;
|
||
background-color: #fff;
|
||
}
|
||
.mark {
|
||
float: left;
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-top: 16px;
|
||
}
|
||
*/ }
|
||
.card_body .bkg_box {
|
||
-webkit-transition-duration: 800ms;
|
||
transition-duration: 800ms;
|
||
overflow: hidden;
|
||
vertical-align: top;
|
||
z-index: -1; }
|
||
.card_body .bkg_box > svg {
|
||
position: relative; }
|
||
.card_body .flex_wrap_center {
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
-webkit-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
height: 100%; }
|
||
.card_body .flex_content {
|
||
position: relative;
|
||
padding: 64px 64px 24px 64px;
|
||
border: 1px solid #FFF;
|
||
background-color: #F5F5F5;
|
||
z-index: 40; }
|
||
.card_body h1 {
|
||
margin: 16px 0;
|
||
color: #1E1E1E;
|
||
font-size: 24px;
|
||
line-height: 1.4em;
|
||
font-weight: normal; }
|
||
.card_body p, .card_body .block__column_2, .card_body .block__column_3, .card_body caption {
|
||
margin-top: 0;
|
||
margin-bottom: 16px;
|
||
font-size: 12px;
|
||
line-height: 1.4em; }
|
||
.card_body .marked {
|
||
padding-left: 1em;
|
||
text-indent: -1em;
|
||
text-align: center; }
|
||
.card_body .marked::before {
|
||
content: "* "; }
|
||
.card_body .decent {
|
||
color: #666; }
|
||
.card_body a {
|
||
color: #000;
|
||
text-decoration: none; }
|
||
.card_body a:hover {
|
||
color: #F4F9FA;
|
||
background-color: #0C85FF;
|
||
text-decoration: none; }
|
||
|
||
.wip, .wip_txt {
|
||
border-right: 8px solid rgba(220, 20, 60, 0.8);
|
||
background-color: rgba(220, 20, 60, 0.1) !important; }
|
||
|
||
.wip::before, .wip::after {
|
||
content: "";
|
||
display: block;
|
||
height: 48px; }
|
||
|
||
.exp_expose_pre::after {
|
||
content: "";
|
||
display: block;
|
||
height: 48px;
|
||
background-color: rgba(183, 224, 240, 0.1) !important; }
|
||
|
||
.exp_expose_post::before {
|
||
content: "";
|
||
display: block;
|
||
height: 48px;
|
||
background-color: rgba(183, 224, 240, 0.1) !important; }
|
||
|
||
.exp_expose::before, .exp_expose::after {
|
||
content: "";
|
||
display: block;
|
||
height: 48px;
|
||
background-color: rgba(183, 224, 240, 0.1) !important; }
|
||
|
||
.exp_pop {
|
||
display: none; }
|
||
|
||
.exp_wrap {
|
||
position: relative; }
|
||
|
||
.exp_pop {
|
||
position: absolute;
|
||
z-index: 100;
|
||
top: 128px;
|
||
left: 128px;
|
||
padding: 4px;
|
||
border: 4px solid gray;
|
||
border-radius: 4px;
|
||
background-color: gray;
|
||
pointer-events: none; }
|
||
|
||
.exp_marker_pop {
|
||
position: absolute;
|
||
top: -12.75px;
|
||
right: -8.5px;
|
||
width: 17px;
|
||
height: 17px;
|
||
border: 1px solid white;
|
||
border-radius: 17px;
|
||
color: white;
|
||
background-color: black; }
|
||
|
||
.exp_overlay_btn {
|
||
position: fixed;
|
||
width: 3em;
|
||
height: 2em;
|
||
cursor: pointer; }
|
||
|
||
.exp_help_btn {
|
||
display: table;
|
||
right: 16px;
|
||
bottom: 16px;
|
||
background-color: rgba(0, 0, 0, 0.4); }
|
||
.exp_help_btn:hover {
|
||
background-color: white; }
|
||
.exp_help_btn:hover > .span__solo {
|
||
color: black; }
|
||
.exp_help_btn .span__solo {
|
||
display: table-cell;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-family: Courier New, monospace;
|
||
font-size: 1.4em;
|
||
text-align: center;
|
||
vertical-align: middle; }
|
||
|
||
.expose_height {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: rgba(183, 224, 240, 0.1) !important;
|
||
-webkit-transition: height 0.5s ease;
|
||
transition: height 0.5s ease; }
|
||
|
||
.print_body *[class^="din"] {
|
||
background-color: white; }
|
||
|
||
.print_body {
|
||
font-size: 10pt;
|
||
margin: 10vh 20vw; }
|
||
@page {
|
||
.print_body {
|
||
size: A4;
|
||
margin: 1.2cm; } }
|
||
@page :first {
|
||
.print_body {
|
||
size: A4;
|
||
margin: 0; } }
|
||
.print_body .dina4 {
|
||
padding-top: 1.2cm;
|
||
padding-right: 1.2cm;
|
||
padding-bottom: 1.2cm;
|
||
padding-left: 2.4cm; }
|
||
.print_body .dina4 .page_head, .print_body .dina4 .page_foot {
|
||
right: 1.2cm;
|
||
left: 2.4cm; }
|
||
.print_body .dina4 .page_head {
|
||
top: 1.2cm; }
|
||
.print_body .dina4 .page_foot {
|
||
bottom: 1.2cm; }
|
||
.print_body .dina5 {
|
||
padding-top: 0;
|
||
padding-right: 0;
|
||
padding-bottom: 0;
|
||
padding-left: 1.2cm; }
|
||
.print_body .dina5 .page_head, .print_body .dina5 .page_foot {
|
||
right: 0;
|
||
left: 1.2cm; }
|
||
.print_body .dina5 .page_head {
|
||
top: 0; }
|
||
.print_body .dina5 .page_foot {
|
||
bottom: 0; }
|
||
.print_body .dina6 {
|
||
padding-top: 0;
|
||
padding-right: 0;
|
||
padding-bottom: 0;
|
||
padding-left: 1.2cm; }
|
||
.print_body .dina6 .page_head, .print_body .dina6 .page_foot {
|
||
right: 0;
|
||
left: 1.2cm; }
|
||
.print_body .dina6 .page_head {
|
||
top: 0; }
|
||
.print_body .dina6 .page_foot {
|
||
bottom: 0; }
|
||
.print_body *[class^="din"] {
|
||
position: relative;
|
||
overflow: auto;
|
||
margin: 32px auto; }
|
||
.print_body *[class^="din"] .page_head, .print_body *[class^="din"] .page_foot {
|
||
position: absolute; }
|
||
.print_body *[class^="din"] .page_head {
|
||
page: cover; }
|
||
.print_body *[class^="din"] .page_foot {
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-orient: horizontal;
|
||
-webkit-box-direction: normal;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row; }
|
||
.print_body *[class^="din"] .page_foot *:last-child {
|
||
margin-bottom: 0; }
|
||
.print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .block__column_2, .print_body *[class^="din"] .page_foot .block__column_3, .print_body *[class^="din"] .page_foot caption {
|
||
-webkit-box-flex: 1;
|
||
-ms-flex: 1 0 auto;
|
||
flex: 1 0 auto;
|
||
margin: 0;
|
||
font-size: 8pt;
|
||
line-height: 10pt;
|
||
text-align: center; }
|
||
.print_body *[class^="din"] .page_foot .page_no {
|
||
-webkit-box-flex: 1;
|
||
-ms-flex: 1 0 auto;
|
||
flex: 1 0 auto;
|
||
font-size: 20pt;
|
||
line-height: 1;
|
||
text-align: right; }
|
||
.print_body *[class^="din"] .page_foot p:first-child, .print_body *[class^="din"] .page_foot .block__column_2:first-child, .print_body *[class^="din"] .page_foot .block__column_3:first-child, .print_body *[class^="din"] .page_foot caption:first-child {
|
||
text-align: left; }
|
||
.print_body *[class^="din"] .page_content {
|
||
margin-top: 10cm;
|
||
margin-bottom: 2cm; }
|
||
.print_body .page_title, .print_body .page_date {
|
||
font-size: 14pt; }
|
||
.print_body .page_title {
|
||
margin: 0; }
|
||
.print_body .page_date, .print_body .page_no {
|
||
float: right; }
|
||
.print_body .page_author {
|
||
position: absolute;
|
||
top: 5cm;
|
||
right: 0;
|
||
text-align: right; }
|
||
.print_body .page_recipient {
|
||
position: absolute;
|
||
top: 5cm;
|
||
left: 0; }
|
||
|
||
.demo__intro {
|
||
border-top-width: 8px;
|
||
border-top-style: solid;
|
||
border-color: black;
|
||
padding-top: 32px; }
|
||
|
||
.demo__header {
|
||
padding: 16px; }
|
||
.demo__header nav ul {
|
||
margin: 0; }
|
||
|
||
.header__fancy {
|
||
background-color: rgba(211, 10, 81, 0.6); }
|
||
.header__fancy nav a {
|
||
background-color: rgba(250, 216, 3, 0.6);
|
||
color: #fad803; }
|
||
.header__fancy nav a:active, .header__fancy nav a:focus, .header__fancy nav a:hover {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
color: white; }
|
||
|
||
.header__fix {
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: rgba(39, 63, 139, 0.6); }
|
||
.header__fix nav a:active, .header__fix nav a:focus, .header__fix nav a:hover {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
color: white; }
|
||
|
||
.demo__footer {
|
||
width: 100%;
|
||
padding: 16px 0;
|
||
background-color: #333333;
|
||
color: #cccccc; }
|
||
.demo__footer nav a {
|
||
color: white; }
|
||
|
||
.demo__avatar img {
|
||
opacity: 1;
|
||
width: 128px;
|
||
height: auto;
|
||
min-width: 128px;
|
||
min-height: 128px;
|
||
border-radius: 50%;
|
||
background-color: #b7e0f0; }
|
||
|
||
.demo__flag {
|
||
height: 40vh; }
|
||
|
||
.demo__credits {
|
||
margin: 32px 0 8px 0; }
|
||
|
||
.demo__button_32 {
|
||
width: 32px;
|
||
height: 32px; }
|
||
|
||
.demo__queries > p, .demo__queries > .block__column_2, .demo__queries > .block__column_3, .demo__queries > caption {
|
||
padding: calc(8px - 3px) 8px; }
|
||
|
||
.query__phoneUp {
|
||
background-color: rgba(0, 0, 0, 0.2); }
|
||
|
||
@media (max-width: 767px) {
|
||
.query__phoneOnly {
|
||
background-color: rgba(0, 0, 0, 0.2); } }
|
||
|
||
@media (min-width: 768px) and (max-width: 1023px) {
|
||
.query__tabletPortaitOnly {
|
||
background-color: rgba(0, 0, 0, 0.2); } }
|
||
|
||
@media (min-width: 768px) {
|
||
.query__tabletPortraitUp {
|
||
background-color: rgba(0, 0, 0, 0.2); } }
|
||
|
||
@media (min-width: 1024px) and (max-width: 1279px) {
|
||
.query__tabletLandscapeOnly {
|
||
background-color: rgba(0, 0, 0, 0.2); } }
|
||
|
||
@media (min-width: 1024px) {
|
||
.query__tabletLandscapeUp {
|
||
background-color: rgba(0, 0, 0, 0.2); } }
|
||
|
||
@media (min-width: 1280px) and (max-width: 1679px) {
|
||
.query__desktopOnly {
|
||
background-color: rgba(0, 0, 0, 0.2); } }
|
||
|
||
@media (min-width: 1280px) {
|
||
.query__desktopUp {
|
||
background-color: rgba(0, 0, 0, 0.2); } }
|
||
|
||
@media (min-width: 1680px) {
|
||
.query__bigDesktopUp {
|
||
background-color: rgba(0, 0, 0, 0.2); } }
|
||
|
||
.demo__query_example {
|
||
margin-bottom: 32px;
|
||
padding: 32px;
|
||
text-align: center; }
|
||
@media (min-width: 48em) {
|
||
.demo__query_example {
|
||
background-color: #fad803; } }
|
||
@media (min-width: 64em) {
|
||
.demo__query_example {
|
||
background-color: #d30a51; } }
|
||
@media (min-width: 80em) {
|
||
.demo__query_example {
|
||
background-color: #273f8b; } }
|
||
@media (min-width: 90em) {
|
||
.demo__query_example {
|
||
background-color: #b7e0f0; } }
|
||
@media (min-width: 105em) {
|
||
.demo__query_example {
|
||
background-color: #52bed1; } }
|
||
@media (min-width: 120em) {
|
||
.demo__query_example {
|
||
background-color: #0c85ff; } }
|
||
.demo__query_example:after {
|
||
content: '< 768px';
|
||
padding: calc(8px - 3px) 8px;
|
||
border-radius: 2px;
|
||
background-color: rgba(0, 0, 0, 0.2); }
|
||
@media (min-width: 48em) {
|
||
.demo__query_example:after {
|
||
content: '768px'; } }
|
||
@media (min-width: 64em) {
|
||
.demo__query_example:after {
|
||
content: '1024px'; } }
|
||
@media (min-width: 80em) {
|
||
.demo__query_example:after {
|
||
content: '1280px'; } }
|
||
@media (min-width: 105em) {
|
||
.demo__query_example:after {
|
||
content: '1680px'; } }
|
||
@media (min-width: 120em) {
|
||
.demo__query_example:after {
|
||
content: '1920px'; } }
|
||
|
||
.test li::after {
|
||
content: "";
|
||
display: block;
|
||
height: 16px; }
|
||
|
||
.front_color_1 {
|
||
color: #fad803; }
|
||
.front_color_1::after {
|
||
background-color: #fad803; }
|
||
|
||
.front_color_2 {
|
||
color: #d30a51; }
|
||
.front_color_2::after {
|
||
background-color: #d30a51; }
|
||
|
||
.front_color_3 {
|
||
color: #273f8b; }
|
||
.front_color_3::after {
|
||
background-color: #273f8b; }
|
||
|
||
.front_color_4 {
|
||
color: #b7e0f0; }
|
||
.front_color_4::after {
|
||
background-color: #b7e0f0; }
|
||
|
||
.front_color_5 {
|
||
color: #52bed1; }
|
||
.front_color_5::after {
|
||
background-color: #52bed1; }
|
||
|
||
.back_color_1, .label_1 {
|
||
background-color: #fad803; }
|
||
|
||
.back_color_2, .label_2 {
|
||
background-color: #d30a51; }
|
||
|
||
.back_color_3, .label_3 {
|
||
background-color: #273f8b; }
|
||
|
||
.back_color_4 {
|
||
background-color: #b7e0f0; }
|
||
|
||
.back_color_5 {
|
||
background-color: #52bed1; }
|
||
|
||
.label_1, .label_2, .label_3 {
|
||
padding: 0 4px; }
|
||
|
||
|