Xxe/Css/publidoc.css
author Patrick PIERRE
mar., 16 juil. 2013 11:23:37 +0200
changeset 236 dbec7d0cb842
parent 206 e61680154e7d
child 239 7842481b6f9c
permissions -rw-r--r--
hotspot type -> hotspot display
patrick@67
     1
@charset "UTF-8";
patrick@67
     2
patrick@59
     3
/* $Id$ */
patrick@59
     4
patrick@71
     5
@import url(xxe-config:common/css/cals_table.imp);
patrick@71
     6
patrick@60
     7
*::comment { display: none; }
patrick@60
     8
patrick@61
     9
publidoc {
patrick@63
    10
  display: block;
patrick@61
    11
  font-family: sans-serif;
patrick@61
    12
  padding: 0;
patrick@61
    13
}
patrick@60
    14
patrick@60
    15
patrick@60
    16
/* Head level ============================================================== */
patrick@60
    17
patrick@61
    18
head {
patrick@63
    19
  display: block;
patrick@61
    20
  margin-bottom: .5em;
patrick@62
    21
  background-color: #fafafa;
patrick@111
    22
  padding: .2em .5em 0 .5em;
patrick@61
    23
  border: 1px solid #bbbbbb;
patrick@61
    24
  border-radius: 0.2em;
patrick@59
    25
}
patrick@59
    26
patrick@60
    27
head > *:before {
Patrick@139
    28
  display: marker;
Patrick@139
    29
  color:  #7f7f7f;
patrick@156
    30
  content: insert-before-button() element-label() " :";
patrick@60
    31
}
patrick@60
    32
head > title:before { display: none; }
patrick@127
    33
head > shorttitle:before { display: none; }
patrick@63
    34
head > subtitle:before { display: none; }
patrick@62
    35
head > identifier[type="uri"]:before { content: insert-before-button() " URI :"; }
patrick@62
    36
head > identifier[type="ean"]:before { content: insert-before-button() " EAN :"; }
patrick@61
    37
head > copyright:before { content: insert-before-button() " Copyright :"; }
patrick@156
    38
head > collection:before { content: insert-before-button() " Collection :"; }
patrick@67
    39
head > contributors:before { content: insert-before-button() " Contributeurs :"; }
patrick@60
    40
head > date:before { content: insert-before-button() " Date :"; }
patrick@60
    41
head > place:before { content: insert-before-button() " Lieu :"; }
patrick@60
    42
head > source:before { content: insert-before-button() " Source :"; }
patrick@60
    43
head > keywordset:before { content: insert-before-button() " Mots clés :"; }
patrick@61
    44
head > subjectset:before { content: insert-before-button() " Thèmes :"; }
patrick@61
    45
head > abstract:before { content: insert-before-button() " Résumé :"; }
patrick@61
    46
head > cover:before { content: insert-before-button() " Couverture :"; }
patrick@61
    47
head > annotation:before { content: insert-before-button() " Annotation :"; }
patrick@111
    48
head > audio:before { content: insert-before-button() " Audio :"; }
patrick@59
    49
patrick@60
    50
head > * {
Patrick@139
    51
  display: block;
Patrick@139
    52
  margin: 0 0 .8em 7.5em;
patrick@60
    53
}
patrick@67
    54
patrick@67
    55
head > *:after {
patrick@67
    56
  color:  #7f7f7f;
patrick@67
    57
  content: " " insert-after-button();
patrick@67
    58
}
patrick@67
    59
patrick@127
    60
/* title, shortitle & subtitle ~~~~~ */
patrick@127
    61
patrick@127
    62
head > title, head > shorttitle {
patrick@127
    63
  font-weight: bold;
patrick@127
    64
  font-size: 120%;
patrick@127
    65
  margin: 0 0 .2em 0;
patrick@127
    66
}
patrick@67
    67
patrick@60
    68
head > title {
patrick@60
    69
  color: #004080;
patrick@61
    70
}
patrick@127
    71
patrick@63
    72
head > subtitle {
patrick@63
    73
  font-weight: bold;
patrick@63
    74
  color: #004080;
patrick@63
    75
  margin: 0 0 .2em 0;
patrick@60
    76
}
patrick@60
    77
patrick@67
    78
/* contributors ~~~~~~~~~~~~~~~~~~~~ */
patrick@67
    79
