Grammalecte  Hex Artifact Content

Artifact 20920fbe907aa8b21bbd62901a4d0bf1c910f917e8a17284fc09b1770445e17e:


0000: 2f 2a 0a 20 20 20 20 43 53 53 0a 20 20 20 20 43  /*.    CSS.    C
0010: 6f 6e 74 65 6e 74 20 70 61 6e 65 6c 73 20 66 6f  ontent panels fo
0020: 72 20 47 72 61 6d 6d 61 6c 65 63 74 65 0a 2a 2f  r Grammalecte.*/
0030: 0a 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74  ..div.grammalect
0040: 65 5f 70 61 6e 65 6c 20 7b 0a 20 20 20 20 61 6c  e_panel {.    al
0050: 6c 3a 20 69 6e 69 74 69 61 6c 3b 0a 20 20 20 20  l: initial;.    
0060: 70 61 64 64 69 6e 67 3a 20 30 3b 0a 20 20 20 20  padding: 0;.    
0070: 6d 61 72 67 69 6e 3a 20 30 3b 0a 20 20 20 20 70  margin: 0;.    p
0080: 6f 73 69 74 69 6f 6e 3a 20 66 69 78 65 64 3b 0a  osition: fixed;.
0090: 20 20 20 20 2f 2a 20 66 6c 65 78 62 6f 78 20 2a      /* flexbox *
00a0: 2f 0a 20 20 20 20 64 69 73 70 6c 61 79 3a 20 66  /.    display: f
00b0: 6c 65 78 3b 0a 20 20 20 20 6a 75 73 74 69 66 79  lex;.    justify
00c0: 2d 63 6f 6e 74 65 6e 74 3a 20 66 6c 65 78 2d 73  -content: flex-s
00d0: 74 61 72 74 3b 0a 20 20 20 20 66 6c 65 78 2d 64  tart;.    flex-d
00e0: 69 72 65 63 74 69 6f 6e 3a 20 63 6f 6c 75 6d 6e  irection: column
00f0: 3b 0a 20 20 20 20 61 6c 69 67 6e 2d 69 74 65 6d  ;.    align-item
0100: 73 3a 20 73 74 72 65 74 63 68 3b 0a 20 20 20 20  s: stretch;.    
0110: 2f 2a 20 65 6e 64 20 66 6c 65 78 62 6f 78 20 2a  /* end flexbox *
0120: 2f 0a 20 20 20 20 62 6f 78 2d 73 69 7a 69 6e 67  /.    box-sizing
0130: 3a 20 63 6f 6e 74 65 6e 74 2d 62 6f 78 3b 0a 20  : content-box;. 
0140: 20 20 20 7a 2d 69 6e 64 65 78 3a 20 32 31 34 37     z-index: 2147
0150: 34 38 33 36 34 31 3b 20 2f 2a 20 6d 61 78 69 6d  483641; /* maxim
0160: 75 6d 20 69 73 20 32 31 34 37 34 38 33 36 34 37  um is 2147483647
0170: 3a 20 68 74 74 70 73 3a 2f 2f 73 74 61 63 6b 6f  : https://stacko
0180: 76 65 72 66 6c 6f 77 2e 63 6f 6d 2f 71 75 65 73  verflow.com/ques
0190: 74 69 6f 6e 73 2f 34 39 31 30 35 32 2f 6d 69 6e  tions/491052/min
01a0: 69 6d 75 6d 2d 61 6e 64 2d 6d 61 78 69 6d 75 6d  imum-and-maximum
01b0: 2d 76 61 6c 75 65 2d 6f 66 2d 7a 2d 69 6e 64 65  -value-of-z-inde
01c0: 78 20 2a 2f 0a 20 20 20 20 62 6f 72 64 65 72 3a  x */.    border:
01d0: 20 32 70 78 20 73 6f 6c 69 64 20 68 73 6c 28 32   2px solid hsl(2
01e0: 31 30 2c 20 35 30 25 2c 20 35 30 25 29 3b 0a 20  10, 50%, 50%);. 
01f0: 20 20 20 62 6f 72 64 65 72 2d 72 61 64 69 75 73     border-radius
0200: 3a 20 31 30 70 78 20 31 30 70 78 20 31 30 70 78  : 10px 10px 10px
0210: 20 31 30 70 78 3b 0a 20 20 20 20 62 61 63 6b 67   10px;.    backg
0220: 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c  round-color: hsl
0230: 28 32 31 30 2c 20 30 25 2c 20 31 30 30 25 29 3b  (210, 0%, 100%);
0240: 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 28  .    color: hsl(
0250: 30 2c 20 30 25 2c 20 30 25 29 3b 0a 20 20 20 20  0, 0%, 0%);.    
0260: 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 22 54 72  font-family: "Tr
0270: 65 62 75 63 68 65 74 20 4d 53 22 2c 20 22 46 69  ebuchet MS", "Fi
0280: 72 61 20 53 61 6e 73 22 2c 20 22 55 62 75 6e 74  ra Sans", "Ubunt
0290: 75 20 43 6f 6e 64 65 6e 73 65 64 22 2c 20 22 4c  u Condensed", "L
02a0: 69 62 65 72 61 74 69 6f 6e 20 53 61 6e 73 22 2c  iberation Sans",
02b0: 20 73 61 6e 73 2d 73 65 72 69 66 3b 0a 20 20 20   sans-serif;.   
02c0: 20 62 6f 78 2d 73 68 61 64 6f 77 3a 20 30 20 30   box-shadow: 0 0
02d0: 20 31 70 78 20 36 70 78 20 68 73 6c 61 28 32 31   1px 6px hsla(21
02e0: 30 2c 20 35 30 25 2c 20 35 30 25 2c 20 2e 35 29  0, 50%, 50%, .5)
02f0: 3b 0a 20 20 20 20 6c 69 6e 65 2d 68 65 69 67 68  ;.    line-heigh
0300: 74 3a 20 6e 6f 72 6d 61 6c 3b 0a 20 20 20 20 74  t: normal;.    t
0310: 65 78 74 2d 73 68 61 64 6f 77 3a 20 6e 6f 6e 65  ext-shadow: none
0320: 3b 0a 20 20 20 20 74 65 78 74 2d 64 65 63 6f 72  ;.    text-decor
0330: 61 74 69 6f 6e 3a 20 6e 6f 6e 65 3b 0a 20 20 20  ation: none;.   
0340: 20 74 65 78 74 2d 61 6c 69 67 6e 3a 20 6c 65 66   text-align: lef
0350: 74 3b 0a 20 20 20 20 68 79 70 68 65 6e 73 3a 20  t;.    hyphens: 
0360: 6e 6f 6e 65 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d  none;.}.div.gram
0370: 6d 61 6c 65 63 74 65 5f 70 61 6e 65 6c 20 69 6d  malecte_panel im
0380: 67 20 7b 0a 20 20 20 20 64 69 73 70 6c 61 79 3a  g {.    display:
0390: 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 6b 3b 0a 20   inline-block;. 
03a0: 20 20 20 6d 61 72 67 69 6e 3a 20 30 3b 0a 20 20     margin: 0;.  
03b0: 20 20 70 61 64 64 69 6e 67 3a 20 30 3b 0a 7d 0a    padding: 0;.}.
03c0: 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65  .div.grammalecte
03d0: 5f 70 61 6e 65 6c 5f 62 61 72 20 7b 0a 20 20 20  _panel_bar {.   
03e0: 20 70 6f 73 69 74 69 6f 6e 3a 20 73 74 69 63 6b   position: stick
03f0: 79 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e  y;.    backgroun
0400: 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 28 32 31 30  d-color: hsl(210
0410: 2c 20 35 30 25 2c 20 35 30 25 29 3b 0a 20 20 20  , 50%, 50%);.   
0420: 20 62 6f 72 64 65 72 2d 72 61 64 69 75 73 3a 20   border-radius: 
0430: 31 30 70 78 20 31 30 70 78 20 30 20 30 3b 0a 20  10px 10px 0 0;. 
0440: 20 20 20 62 6f 72 64 65 72 2d 62 6f 74 74 6f 6d     border-bottom
0450: 3a 20 31 70 78 20 73 6f 6c 69 64 20 68 73 6c 28  : 1px solid hsl(
0460: 32 31 30 2c 20 32 30 25 2c 20 38 36 25 29 3b 0a  210, 20%, 86%);.
0470: 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63  .}.div.grammalec
0480: 74 65 5f 70 61 6e 65 6c 5f 74 69 74 6c 65 20 7b  te_panel_title {
0490: 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 33 70  .    padding: 3p
04a0: 78 20 32 30 70 78 3b 0a 20 20 20 20 63 6f 6c 6f  x 20px;.    colo
04b0: 72 3a 20 68 73 6c 28 32 31 30 2c 20 33 30 25 2c  r: hsl(210, 30%,
04c0: 20 39 36 25 29 3b 0a 20 20 20 20 66 6f 6e 74 2d   96%);.    font-
04d0: 73 69 7a 65 3a 20 32 30 70 78 3b 0a 7d 0a 64 69  size: 20px;.}.di
04e0: 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 70 61  v.grammalecte_pa
04f0: 6e 65 6c 5f 6c 61 62 65 6c 20 7b 0a 20 20 20 20  nel_label {.    
0500: 64 69 73 70 6c 61 79 3a 20 69 6e 6c 69 6e 65 2d  display: inline-
0510: 62 6c 6f 63 6b 3b 0a 20 20 20 20 70 61 64 64 69  block;.    paddi
0520: 6e 67 3a 20 30 20 31 30 70 78 3b 0a 20 20 20 20  ng: 0 10px;.    
0530: 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 22 54 72  font-family: "Tr
0540: 65 62 75 63 68 65 74 20 4d 53 22 2c 20 22 46 69  ebuchet MS", "Fi
0550: 72 61 20 53 61 6e 73 22 2c 20 22 55 62 75 6e 74  ra Sans", "Ubunt
0560: 75 20 43 6f 6e 64 65 6e 73 65 64 22 2c 20 22 4c  u Condensed", "L
0570: 69 62 65 72 61 74 69 6f 6e 20 53 61 6e 73 22 2c  iberation Sans",
0580: 20 73 61 6e 73 2d 73 65 72 69 66 3b 0a 7d 0a 64   sans-serif;.}.d
0590: 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 70  iv.grammalecte_p
05a0: 61 6e 65 6c 5f 69 6e 76 69 73 69 62 6c 65 5f 6d  anel_invisible_m
05b0: 61 72 6b 65 72 20 7b 0a 20 20 20 20 70 6f 73 69  arker {.    posi
05c0: 74 69 6f 6e 3a 20 61 62 73 6f 6c 75 74 65 3b 0a  tion: absolute;.
05d0: 20 20 20 20 2f 2a 76 69 73 69 62 69 6c 69 74 79      /*visibility
05e0: 3a 20 68 69 64 64 65 6e 3b 2a 2f 0a 20 20 20 20  : hidden;*/.    
05f0: 66 6f 6e 74 2d 73 69 7a 65 3a 20 34 70 78 3b 0a  font-size: 4px;.
0600: 20 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 61 28      color: hsla(
0610: 32 31 30 2c 20 30 25 2c 20 39 30 25 2c 20 30 29  210, 0%, 90%, 0)
0620: 3b 0a 7d 0a 0a 64 69 76 2e 67 72 61 6d 6d 61 6c  ;.}..div.grammal
0630: 65 63 74 65 5f 70 61 6e 65 6c 5f 63 6f 6d 6d 61  ecte_panel_comma
0640: 6e 64 73 20 7b 0a 20 20 20 20 66 6c 6f 61 74 3a  nds {.    float:
0650: 20 72 69 67 68 74 3b 0a 20 20 20 20 64 69 73 70   right;.    disp
0660: 6c 61 79 3a 20 66 6c 65 78 3b 0a 20 20 20 20 61  lay: flex;.    a
0670: 6c 69 67 6e 2d 69 74 65 6d 73 3a 20 73 74 72 65  lign-items: stre
0680: 74 63 68 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d  tch;.}.div.gramm
0690: 61 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 62 75 74  alecte_panel_but
06a0: 74 6f 6e 20 7b 0a 20 20 20 20 70 61 64 64 69 6e  ton {.    paddin
06b0: 67 3a 20 31 70 78 20 31 30 70 78 3b 0a 20 20 20  g: 1px 10px;.   
06c0: 20 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 22 54   font-family: "T
06d0: 72 65 62 75 63 68 65 74 20 4d 53 22 2c 20 22 46  rebuchet MS", "F
06e0: 69 72 61 20 53 61 6e 73 22 2c 20 22 55 62 75 6e  ira Sans", "Ubun
06f0: 74 75 20 43 6f 6e 64 65 6e 73 65 64 22 2c 20 22  tu Condensed", "
0700: 4c 69 62 65 72 61 74 69 6f 6e 20 53 61 6e 73 22  Liberation Sans"
0710: 2c 20 73 61 6e 73 2d 73 65 72 69 66 3b 0a 20 20  , sans-serif;.  
0720: 20 20 66 6f 6e 74 2d 73 69 7a 65 3a 20 31 34 70    font-size: 14p
0730: 78 3b 0a 20 20 20 20 66 6f 6e 74 2d 77 65 69 67  x;.    font-weig
0740: 68 74 3a 20 62 6f 6c 64 3b 0a 20 20 20 20 74 65  ht: bold;.    te
0750: 78 74 2d 61 6c 69 67 6e 3a 20 63 65 6e 74 65 72  xt-align: center
0760: 3b 0a 20 20 20 20 63 75 72 73 6f 72 3a 20 70 6f  ;.    cursor: po
0770: 69 6e 74 65 72 3b 0a 7d 0a 64 69 76 2e 67 72 61  inter;.}.div.gra
0780: 6d 6d 61 6c 65 63 74 65 5f 63 6f 70 79 5f 62 75  mmalecte_copy_bu
0790: 74 74 6f 6e 20 7b 0a 20 20 20 20 62 6f 72 64 65  tton {.    borde
07a0: 72 2d 72 61 64 69 75 73 3a 20 32 70 78 3b 0a 20  r-radius: 2px;. 
07b0: 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 61 28 32     color: hsla(2
07c0: 31 30 2c 20 30 25 2c 20 31 30 30 25 2c 20 2e 34  10, 0%, 100%, .4
07d0: 29 3b 0a 20 20 20 20 6d 61 72 67 69 6e 2d 72 69  );.    margin-ri
07e0: 67 68 74 3a 20 31 30 70 78 3b 0a 7d 0a 64 69 76  ght: 10px;.}.div
07f0: 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 63 6f 70  .grammalecte_cop
0800: 79 5f 62 75 74 74 6f 6e 3a 68 6f 76 65 72 20 7b  y_button:hover {
0810: 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d  .    background-
0820: 63 6f 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20  color: hsl(210, 
0830: 35 30 25 2c 20 35 35 25 29 3b 0a 20 20 20 20 63  50%, 55%);.    c
0840: 6f 6c 6f 72 3a 20 68 73 6c 61 28 32 31 30 2c 20  olor: hsla(210, 
0850: 30 25 2c 20 31 30 30 25 2c 20 31 29 3b 0a 7d 0a  0%, 100%, 1);.}.
0860: 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f  div.grammalecte_
0870: 6d 6f 76 65 5f 62 75 74 74 6f 6e 20 7b 0a 20 20  move_button {.  
0880: 20 20 70 61 64 64 69 6e 67 3a 20 31 70 78 20 35    padding: 1px 5
0890: 70 78 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 72  px;.    border-r
08a0: 61 64 69 75 73 3a 20 31 36 70 78 3b 0a 20 20 20  adius: 16px;.   
08b0: 20 63 6f 6c 6f 72 3a 20 68 73 6c 28 31 38 30 2c   color: hsl(180,
08c0: 20 30 25 2c 20 31 30 30 25 29 3b 0a 20 20 20 20   0%, 100%);.    
08d0: 6f 70 61 63 69 74 79 3a 20 2e 32 3b 0a 7d 0a 64  opacity: .2;.}.d
08e0: 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d  iv.grammalecte_m
08f0: 6f 76 65 5f 62 75 74 74 6f 6e 5f 63 68 61 6e 67  ove_button_chang
0900: 65 57 69 64 74 68 20 7b 0a 20 20 20 20 70 61 64  eWidth {.    pad
0910: 64 69 6e 67 3a 20 31 70 78 20 31 30 70 78 3b 0a  ding: 1px 10px;.
0920: 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 3a 20      background: 
0930: 63 65 6e 74 65 72 20 6e 6f 2d 72 65 70 65 61 74  center no-repeat
0940: 20 75 72 6c 28 27 64 61 74 61 3a 69 6d 61 67 65   url('data:image
0950: 2f 73 76 67 2b 78 6d 6c 3b 75 74 66 38 2c 3c 73  /svg+xml;utf8,<s
0960: 76 67 20 78 6d 6c 6e 73 3d 22 68 74 74 70 3a 2f  vg xmlns="http:/
0970: 2f 77 77 77 2e 77 33 2e 6f 72 67 2f 32 30 30 30  /www.w3.org/2000
0980: 2f 73 76 67 22 20 77 69 64 74 68 3d 22 31 32 22  /svg" width="12"
0990: 20 68 65 69 67 68 74 3d 22 31 32 22 3e 3c 70 61   height="12"><pa
09a0: 74 68 20 66 69 6c 6c 3d 22 25 32 33 66 66 66 22  th fill="%23fff"
09b0: 20 64 3d 22 6d 20 36 2c 32 20 34 2c 34 20 2d 34   d="m 6,2 4,4 -4
09c0: 2c 34 22 2f 3e 3c 70 61 74 68 20 66 69 6c 6c 3d  ,4"/><path fill=
09d0: 22 25 32 33 66 66 66 22 20 64 3d 22 6d 20 30 2c  "%23fff" d="m 0,
09e0: 36 20 34 2c 34 20 76 20 2d 38 22 2f 3e 3c 2f 73  6 4,4 v -8"/></s
09f0: 76 67 3e 27 29 3b 0a 7d 0a 64 69 76 2e 67 72 61  vg>');.}.div.gra
0a00: 6d 6d 61 6c 65 63 74 65 5f 6d 6f 76 65 5f 62 75  mmalecte_move_bu
0a10: 74 74 6f 6e 5f 63 68 61 6e 67 65 48 65 69 67 68  tton_changeHeigh
0a20: 74 20 7b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a  t {.    padding:
0a30: 20 31 70 78 20 31 30 70 78 3b 0a 20 20 20 20 6d   1px 10px;.    m
0a40: 61 72 67 69 6e 2d 72 69 67 68 74 3a 20 31 30 70  argin-right: 10p
0a50: 78 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e  x;.    backgroun
0a60: 64 3a 20 63 65 6e 74 65 72 20 6e 6f 2d 72 65 70  d: center no-rep
0a70: 65 61 74 20 75 72 6c 28 27 64 61 74 61 3a 69 6d  eat url('data:im
0a80: 61 67 65 2f 73 76 67 2b 78 6d 6c 3b 75 74 66 38  age/svg+xml;utf8
0a90: 2c 3c 73 76 67 20 78 6d 6c 6e 73 3d 22 68 74 74  ,<svg xmlns="htt
0aa0: 70 3a 2f 2f 77 77 77 2e 77 33 2e 6f 72 67 2f 32  p://www.w3.org/2
0ab0: 30 30 30 2f 73 76 67 22 20 77 69 64 74 68 3d 22  000/svg" width="
0ac0: 31 32 22 20 68 65 69 67 68 74 3d 22 31 32 22 3e  12" height="12">
0ad0: 3c 70 61 74 68 20 66 69 6c 6c 3d 22 25 32 33 66  <path fill="%23f
0ae0: 66 66 22 20 64 3d 22 6d 20 36 2c 30 20 34 2c 34  ff" d="m 6,0 4,4
0af0: 20 68 20 2d 38 22 2f 3e 3c 70 61 74 68 20 66 69   h -8"/><path fi
0b00: 6c 6c 3d 22 25 32 33 66 66 66 22 20 64 3d 22 6d  ll="%23fff" d="m
0b10: 20 32 2c 36 20 34 2c 34 20 34 2c 2d 34 22 2f 3e   2,6 4,4 4,-4"/>
0b20: 3c 2f 73 76 67 3e 27 29 3b 0a 7d 0a 64 69 76 2e  </svg>');.}.div.
0b30: 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 6f 76 65  grammalecte_move
0b40: 5f 62 75 74 74 6f 6e 5f 63 65 6e 74 65 72 20 7b  _button_center {
0b50: 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 31 70  .    padding: 1p
0b60: 78 20 31 30 70 78 3b 0a 20 20 20 20 62 61 63 6b  x 10px;.    back
0b70: 67 72 6f 75 6e 64 3a 20 63 65 6e 74 65 72 20 6e  ground: center n
0b80: 6f 2d 72 65 70 65 61 74 20 75 72 6c 28 27 64 61  o-repeat url('da
0b90: 74 61 3a 69 6d 61 67 65 2f 73 76 67 2b 78 6d 6c  ta:image/svg+xml
0ba0: 3b 75 74 66 38 2c 3c 73 76 67 20 78 6d 6c 6e 73  ;utf8,<svg xmlns
0bb0: 3d 22 68 74 74 70 3a 2f 2f 77 77 77 2e 77 33 2e  ="http://www.w3.
0bc0: 6f 72 67 2f 32 30 30 30 2f 73 76 67 22 20 77 69  org/2000/svg" wi
0bd0: 64 74 68 3d 22 31 32 22 20 68 65 69 67 68 74 3d  dth="12" height=
0be0: 22 31 32 22 3e 3c 63 69 72 63 6c 65 20 66 69 6c  "12"><circle fil
0bf0: 6c 3d 22 25 32 33 66 66 66 22 20 63 78 3d 22 36  l="%23fff" cx="6
0c00: 22 20 63 79 3d 22 36 22 20 72 3d 22 34 22 2f 3e  " cy="6" r="4"/>
0c10: 3c 2f 73 76 67 3e 27 29 20 3b 0a 7d 0a 64 69 76  </svg>') ;.}.div
0c20: 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 6f 76  .grammalecte_mov
0c30: 65 5f 62 75 74 74 6f 6e 5f 75 70 20 7b 0a 20 20  e_button_up {.  
0c40: 20 20 70 61 64 64 69 6e 67 3a 20 31 70 78 20 31    padding: 1px 1
0c50: 30 70 78 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f  0px;.    backgro
0c60: 75 6e 64 3a 20 63 65 6e 74 65 72 20 6e 6f 2d 72  und: center no-r
0c70: 65 70 65 61 74 20 75 72 6c 28 27 64 61 74 61 3a  epeat url('data:
0c80: 69 6d 61 67 65 2f 73 76 67 2b 78 6d 6c 3b 75 74  image/svg+xml;ut
0c90: 66 38 2c 3c 73 76 67 20 78 6d 6c 6e 73 3d 22 68  f8,<svg xmlns="h
0ca0: 74 74 70 3a 2f 2f 77 77 77 2e 77 33 2e 6f 72 67  ttp://www.w3.org
0cb0: 2f 32 30 30 30 2f 73 76 67 22 20 77 69 64 74 68  /2000/svg" width
0cc0: 3d 22 31 32 22 20 68 65 69 67 68 74 3d 22 31 32  ="12" height="12
0cd0: 22 3e 3c 70 61 74 68 20 66 69 6c 6c 3d 22 25 32  "><path fill="%2
0ce0: 33 66 66 66 22 20 64 3d 22 6d 20 36 2c 32 20 36  3fff" d="m 6,2 6
0cf0: 2c 36 20 68 20 2d 31 32 22 2f 3e 3c 2f 73 76 67  ,6 h -12"/></svg
0d00: 3e 27 29 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d  >');.}.div.gramm
0d10: 61 6c 65 63 74 65 5f 6d 6f 76 65 5f 62 75 74 74  alecte_move_butt
0d20: 6f 6e 5f 72 69 67 68 74 20 7b 0a 20 20 20 20 70  on_right {.    p
0d30: 61 64 64 69 6e 67 3a 20 31 70 78 20 31 30 70 78  adding: 1px 10px
0d40: 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64  ;.    background
0d50: 3a 20 63 65 6e 74 65 72 20 6e 6f 2d 72 65 70 65  : center no-repe
0d60: 61 74 20 75 72 6c 28 27 64 61 74 61 3a 69 6d 61  at url('data:ima
0d70: 67 65 2f 73 76 67 2b 78 6d 6c 3b 75 74 66 38 2c  ge/svg+xml;utf8,
0d80: 3c 73 76 67 20 78 6d 6c 6e 73 3d 22 68 74 74 70  <svg xmlns="http
0d90: 3a 2f 2f 77 77 77 2e 77 33 2e 6f 72 67 2f 32 30  ://www.w3.org/20
0da0: 30 30 2f 73 76 67 22 20 77 69 64 74 68 3d 22 31  00/svg" width="1
0db0: 32 22 20 68 65 69 67 68 74 3d 22 31 32 22 3e 3c  2" height="12"><
0dc0: 70 61 74 68 20 66 69 6c 6c 3d 22 25 32 33 66 66  path fill="%23ff
0dd0: 66 22 20 64 3d 22 6d 20 34 2c 30 20 36 2c 36 20  f" d="m 4,0 6,6 
0de0: 2d 36 2c 36 22 2f 3e 3c 2f 73 76 67 3e 27 29 3b  -6,6"/></svg>');
0df0: 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63  .}.div.grammalec
0e00: 74 65 5f 6d 6f 76 65 5f 62 75 74 74 6f 6e 5f 64  te_move_button_d
0e10: 6f 77 6e 20 7b 0a 20 20 20 20 70 61 64 64 69 6e  own {.    paddin
0e20: 67 3a 20 31 70 78 20 31 30 70 78 3b 0a 20 20 20  g: 1px 10px;.   
0e30: 20 62 61 63 6b 67 72 6f 75 6e 64 3a 20 63 65 6e   background: cen
0e40: 74 65 72 20 6e 6f 2d 72 65 70 65 61 74 20 75 72  ter no-repeat ur
0e50: 6c 28 27 64 61 74 61 3a 69 6d 61 67 65 2f 73 76  l('data:image/sv
0e60: 67 2b 78 6d 6c 3b 75 74 66 38 2c 3c 73 76 67 20  g+xml;utf8,<svg 
0e70: 78 6d 6c 6e 73 3d 22 68 74 74 70 3a 2f 2f 77 77  xmlns="http://ww
0e80: 77 2e 77 33 2e 6f 72 67 2f 32 30 30 30 2f 73 76  w.w3.org/2000/sv
0e90: 67 22 20 77 69 64 74 68 3d 22 31 32 22 20 68 65  g" width="12" he
0ea0: 69 67 68 74 3d 22 31 32 22 3e 3c 70 61 74 68 20  ight="12"><path 
0eb0: 66 69 6c 6c 3d 22 25 32 33 66 66 66 22 20 64 3d  fill="%23fff" d=
0ec0: 22 6d 20 30 2c 34 20 36 2c 36 20 36 2c 2d 36 22  "m 0,4 6,6 6,-6"
0ed0: 2f 3e 3c 2f 73 76 67 3e 27 29 3b 0a 7d 0a 64 69  /></svg>');.}.di
0ee0: 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 6f  v.grammalecte_mo
0ef0: 76 65 5f 62 75 74 74 6f 6e 5f 6c 65 66 74 20 7b  ve_button_left {
0f00: 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 31 70  .    padding: 1p
0f10: 78 20 31 30 70 78 3b 0a 20 20 20 20 62 61 63 6b  x 10px;.    back
0f20: 67 72 6f 75 6e 64 3a 20 63 65 6e 74 65 72 20 6e  ground: center n
0f30: 6f 2d 72 65 70 65 61 74 20 75 72 6c 28 27 64 61  o-repeat url('da
0f40: 74 61 3a 69 6d 61 67 65 2f 73 76 67 2b 78 6d 6c  ta:image/svg+xml
0f50: 3b 75 74 66 38 2c 3c 73 76 67 20 78 6d 6c 6e 73  ;utf8,<svg xmlns
0f60: 3d 22 68 74 74 70 3a 2f 2f 77 77 77 2e 77 33 2e  ="http://www.w3.
0f70: 6f 72 67 2f 32 30 30 30 2f 73 76 67 22 20 77 69  org/2000/svg" wi
0f80: 64 74 68 3d 22 31 32 22 20 68 65 69 67 68 74 3d  dth="12" height=
0f90: 22 31 32 22 3e 3c 70 61 74 68 20 66 69 6c 6c 3d  "12"><path fill=
0fa0: 22 25 32 33 66 66 66 22 20 64 3d 22 6d 20 32 2c  "%23fff" d="m 2,
0fb0: 36 20 36 2c 36 20 76 20 2d 31 32 22 2f 3e 3c 2f  6 6,6 v -12"/></
0fc0: 73 76 67 3e 27 29 3b 0a 7d 0a 64 69 76 2e 67 72  svg>');.}.div.gr
0fd0: 61 6d 6d 61 6c 65 63 74 65 5f 6d 6f 76 65 5f 62  ammalecte_move_b
0fe0: 75 74 74 6f 6e 3a 68 6f 76 65 72 20 7b 0a 20 20  utton:hover {.  
0ff0: 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c    background-col
1000: 6f 72 3a 20 68 73 6c 61 28 31 38 30 2c 20 38 30  or: hsla(180, 80
1010: 25 2c 20 35 30 25 2c 20 2e 32 29 3b 0a 20 20 20  %, 50%, .2);.   
1020: 20 63 6f 6c 6f 72 3a 20 68 73 6c 61 28 31 38 30   color: hsla(180
1030: 2c 20 30 25 2c 20 31 30 30 25 2c 20 31 29 3b 0a  , 0%, 100%, 1);.
1040: 20 20 20 20 6f 70 61 63 69 74 79 3a 20 31 3b 0a      opacity: 1;.
1050: 7d 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74  }.div.grammalect
1060: 65 5f 63 6c 6f 73 65 5f 62 75 74 74 6f 6e 20 7b  e_close_button {
1070: 0a 20 20 20 20 62 6f 72 64 65 72 2d 72 61 64 69  .    border-radi
1080: 75 73 3a 20 30 20 38 70 78 20 30 20 34 70 78 3b  us: 0 8px 0 4px;
1090: 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d  .    background-
10a0: 63 6f 6c 6f 72 3a 20 68 73 6c 61 28 30 2c 20 38  color: hsla(0, 8
10b0: 30 25 2c 20 35 30 25 2c 20 2e 35 29 3b 0a 20 20  0%, 50%, .5);.  
10c0: 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 61 28 32 31    color: hsla(21
10d0: 30 2c 20 30 25 2c 20 31 30 30 25 2c 20 2e 35 29  0, 0%, 100%, .5)
10e0: 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65  ;.}.div.grammale
10f0: 63 74 65 5f 63 6c 6f 73 65 5f 62 75 74 74 6f 6e  cte_close_button
1100: 3a 68 6f 76 65 72 20 7b 0a 20 20 20 20 62 61 63  :hover {.    bac
1110: 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68  kground-color: h
1120: 73 6c 28 30 2c 20 31 30 30 25 2c 20 36 30 25 29  sl(0, 100%, 60%)
1130: 3b 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c  ;.    color: hsl
1140: 61 28 32 31 30 2c 20 30 25 2c 20 31 30 30 25 2c  a(210, 0%, 100%,
1150: 20 31 29 3b 0a 7d 0a 0a 64 69 76 2e 67 72 61 6d   1);.}..div.gram
1160: 6d 61 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 6d 65  malecte_panel_me
1170: 6e 75 20 7b 0a 20 20 20 20 64 69 73 70 6c 61 79  nu {.    display
1180: 3a 20 66 6c 65 78 3b 0a 20 20 20 20 66 6c 65 78  : flex;.    flex
1190: 2d 64 69 72 65 63 74 69 6f 6e 3a 20 72 6f 77 3b  -direction: row;
11a0: 0a 20 20 20 20 6a 75 73 74 69 66 79 2d 63 6f 6e  .    justify-con
11b0: 74 65 6e 74 3a 20 73 70 61 63 65 2d 61 72 6f 75  tent: space-arou
11c0: 6e 64 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d 61  nd;.}.div.gramma
11d0: 6c 65 63 74 65 5f 6d 65 6e 75 5f 62 75 74 74 6f  lecte_menu_butto
11e0: 6e 20 7b 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 68  n {.    color: h
11f0: 73 6c 28 32 31 30 2c 20 35 30 25 2c 20 39 36 25  sl(210, 50%, 96%
1200: 29 3b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20  );.    padding: 
1210: 35 70 78 20 31 30 70 78 3b 0a 20 20 20 20 66 6f  5px 10px;.    fo
1220: 6e 74 2d 73 69 7a 65 3a 20 31 32 70 78 3b 0a 20  nt-size: 12px;. 
1230: 20 20 20 66 6f 6e 74 2d 76 61 72 69 61 6e 74 3a     font-variant:
1240: 20 73 6d 61 6c 6c 2d 63 61 70 73 3b 0a 20 20 20   small-caps;.   
1250: 20 63 75 72 73 6f 72 3a 20 70 6f 69 6e 74 65 72   cursor: pointer
1260: 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 72 61 64  ;.    border-rad
1270: 69 75 73 3a 20 33 70 78 3b 0a 7d 0a 64 69 76 2e  ius: 3px;.}.div.
1280: 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e 75  grammalecte_menu
1290: 5f 62 75 74 74 6f 6e 3a 68 6f 76 65 72 20 7b 0a  _button:hover {.
12a0: 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63      background-c
12b0: 6f 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 38  olor: hsl(210, 8
12c0: 30 25 2c 20 34 30 25 29 3b 0a 7d 0a 64 69 76 2e  0%, 40%);.}.div.
12d0: 67 72 61 6d 6d 61 6c 65 63 74 65 5f 61 75 74 6f  grammalecte_auto
12e0: 72 65 66 72 65 73 68 5f 62 75 74 74 6f 6e 20 7b  refresh_button {
12f0: 0a 20 20 20 20 64 69 73 70 6c 61 79 3a 20 69 6e  .    display: in
1300: 6c 69 6e 65 2d 62 6c 6f 63 6b 3b 0a 20 20 20 20  line-block;.    
1310: 70 61 64 64 69 6e 67 3a 20 30 20 35 70 78 3b 0a  padding: 0 5px;.
1320: 20 20 20 20 6d 61 72 67 69 6e 2d 6c 65 66 74 3a      margin-left:
1330: 20 35 70 78 3b 0a 20 20 20 20 62 6f 72 64 65 72   5px;.    border
1340: 2d 72 61 64 69 75 73 3a 20 33 70 78 3b 0a 20 20  -radius: 3px;.  
1350: 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c    background-col
1360: 6f 72 3a 20 68 73 6c 28 30 2c 20 35 30 25 2c 20  or: hsl(0, 50%, 
1370: 35 30 25 29 3b 0a 20 20 20 20 63 6f 6c 6f 72 3a  50%);.    color:
1380: 20 68 73 6c 28 30 2c 20 35 30 25 2c 20 39 36 25   hsl(0, 50%, 96%
1390: 29 3b 0a 20 20 20 20 6f 70 61 63 69 74 79 3a 20  );.    opacity: 
13a0: 2e 37 3b 0a 7d 0a 64 69 76 2e 67 72 61 6d 6d 61  .7;.}.div.gramma
13b0: 6c 65 63 74 65 5f 61 75 74 6f 72 65 66 72 65 73  lecte_autorefres
13c0: 68 5f 62 75 74 74 6f 6e 3a 68 6f 76 65 72 20 7b  h_button:hover {
13d0: 0a 20 20 20 20 6f 70 61 63 69 74 79 3a 20 31 3b  .    opacity: 1;
13e0: 0a 7d 0a 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65  .}..div.grammale
13f0: 63 74 65 5f 70 61 6e 65 6c 5f 63 6f 6e 74 65 6e  cte_panel_conten
1400: 74 20 7b 0a 20 20 20 20 2f 2a 20 68 74 74 70 73  t {.    /* https
1410: 3a 2f 2f 73 74 61 63 6b 6f 76 65 72 66 6c 6f 77  ://stackoverflow
1420: 2e 63 6f 6d 2f 71 75 65 73 74 69 6f 6e 73 2f 37  .com/questions/7
1430: 36 37 36 30 32 32 2f 68 74 6d 6c 35 2d 66 6c 65  676022/html5-fle
1440: 78 69 62 6c 65 2d 62 6f 78 2d 6d 6f 64 65 6c 2d  xible-box-model-
1450: 68 65 69 67 68 74 2d 63 61 6c 63 75 6c 61 74 69  height-calculati
1460: 6f 6e 2f 31 35 33 38 38 32 34 37 23 31 35 33 38  on/15388247#1538
1470: 38 32 34 37 20 2a 2f 0a 20 20 20 20 70 6f 73 69  8247 */.    posi
1480: 74 69 6f 6e 3a 20 72 65 6c 61 74 69 76 65 3b 0a  tion: relative;.
1490: 20 20 20 20 66 6c 65 78 2d 67 72 6f 77 3a 20 31      flex-grow: 1
14a0: 3b 0a 20 20 20 20 6f 76 65 72 66 6c 6f 77 3a 20  ;.    overflow: 
14b0: 61 75 74 6f 3b 0a 7d 0a 0a 64 69 76 23 67 72 61  auto;.}..div#gra
14c0: 6d 6d 61 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 6d  mmalecte_panel_m
14d0: 65 73 73 61 67 65 5f 62 6c 6f 63 6b 20 7b 0a 20  essage_block {. 
14e0: 20 20 20 64 69 73 70 6c 61 79 3a 20 6e 6f 6e 65     display: none
14f0: 3b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 31  ;.    padding: 1
1500: 30 70 78 3b 0a 20 20 20 20 6d 61 72 67 69 6e 2d  0px;.    margin-
1510: 62 6f 74 74 6f 6d 3a 20 33 70 78 3b 0a 20 20 20  bottom: 3px;.   
1520: 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f   background-colo
1530: 72 3a 20 68 73 6c 28 36 30 2c 20 39 30 25 2c 20  r: hsl(60, 90%, 
1540: 38 30 25 29 3b 0a 20 20 20 20 62 6f 72 64 65 72  80%);.    border
1550: 2d 74 6f 70 3a 20 32 70 78 20 73 6f 6c 69 64 3b  -top: 2px solid;
1560: 0a 20 20 20 20 62 6f 72 64 65 72 2d 62 6f 74 74  .    border-bott
1570: 6f 6d 3a 20 32 70 78 20 73 6f 6c 69 64 3b 0a 20  om: 2px solid;. 
1580: 20 20 20 62 6f 72 64 65 72 2d 63 6f 6c 6f 72 3a     border-color:
1590: 20 68 73 6c 28 36 30 2c 20 39 30 25 2c 20 35 30   hsl(60, 90%, 50
15a0: 25 29 3b 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 68  %);.    color: h
15b0: 73 6c 28 36 30 2c 20 31 30 25 2c 20 34 30 25 29  sl(60, 10%, 40%)
15c0: 3b 0a 20 20 20 20 66 6f 6e 74 2d 66 61 6d 69 6c  ;.    font-famil
15d0: 79 3a 20 22 54 72 65 62 75 63 68 65 74 20 4d 53  y: "Trebuchet MS
15e0: 22 2c 20 22 46 69 72 61 20 53 61 6e 73 22 2c 20  ", "Fira Sans", 
15f0: 22 55 62 75 6e 74 75 20 43 6f 6e 64 65 6e 73 65  "Ubuntu Condense
1600: 64 22 2c 20 22 4c 69 62 65 72 61 74 69 6f 6e 20  d", "Liberation 
1610: 53 61 6e 73 22 2c 20 73 61 6e 73 2d 73 65 72 69  Sans", sans-seri
1620: 66 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a 65  f;.    font-size
1630: 3a 20 31 34 70 78 3b 0a 20 20 20 20 68 79 70 68  : 14px;.    hyph
1640: 65 6e 73 3a 20 61 75 74 6f 3b 0a 7d 0a 64 69 76  ens: auto;.}.div
1650: 23 67 72 61 6d 6d 61 6c 65 63 74 65 5f 70 61 6e  #grammalecte_pan
1660: 65 6c 5f 6d 65 73 73 61 67 65 5f 61 63 74 69 6f  el_message_actio
1670: 6e 5f 62 75 74 74 6f 6e 20 7b 0a 20 20 20 20 6d  n_button {.    m
1680: 61 72 67 69 6e 3a 20 31 30 70 78 3b 0a 20 20 20  argin: 10px;.   
1690: 20 70 61 64 64 69 6e 67 3a 20 34 70 78 20 31 30   padding: 4px 10
16a0: 70 78 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 72  px;.    border-r
16b0: 61 64 69 75 73 3a 20 35 70 78 3b 0a 20 20 20 20  adius: 5px;.    
16c0: 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72  background-color
16d0: 3a 20 68 73 6c 28 33 30 2c 20 31 30 30 25 2c 20  : hsl(30, 100%, 
16e0: 35 30 25 29 3b 0a 20 20 20 20 63 6f 6c 6f 72 3a  50%);.    color:
16f0: 20 68 73 6c 28 33 30 2c 20 36 30 25 2c 20 39 35   hsl(30, 60%, 95
1700: 25 29 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a  %);.    font-siz
1710: 65 3a 20 31 34 70 78 3b 0a 20 20 20 20 66 6f 6e  e: 14px;.    fon
1720: 74 2d 77 65 69 67 68 74 3a 20 62 6f 6c 64 3b 0a  t-weight: bold;.
1730: 20 20 20 20 63 75 72 73 6f 72 3a 20 70 6f 69 6e      cursor: poin
1740: 74 65 72 3b 0a 7d 0a 64 69 76 23 67 72 61 6d 6d  ter;.}.div#gramm
1750: 61 6c 65 63 74 65 5f 70 61 6e 65 6c 5f 6d 65 73  alecte_panel_mes
1760: 73 61 67 65 5f 63 6c 6f 73 65 5f 62 75 74 74 6f  sage_close_butto
1770: 6e 3a 68 6f 76 65 72 20 7b 0a 20 20 20 20 62 61  n:hover {.    ba
1780: 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20  ckground-color: 
1790: 68 73 6c 28 30 2c 20 31 30 30 25 2c 20 36 30 25  hsl(0, 100%, 60%
17a0: 29 3b 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 68 73  );.    color: hs
17b0: 6c 28 30 2c 20 35 30 25 2c 20 31 30 30 25 29 3b  l(0, 50%, 100%);
17c0: 0a 7d 0a 64 69 76 23 67 72 61 6d 6d 61 6c 65 63  .}.div#grammalec
17d0: 74 65 5f 70 61 6e 65 6c 5f 6d 65 73 73 61 67 65  te_panel_message
17e0: 5f 63 6c 6f 73 65 5f 62 75 74 74 6f 6e 20 7b 0a  _close_button {.
17f0: 20 20 20 20 66 6c 6f 61 74 3a 20 72 69 67 68 74      float: right
1800: 3b 0a 20 20 20 20 6d 61 72 67 69 6e 3a 20 30 20  ;.    margin: 0 
1810: 30 20 31 30 70 78 20 31 30 70 78 3b 0a 20 20 20  0 10px 10px;.   
1820: 20 70 61 64 64 69 6e 67 3a 20 32 70 78 20 35 70   padding: 2px 5p
1830: 78 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 72 61  x;.    border-ra
1840: 64 69 75 73 3a 20 35 70 78 3b 0a 20 20 20 20 62  dius: 5px;.    b
1850: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a  ackground-color:
1860: 20 68 73 6c 28 36 30 2c 20 39 30 25 2c 20 35 30   hsl(60, 90%, 50
1870: 25 29 3b 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 68  %);.    color: h
1880: 73 6c 28 30 2c 20 36 30 25 2c 20 38 30 25 29 3b  sl(0, 60%, 80%);
1890: 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a 65 3a 20  .    font-size: 
18a0: 31 34 70 78 3b 0a 20 20 20 20 66 6f 6e 74 2d 77  14px;.    font-w
18b0: 65 69 67 68 74 3a 20 62 6f 6c 64 3b 0a 20 20 20  eight: bold;.   
18c0: 20 63 75 72 73 6f 72 3a 20 70 6f 69 6e 74 65 72   cursor: pointer
18d0: 3b 0a 7d 0a 64 69 76 23 67 72 61 6d 6d 61 6c 65  ;.}.div#grammale
18e0: 63 74 65 5f 70 61 6e 65 6c 5f 6d 65 73 73 61 67  cte_panel_messag
18f0: 65 5f 63 6c 6f 73 65 5f 62 75 74 74 6f 6e 3a 68  e_close_button:h
1900: 6f 76 65 72 20 7b 0a 20 20 20 20 62 61 63 6b 67  over {.    backg
1910: 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c  round-color: hsl
1920: 28 30 2c 20 31 30 30 25 2c 20 36 30 25 29 3b 0a  (0, 100%, 60%);.
1930: 20 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 28 30      color: hsl(0
1940: 2c 20 35 30 25 2c 20 31 30 30 25 29 3b 0a 7d 0a  , 50%, 100%);.}.
1950: 0a 64 69 76 2e 67 72 61 6d 6d 61 6c 65 63 74 65  .div.grammalecte
1960: 5f 70 61 6e 65 6c 5f 66 6c 6f 77 5f 6d 65 73 73  _panel_flow_mess
1970: 61 67 65 20 7b 0a 20 20 20 20 6d 61 72 67 69 6e  age {.    margin
1980: 3a 20 31 30 70 78 3b 0a 20 20 20 20 70 61 64 64  : 10px;.    padd
1990: 69 6e 67 3a 20 31 30 70 78 3b 0a 20 20 20 20 62  ing: 10px;.    b
19a0: 6f 72 64 65 72 2d 72 61 64 69 75 73 3a 20 35 70  order-radius: 5p
19b0: 78 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e  x;.    backgroun
19c0: 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 28 33 30 30  d-color: hsl(300
19d0: 2c 20 32 30 25 2c 20 35 30 25 29 3b 0a 20 20 20  , 20%, 50%);.   
19e0: 20 63 6f 6c 6f 72 3a 20 68 73 6c 28 33 30 30 2c   color: hsl(300,
19f0: 20 32 30 25 2c 20 39 36 25 29 3b 0a 20 20 20 20   20%, 96%);.    
1a00: 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 22 54 72  font-family: "Tr
1a10: 65 62 75 63 68 65 74 20 4d 53 22 2c 20 22 46 69  ebuchet MS", "Fi
1a20: 72 61 20 53 61 6e 73 22 2c 20 22 55 62 75 6e 74  ra Sans", "Ubunt
1a30: 75 20 43 6f 6e 64 65 6e 73 65 64 22 2c 20 22 4c  u Condensed", "L
1a40: 69 62 65 72 61 74 69 6f 6e 20 53 61 6e 73 22 2c  iberation Sans",
1a50: 20 73 61 6e 73 2d 73 65 72 69 66 3b 0a 20 20 20   sans-serif;.   
1a60: 20 66 6f 6e 74 2d 73 69 7a 65 3a 20 31 36 70 78   font-size: 16px
1a70: 3b 0a 7d 0a 0a 0a 0a 0a 0a 2f 2a 0a 20 20 20 20  ;.}....../*.    
1a80: 53 70 69 6e 6e 65 72 0a 2a 2f 0a 64 69 76 2e 67  Spinner.*/.div.g
1a90: 72 61 6d 6d 61 6c 65 63 74 65 5f 73 70 69 6e 6e  rammalecte_spinn
1aa0: 65 72 20 7b 0a 20 20 20 20 76 69 73 69 62 69 6c  er {.    visibil
1ab0: 69 74 79 3a 20 68 69 64 64 65 6e 3b 0a 20 20 20  ity: hidden;.   
1ac0: 20 62 6f 78 2d 73 69 7a 69 6e 67 3a 20 62 6f 72   box-sizing: bor
1ad0: 64 65 72 2d 62 6f 78 3b 0a 20 20 20 20 77 69 64  der-box;.    wid
1ae0: 74 68 3a 20 33 30 70 78 3b 0a 20 20 20 20 68 65  th: 30px;.    he
1af0: 69 67 68 74 3a 20 33 30 70 78 3b 0a 20 20 20 20  ight: 30px;.    
1b00: 70 6f 73 69 74 69 6f 6e 3a 20 61 62 73 6f 6c 75  position: absolu
1b10: 74 65 3b 0a 20 20 20 20 74 6f 70 3a 20 32 70 78  te;.    top: 2px
1b20: 3b 0a 20 20 20 20 6c 65 66 74 3a 20 31 39 30 70  ;.    left: 190p
1b30: 78 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e  x;.    backgroun
1b40: 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 61 28 30 2c  d-color: hsla(0,
1b50: 20 31 30 30 25 2c 20 33 30 25 2c 20 2e 35 29 3b   100%, 30%, .5);
1b60: 0a 20 20 20 20 62 6f 72 64 65 72 3a 20 33 70 78  .    border: 3px
1b70: 20 73 6f 6c 69 64 20 68 73 6c 61 28 30 2c 20 31   solid hsla(0, 1
1b80: 30 30 25 2c 20 33 30 25 2c 20 2e 35 29 3b 0a 20  00%, 30%, .5);. 
1b90: 20 20 20 62 6f 72 64 65 72 2d 74 6f 70 3a 20 33     border-top: 3
1ba0: 70 78 20 73 6f 6c 69 64 20 68 73 6c 61 28 30 2c  px solid hsla(0,
1bb0: 20 31 30 30 25 2c 20 35 30 25 2c 20 2e 39 29 3b   100%, 50%, .9);
1bc0: 0a 20 20 20 20 62 6f 72 64 65 72 2d 72 61 64 69  .    border-radi
1bd0: 75 73 3a 20 35 30 25 3b 0a 20 20 20 20 74 65 78  us: 50%;.    tex
1be0: 74 2d 61 6c 69 67 6e 3a 20 63 65 6e 74 65 72 3b  t-align: center;
1bf0: 0a 20 20 20 20 63 75 72 73 6f 72 3a 20 70 6f 69  .    cursor: poi
1c00: 6e 74 65 72 3b 0a 20 20 20 20 62 6f 78 2d 73 68  nter;.    box-sh
1c10: 61 64 6f 77 3a 20 30 20 30 20 30 20 30 20 68 73  adow: 0 0 0 0 hs
1c20: 6c 61 28 30 2c 20 38 30 25 2c 20 35 30 25 2c 20  la(0, 80%, 50%, 
1c30: 2e 37 29 3b 0a 20 20 20 20 61 6e 69 6d 61 74 69  .7);.    animati
1c40: 6f 6e 3a 20 67 72 61 6d 6d 61 6c 65 63 74 65 2d  on: grammalecte-
1c50: 73 70 69 6e 2d 62 69 67 20 32 73 20 6c 69 6e 65  spin-big 2s line
1c60: 61 72 20 69 6e 66 69 6e 69 74 65 3b 0a 7d 0a 0a  ar infinite;.}..
1c70: 40 6b 65 79 66 72 61 6d 65 73 20 67 72 61 6d 6d  @keyframes gramm
1c80: 61 6c 65 63 74 65 2d 73 70 69 6e 2d 62 69 67 20  alecte-spin-big 
1c90: 7b 0a 20 20 20 20 30 25 20 7b 0a 20 20 20 20 20  {.    0% {.     
1ca0: 20 20 20 74 72 61 6e 73 66 6f 72 6d 3a 20 72 6f     transform: ro
1cb0: 74 61 74 65 28 30 64 65 67 29 20 73 63 61 6c 65  tate(0deg) scale
1cc0: 28 31 29 3b 0a 20 20 20 20 7d 0a 20 20 20 20 35  (1);.    }.    5
1cd0: 30 25 20 7b 0a 20 20 20 20 20 20 20 20 74 72 61  0% {.        tra
1ce0: 6e 73 66 6f 72 6d 3a 20 72 6f 74 61 74 65 28 31  nsform: rotate(1
1cf0: 38 30 64 65 67 29 20 73 63 61 6c 65 28 2e 39 35  80deg) scale(.95
1d00: 29 3b 0a 20 20 20 20 20 20 20 20 62 6f 78 2d 73  );.        box-s
1d10: 68 61 64 6f 77 3a 20 30 20 30 20 30 20 31 30 70  hadow: 0 0 0 10p
1d20: 78 20 68 73 6c 61 28 30 2c 20 35 30 25 2c 20 35  x hsla(0, 50%, 5
1d30: 30 25 2c 20 30 29 3b 0a 20 20 20 20 7d 0a 20 20  0%, 0);.    }.  
1d40: 20 20 31 30 30 25 20 7b 0a 20 20 20 20 20 20 20    100% {.       
1d50: 20 74 72 61 6e 73 66 6f 72 6d 3a 20 72 6f 74 61   transform: rota
1d60: 74 65 28 33 36 30 64 65 67 29 20 73 63 61 6c 65  te(360deg) scale
1d70: 28 31 29 3b 0a 20 20 20 20 20 20 20 20 62 6f 78  (1);.        box
1d80: 2d 73 68 61 64 6f 77 3a 20 30 20 30 20 30 20 30  -shadow: 0 0 0 0
1d90: 20 68 73 6c 61 28 30 2c 20 35 30 25 2c 20 35 30   hsla(0, 50%, 50
1da0: 25 2c 20 30 29 3b 0a 20 20 20 20 7d 0a 7d 0a     %, 0);.    }.}.