Merge branch 'obrazy' into rwd
authorRadek Czajka <radekczajka@nowoczesnapolska.org.pl>
Thu, 19 Dec 2013 11:47:39 +0000 (12:47 +0100)
committerRadek Czajka <radekczajka@nowoczesnapolska.org.pl>
Thu, 19 Dec 2013 11:47:39 +0000 (12:47 +0100)
Conflicts:
apps/catalogue/locale/pl/LC_MESSAGES/django.mo
apps/catalogue/locale/pl/LC_MESSAGES/django.po
apps/wolnelektury_core/static/css/base.css
apps/wolnelektury_core/static/css/book_box.css
apps/wolnelektury_core/static/css/cite.css
apps/wolnelektury_core/static/css/header.css
apps/wolnelektury_core/static/css/master.book.css
apps/wolnelektury_core/static/css/picture_box.css
apps/wolnelektury_core/static/css/screen.css
wolnelektury/settings/static.py

14 files changed:
1  2 
apps/catalogue/locale/pl/LC_MESSAGES/django.mo
apps/catalogue/locale/pl/LC_MESSAGES/django.po
apps/catalogue/models/book.py
apps/catalogue/templates/catalogue/menu.html
apps/catalogue/templatetags/catalogue_tags.py
apps/wolnelektury_core/static/css/master.book.css
apps/wolnelektury_core/static/css/new.book.css
apps/wolnelektury_core/static/js/base.js
apps/wolnelektury_core/static/scss/book_text/box.scss
apps/wolnelektury_core/static/scss/main/base.scss
apps/wolnelektury_core/static/scss/main/book_box.scss
apps/wolnelektury_core/static/scss/main/fragment.scss
apps/wolnelektury_core/static/scss/main/menu.scss
wolnelektury/settings/static.py

@@@ -7,9 -7,9 +7,9 @@@ msgid "
  msgstr ""
  "Project-Id-Version: PACKAGE VERSION\n"
  "Report-Msgid-Bugs-To: \n"
- "POT-Creation-Date: 2013-12-03 14:43+0100\n"
- "PO-Revision-Date: 2013-12-03 14:44+0100\n"
 -"POT-Creation-Date: 2013-12-16 09:19+0100\n"
 -"PO-Revision-Date: 2013-12-16 15:51+0100\n"
 -"Last-Translator: Marcin Koziej <marcinkoziej@nowoczesnapolska.org.pl>\n"
++"POT-Creation-Date: 2013-12-19 12:45+0100\n"
++"PO-Revision-Date: 2013-12-19 12:46+0100\n"
 +"Last-Translator: Radek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>\n"
  "Language-Team: LANGUAGE <LL@li.org>\n"
  "MIME-Version: 1.0\n"
  "Content-Type: text/plain; charset=UTF-8\n"
@@@ -74,7 -74,7 +74,7 @@@ msgstr "Duży
  msgid "Queue is full. Please try again later."
  msgstr "Kolejka jest pełna. Proszę spróbować ponownie później."
  
- #: views.py:522
 -#: views.py:585
++#: views.py:597
  #, python-format
  msgid ""
  "An error occurred: %(exception)s\n"
@@@ -85,21 -85,21 +85,21 @@@ msgstr "
  "\n"
  "%(tb)s"
  
- #: views.py:523
 -#: views.py:586
++#: views.py:598
  msgid "Book imported successfully"
  msgstr "Książka zaimportowana"
  
- #: views.py:525
 -#: views.py:588
++#: views.py:600
  #, python-format
  msgid "Error importing file: %r"
  msgstr "Błąd podczas importowania pliku: %r"
  
- #: views.py:557
 -#: views.py:620
++#: views.py:632
  msgid "Download custom PDF"
  msgstr "Stwórz własny PDF"
  
- #: views.py:558 templates/catalogue/book_short.html:103
 -#: views.py:621 templates/catalogue/book_short.html:92
 -#: templates/catalogue/book_text.html:27 templates/catalogue/book_wide.html:63
++#: views.py:633 templates/catalogue/book_short.html:103
 +#: templates/catalogue/book_wide.html:63
  msgid "Download"
  msgstr "Pobierz"
  
@@@ -111,56 -111,56 +111,61 @@@ msgstr "tytuł
  msgid "sort key"
  msgstr "klucz sortowania"
  
--#: models/book.py:30 models/book.py:32 models/collection.py:12
- #: models/collection.py:15 models/tag.py:32
++#: models/book.py:30
++#, fuzzy
++msgid "sort key by author"
++msgstr "Znalezieni autorzy"
++
++#: models/book.py:31 models/book.py:33 models/collection.py:12
+ #: models/collection.py:15 models/tag.py:33
  msgid "slug"
  msgstr "slug"
  
--#: models/book.py:33
++#: models/book.py:34
  msgid "language code"
  msgstr "Kod języka"
  
- #: models/book.py:35 models/book.py:151 models/collection.py:13
- #: models/tag.py:36 models/tag.py:90
 -#: models/book.py:35 models/book.py:146 models/collection.py:13
++#: models/book.py:36 models/book.py:161 models/collection.py:13
+ #: models/tag.py:37 models/tag.py:94
  msgid "description"
  msgstr "opis"
  