patrick@67
    80
contributor:before {
patrick@67
    81
  display: marker;
patrick@67
    82
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@67
    83
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@60
    84
}
patrick@67
    85
contributor {
patrick@67
    86
  display: block;
patrick@67
    87
  margin: 0 0 .2em 24px;
patrick@62
    88
}
patrick@60
    89
patrick@67
    90
firstname:after, secondname:after, lastname:after, label:after,
patrick@67
    91
address:after {
patrick@65
    92
  content: insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@65
    93
}
patrick@65
    94
patrick@67
    95
contributor > link[uri]:after {
patrick@67
    96
  content: " ‣ " text-field(attribute, uri, color, black, font-size, 80%) "]"
patrick@67
    97
           insert-after-button(icon, icon(right-half-disc));
patrick@67
    98
}
patrick@67
    99
contributor > link[idref]:after {
patrick@67
   100
  content: " ‣ " label(attribute, idref, color, black)
patrick@67
   101
           set-attribute-button(attribute, idref) "]"
patrick@67
   102
           insert-after-button(icon, icon(right-half-disc));
patrick@65
   103
}
patrick@65
   104
patrick@68
   105
contributor role {
patrick@67
   106
  color: #7f7f7f;
patrick@68
   107
  content: " rôle : " combo-box(element, role, font-size, 75%,
patrick@156
   108
             labels, "auteur\A illustrateur\A éditeur\A packager"
patrick@156
   109
             values, "author\A illustrator\A publisher\A packager", color, black)
patrick@68
   110
           insert-same-after-button(icon, icon(right-half-disc));
patrick@65
   111
}
patrick@65
   112
patrick@67
   113
/* source ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@67
   114
patrick@65
   115
head source[type="book"] {
patrick@65
   116
  display: none;
patrick@65
   117
}
patrick@65
   118
patrick@67
   119
/* keyword & subject ~~~~~~~~~~~~~~~ */
patrick@67
   120
patrick@65
   121
head keyword:after {
patrick@65
   122
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc))
patrick@65
   123
           " ";
patrick@65
   124
}
patrick@65
   125
patrick@65
   126
head subject:before {
patrick@65
   127
  color: #7F7f7f;
patrick@65
   128
  content: "ID = " text-field(attribute, id, columns, 10, color, black, font-size, 75%);
patrick@65
   129
}
patrick@65
   130
head subject:after {
patrick@65
   131
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@65
   132
}
patrick@65
   133
patrick@67
   134
patrick@60
   135
/* Division level ========================================================== */
patrick@60
   136
patrick@61
   137
division:before {
patrick@63
   138
  display: block;
patrick@61
   139
  color: #7f7f7f;
patrick@61
   140
  content: collapser() " " insert-before-button() insert-after-button()
patrick@61
   141
           " Division"
patrick@61
   142
}
patrick@61
   143
patrick@61
   144
division {
patrick@61
   145
  display: block;
patrick@61
   146
  border: 1px dotted #7f7f7f;
patrick@61
   147
  padding: 5px;
patrick@61
   148
  margin-bottom: .5em;
patrick@61
   149
  collapsible: yes;
patrick@61
   150
  not-collapsible-head: 1;
patrick@61
   151
}
patrick@61
   152
division:last-child {
patrick@61
   153
  margin-bottom: 0;
patrick@61
   154
}
patrick@61
   155
patrick@61
   156
division > head {
patrick@62
   157
  background-color: #ffffee;
patrick@61
   158
  padding: .3em .5em .3em .5em;
patrick@61
   159
  border-radius: 0.5em;
patrick@61
   160
}
patrick@61
   161
patrick@61
   162
patrick@60
   163
/* Component level ========================================================= */
patrick@60
   164
patrick@61
   165
topic:before {
patrick@61
   166
  display: block;
patrick@61
   167
  color: #7f7f7f;
patrick@61
   168
  background-color: #ddddcc;
patrick@63
   169
  border: 1px solid #aeaea0;
patrick@61
   170
  font-weight: bold;
patrick@61
   171
  padding: .5em 5px .5em 5px;
patrick@61
   172
  content: collapser() " " insert-before-button() insert-after-button()
patrick@61
   173
           " " add-attribute-button() " Topic";
patrick@61
   174
}
Patrick@139
   175
