Grammalecte  Hex Artifact Content

Artifact aa3491b2f6f9dae5c3395f4d51ad0bbbd5c774bbf7874785e3f257c590af9777:


0000: 2f 2a 0a 20 20 20 20 43 53 53 0a 20 20 20 20 42  /*.    CSS.    B
0010: 75 74 74 6f 6e 20 61 6e 64 20 6d 65 6e 75 20 66  utton and menu f
0020: 6f 72 20 47 72 61 6d 6d 61 6c 65 63 74 65 0a 2a  or Grammalecte.*
0030: 2f 0a 0a 2f 2a 0a 20 20 20 20 42 75 74 74 6f 6e  /../*.    Button
0040: 0a 2a 2f 0a 2e 67 72 61 6d 6d 61 6c 65 63 74 65  .*/..grammalecte
0050: 5f 6d 65 6e 75 5f 6d 61 69 6e 5f 62 75 74 74 6f  _menu_main_butto
0060: 6e 20 7b 0a 20 20 20 20 61 6c 6c 3a 20 69 6e 69  n {.    all: ini
0070: 74 69 61 6c 3b 0a 20 20 20 20 70 6f 73 69 74 69  tial;.    positi
0080: 6f 6e 3a 20 61 62 73 6f 6c 75 74 65 3b 0a 20 20  on: absolute;.  
0090: 20 20 62 6f 78 2d 73 69 7a 69 6e 67 3a 20 62 6f    box-sizing: bo
00a0: 72 64 65 72 2d 62 6f 78 3b 0a 20 20 20 20 64 69  rder-box;.    di
00b0: 73 70 6c 61 79 3a 20 6e 6f 6e 65 3b 0a 20 20 20  splay: none;.   
00c0: 20 6d 61 72 67 69 6e 3a 20 2d 38 70 78 20 30 20   margin: -8px 0 
00d0: 30 20 2d 38 70 78 3b 0a 20 20 20 20 77 69 64 74  0 -8px;.    widt
00e0: 68 3a 20 31 36 70 78 3b 0a 20 20 20 20 68 65 69  h: 16px;.    hei
00f0: 67 68 74 3a 20 31 36 70 78 3b 0a 20 20 20 20 62  ght: 16px;.    b
0100: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a  ackground-color:
0110: 20 68 73 6c 61 28 32 31 30 2c 20 38 30 25 2c 20   hsla(210, 80%, 
0120: 38 30 25 2c 20 2e 35 29 3b 0a 20 20 20 20 62 6f  80%, .5);.    bo
0130: 72 64 65 72 3a 20 34 70 78 20 73 6f 6c 69 64 20  rder: 4px solid 
0140: 68 73 6c 61 28 32 31 30 2c 20 38 30 25 2c 20 36  hsla(210, 80%, 6
0150: 30 25 2c 20 2e 35 29 3b 0a 20 20 20 20 62 6f 72  0%, .5);.    bor
0160: 64 65 72 2d 74 6f 70 3a 20 34 70 78 20 73 6f 6c  der-top: 4px sol
0170: 69 64 20 68 73 6c 61 28 32 31 30 2c 20 31 30 30  id hsla(210, 100
0180: 25 2c 20 34 30 25 2c 20 2e 37 29 3b 0a 20 20 20  %, 40%, .7);.   
0190: 20 62 6f 72 64 65 72 2d 62 6f 74 74 6f 6d 3a 20   border-bottom: 
01a0: 34 70 78 20 73 6f 6c 69 64 20 68 73 6c 61 28 32  4px solid hsla(2
01b0: 31 30 2c 20 31 30 30 25 2c 20 34 30 25 2c 20 2e  10, 100%, 40%, .
01c0: 37 29 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 72  7);.    border-r
01d0: 61 64 69 75 73 3a 20 35 30 25 3b 0a 20 20 20 20  adius: 50%;.    
01e0: 74 65 78 74 2d 61 6c 69 67 6e 3a 20 63 65 6e 74  text-align: cent
01f0: 65 72 3b 0a 20 20 20 20 63 75 72 73 6f 72 3a 20  er;.    cursor: 
0200: 70 6f 69 6e 74 65 72 3b 0a 20 20 20 20 62 6f 78  pointer;.    box
0210: 2d 73 68 61 64 6f 77 3a 20 30 20 30 20 30 20 30  -shadow: 0 0 0 0
0220: 20 68 73 6c 61 28 32 31 30 2c 20 35 30 25 2c 20   hsla(210, 50%, 
0230: 35 30 25 2c 20 2e 35 29 3b 0a 20 20 20 20 2f 2a  50%, .5);.    /*
0240: 7a 2d 69 6e 64 65 78 3a 20 32 31 34 37 34 38 33  z-index: 2147483
0250: 36 34 30 3b 20 2f 2a 20 6d 61 78 69 6d 75 6d 20  640; /* maximum 
0260: 69 73 20 32 31 34 37 34 38 33 36 34 37 3a 20 68  is 2147483647: h
0270: 74 74 70 73 3a 2f 2f 73 74 61 63 6b 6f 76 65 72  ttps://stackover
0280: 66 6c 6f 77 2e 63 6f 6d 2f 71 75 65 73 74 69 6f  flow.com/questio
0290: 6e 73 2f 34 39 31 30 35 32 2f 6d 69 6e 69 6d 75  ns/491052/minimu
02a0: 6d 2d 61 6e 64 2d 6d 61 78 69 6d 75 6d 2d 76 61  m-and-maximum-va
02b0: 6c 75 65 2d 6f 66 2d 7a 2d 69 6e 64 65 78 20 2a  lue-of-z-index *
02c0: 2f 0a 20 20 20 20 61 6e 69 6d 61 74 69 6f 6e 3a  /.    animation:
02d0: 20 67 72 61 6d 6d 61 6c 65 63 74 65 2d 73 70 69   grammalecte-spi
02e0: 6e 20 32 73 20 65 61 73 65 20 31 3b 0a 7d 0a 2e  n 2s ease 1;.}..
02f0: 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e 75  grammalecte_menu
0300: 5f 6d 61 69 6e 5f 62 75 74 74 6f 6e 3a 68 6f 76  _main_button:hov
0310: 65 72 20 7b 0a 20 20 20 20 62 6f 72 64 65 72 3a  er {.    border:
0320: 20 34 70 78 20 73 6f 6c 69 64 20 68 73 6c 61 28   4px solid hsla(
0330: 32 31 30 2c 20 38 30 25 2c 20 33 35 25 2c 20 2e  210, 80%, 35%, .
0340: 35 29 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75  5);.    backgrou
0350: 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 61 28 32  nd-color: hsla(2
0360: 31 30 2c 20 38 30 25 2c 20 35 35 25 2c 20 2e 35  10, 80%, 55%, .5
0370: 29 3b 0a 20 20 20 20 61 6e 69 6d 61 74 69 6f 6e  );.    animation
0380: 3a 20 67 72 61 6d 6d 61 6c 65 63 74 65 2d 73 70  : grammalecte-sp
0390: 69 6e 20 2e 35 73 20 6c 69 6e 65 61 72 20 69 6e  in .5s linear in
03a0: 66 69 6e 69 74 65 3b 0a 7d 0a 0a 40 6b 65 79 66  finite;.}..@keyf
03b0: 72 61 6d 65 73 20 67 72 61 6d 6d 61 6c 65 63 74  rames grammalect
03c0: 65 2d 73 70 69 6e 20 7b 0a 20 20 20 20 30 25 20  e-spin {.    0% 
03d0: 7b 0a 20 20 20 20 20 20 20 20 74 72 61 6e 73 66  {.        transf
03e0: 6f 72 6d 3a 20 72 6f 74 61 74 65 28 30 64 65 67  orm: rotate(0deg
03f0: 29 20 73 63 61 6c 65 28 31 29 3b 0a 20 20 20 20  ) scale(1);.    
0400: 20 20 20 20 62 6f 72 64 65 72 2d 74 6f 70 3a 20      border-top: 
0410: 34 70 78 20 73 6f 6c 69 64 20 68 73 6c 61 28 32  4px solid hsla(2
0420: 31 30 2c 20 31 30 30 25 2c 20 34 30 25 2c 20 2e  10, 100%, 40%, .
0430: 37 29 3b 0a 20 20 20 20 20 20 20 20 62 6f 72 64  7);.        bord
0440: 65 72 2d 62 6f 74 74 6f 6d 3a 20 34 70 78 20 73  er-bottom: 4px s
0450: 6f 6c 69 64 20 68 73 6c 61 28 32 31 30 2c 20 31  olid hsla(210, 1
0460: 30 30 25 2c 20 34 30 25 2c 20 2e 37 29 3b 0a 20  00%, 40%, .7);. 
0470: 20 20 20 7d 0a 20 20 20 20 37 30 25 20 7b 0a 20     }.    70% {. 
0480: 20 20 20 20 20 20 20 74 72 61 6e 73 66 6f 72 6d         transform
0490: 3a 20 72 6f 74 61 74 65 28 31 38 30 64 65 67 29  : rotate(180deg)
04a0: 20 73 63 61 6c 65 28 2e 38 29 3b 0a 20 20 20 20   scale(.8);.    
04b0: 20 20 20 20 62 6f 72 64 65 72 2d 74 6f 70 3a 20      border-top: 
04c0: 34 70 78 20 73 6f 6c 69 64 20 68 73 6c 61 28 30  4px solid hsla(0
04d0: 2c 20 31 30 30 25 2c 20 34 30 25 2c 20 2e 37 29  , 100%, 40%, .7)
04e0: 3b 0a 20 20 20 20 20 20 20 20 62 6f 72 64 65 72  ;.        border
04f0: 2d 62 6f 74 74 6f 6d 3a 20 34 70 78 20 73 6f 6c  -bottom: 4px sol
0500: 69 64 20 68 73 6c 61 28 30 2c 20 31 30 30 25 2c  id hsla(0, 100%,
0510: 20 34 30 25 2c 20 2e 37 29 3b 0a 20 20 20 20 20   40%, .7);.     
0520: 20 20 20 62 6f 78 2d 73 68 61 64 6f 77 3a 20 30     box-shadow: 0
0530: 20 30 20 30 20 32 30 70 78 20 68 73 6c 61 28 32   0 0 20px hsla(2
0540: 31 30 2c 20 35 30 25 2c 20 35 30 25 2c 20 30 29  10, 50%, 50%, 0)
0550: 3b 0a 20 20 20 20 7d 0a 20 20 20 20 31 30 30 25  ;.    }.    100%
0560: 20 7b 0a 20 20 20 20 20 20 20 20 74 72 61 6e 73   {.        trans
0570: 66 6f 72 6d 3a 20 72 6f 74 61 74 65 28 33 36 30  form: rotate(360
0580: 64 65 67 29 20 73 63 61 6c 65 28 31 29 3b 0a 20  deg) scale(1);. 
0590: 20 20 20 20 20 20 20 62 6f 72 64 65 72 2d 74 6f         border-to
05a0: 70 3a 20 34 70 78 20 73 6f 6c 69 64 20 68 73 6c  p: 4px solid hsl
05b0: 61 28 32 31 30 2c 20 31 30 30 25 2c 20 34 30 25  a(210, 100%, 40%
05c0: 2c 20 2e 37 29 3b 0a 20 20 20 20 20 20 20 20 62  , .7);.        b
05d0: 6f 72 64 65 72 2d 62 6f 74 74 6f 6d 3a 20 34 70  order-bottom: 4p
05e0: 78 20 73 6f 6c 69 64 20 68 73 6c 61 28 32 31 30  x solid hsla(210
05f0: 2c 20 31 30 30 25 2c 20 34 30 25 2c 20 2e 37 29  , 100%, 40%, .7)
0600: 3b 0a 20 20 20 20 20 20 20 20 62 6f 78 2d 73 68  ;.        box-sh
0610: 61 64 6f 77 3a 20 30 20 30 20 30 20 30 20 68 73  adow: 0 0 0 0 hs
0620: 6c 61 28 32 31 30 2c 20 35 30 25 2c 20 35 30 25  la(210, 50%, 50%
0630: 2c 20 30 29 3b 0a 20 20 20 20 7d 0a 7d 0a 0a 0a  , 0);.    }.}...
0640: 2f 2a 0a 20 20 20 20 4d 65 6e 75 0a 2a 2f 0a 2e  /*.    Menu.*/..
0650: 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e 75  grammalecte_menu
0660: 20 7b 0a 20 20 20 20 61 6c 6c 3a 20 69 6e 69 74   {.    all: init
0670: 69 61 6c 3b 0a 20 20 20 20 64 69 73 70 6c 61 79  ial;.    display
0680: 3a 20 6e 6f 6e 65 3b 0a 20 20 20 20 70 6f 73 69  : none;.    posi
0690: 74 69 6f 6e 3a 20 61 62 73 6f 6c 75 74 65 3b 0a  tion: absolute;.
06a0: 20 20 20 20 6d 61 72 67 69 6e 2d 6c 65 66 74 3a      margin-left:
06b0: 20 2d 31 30 70 78 3b 0a 20 20 20 20 62 6f 72 64   -10px;.    bord
06c0: 65 72 2d 72 61 64 69 75 73 3a 20 35 70 78 3b 0a  er-radius: 5px;.
06d0: 20 20 20 20 62 6f 72 64 65 72 3a 20 33 70 78 20      border: 3px 
06e0: 73 6f 6c 69 64 20 68 73 6c 28 32 31 30 2c 20 35  solid hsl(210, 5
06f0: 30 25 2c 20 33 30 25 29 3b 0a 20 20 20 20 62 6f  0%, 30%);.    bo
0700: 78 2d 73 68 61 64 6f 77 3a 20 30 70 78 20 30 70  x-shadow: 0px 0p
0710: 78 20 32 70 78 20 68 73 6c 61 28 32 31 30 2c 20  x 2px hsla(210, 
0720: 31 30 25 2c 20 31 30 25 2c 20 2e 35 29 3b 0a 20  10%, 10%, .5);. 
0730: 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f     background-co
0740: 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 35 30  lor: hsl(210, 50
0750: 25 2c 20 33 30 25 29 3b 0a 20 20 20 20 66 6f 6e  %, 30%);.    fon
0760: 74 2d 66 61 6d 69 6c 79 3a 20 22 54 72 65 62 75  t-family: "Trebu
0770: 63 68 65 74 20 4d 53 22 2c 20 22 46 69 72 61 20  chet MS", "Fira 
0780: 53 61 6e 73 22 2c 20 22 4c 69 62 65 72 61 74 69  Sans", "Liberati
0790: 6f 6e 20 53 61 6e 73 22 2c 20 73 61 6e 73 2d 73  on Sans", sans-s
07a0: 65 72 69 66 3b 0a 20 20 20 20 7a 2d 69 6e 64 65  erif;.    z-inde
07b0: 78 3a 20 32 31 34 37 34 38 33 36 34 30 3b 20 2f  x: 2147483640; /
07c0: 2a 20 6d 61 78 69 6d 75 6d 20 69 73 20 32 31 34  * maximum is 214
07d0: 37 34 38 33 36 34 37 3a 20 68 74 74 70 73 3a 2f  7483647: https:/
07e0: 2f 73 74 61 63 6b 6f 76 65 72 66 6c 6f 77 2e 63  /stackoverflow.c
07f0: 6f 6d 2f 71 75 65 73 74 69 6f 6e 73 2f 34 39 31  om/questions/491
0800: 30 35 32 2f 6d 69 6e 69 6d 75 6d 2d 61 6e 64 2d  052/minimum-and-
0810: 6d 61 78 69 6d 75 6d 2d 76 61 6c 75 65 2d 6f 66  maximum-value-of
0820: 2d 7a 2d 69 6e 64 65 78 20 2a 2f 0a 20 20 20 20  -z-index */.    
0830: 74 65 78 74 2d 61 6c 69 67 6e 3a 20 6c 65 66 74  text-align: left
0840: 3b 0a 7d 0a 0a 2e 67 72 61 6d 6d 61 6c 65 63 74  ;.}...grammalect
0850: 65 5f 6d 65 6e 75 20 3e 20 64 69 76 20 7b 0a 20  e_menu > div {. 
0860: 20 20 20 6c 69 6e 65 2d 68 65 69 67 68 74 3a 20     line-height: 
0870: 32 31 70 78 3b 0a 7d 0a 2e 67 72 61 6d 6d 61 6c  21px;.}..grammal
0880: 65 63 74 65 5f 6d 65 6e 75 20 3e 20 64 69 76 2e  ecte_menu > div.
0890: 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e 75  grammalecte_menu
08a0: 5f 63 6c 6f 73 65 5f 62 75 74 74 6f 6e 20 7b 0a  _close_button {.
08b0: 20 20 20 20 6c 69 6e 65 2d 68 65 69 67 68 74 3a      line-height:
08c0: 20 31 38 70 78 3b 0a 7d 0a 0a 2e 67 72 61 6d 6d   18px;.}...gramm
08d0: 61 6c 65 63 74 65 5f 6d 65 6e 75 5f 63 6c 6f 73  alecte_menu_clos
08e0: 65 5f 62 75 74 74 6f 6e 20 7b 0a 20 20 20 20 66  e_button {.    f
08f0: 6c 6f 61 74 3a 20 72 69 67 68 74 3b 0a 20 20 20  loat: right;.   
0900: 20 6d 61 72 67 69 6e 3a 20 32 70 78 20 32 70 78   margin: 2px 2px
0910: 20 30 20 30 3b 0a 20 20 20 20 70 61 64 64 69 6e   0 0;.    paddin
0920: 67 3a 20 31 70 78 20 35 70 78 3b 0a 20 20 20 20  g: 1px 5px;.    
0930: 62 6f 72 64 65 72 2d 72 61 64 69 75 73 3a 20 32  border-radius: 2
0940: 70 78 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75  px;.    backgrou
0950: 6e 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 28 30 2c  nd-color: hsl(0,
0960: 20 35 30 25 2c 20 35 30 25 29 3b 0a 20 20 20 20   50%, 50%);.    
0970: 63 6f 6c 6f 72 3a 20 68 73 6c 28 30 2c 20 32 30  color: hsl(0, 20
0980: 25 2c 20 39 30 25 29 3b 0a 20 20 20 20 66 6f 6e  %, 90%);.    fon
0990: 74 2d 73 69 7a 65 3a 20 31 32 70 78 3b 0a 20 20  t-size: 12px;.  
09a0: 20 20 66 6f 6e 74 2d 77 65 69 67 68 74 3a 20 62    font-weight: b
09b0: 6f 6c 64 3b 0a 20 20 20 20 63 75 72 73 6f 72 3a  old;.    cursor:
09c0: 20 70 6f 69 6e 74 65 72 3b 0a 7d 0a 2e 67 72 61   pointer;.}..gra
09d0: 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e 75 5f 63 6c  mmalecte_menu_cl
09e0: 6f 73 65 5f 62 75 74 74 6f 6e 3a 68 6f 76 65 72  ose_button:hover
09f0: 20 7b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e   {.    backgroun
0a00: 64 2d 63 6f 6c 6f 72 3a 20 68 73 6c 28 30 2c 20  d-color: hsl(0, 
0a10: 36 30 25 2c 20 35 30 25 29 3b 0a 20 20 20 20 63  60%, 50%);.    c
0a20: 6f 6c 6f 72 3a 20 68 73 6c 28 30 2c 20 33 30 25  olor: hsl(0, 30%
0a30: 2c 20 39 36 25 29 3b 0a 7d 0a 0a 2e 67 72 61 6d  , 96%);.}...gram
0a40: 6d 61 6c 65 63 74 65 5f 6d 65 6e 75 5f 69 74 65  malecte_menu_ite
0a50: 6d 20 7b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a  m {.    padding:
0a60: 20 33 70 78 20 31 30 70 78 3b 0a 20 20 20 20 62   3px 10px;.    b
0a70: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a  ackground-color:
0a80: 20 68 73 6c 28 32 31 30 2c 20 35 30 25 2c 20 34   hsl(210, 50%, 4
0a90: 30 25 29 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69  0%);.    font-si
0aa0: 7a 65 3a 20 31 34 70 78 3b 0a 20 20 20 20 63 6f  ze: 14px;.    co
0ab0: 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 35 30  lor: hsl(210, 50
0ac0: 25 2c 20 39 32 25 29 3b 0a 20 20 20 20 63 75 72  %, 92%);.    cur
0ad0: 73 6f 72 3a 20 70 6f 69 6e 74 65 72 3b 0a 7d 0a  sor: pointer;.}.
0ae0: 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e  .grammalecte_men
0af0: 75 5f 69 74 65 6d 3a 68 6f 76 65 72 20 7b 0a 20  u_item:hover {. 
0b00: 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f     background-co
0b10: 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 35 30  lor: hsl(210, 50
0b20: 25 2c 20 34 35 25 29 3b 0a 20 20 20 20 63 6f 6c  %, 45%);.    col
0b30: 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 35 30 25  or: hsl(210, 50%
0b40: 2c 20 31 30 30 25 29 3b 0a 7d 0a 0a 2e 67 72 61  , 100%);.}...gra
0b50: 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e 75 5f 69 74  mmalecte_menu_it
0b60: 65 6d 5f 62 6c 6f 63 6b 20 7b 0a 20 20 20 20 70  em_block {.    p
0b70: 61 64 64 69 6e 67 3a 20 33 70 78 20 31 30 70 78  adding: 3px 10px
0b80: 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64  ;.    background
0b90: 2d 63 6f 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c  -color: hsl(210,
0ba0: 20 35 30 25 2c 20 34 30 25 29 3b 0a 20 20 20 20   50%, 40%);.    
0bb0: 66 6f 6e 74 2d 73 69 7a 65 3a 20 31 34 70 78 3b  font-size: 14px;
0bc0: 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 68 73 6c 28  .    color: hsl(
0bd0: 32 31 30 2c 20 35 30 25 2c 20 39 32 25 29 3b 0a  210, 50%, 92%);.
0be0: 20 20 20 20 62 6f 72 64 65 72 2d 74 6f 70 3a 20      border-top: 
0bf0: 31 70 78 20 73 6f 6c 69 64 20 68 73 6c 28 32 31  1px solid hsl(21
0c00: 30 2c 20 35 30 25 2c 20 33 30 25 29 3b 0a 20 20  0, 50%, 30%);.  
0c10: 20 20 62 6f 72 64 65 72 2d 72 61 64 69 75 73 3a    border-radius:
0c20: 20 30 20 30 20 33 70 78 20 33 70 78 3b 0a 7d 0a   0 0 3px 3px;.}.
0c30: 0a 2e 67 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 65  ..grammalecte_me
0c40: 6e 75 5f 62 75 74 74 6f 6e 20 7b 0a 20 20 20 20  nu_button {.    
0c50: 64 69 73 70 6c 61 79 3a 20 69 6e 6c 69 6e 65 2d  display: inline-
0c60: 62 6c 6f 63 6b 3b 0a 20 20 20 20 70 61 64 64 69  block;.    paddi
0c70: 6e 67 3a 20 30 20 35 70 78 3b 0a 20 20 20 20 6d  ng: 0 5px;.    m
0c80: 61 72 67 69 6e 2d 6c 65 66 74 3a 20 31 30 70 78  argin-left: 10px
0c90: 3b 0a 20 20 20 20 62 6f 72 64 65 72 2d 72 61 64  ;.    border-rad
0ca0: 69 75 73 3a 20 32 70 78 3b 0a 20 20 20 20 62 61  ius: 2px;.    ba
0cb0: 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20  ckground-color: 
0cc0: 68 73 6c 28 32 31 30 2c 20 35 30 25 2c 20 34 35  hsl(210, 50%, 45
0cd0: 25 29 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a  %);.    font-siz
0ce0: 65 3a 20 31 32 70 78 3b 0a 20 20 20 20 6c 69 6e  e: 12px;.    lin
0cf0: 65 2d 68 65 69 67 68 74 3a 20 31 2e 36 3b 0a 20  e-height: 1.6;. 
0d00: 20 20 20 74 65 78 74 2d 61 6c 69 67 6e 3a 20 63     text-align: c
0d10: 65 6e 74 65 72 3b 0a 20 20 20 20 63 75 72 73 6f  enter;.    curso
0d20: 72 3a 20 70 6f 69 6e 74 65 72 3b 0a 7d 0a 2e 67  r: pointer;.}..g
0d30: 72 61 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e 75 5f  rammalecte_menu_
0d40: 62 75 74 74 6f 6e 3a 68 6f 76 65 72 20 7b 0a 20  button:hover {. 
0d50: 20 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f     background-co
0d60: 6c 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 35 30  lor: hsl(210, 50
0d70: 25 2c 20 35 30 25 29 3b 0a 7d 0a 0a 2e 67 72 61  %, 50%);.}...gra
0d80: 6d 6d 61 6c 65 63 74 65 5f 6d 65 6e 75 5f 68 65  mmalecte_menu_he
0d90: 61 64 65 72 20 7b 0a 20 20 20 20 70 61 64 64 69  ader {.    paddi
0da0: 6e 67 3a 20 32 70 78 20 31 30 70 78 3b 0a 20 20  ng: 2px 10px;.  
0db0: 20 20 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c    background-col
0dc0: 6f 72 3a 20 68 73 6c 28 32 31 30 2c 20 35 30 25  or: hsl(210, 50%
0dd0: 2c 20 33 30 25 29 3b 0a 20 20 20 20 62 61 63 6b  , 30%);.    back
0de0: 67 72 6f 75 6e 64 2d 69 6d 61 67 65 3a 20 20 75  ground-image:  u
0df0: 72 6c 28 27 64 61 74 61 3a 69 6d 61 67 65 2f 70  rl('data:image/p
0e00: 6e 67 3b 62 61 73 65 36 34 2c 69 56 42 4f 52 77  ng;base64,iVBORw
0e10: 30 4b 47 67 6f 41 41 41 41 4e 53 55 68 45 55 67  0KGgoAAAANSUhEUg
0e20: 41 41 41 42 41 41 41 41 41 51 43 41 59 41 41 41  AAABAAAAAQCAYAAA
0e30: 41 66 38 2f 39 68 41 41 41 41 43 58 42 49 57 58  Af8/9hAAAACXBIWX
0e40: 4d 41 41 41 33 58 41 41 41 4e 31 77 46 43 4b 4a  MAAA3XAAAN1wFCKJ
0e50: 74 34 41 41 41 43 38 55 6c 45 51 56 51 34 6a 58  t4AAAC8UlEQVQ4jX
0e60: 33 54 62 55 67 54 63 52 77 48 38 50 38 39 64 64  3TbUgTcRwH8P89dd
0e70: 75 35 75 39 74 74 30 38 32 61 5a 6d 70 46 45 55  u5u9tt082aZmpFEU
0e80: 34 74 46 7a 30 51 47 54 55 77 43 69 30 68 65 6e  4tFz0QGTUwCi0hen
0e90: 69 52 39 4d 53 55 49 4b 52 61 44 30 52 76 49 6c  iR9MSUIKRaD0RvIl
0ea0: 4b 69 67 73 6f 6f 6f 2b 69 4e 46 61 30 58 4a 59  Kigsooo+iNFa0XJY
0eb0: 75 77 49 6a 45 4b 31 39 4f 63 44 74 50 45 6c 73  uwIjEK19OcDtPEls
0ec0: 47 30 6b 74 79 70 35 39 31 74 37 75 37 2b 76 55  G0ktyp591t7u7+vU
0ed0: 68 37 4d 50 58 33 2b 76 66 35 2f 6e 38 2f 2b 50  h7MPX3+vf5/n8/+P
0ee0: 30 42 6d 4b 4a 49 50 55 55 56 6c 68 32 72 64 56  0BmKJIPUUVlh2rdV
0ef0: 56 65 65 73 57 6c 7a 45 79 62 71 67 2b 62 46 4f  VeesWlzEybqg+bFO
0f00: 73 6f 79 6c 6e 71 50 6d 4e 61 76 47 46 66 6b 6e  soylnqPmNavGFfkn
0f10: 56 32 4f 6d 75 32 4c 76 6a 61 33 76 78 41 55 52  V2Omu2Lvja3vxAUR
0f20: 4b 4a 69 62 33 6f 70 48 69 7a 75 38 72 69 4c 4b  KJib3opHizu8riLK
0f30: 36 67 6a 52 79 75 4b 67 6d 6f 53 6f 4d 52 46 45  6gjRyuKgmoSoMRFE
0f40: 4e 52 55 71 66 58 54 7a 76 42 47 4b 36 32 4c 43  NRUqfXTzvBGK62LC
0f50: 32 75 6f 46 6b 4f 6c 34 52 68 6a 51 38 2b 71 57  2uoFkOl4RhjQ8+qW
0f60: 74 37 64 50 4e 45 33 73 62 64 70 2b 32 4c 58 62  t7dPNE3sbdp+2LXb
0f70: 73 47 65 39 71 62 34 72 49 6f 2f 42 66 77 46 79  sGe9qb4rIo/BfwFy
0f80: 36 6e 57 51 34 54 68 57 47 4e 44 7a 62 63 66 75  6nWQ4ThWGNDzbcfu
0f90: 32 39 64 4d 44 68 32 6e 48 55 37 43 79 70 59 4e  29dMDh2nHU7CypYN
0fa0: 4c 6d 7a 54 64 61 30 2f 4c 35 63 4e 75 7a 6d 44  LmzTda0/L5cNuzmD
0fb0: 51 69 2f 41 34 59 32 37 6b 36 65 51 78 4c 49 37  Qi/A4Y27k6eQxLI7
0fc0: 39 77 53 2f 31 31 44 30 41 41 4d 4e 76 73 36 58  9wS/11D0AAMNvs6X
0fd0: 54 36 6f 6a 56 4a 6a 4a 45 67 54 62 4d 79 32 42  T6ojVJjJEgTbMy2B
0fe0: 54 37 37 78 42 4d 70 30 39 4b 63 70 61 57 56 31  T77xBMp09KcpaWV1
0ff0: 75 63 34 31 6a 51 6f 69 30 4e 64 55 48 66 6a 65  uc41jQoi0NdUHfje
1000: 4f 4f 39 57 57 6e 37 41 56 46 37 73 37 6e 39 38  OO9WWn7AVF7s7n98
1010: 36 53 69 74 68 50 4a 47 65 75 70 42 68 32 50 43  6SithPJGeupBh2PC
1020: 53 50 2f 78 78 71 78 41 70 33 65 71 36 77 75 55  SP/xxqxAp3eq6wuU
1030: 56 37 57 63 36 4d 53 5a 49 45 68 41 38 76 48 6a  V7Wc6MSZIEhA8vHj
1040: 62 66 4f 65 2f 4f 63 57 33 7a 6d 41 75 4b 79 2b  bfOe/OcW3zmAuKy+
1050: 6e 55 7a 41 79 44 32 62 6f 77 38 4f 44 61 45 52  nUzAyD2bow8ODaER
1060: 4f 46 71 38 41 79 5a 35 57 42 59 64 45 5a 58 47  OFq8AyZ5WBYdEZXG
1070: 71 47 78 5a 36 31 48 4a 56 2b 39 48 59 43 4a 52  qGxZ61HJV+9HYCJR
1080: 62 54 4e 41 30 51 42 41 34 30 48 57 75 6e 61 4b  bTNA0QBA40HWunaK
1090: 4e 35 64 4b 67 2f 44 42 4b 78 65 43 49 65 30 39  N5dKg/DBKxeCIe09
10a0: 54 68 2f 6d 34 4d 4a 77 69 4d 53 5a 6d 4c 45 7a  Th/m4MJwiMSZmLEz
10b0: 4d 51 41 41 42 51 52 75 4e 71 67 75 38 4e 59 58  MQAABQRuNqgu8NYX
10c0: 33 64 6f 54 63 4d 70 76 43 6b 4c 62 74 51 5a 32  3doTcMpvCkLbtQZ2
10d0: 41 4a 6b 72 50 4f 5a 47 31 7a 6c 6e 59 31 33 54  AJkrPOZG1zlnY13T
10e0: 2b 48 79 39 45 65 68 59 39 30 68 35 37 65 71 63  +Hy9EehY90h57eqc
10f0: 6f 72 63 5a 2f 6c 63 74 5a 75 4d 7a 41 73 4f 6a  orcZ/lctZuMzAsOj
1100: 4c 45 71 77 4e 76 36 36 2f 36 76 5a 63 50 59 52  LEqwNv66/6vZcPYR
1110: 42 43 2b 43 33 63 47 61 42 78 68 53 65 74 32 61  BC+C3cGaBxhSet2a
1120: 76 31 42 70 59 67 54 54 59 37 6b 35 79 32 4a 50  v1BpYgTTY7k5y2JP
1130: 54 34 31 73 6c 49 52 36 41 78 76 38 52 39 6e 6e  T41slIR6Axv8R9nn
1140: 4f 73 2b 34 50 66 2b 32 72 39 39 32 75 4f 78 47  Os+4Pf+2r992uOxG
1150: 56 4a 77 67 41 41 41 45 49 4e 66 67 74 33 42 47  VJwgAAAEINfgt3BG
1160: 67 73 45 53 57 74 57 61 73 31 69 47 44 79 6c 2b  gsESWtWas1iGDyl+
1170: 43 54 2f 75 37 57 70 76 78 4e 46 52 63 34 78 37  CT/u7WpvxNFRc4x7
1180: 71 74 42 6f 5a 46 68 53 46 65 6a 62 37 7a 31 66  qtBoZFhSFejb7z1f
1190: 71 39 4e 59 66 6a 73 69 54 2b 63 77 63 51 61 76  q9NYfjsiT+cwcQav
11a0: 42 72 75 43 4f 67 55 34 53 49 47 6f 31 38 61 6d  BruCOgU4SIGo18am
11b0: 75 6f 71 33 4a 73 33 46 4e 6c 79 6e 56 74 48 33  uoq3Js3FNlynVtH3
11c0: 38 35 2b 73 35 33 7a 65 2b 74 38 63 52 6b 55 52  85+s53ze+t8cRkUR
11d0: 78 33 79 4d 54 54 52 42 41 45 51 56 41 55 58 62  x3yMTTRBAEQVAUXb
11e0: 46 6c 66 33 58 79 73 74 4a 4b 41 32 4e 45 78 65  Flf3XystJKA2NExe
11f0: 46 42 64 57 41 53 44 41 41 41 2b 4d 51 41 43 43  FBdWASDAAA+MQACC
1200: 45 45 6d 71 62 4a 30 62 36 50 4d 43 37 4a 77 68  EEmqbJ0b6PMC7Jwh
1210: 44 55 38 59 46 48 56 35 75 39 4e 5a 36 34 4c 45  DU8YFHV5u9NZ64LE
1220: 72 54 2f 6f 57 2f 36 33 74 50 56 36 75 4a 77 6d  rT/oW/63tPV6uJwm
1230: 4b 6f 4f 4e 44 37 38 75 37 46 67 35 4e 68 41 41  KoOND78u7Fg5NhAA
1240: 44 34 43 56 62 7a 59 39 63 77 72 57 51 72 41 41  D4CVbzY9cwrWQrAA
1250: 41 41 41 45 6c 46 54 6b 53 75 51 6d 43 43 27 29  AAAElFTkSuQmCC')
1260: 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75 6e 64  ;.    background
1270: 2d 72 65 70 65 61 74 3a 20 6e 6f 2d 72 65 70 65  -repeat: no-repe
1280: 61 74 3b 0a 20 20 20 20 62 61 63 6b 67 72 6f 75  at;.    backgrou
1290: 6e 64 2d 70 6f 73 69 74 69 6f 6e 3a 20 31 30 25  nd-position: 10%
12a0: 20 35 30 25 3b 0a 20 20 20 20 66 6f 6e 74 2d 73   50%;.    font-s
12b0: 69 7a 65 3a 20 31 36 70 78 3b 0a 20 20 20 20 66  ize: 16px;.    f
12c0: 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 22 54 72 65  ont-family: "Tre
12d0: 62 75 63 68 65 74 20 4d 53 22 2c 20 22 46 69 72  buchet MS", "Fir
12e0: 61 20 53 61 6e 73 22 2c 20 22 4c 69 62 65 72 61  a Sans", "Libera
12f0: 74 69 6f 6e 20 53 61 6e 73 22 2c 20 73 61 6e 73  tion Sans", sans
1300: 2d 73 65 72 69 66 3b 0a 20 20 20 20 63 6f 6c 6f  -serif;.    colo
1310: 72 3a 20 68 73 6c 28 32 31 30 2c 20 35 30 25 2c  r: hsl(210, 50%,
1320: 20 39 30 25 29 3b 0a 20 20 20 20 74 65 78 74 2d   90%);.    text-
1330: 73 68 61 64 6f 77 3a 20 30 70 78 20 30 70 78 20  shadow: 0px 0px 
1340: 32 70 78 20 68 73 6c 61 28 32 31 30 2c 20 31 30  2px hsla(210, 10
1350: 25 2c 20 31 30 25 2c 20 2e 39 29 3b 0a 20 20 20  %, 10%, .9);.   
1360: 20 74 65 78 74 2d 61 6c 69 67 6e 3a 20 63 65 6e   text-align: cen
1370: 74 65 72 3b 0a 7d 0a 2e 67 72 61 6d 6d 61 6c 65  ter;.}..grammale
1380: 63 74 65 5f 6d 65 6e 75 5f 66 6f 6f 74 65 72 20  cte_menu_footer 
1390: 7b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 32  {.    padding: 2
13a0: 70 78 20 31 30 70 78 3b 0a 20 20 20 20 62 61 63  px 10px;.    bac
13b0: 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 68  kground-color: h
13c0: 73 6c 28 32 31 30 2c 20 35 30 25 2c 20 33 30 25  sl(210, 50%, 30%
13d0: 29 3b 0a 7d 0a                                   );.}.