- #: models/book.py:36 models/book.py:37 models/bookmedia.py:29 models/tag.py:43
- #: models/tag.py:44
 -#: models/book.py:36 models/book.py:37 models/bookmedia.py:29 models/tag.py:46
++#: models/book.py:37 models/book.py:38 models/bookmedia.py:29 models/tag.py:46
+ #: models/tag.py:47
  msgid "creation date"
  msgstr "data utworzenia"
  
--#: models/book.py:38
++#: models/book.py:39
  msgid "parent number"
  msgstr "numer rodzica"
  
--#: models/book.py:39 models/bookmedia.py:30
++#: models/book.py:40 models/bookmedia.py:30
  msgid "extra information"
  msgstr "dodatkowe informacje"
  
--#: models/book.py:44
++#: models/book.py:45
  msgid "cover"
  msgstr "okładka"
  
- #: models/book.py:66 models/tag.py:22
 -#: models/book.py:66 models/collection.py:18 models/tag.py:22
++#: models/book.py:67 models/collection.py:18 models/tag.py:22
  msgid "book"
  msgstr "książka"
  
--#: models/book.py:67
++#: models/book.py:68
  msgid "books"
  msgstr "książki"
  
- #: models/book.py:249
 -#: models/book.py:244
++#: models/book.py:259
  #, python-format
  msgid "Book \"%s\" does not exist."
  msgstr "Utwór \"%s\" nie istnieje."
  
- #: models/book.py:263
 -#: models/book.py:258
++#: models/book.py:273
  #, python-format
  msgid "Book %s already exists"
  msgstr "Książka %s już istnieje"
  
- #: models/book.py:608 models/bookmedia.py:23
 -#: models/book.py:599 models/bookmedia.py:23
++#: models/book.py:620 models/bookmedia.py:23
  #, python-format
  msgid "%s file"
  msgstr "plik %s"
@@@ -272,9 -280,9 +285,9 @@@ msgstr "
  "Możecie z niej korzystać bezpłatnie i bez ograniczeń.\n"
  "Audiobooki nagrywają znani aktorzy, wśród nich Danuta Stenka i Jan Peszek."
  
 -#: templates/catalogue/book_detail.html:20
 +#: templates/catalogue/book_detail.html:21
  #: templates/catalogue/tagged_object_list.html:74
- #: templates/catalogue/tagged_object_list.html:104
+ #: templates/catalogue/tagged_object_list.html:109
  msgid "See also"
  msgstr "Zobacz też"
  
@@@ -397,7 -402,7 +410,7 @@@ msgstr "Inne wersje
  msgid "Table of contents"
  msgstr "Spis treści"
  
- #: templates/catalogue/book_text.html:44 templatetags/catalogue_tags.py:423
 -#: templates/catalogue/book_text.html:23 templatetags/catalogue_tags.py:420
++#: templates/catalogue/book_text.html:44 templatetags/catalogue_tags.py:424
  msgid "Themes"
  msgstr "Motywy"
  
@@@ -504,28 -478,28 +517,28 @@@ msgstr "Pobierz katalog w formacie PDF.
  #: templates/catalogue/catalogue.html:19
  #: templates/catalogue/search_multiple_hits.html:17
  #: templates/catalogue/tagged_object_list.html:26
- #: templatetags/catalogue_tags.py:419
 -#: templatetags/catalogue_tags.py:416
++#: templatetags/catalogue_tags.py:420
  msgid "Authors"
  msgstr "Autorzy"
  
  #: templates/catalogue/catalogue.html:22
  #: templates/catalogue/search_multiple_hits.html:25
  #: templates/catalogue/tagged_object_list.html:34
- #: templatetags/catalogue_tags.py:421
 -#: templatetags/catalogue_tags.py:418
++#: templatetags/catalogue_tags.py:422
  msgid "Kinds"
  msgstr "Rodzaje"
  
  #: templates/catalogue/catalogue.html:25
  #: templates/catalogue/search_multiple_hits.html:33
  #: templates/catalogue/tagged_object_list.html:42
- #: templatetags/catalogue_tags.py:420
 -#: templatetags/catalogue_tags.py:417
++#: templatetags/catalogue_tags.py:421
  msgid "Genres"
  msgstr "Gatunki"
  
  #: templates/catalogue/catalogue.html:28
  #: templates/catalogue/search_multiple_hits.html:41
  #: templates/catalogue/tagged_object_list.html:50
- #: templatetags/catalogue_tags.py:422
 -#: templatetags/catalogue_tags.py:419
++#: templatetags/catalogue_tags.py:423
  msgid "Epochs"
  msgstr "Epoki"
  
@@@ -597,6 -567,6 +610,10 @@@ msgstr "Audiobooki
  msgid "DAISY"
  msgstr "DAISY"
  
++#: templates/catalogue/menu.html:40 templates/catalogue/tag_list_split.html:14
++msgid "Gallery"
++msgstr "Galeria"
++
  #: templates/catalogue/picture_detail.html:29
  msgid "Work is licensed under "
  msgstr "Utwór jest udostępniony na licencji"
@@@ -733,7 -699,7 +750,7 @@@ msgid "Other results
  msgstr "Inne wyniki"
  
  #: templates/catalogue/search_no_hits.html:19
- #: templates/catalogue/tagged_object_list.html:146
 -#: templates/catalogue/tagged_object_list.html:151