topic[id]:before {
patrick@61
   176
  content: collapser() " " insert-before-button() insert-after-button()
patrick@62
   177
           " " add-attribute-button() " Topic"
Patrick@139
   178
           " – ID = " text-field(attribute, "id", columns, 15, color, black);
patrick@61
   179
}
patrick@61
   180
topic[type]:before {
patrick@61
   181
  content: collapser() " " insert-before-button() insert-after-button()
patrick@62
   182
           " " add-attribute-button() " Topic"
patrick@62
   183
           " – Type = " text-field(attribute, type, columns, 10, color, black);
patrick@61
   184
}
Patrick@139
   185
topic[id][type]:before {
patrick@61
   186
  content: collapser() " " insert-before-button() insert-after-button()
patrick@62
   187
           " Topic"
Patrick@139
   188
           " – ID = " text-field(attribute, "id", columns, 15, color, black)
patrick@62
   189
           " – Type = " text-field(attribute, type, columns, 10, color, black);
patrick@61
   190
}
patrick@61
   191
patrick@61
   192
topic {
patrick@63
   193
  display: block;
patrick@63
   194
  border: 1px solid #aeaea0;
patrick@61
   195
  margin-bottom: .5em;
patrick@61
   196
  padding: 5px;
patrick@61
   197
  collapsible: yes;
patrick@61
   198
}
patrick@61
   199
topic:last-child {
patrick@61
   200
  margin-bottom: 0;
patrick@61
   201
}
patrick@61
   202
patrick@61
   203
topic > head {
patrick@62
   204
  background-color: #ffffee;
patrick@61
   205
  padding: .3em .5em .3em .5em;
patrick@61
   206
  border-radius: 0.5em;
patrick@61
   207
}
patrick@61
   208
patrick@61
   209
patrick@61
   210
/* Top level =============================================================== */
patrick@61
   211
patrick@61
   212
publidoc > *:before {
patrick@61
   213
  display: block;
patrick@61
   214
  color: #bbbbbb;
patrick@62
   215
  background: #993333 url('top.png') repeat-x top left;
patrick@61
   216
  font-weight: bold;
patrick@62
   217
  padding: 1.2em 5px 1em 5px;
patrick@61
   218
}
patrick@61
   219
publidoc > document:before {
patrick@67
   220
  content: add-attribute-button() " Document"
patrick@117
   221
           " – ID = " text-field(attribute, "id", columns, 15, color, white);
patrick@67
   222
}
patrick@117
   223
publidoc > document[id][xml|lang]:before {
patrick@67
   224
  content: "Document"
patrick@117
   225
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@67
   226
           " – Langue principale  = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@125
   227
             values, "en\A fr\A es", color, white);
patrick@61
   228
}
patrick@117
   229
publidoc > topic[id]:before {
patrick@67
   230
  content: add-attribute-button() " Topic"
patrick@117
   231
           " – ID = " text-field(attribute, "id", columns, 15, color, white);
patrick@61
   232
}
Patrick@139
   233
publidoc > topic[id][type]:before {
patrick@67
   234
  content: add-attribute-button() " Topic"
patrick@117
   235
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@62
   236
           " – Type = " text-field(attribute, type, columns, 10, color, white);
patrick@61
   237
}
patrick@117
   238
publidoc > topic[id][xml|lang]:before {
patrick@67
   239
  content: add-attribute-button() " Topic"
patrick@117
   240
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@70
   241
           " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@125
   242
             values, "en\A fr\A es", color, white);
patrick@67
   243
}
patrick@117
   244
publidoc > topic[id][type][xml|lang]:before {
patrick@67
   245
  content: "Topic"
patrick@117
   246
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@67
   247
           " – Type = " text-field(attribute, type, columns, 10, color, white)
patrick@70
   248
           " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@125
   249
             values, "en\A fr\A es", color, white);
patrick@67
   250
}
patrick@61
   251
patrick@61
   252
publidoc > * {
patrick@63
   253
  display: block;
patrick@61
   254
  margin: 5px;
patrick@62
   255
  padding: 0;
patrick@61
   256
  border: 0;
patrick@61
   257
}
patrick@61
   258
patrick@61
   259
publidoc > * > head {
patrick@62
   260
  background-color: #ffffee;
patrick@61
   261
  padding: .3em .5em .3em .5em;
patrick@61
   262
  border-radius: 0.5em;
patrick@61
   263
}
patrick@61
   264
patrick@63
   265
publidoc > * > head > title {
patrick@63
   266
  font-size: 140%;
patrick@111
   267
  margin: .1em 0 .1em 0;
patrick@63
   268
}
patrick@63
   269
patrick@61
   270
patrick@60
   271
/* Section level =========================================================== */
patrick@60
   272
patrick@62
   273
section:before {
patrick@63
   274
  display: block;
patrick@62
   275
  color: #7f7f7f;
patrick@64
   276
  text-align: left;
patrick@64
   277
  font-style: normal;
patrick@64
   278
  font-size: 75%;
patrick@63
   279
  padding-bottom: 3px;
patrick@63
   280
  content: insert-before-button() add-attribute-button(icon, icon(plus-box));
patrick@62
   281
}
patrick@62
   282
section[type]:before {
patrick@64
   283
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@64
   284
           " Type = " text-field(attribute, type, columns, 5, color, black);
patrick@64
   285
}
patrick@166
   286
section[for]:before {
patrick@166
   287
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@166
   288
           " Pour = " text-field(attribute, for, columns, 5, color, black);
patrick@166
   289
}
patrick@64
   290
section[xml|lang]:before {
patrick@64
   291
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@64
   292
           " Langue = " text-field(attribute, "xml:lang", columns, 2, color, black);
patrick@64
   293
}
patrick@166
   294
section[type][for]:before {
patrick@166
   295
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@166
   296
           " Type = " text-field(attribute, type, columns, 5, color, black)
patrick@166
   297
           " – Pour = " text-field(attribute, for, columns, 5, color, black);
patrick@166
   298
}
patrick@64
   299
section[type][xml|lang]:before {
patrick@166
   300
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@64
   301
           " Type = " text-field(attribute, type, columns, 5, color, black)
patrick@64
   302
           " – Langue = " text-field(attribute, "xml:lang", columns, 2, color, black);
patrick@62
   303
}
patrick@166
   304
section[for][xml|lang]:before {
patrick@166
   305
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@166
   306
           " Pour = " text-field(attribute, for, columns, 5, color, black)
patrick@166
   307
           " – Langue = " text-field(attribute, "xml:lang", columns, 2, color, black);
patrick@166
   308
}
patrick@166
   309
section[type][for][xml|lang]:before {
patrick@166
   310
  content: insert-before-button()
patrick@166
   311
           " Type = " text-field(attribute, type, columns, 5, color, black)
patrick@166
   312
           " Pour = " text-field(attribute, for, columns, 5, color, black)
patrick@166
   313
           " – Langue = " text-field(attribute, "xml:lang", columns, 2, color, black);
patrick@166
   314
}
patrick@166
   315
patrick@63
   316
section section:before {
patrick@63
   317
  margin-left: 1em;
patrick@63
   318
}
patrick@62
   319
Patrick@139
   320
header, section, footer {
patrick@61
   321
  display: block;
patrick@61
   322
}
patrick@62
   323
section[type="box"] {
patrick@63
   324
  margin-bottom: .5em;
patrick@62
   325
  padding: 5px;
patrick@62
   326
  background-color: #e8f0f7;
patrick@62
   327
  border-radius: 0.2em;
patrick@62
   328
}
patrick@63
   329
section[type="ex"] { font-style: italic; }
patrick@62
   330
section[type="sign"] { text-align: right; }
patrick@62
   331
Patrick@139
   332
header, footer {
Patrick@139
   333
  background-color: #fafafa;
Patrick@139
   334
}
Patrick@139
   335
patrick@62
   336
section section {
patrick@63
   337
  margin-left: 1em;
patrick@62
   338
}
patrick@62
   339
patrick@62
   340
section:after {
patrick@62
   341
  color: #7f7f7f;
patrick@62
   342
  content: insert-after-button();
patrick@61
   343
}
patrick@64
   344
section section:after {
patrick@64
   345
  margin-left: 1em;
patrick@64
   346
}
patrick@61
   347
patrick@59
   348
patrick@60
   349
/* Block level ============================================================= */
patrick@59
   350
patrick@62
   351