++#: templates/catalogue/tagged_object_list.html:153
  msgid "Sorry! Search cirteria did not match any resources."
  msgstr "Przepraszamy! Brak wyników spełniających kryteria podane w zapytaniu."
  
@@@ -751,10 -717,17 +768,14 @@@ msgstr "
  msgid "Sorry! Search query must have at least two characters."
  msgstr "Przepraszamy! Zapytanie musi zawierać co najmniej dwa znaki."
  
 -#: templates/catalogue/tag_list_split.html:14
 -msgid "Gallery"
 -msgstr "Galeria"
 -
+ #: templates/catalogue/tag_list_split.html:5
+ msgid "Literature"
+ msgstr "Literatura"
  #: templates/catalogue/tagged_object_list.html:78
- #: templates/catalogue/tagged_object_list.html:108
- msgid "in Lektury.Gazeta.pl"
- msgstr "w serwisie Lektury.Gazeta.pl"
++#: templates/catalogue/tagged_object_list.html:123
+ msgid "in Culture.pl"
+ msgstr "w Culture.pl"
  
  #: templates/catalogue/tagged_object_list.html:83
  #: templates/catalogue/tagged_object_list.html:113
Simple merge
        </li>
        <li class="menu">
                <a href="{% url 'daisy_list' %}" class="menu">
 -                      <span class='mono'>{% trans "DAISY" %}</span></a>
 +                      {% trans "DAISY" %}</a>
        </li>
+       <li class="menu">
+               <a href="{% url 'picture_list_thumb' %}" class="menu">
+                       <span class='mono'>{% trans "Gallery" %}</span></a>
+       </li>
  </ul>
@@@ -93,7 -89,7 +93,7 @@@ img 
  }
  
  
- #toc, #themes, #nota_red, #info, #other-versions {
 -#toc, #themes, #nota_red, #info, #objects {
++#toc, #themes, #nota_red, #info, #other-versions, #objects {
      position: fixed;
      left: 0em;
      top: 1.5em;
index 164051e,0000000..bff58bc
mode 100644,000000..100644
--- /dev/null
@@@ -1,268 -1,0 +1,268 @@@
- #toc ol, #themes ol {
 +body {
 +    font-size: 16px;
 +    font-family: Georgia, "Times New Roman", serif;
 +    line-height: 1.5em;
 +    margin: 0;
 +}
 +
 +a {
 +    color: blue;
 +    text-decoration: none;
 +}
 +
 +/* ================================== */
 +/* = Header with logo and menu      = */
 +/* ================================== */
++#toc ol, #themes ol, #objects ol {
 +    list-style: none;
 +    padding: 0;
 +    margin: 0;
 +}
 +
 +#toc ol li {
 +    font-weight: bold;
 +}
 +
 +#toc ol ol {
 +    padding: 0 0 1.5em 1.5em;
 +    margin: 0;
 +}
 +
 +#toc ol ol li {
 +    font-weight: normal;
 +}
 +
 +#toc h2 {
 +    display: none;
 +}
 +
 +#toc .anchor {
 +    float: none;
 +    margin: 0;
 +    color: blue;
 +    font-size: 16px;
 +    position: inherit;
 +}
 +
 +#info p {
 +    margin: 1em 0 0;
 +}
 +
 +/* =================================================== */
 +/* = Common elements: headings, paragraphs and lines = */
 +/* =================================================== */
 +h1 {
 +    font-size: 3em;
 +    margin: 1.5em 0;
 +    text-align: center;
 +    line-height: 1.5em;
 +    font-weight: bold;
 +}
 +
 +h2 {
 +    font-size: 2em;
 +    margin: 1.5em 0 0;
 +    font-weight: bold;
 +    line-height: 1.5em;
 +}
 +
 +h3 {
 +    font-size: 1.5em;
 +    margin: 1.5em 0 0;
 +    font-weight: normal;
 +    line-height: 1.5em;
 +}
 +
 +h4 {
 +    font-size: 1em;
 +    margin: 1.5em 0 0;
 +    line-height: 1.5em;
 +}
 +
 +p {
 +    margin: 0;
 +}
 +
 +/* ======================== */
 +/* = Footnotes and themes = */
 +/* ======================== */
 +
 +.annotation {
 +    font-style: normal;
 +    font-weight: normal;
 +    font-size: .75em;
 +    padding-left: 2px;
 +    position: relative;
 +    top: -4px;
 +}
 +
 +#footnotes {
 +    margin-top: 3em;
 +}
 +
 +#footnotes .annotation {
 +    display: block;
 +    float: left;
 +    width: 2.5em;
 +    clear: both;
 +}
 +
 +#footnotes div {
 +    margin: 1.5em 0 0 0;
 +}
 +
 +#footnotes p, #footnotes ul {
 +    margin-left: 2.5em;
 +    font-size: 0.875em;
 +}
 +
 +#footnotes .permalink {
 +    font-size: .75em;
 +}
 +
 +blockquote {
 +    font-size: 0.875em;
 +}
 +
 +/* ============= */
 +/* = Numbering = */
 +/* ============= */
 +.verse, .paragraph {
 +    position:relative;
 +}
 +/*.anchor {
 +    position: absolute;
 +    margin: -0.25em -0.5em;
 +    color: #777;
 +    font-size: 12px;
 +    text-align: center;
 +    padding: 0.25em 0.5em;
 +    line-height: 1.5em;
 +}*/
 +
 +
 +/* =================== */
 +/* = Custom elements = */
 +/* =================== */
 +span.author {
 +    font-size: 0.5em;
 +    display: block;
 +    line-height: 1.5em;
 +    margin-bottom: 0.25em;
 +}
 +
 +span.collection {
 +    font-size: 0.375em;
 +    display: block;
 +    line-height: 1.5em;
 +    margin-bottom: -0.25em;
 +}
 +
 +span.subtitle {
 +    font-size: 0.5em;
 +    display: block;
 +    line-height: 1.5em;
 +    margin-top: -0.25em;
 +}
 +
 +span.translator {
 +    font-size: 0.375em;
 +    display: block;
 +    line-height: 1.5em;
 +    margin-top: 0.25em;
 +}
 +
 +div.didaskalia {
 +    font-style: italic;
 +    margin: 0.5em 0 0 1.5em;
 +}
 +
 +div.kwestia {
 +    margin: 0.5em 0 0;
 +}
 +
 +div.stanza {
 +    margin: 1.5em 0 0;
 +}
 +
 +div.kwestia div.stanza {
 +    margin: 0;
 +}
 +
 +p.paragraph {
 +    text-align: justify;
 +    margin: 1.5em 0 0;
 +}
 +
 +p.motto {
 +    text-align: justify;
 +    font-style: italic;
 +    margin: 1.5em 0 0;
 +}
 +
 +p.motto_podpis {
 +    font-size: 0.875em;
 +    text-align: right;
 +}
 +
 +div.fragment {
 +    border-bottom: 0.1em solid #999;
 +    padding-bottom: 1.5em;
 +}
 +
 +div.note p, div.dedication p, div.note p.paragraph, div.dedication p.paragraph {
 +    text-align: right;
 +    font-style: italic;
 +}
 +
 +hr.spacer {
 +    height: 3em;
 +    visibility: hidden;
 +}
 +
 +hr.spacer-line {
 +    margin: 1.5em 0;
 +    border: none;
 +    border-bottom: 0.1em solid #000;
 +}
 +
 +p.spacer-asterisk {
 +    padding: 0;
 +    margin: 1.5em 0;
 +    text-align: center;
 +}
 +
 +div.person-list ol {
 +    list-style: none;
 +    padding: 0 0 0 1.5em;
 +}
 +
 +p.place-and-time {
 +    font-style: italic;
 +}
 +
 +em.math, em.foreign-word, em.book-title, em.didaskalia {
 +    font-style: italic;
 +}
 +
 +em.author-emphasis {
 +    letter-spacing: 0.1em;
 +}
 +
 +em.person {
 +    font-style: normal;
 +    font-variant: small-caps;
 +}
 +
 +.verse:after {
 +    content: "\feff";
 +}
 +
 +
 +/* =================================== */
 +/* = Hide some elements for printing = */
 +/* =================================== */
 +
 +@media print {
 +    #menu {display: none;}
 +}
index 4f09769,0000000..7a04234
mode 100644,000000..100644
--- /dev/null
@@@ -1,50 -1,0 +1,50 @@@
- .box, #toc, #themes, #nota_red {
 +/* TODO:
 +There should be a JS-less way of seeing at least some of
 +the hidden boxes (TOC and Themes).
 +*/
 +
++.box, #toc, #themes, #nota_red, #objects {
 +    display: none;
 +
 +    position: fixed;
 +    @include size(left, $W_MENU);
 +    top: 0;
 +    right: 0;
 +
 +    max-height: 100%;
 +    @include size(max-width, 380px);
 +    @include size(padding, 10px 10px 30px 10px);
 +    margin: 0;
 +    overflow-x: hidden;
 +    overflow-y: auto;
 +    z-index: 100;
 +
 +    color: black;
 +    background: #fff;
 +    box-shadow: 2px 2px 2px #444;
 +
 +    @include size(border-width, 0 1px 1px 0);
 +    border-style: solid;
 +    border-color: #444;
 +
 +    @include size(font-size, 14px);
 +    line-height: 1.2em;
 +
 +    h2 {
 +        margin-top: 0;
 +    }
 +}
 +
 +
 +
 +#box-underlay {
 +    display: none;
 +    position: fixed;
 +    @include size(left, $W_MENU);
 +    top: 0;
 +    bottom: 0;
 +    right: 0;
 +    background:#000;
 +    opacity: .5;
 +    z-index: 99;
 +}