p:before, speech:before, list:before,
patrick@62
   352
blockquote:before, table:before, media:before {
patrick@63
   353
  display: marker;
patrick@72
   354
  color: #7f7f7f;
patrick@72
   355
  content: insert-before-button(icon, icon(left-half-disc))
patrick@72
   356
           insert-after-button(icon, icon(right-half-disc));
patrick@62
   357
}
patrick@62
   358
patrick@62
   359
p, speech, list, blockquote, table, media {
patrick@61
   360
  display: block;
patrick@62
   361
  margin-left: 24px;
patrick@63
   362
  font-size: 115%;
patrick@62
   363
  font-family: serif;
patrick@61
   364
}
patrick@61
   365
patrick@67
   366
/* speech ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@65
   367
patrick@65
   368
speaker {
patrick@65
   369
  font-weight: bold;
patrick@65
   370
}
patrick@65
   371
patrick@65
   372
stage:before, stage:after {
patrick@65
   373
  color: #7f7f7f;
patrick@65
   374
  content: "(";
patrick@65
   375
}
patrick@65
   376
stage:before {
patrick@65
   377
  content: " (";
patrick@65
   378
}
patrick@65
   379
stage {
patrick@65
   380
  font-style: italic;  
patrick@65
   381
}
patrick@65
   382
stage:after {
patrick@65
   383
  content: ")";
patrick@65
   384
}
patrick@65
   385
patrick@63
   386
/* list ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@61
   387
patrick@72
   388
list:before {
patrick@72
   389
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@72
   390
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc))
patrick@72
   391
           command-button(command, "putAttribute", parameter, "type ordered", icon, icon(convert));
patrick@72
   392
}
patrick@72
   393
list[type="ordered"]:before {
patrick@72
   394
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@72
   395
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc))
patrick@72
   396
           command-button(command, "removeAttribute", parameter, "type", icon, icon(convert));
patrick@72
   397
}
patrick@72
   398
list[type="glossary"]:before {
patrick@72
   399
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@72
   400
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@72
   401
}
patrick@72
   402
patrick@61
   403
list {
patrick@72
   404
  margin: .3em 0 .3em 36px;
patrick@72
   405
}
patrick@72
   406
list[type="glossary"] {
patrick@62
   407
  margin: .3em 0 .3em 24px;
patrick@61
   408
}
patrick@61
   409
patrick@63
   410
list > head {
patrick@63
   411
  font-size: 75%;
patrick@63
   412
}
patrick@63
   413
patrick@61
   414
item {
patrick@61
   415
  display: list-item;
patrick@61
   416
}
patrick@61
   417
list[type="ordered"] > item {
patrick@61
   418
  list-style-type: decimal;
patrick@72
   419
  list-style-position: inside;
patrick@61
   420
}
patrick@61
   421
patrick@63
   422
item:after {
patrick@63
   423
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@63
   424
}
patrick@63
   425
patrick@72
   426
list:not([type="glossary"]) > item > p:before {
patrick@72
   427
  color: #7f7f7f;
patrick@72
   428
  content: insert-same-before-button(icon, icon(left-half-disc))
patrick@72
   429
           insert-same-after-button(icon, icon(right-half-disc));
patrick@72
   430
}
patrick@72
   431
list:not([type="glossary"]) > item > p {
patrick@72
   432
  display: inline;
patrick@72
   433
}
patrick@72
   434
list:not([type="glossary"]) > item > p:after {
patrick@72
   435
  color: #7f7f7f;  
patrick@72
   436
  content: "\A";
patrick@72
   437
}
patrick@72
   438
patrick@61
   439
list[type="glossary"] > item > label {
patrick@61
   440
  font-weight: bold;
patrick@61
   441
}
patrick@61
   442
patrick@63
   443
/* blockquote ~~~~~~~~~~~~~~~~~~~~~~ */
patrick@62
   444
patrick@72
   445