index 02f02a3,0000000..d9d5237
mode 100755,000000..100755
--- /dev/null
@@@ -1,101 -1,0 +1,105 @@@
 +/* Basic layout */
 +html, body {
 +    margin: 0;
 +    padding: 0;
 +}
 +
 +
 +.clearboth {
 +    clear: both;
 +}
 +
 +
 +
 +/* Basic colors and fonts */
 +body {
 +    font-family: Georgia;
 +    background: #f7f7f7;
 +    color: black;
 +
 +    @include size(font-size, 13px);
 +}
 +
 +a {
 +    color: #0d7e85;
 +    text-decoration: none;
 +
 +    img {
 +        border: 0;
 +    }
 +}
 +
 +h1 {
 +    @include size(font-size, 35px);
 +    font-weight: normal;
 +    @include size(margin-top, 14px);
 +
 +    a {
 +        color: inherit;
 +    }
 +}
 +
 +h2 {
 +    @include size(font-size, 20px);
 +    font-weight: normal;
 +}
 +
 +h3 {
 +    @include size(font-size, 15px);
 +    font-weight: normal;
 +}
 +
 +
 +.normal-text {
 +    line-height: 1.3em;
 +}
 +
 +.white-box {
 +    @include size(padding, 10px);
 +    @include white-box;
 +}
 +
 +
 +ul.plain {
 +    list-style:none;
 +    margin: 0;
 +    padding: 0;
 +}
 +
 +
 +.theme-list-link {
 +    @include mono;
 +    @include size(font-size, 11px);
 +    
 +    &:after {
 +        @include size(padding-left, 11px);
 +        content: url("/static/img/arrow-teal.png");
 +        vertical-align: middle;
 +    }
 +}
 +
 +
 +.left-column, .right-column {
 +    @include size(max-width, 600px);
 +}
 +@media screen and (min-width: 62.5em) {
 +    .left-column {
 +        @include size(width, 470px);
 +        float: left;
 +    }
 +    .right-column {
 +        @include size(width, 470px);
 +        float:right;
 +    }
 +}
 +
 +.pagination {
 +    display: block;
 +    @include size(font-size, 12px);
 +    @include size(padding, 6px);
 +    text-align:center;
 +}
++
++.simple-hidden-initially {
++    display: none;
++}
index e8504e5,0000000..4655a3c
mode 100755,000000..100755
--- /dev/null
@@@ -1,496 -1,0 +1,505 @@@
 +@mixin inner-box {
 +    display: block;
 +    color: black;
 +    @include size(margin, 1px);
 +    @include size(padding, 8px 10px);
 +    @include white-box;
 +}
 +
 +.book-mini-box img.cover {
 +    @include size(height, 193px);
 +    @include size(width, 139px);
 +}
 +
 +
 +.cover-area {
 +    float: left;
 +    @include size(margin-right, 15px);
 +    @include size(margin-bottom, 5px);
 +
 +    @include min-screen($S_BOOK_SHORT_FULL) {
 +        position: absolute;
 +        top: 0;
 +        left: 0;
 +        margin-right: 0;
 +    }
 +
 +    img.cover {
 +        @include size(height, 193px / 2);
 +        @include size(width, 139px / 2);
 +
 +        @include min-screen($S_BOOK_SHORT_MEDIUM) {
 +            @include size(height, 193px);
 +            @include size(width, 139px);
 +        }
 +    }
 +}
 +
 +.book-mini-box {
 +    @include size(width, 161.5px);
 +    display: inline-block;
 +    vertical-align: top;
 +
 +    .book-mini-box-inner {
 +        @include inner-box;
 +        @include size(height, 271px);
 +        @include size(margin, 1px);
 +        overflow: hidden;
 +        a {
 +            display: block;
 +        }
 +    }
 +    img.cover {
 +        @include size(margin-bottom, 18px);
 +    }
 +    .language {
 +        color: #aaa;
 +        float: right;
 +        @include mono;
 +        @include size(font-size, 10px);
 +        text-transform: uppercase;
 +        position: relative;
 +        @include size(top, -20px);
 +    }
 +    .desc {
 +        margin-left: 0;
 +    }
 +    .author {
 +        @include size(font-size, 11px);
 +        @include mono;
 +        color: #6d7877;
 +        display: block;
 +        overflow: hidden;
 +        text-overflow: ellipsis;
 +        white-space: nowrap;
 +    }
 +    .title {
 +        @include size(font-size, 14px);
 +        color: #242424;
 +    }
 +}
 +
 +
 +
 +.work-list {
 +    margin: 0;
 +    padding: 0;
 +    list-style: none;
 +
 +    .Book-item {
 +        @include min-screen($S_BOOK_SHORT_FULL) {
 +            display: inline-block;
 +        }
 +        vertical-align: top;
 +    }
 +}
 +
 +
 +.book-box {
 +    margin: 0;
 +    vertical-align: top;
 +
 +    /* */
 +    a {
 +        color: #0D7E85;
 +    }
 +
 +    @include min-screen($S_BOOK_SHORT_FULL) {
 +        @include size(width, $W_BOOK_SHORT_FULL);
 +    }
 +
 +    .book-box-inner {
 +        position: relative;
 +        @include inner-box;
 +        @include size(min-height, 197.5px);
 +    }
 +}
 +
 +
 +.book-wide-box {
 +    margin: 0;
 +    vertical-align: top;
 +
 +    @media screen and (min-width: 62.5em) {
 +        @include size(width, 975px);
 +    }
 +
 +    .book-box-inner {
 +        position: relative;
 +        @include size(min-height, 244px);
 +        @include inner-box;
 +        @include size(margin-left, 0);
 +        @include size(margin-right, 0);
 +
 +        .book-left-column { /* FIXME */
 +            @media screen and (min-width: 62.5em) {
 +                float: left;
 +                @include size(width, 536px);
 +            }
 +        }
 +
 +        .license-icon {
 +            display: block;
 +            @include size(margin-top, 5px);
 +        }
 +
 +        .book-box-head,
 +        .tags,
 +        .book-box-tools {
 +            @media screen and (min-width: 62.5em) {
 +                @include size(width, 382px);
 +            }
 +        }
 +
 +        #theme-list-wrapper {
 +            @include min-screen($S_BOOK_SHORT_MEDIUM) {
 +                @include size(margin-left, 154px);
 +                @include size(width, 300px);
 +            }
 +            margin-bottom: 0;
 +
 +            p {
 +                @include size(margin-top, 10px);
 +                @include size(margin-bottom, 10px);
 +            }
 +        }
 +
 +        .right-column {
 +            @include size(margin-top, 16px);
 +            // Eat the padding
 +            @include size(margin-left, -10px);
 +            @include size(margin-right, -10px);
 +            max-width: none;
 +
 +            @media screen and (min-width: 62.5em) {
 +                @include size(width, 415px);
 +                // Eat the padding
 +                @include size(margin-top, -8px);
 +            }
 +
 +            .other-tools,
 +            .other-download {
 +                @include size(font-size, 11px);
 +                clear: left;
 +                @include size(margin-top, 25px);
 +                line-height: 1.75em;
 +                @include size(margin-left, 15px);
 +
 +                h2 {
 +                    margin: 0;
 +                    @include size(font-size, 11px);
 +                    @include mono;
 +                }
 +
 +                @include min-screen($S_BOOK_SHORT_FULL) {
 +                    float: left;
 +                    clear: none;
 +                    @include size(width, 145px);
 +                    @include size(margin-top, 50px);
 +                    @include size(margin-right, 0);
 +                    @include size(margin-bottom, 0);
 +                    @include size(margin-left, 5px);
 +                }
 +
 +                @include min-screen(1000px) {
 +                    @include size(margin-top, 50px);
 +                    line-height: 1.2em;
 +                }
 +            }
 +            .other-download {
 +                @include min-screen($S_BOOK_SHORT_FULL) {
 +                    @include size(margin-left, 15px);
 +                    @include size(width, 220px);
 +                }
 +            }
 +        }
 +    }
 +}
 +
++/* FIXME: RWD */
++.picture.book-wide-box .right-column {
++    float: none;
++    @include size(width, 415px);
++    top: 0;
++    @include size(margin-left, 550px);
++    margin-top: 0em;
++}
++
 +
 +.book-box-body {
 +    @include size(margin-bottom, 10px);
 +    @include min-screen($S_BOOK_SHORT_FULL) {
 +        margin-bottom: 0;
 +        @include size(height, 170px);
 +    }
 +    position: relative;
 +
 +    .book-box-head,
 +    .tags,
 +    .book-box-tools {
 +        @include min-screen($S_BOOK_SHORT_FULL) {
 +            margin-left: 154px;
 +        }
 +    }
 +
 +    .book-box-head {
 +        @include size(padding-top, 14px);
 +        @include size(margin-bottom, 10px);
 +
 +        @include min-screen($S_BOOK_SHORT_FULL) {
 +            @include size(min-height, 70px);
 +        }
 +
 +        a {
 +            color: black;
 +        }
 +        .author {
 +            @include size(font-size, 11px);
 +            @include mono;
 +            @include size(line-height, 13.2px);
 +            @include size(max-height, 26.4px);
 +            overflow: hidden;
 +
 +            @include min-screen($S_BOOK_SHORT_FULL) {
 +                @include size(max-width, 264px);
 +            }
 +        }
 +        .title {
 +            @include size(font-size, 24px);
 +            line-height: 1.2em;
 +            @include size(margin-top, 7.2px);
 +            @include size(margin-bottom, 12px);
 +
 +            @include min-screen($S_BOOK_SHORT_FULL) {
 +                margin-bottom: 0;
 +                @include size(height, 57.6px);
 +                overflow: hidden;
 +            }
 +        }
 +    }
 +
 +    .tags {
 +        @include size(font-size, 11px);
 +        line-height: 1.2em;
 +
 +        @include min-screen($S_BOOK_SHORT_FULL) {
 +            clear: right;
 +            @include size(max-height, 57.6px);
 +            overflow: hidden;
 +        }
 +
 +        .category {
 +            display: block;
 +            @include size(margin-top, 6px);
 +            @include size(margin-bottom, 6px);
 +
 +            @include min-screen($S_BOOK_SHORT_FULL) {
 +                display: inline;
 +            }
 +
 +            .mono {
 +                @include mono;
 +            }
 +
 +            .book-box-tag {
 +                @include size(margin-left, 4.4px);
 +                @include size(margin-right, 5.5px);
 +            }
 +        }
 +    }
 +
 +}
 +
 +
 +
 +.book-box-tools {
 +    @include size(font-size, 11px);
 +    margin: 0;
 +    padding: 0;
 +    list-style: none;
 +
 +    clear: left;
 +
 +    @include min-screen($S_BOOK_SHORT_MEDIUM) {
 +        clear: none;
 +        @include size(margin-left, 139px + 15px);
 +    }
 +
 +    li {
 +        @include mono;
 +        margin-top: 1em;
 +
 +        @include min-screen($S_BOOK_SHORT_FULL) {
 +            display: inline-block;
 +            margin-top: 0;
 +        }
 +    }
 +
 +    .book-box-read {
 +        @include min-screen($S_BOOK_SHORT_FULL) {
 +            @include size(width, 126.5px);
 +        }
 +
 +        a {
 +            @include mono;
 +        }
 +
 +        a:before {
 +            content: url("/static/img/read.png");
 +            @include size(font-size, 25px);
 +            @include size(margin-right, 3.71px);
 +            vertical-align: middle;
 +            font-weight: normal;
 +        }
 +    }
 +
 +    .book-box-download {
 +        position: relative;
 +
 +        @include min-screen($S_BOOK_SHORT_FULL) {
 +            @include size(width, 93.5px);
 +        }
 +
 +        a {
 +            position: relative;
 +            z-index: 101;
 +
 +            &.downarrow {
 +                color: black;
 +
 +                @include min-screen($S_BOOK_SHORT_FULL) {
 +                    color: #0D7E85;
 +
 +                    &:before {
 +                        content: url("/static/img/download.png");
 +                        @include size(font-size, 25px);
 +                        @include size(margin-right, 3.71px);
 +                        vertical-align: middle;
 +                        font-weight: normal;
 +                    }
 +                }
 +            }
 +        }
 +
 +        .book-box-formats {
 +            @include size(padding-left, 19px);
 +
 +            @include min-screen($S_BOOK_SHORT_FULL) {
 +                display: none;
 +                position: absolute;
 +
 +                @include size(width, 180px);
 +                @include size(padding-top, 38px);
 +                @include size(padding-bottom, 9px);
 +                @include size(padding-left, 19px);
 +                @include size(padding-right, 19px);
 +
 +                @include white-box;
 +
 +                z-index: 100;
 +
 +                @include size(top, -16px);
 +                @include size(left, -19px);
 +            }
 +
 +            span {
 +                display: block;
 +                @include size(margin-top, 16px);
 +
 +                a {
 +                    &:before {
 +                        content: url("/static/img/download.png");
 +                        @include size(font-size, 25px);
 +                        @include size(margin-right, 3.71px);
 +                        vertical-align: middle;
 +                        font-weight: normal;
 +                    }
 +                }
 +
 +                @include min-screen($S_BOOK_SHORT_FULL) {
 +                    @include size(margin-top, 0);
 +
 +                    &:first-child {
 +                        @include size(margin-top, 16px);
 +                    }
 +                    a:before {
 +                        display:none;
 +                    }
 +                }
 +            }
 +        }
 +
 +        &:hover .book-box-formats,
 +        &.hover .book-box-formats {
 +            display: block;
 +        }
 +    }
 +
 +    .book-box-audiobook {
 +        @include min-screen($S_BOOK_SHORT_FULL) {
 +            @include size(width, 77px);
 +        }
 +
 +        a:before {
 +            content: url("/static/img/listen.png");
 +            @include size(font-size, 25px);
 +            @include size(margin-right, 3.71px);
 +            vertical-align: middle;
 +            font-weight: normal;
 +        }
 +
 +    }
 +}
 +
 +
 +
 +
 +.star {
 +    @include size(font-size, 22.5px);
 +    @include size(margin-right, 11.25px);
 +    position: absolute;
 +    right: 0;
 +
 +    button::-moz-focus-inner {
 +        padding: 0;
 +        border: 0
 +    }
 +    .if-unlike button {
 +        font-size: 1em;
 +        font-family: inherit;
 +        border: 0;
 +        background: none;
 +        margin: 0;
 +        padding: 0;
 +        color: #757575;
 +    }
 +    .if-like a {
 +        display:block;
 +        text-align:right;
 +        padding: 0;
 +    }
 +}
 +.like .if-unlike {
 +    display: none;
 +}
 +.unlike .if-like {
 +    display: none;
 +}
 +
 +
 +#book-detail .see-also {
 +    h1 {
 +        @include size(height, 32px);
 +        margin: 0;
 +        @include size(padding-top, 19px);
 +        @include size(padding-left, 10px);
 +
 +        @include size(font-size, 11px);
 +        @include mono;
 +        font-weight: normal;
 +
 +        @media screen and (min-width: 33em) {
 +            @include size(padding-left, 19px);
 +        }
 +    }
 +}