blockquote { color: #004080; }
patrick@72
   446
patrick@62
   447
attribution { font-style: italic; }
patrick@62
   448
patrick@64
   449
/* media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@64
   450
patrick@68
   451
media {
patrick@108
   452
  margin-top: .5em;
patrick@108
   453
  margin-bottom: 1em;
patrick@108
   454
  padding: 10px;
patrick@108
   455
  border: 1px dashed #7f7f7f;
patrick@108
   456
}
patrick@108
   457
patrick@124
   458
media image, media audio, media video {
patrick@108
   459
  display: block;
patrick@108
   460
  font-family: sans-serif;
patrick@108
   461
}
patrick@111
   462
patrick@111
   463
media caption {
patrick@111
   464
  display: block;
patrick@156
   465
  font-family: sans-serif;
patrick@156
   466
  font-size: 93%;
patrick@156
   467
  color: #004080;
patrick@111
   468
}
patrick@111
   469
media caption:after {
patrick@111
   470
  content: insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@68
   471
}
patrick@68
   472
patrick@111
   473
/* image ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@111
   474
patrick@111
   475
cover image {
patrick@111
   476
  content: concatenate("image('Images/", attr(id), ".png', -480, -360, smooth)");
patrick@111
   477
}
patrick@111
   478
Patrick@187
   479
p image, entry image {
patrick@111
   480
  content: concatenate("image('Images/", attr(id), ".png', -64, -48, smooth)");
patrick@108
   481
  vertical-align: middle;
patrick@108
   482
}
patrick@111
   483
Patrick@187
   484
p image[type="thumbnail"], entry image[type="thumbnail"] {
Patrick@187
   485
  content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)");
Patrick@187
   486
  vertical-align: middle;
Patrick@187
   487
}
Patrick@187
   488
patrick@111
   489
media image:before {
patrick@111
   490
  display: block;
patrick@111
   491
  text-align: left;
patrick@111
   492
  content: concatenate("image('Images/", attr(id), ".png', -480, -360, smooth)")
patrick@111
   493
           insert-button(color, #7f7f7f, icon, icon(pop-down))
patrick@111
   494
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@111
   495
}
patrick@111
   496
media image[type="thumbnail"]:before {
patrick@111
   497
  content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)")
patrick@111
   498
           insert-button(color, #7f7f7f, icon, icon(pop-down))
patrick@111
   499
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@108
   500
}
patrick@108
   501
patrick@111
   502
media image {
patrick@156
   503
  margin-bottom: .3em;
patrick@111
   504
}
patrick@111
   505
patrick@111
   506
image > copyright {
patrick@111
   507
  display: block;
patrick@111
   508
  font-size: 75%;
patrick@68
   509
  font-style: italic;
patrick@68
   510
}
patrick@111
   511
Patrick@174
   512
/* hotspot ~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@122
   513
patrick@122
   514
hotspot {
patrick@122
   515
  display: block;
Patrick@183
   516
  padding: .4em;
Patrick@183
   517
  margin: 0 1em .1em 0; 
patrick@122
   518
  background-color: #ffefd8;
patrick@122
   519
  border-radius: 1.5em;
patrick@122
   520
}
patrick@122
   521
Patrick@176
   522
hotspot image:before {
patrick@122
   523
  content: "";
patrick@122
   524
}
Patrick@176
   525
hotspot > image {
patrick@122
   526
  content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)");
patrick@122
   527
}
patrick@122
   528
Patrick@176
   529
hotspot p:before {
Patrick@176
   530
  content: "";
patrick@111
   531
}
Patrick@176
   532
hotspot > p {
patrick@111
   533
  font-family: sans-serif;
patrick@111
   534
  font-size: 85%;
Patrick@183
   535
  margin: 0 .5em 0 .5em;
patrick@111
   536
}
patrick@111
   537
Patrick@176
   538
hotspot:after {
Patrick@174
   539
  display: marker;
Patrick@174
   540
  padding-bottom: .7em;
Patrick@176
   541
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
Patrick@174
   542
}
Patrick@174
   543
patrick@111
   544
/* audio ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@111
   545
patrick@111
   546
audio {
patrick@111
   547
  content: text-field(attribute, id, color, black, font-size, 75%)
patrick@111
   548
           " type : " label(attribute, type, color, black) " "
patrick@111
   549
           set-attribute-button(attribute, type, icon, icon(pop-sw), color, black);
patrick@111
   550
}
patrick@111
   551
media audio {
patrick@111
   552
  content: "Audio : " text-field(attribute, id, color, black)
patrick@111
   553
           " type : " label(attribute, type, color, black) " "
patrick@111
   554
           set-attribute-button(attribute, type, icon, icon(pop-sw), color, black);
patrick@108
   555
}
patrick@68
   556
patrick@64
   557
patrick@124
   558
/* video ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@124
   559
patrick@124
   560
video {
patrick@124
   561
  content: text-field(attribute, id, color, black, font-size, 75%);
patrick@124
   562
}
patrick@124
   563
media video {
patrick@124
   564
  content: "Video : " text-field(attribute, id, color, black);
patrick@124
   565
}
patrick@124
   566
patrick@124
   567
patrick@60
   568
/* Inline level ============================================================ */
patrick@59
   569
patrick@63
   570
/* sup, sub, var ~~~~~~~~~~~~~~~~~~~ */
patrick@62
   571
patrick@156
   572
sup { font-family: sans-serif; vertical-align: super; font-size: 75%; white-space: nowrap; }
patrick@156
   573
sub { font-family: sans-serif; vertical-align: sub;   font-size: 75%; white-space: nowrap; }
patrick@63
   574
var { font-family: sans-serif; font-style: italic; }
patrick@63
   575
patrick@65
   576
/* date ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@65
   577
patrick@65
   578
date[value]:after {
patrick@65
   579
  color: #7f7f7f;
patrick@65
   580
  content: " (" date-picker(attribute, value, columns, 7, color, black, font-size, 75%) ")";
patrick@65
   581
}
patrick@65
   582
head > date[value]:after {
patrick@65
   583
  color: #7f7f7f;
patrick@65
   584
  content: " (" date-picker(attribute, value, columns, 7, color, black, font-size, 75%)
patrick@65
   585
           ") " insert-after-button();
patrick@65
   586
}
patrick@65
   587
patrick@70
   588
/* name ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@70
   589
patrick@70
   590
name { font-family: sans-serif; color: #004080; }
patrick@70
   591
patrick@63
   592
/* note ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@63
   593
Patrick@186
   594
note:before { font-size: 80%; color: #7f7f7f; content: "(Note : "; }
Patrick@186
   595
note { font-family: sans-serif; color: #aeaea0; font-size: 80%; }
Patrick@186
   596
note:after { font-size: 80%; color: #7f7f7f; content: ")"; }
patrick@62
   597
note p { display:inline; }
patrick@62
   598
patrick@90
   599
/* foreign ~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@90
   600
patrick@90
   601
foreign { font-family: sans-serif; font-style: italic; }
patrick@90
   602
patrick@63
   603
/* highlight ~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@63
   604
patrick@62
   605
highlight { font-weight: bold; }
patrick@63
   606
patrick@89
   607
/* mentioned ~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@89
   608
patrick@89
   609
mentioned { font-style: italic; }
patrick@89
   610
patrick@68
   611
/* term ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@68
   612
patrick@89
   613
term { font-family: sans-serif; }
patrick@68
   614
patrick@63
   615
/* link ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@63
   616
patrick@63
   617
link:before {
patrick@63
   618
  color: #7f7f7f;
patrick@63
   619
  font-family: sans-serif;
patrick@63
   620
  content: "["
patrick@63
   621
}
patrick@63
   622
patrick@63
   623
media link {
patrick@63
   624
  display: block;
patrick@63
   625
}
patrick@63
   626
patrick@63
   627
link:after {
patrick@63
   628
  color: #7f7f7f;
patrick@63
   629
  font-family: sans-serif;
patrick@63
   630
}
patrick@63
   631
link[uri]:after {
patrick@63
   632
  content: " ‣ " text-field(attribute, uri, color, black, font-size, 80%) "]";
patrick@63
   633
}
patrick@63
   634
link[idref]:after {
patrick@63
   635
  content: " ‣ " label(attribute, idref, color, black)
patrick@63
   636
           set-attribute-button(attribute, idref) "]";
patrick@63
   637
}
patrick@63
   638
patrick@106
   639
/* smil ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@106
   640
patrick@106
   641
smil {
patrick@106
   642
  background-color: #ffffc0;
patrick@106
   643
}
Patrick@206
   644
Patrick@206
   645
/* warning ~~~~~~~~~~~~~~~~~~~~~~~~~ */
Patrick@206
   646
Patrick@206
   647
warning {
Patrick@206
   648
  color: red;
Patrick@206
   649
  font-weight: bold;
Patrick@206
   650
}