index 1eaf61c,0000000..4c765f6
mode 100755,000000..100755
--- /dev/null
@@@ -1,14 -1,0 +1,35 @@@
- .Fragment-item {
++.Fragment-item, .PictureArea-item {
 +    @include size(margin-bottom, 20px);
 +    @include white-box;
 +
 +    .fragment {
 +        color: black;
 +        display: block;
 +    }
 +    .toggle {
 +        @include size(font-size, 11px);
 +        display: block;
 +        @include size(padding, 5px 0);
 +    }
 +}
++
++.area {
++    display: block;
++    color: black;
++    background: white;
++    @include size(padding, 30px 20px 20px 20px);
++    position: relative;
++    clear: both;
++
++    .area-thumbnail {
++        display:block;
++        @include size(width, 100px);
++        float: left;
++    }
++
++    .area-description {
++        float: right;
++        @include size(padding, 10px);
++        @include size(width, 256px);
++    }
++}
index 501b320,0000000..846e4c8
mode 100755,000000..100755
--- /dev/null
@@@ -1,177 -1,0 +1,177 @@@
-                 @include size(padding, 18px 13px 15px);
 +#nav-line {
 +    background-color: #e2e2e2;
 +    position: relative;
 +
 +    @media screen and (min-width: 62.5em) {
 +        @include size(width, 975px);
 +        margin: auto;
 +    }
 +
 +    #show-menu {
 +        display: block;
 +        float: left;
 +        @include size(line-height, 13px);
 +        @include size(padding, 18px 13px);
 +        color: #0c7076;
 +        @include size(font-size, 11px);
 +        @include mono;
 +
 +        .long {
 +            display: none;
 +
 +            &:after {
 +                @include size(padding-left, 10px);
 +                content: url("/static/img/arrow-gray.png");
 +                vertical-align: top;
 +            }
 +        }
 +
 +        @media screen and (min-width: 20em) {
 +            .long { display: inline; }
 +            .short { display: none; }
 +        }
 +
 +        @media screen and (min-width: 53em) {
 +            display: none;
 +        }
 +    }
 +
 +    ul#menu {
 +        list-style: none;
 +        padding: 0;
 +        margin: 0;
 +
 +        display: none;
 +        position: absolute;
 +        @include size(top, 49px);
 +        left: 0;
 +        @include size(right, 10px);
 +        z-index: 400;
 +
 +        @media screen and (min-width: 24em) {
 +            right: auto;
 +        }
 +
 +        @media screen and (min-width: 53em) {
 +            display: block !important;
 +            position: static;
 +            @include size(margin-left, 6px);
 +        }
 +
 +        li.menu {
 +            background-color: #e2e2e2;
 +
 +            @media screen and (min-width: 53em) {
 +                float: left;
 +            }
 +
 +            a.menu {
 +                display: block;
 +                @include size(line-height, 13px);
++                @include size(padding, 18px 12px 15px);
 +                @include size(border-bottom, 3px solid #e2e2e2);
 +                color: #0c7076;
 +                @include size(font-size, 11px);
 +                @include mono;
 +            }
 +
 +            a.hidden-box-trigger:hover {
 +                border-bottom-color: white;
 +            }
 +        }
 +    }
 +
 +    #lang-menu {
 +        display: block;
 +        float: right;
 +
 +        background: #f7f7f7;
 +        @include mono;
 +
 +        @media screen and (min-width: 15em) {
 +            position: relative;
 +        }
 +
 +        #lang-button {
 +            @include size(padding-left, 25px);
 +            @include size(padding-right, 20px);
 +
 +            display:block;
 +            @include size(line-height, 17px);
 +            @include size(padding-top, 16px);
 +            @include size(padding-bottom, 16px);
 +
 +            @include size(font-size, 10px);
 +            color: #717171;
 +
 +            .label {
 +                display: none;
 +
 +                @media screen and (min-width: 62.5em) {
 +                    display: inline;
 +                }
 +
 +                &:after {
 +                    @include size(padding-left, 10px);
 +                    content: url("/static/img/arrow-gray.png");
 +                    vertical-align: top;
 +                }
 +            }
 +
 +            .lang-flag {
 +                @include size(font-size, 13px);
 +                @include size(line-height, 15px);
 +            }
 +        }
 +
 +        #lang-menu-items {
 +            z-index: 9999;
 +
 +            button {
 +                @include mono;
 +                display: none;
 +                background: #f7f7f7;
 +                color: #6f6f6f;
 +                cursor: pointer;
 +                width: 100%;
 +                margin: 0;
 +                @include size(padding, 10px 0);
 +
 +                @media screen and (min-width: 62.5em) {
 +                    @include size(padding, 5px 0);
 +                }
 +
 +                border-width: 0;
 +                @include size(border-bottom, 1px solid #ddd);
 +
 +                @include size(font-size, 13px);
 +
 +                &.active {
 +                    color: #000;
 +                }
 +            }
 +        }
 +
 +        &:hover, &.hover {
 +            #lang-menu-items {
 +                position: absolute;
 +                padding: 0;
 +                left: 0;
 +                right: 0;
 +
 +                @media screen and (min-width: 15em) {
 +                    left: auto;
 +                    @include size(width, 180px);
 +                    @include size(top, 49px);
 +                }
 +                @media screen and (min-width: 62.5em) {
 +                    width: 100%;
 +                }
 +
 +                button {
 +                    display: block;
 +                }
 +            }
 +        }
 +    }
 +}
@@@ -40,13 -51,13 +40,20 @@@ PIPELINE_CSS = 
          ],
          'output_filename': 'css/compressed/book.css',
      },
 +    'book_text': {
 +        'source_filenames': [
 +            'scss/book_text.scss',
 +            'css/new.book.css',
 +        ],
 +        'output_filename': 'css/compressed/book_text.css',
 +    },
+     'picture': {
+         'source_filenames': [
+             'css/master.book.css',
+             'css/master.picture.css',
+         ],
+         'output_filename': 'css/compressed/picture.css',
+     },
      'player': {
          'source_filenames': [
              'jplayer/jplayer.blue.monday.css', 
@@@ -99,9 -108,11 +106,12 @@@ PIPELINE_JS = 
              'js/jquery.eventdelegation.js',
              'js/jquery.scrollto.js',
              'js/jquery.highlightfade.js',
 +            'js/book_text/other.js',
              'js/book.js',
+             'js/picture.js',
+             'js/raphael-min.js',
              'player/openplayer.js',
+             'js/progressSpin.min.js',
          ],
          'output_filename': 'js/book.min.js',
      },